@extends('backend.layouts.admin.app')

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('admin.purchase-orders.index') }}">{{__('app.purchase_orders.title')}}</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
    @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
      <div class="col-md-12">

        <div class="border-top">
            <div class="" > 
              <form action="{{ $save }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                  @csrf
                  <input type="hidden" name="purchase_order" value="{{ request()->route('purchase_order') }}">
                  <input type="hidden" name="source" value="{{ request()->get('from') }}">
                  <div class="box-body px-0 form-box-scroll">
                        <div  class="mx-auto custom-max-width-354">
                          <div class="row">

                            <div class="col-md-12">
                              <div class="form-group">
                                  <label for="title" class="control-label">Type of Document</label>
                                  <div class="col-field-wrapper">
                                      <select id="type_of_document" class="form-control " name="type_of_document">
                                        <option value="">Select</option>
                                        @foreach ($documentTypes as $value)    
                                          <option value="{{ $value->id }}">{{ ucwords($value->name) }}</option>
                                        @endforeach
                                    </select>
                                      @if ($errors->has('title'))
                                      <span class="help-block">{{ $errors->first('title') }}</span>
                                      @endif
                                  </div>
                              </div>
                            </div>
                            
                            <div class="col-md-12" style="display:none;" id="front_back">
                              <div class="row gx-2 ">
                                <!-- Front Upload -->
                                <div class="col-md-6 form-group position-relative">
                                  <div class="card border-light rounded-4 bg-light-gray custom-height-190 d-flex align-items-center justify-content-center flex-column text-center overflow-hidden position-relative front-preview-card">
                                    
                                    <!-- Preview Image -->
                                    {{-- <img src="" alt="Preview" class="preview-image w-100 h-100 object-fit-cover position-absolute top-0 start-0 rounded-4 d-none"> --}}
                                
                                    <!-- Upload UI -->
                                    <div class="upload-content">
                                      <em class="iconsax icon-292D32 fs-32 mb-3" icon-name="download-2"></em>
                                      <p class="fs-13 fw-semibold text-black mb-0">Front</p>
                                      <p class="mb-0 fs-11 text-gray">Upload front side</p>
                                      <p class="mb-0 fs-11 text-black allowed-extensions text-primary mt-3"></p>
                                    </div>
                                
                                    <!-- File Input -->
                                    <input
                                      type="file"
                                      name="document_front"
                                      class="file-input-overlay"
                                      
                                    />
                                  </div>
                                </div>
                                
                            
                                <!-- Back Upload -->
                                <div class="col-md-6 form-group">
                                  <div class="card border-light rounded-4 bg-light-gray custom-height-190 d-flex align-items-center justify-content-center flex-column text-center">
                                    <!-- Preview Image -->
                                    {{-- <img src="" alt="Preview" class="preview-image w-100 h-100 object-fit-cover position-absolute top-0 start-0 rounded-4 d-none"> --}}
                                
                                    <!-- Upload UI -->
                                    <div class="upload-content">
                                      <em class="iconsax icon-292D32 fs-32 mb-3" icon-name="download-2"></em>
                                      <p class="fs-13 fw-semibold text-black mb-0">Back</p>
                                      <p class="mb-0 fs-11 text-gray">Upload back side</p>
                                      <p class="mb-0 fs-11 text-black allowed-extensions text-primary mt-3"></p>
                                    </div>
                                    
                                    <!-- Input -->
                                    <input type="file" name="document_back" class="form-control file-input-overlay">
                                  </div>
                                </div>
                              </div>
                              
                            </div>

                            <div class="col-md-12" style="display:none;" id="single_file">
                              <div class="row gx-2">
                                <div class="col-md-12 form-group">
                                  <div class="card border-light rounded-4 bg-light-gray custom-height-190 d-flex align-items-center justify-content-center flex-column text-center">
                                    <!-- Preview Image -->
                                    {{-- <img src="" alt="Preview" class="preview-image w-100 h-100 object-fit-cover position-absolute top-0 start-0 rounded-4 d-none"> --}}
                                
                                    <!-- Upload UI -->
                                    <div class="upload-content">
                                      <em class="iconsax icon-292D32 fs-32 mb-3" icon-name="download-2"></em>
                                      <p class="fs-13 fw-semibold text-black mb-0">Document</p>
                                      <p class="mb-0 fs-11 text-gray">Upload Document</p>
                                      <p class="mb-0 fs-11 text-black allowed-extensions text-primary mt-3"></p>
                                    </div>
                                    
                                    <!-- Input -->
                                    <input type="file" name="document_front" class="form-control file-input-overlay">
                                  </div>
                                </div>
                              </div>
                            </div>
                            
                            <div class="col-md-12" style="display:none;">
                              <div class="form-group">
                                  <label for="description" class="control-label">Expiry</label>
                                  <div class="col-field-wrapper">
                                      <div class="position-relative">
                                        <input type="text" class="form-control date-picker" id="calendar" name="expiry" placeholder="Select">
                                        <span class="position-absolute date-picker-icon">
                                          <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                                        </span>
                                      </div>
                                  </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- /.box-body -->
                      <div class="box-footer px-0">
                          <div class="col-sm-12 text-end">
                              <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">Cancel</a>
                              <button type="button" class="btn btn-primary save-btn">{{ $saveBtn }}</button>
                              
                          </div>
                          
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            
        </div>
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->

    <script type="text/javascript">
      $(document).ready(function () {
          // Check sessionStorage for source context and update back button if needed
          var source = sessionStorage.getItem('po_document_source');
          if (source === 'add-purchase-order') {
              var poId = sessionStorage.getItem('po_id');
              var backUrl = "{{ route('admin.purchase-orders.create') }}?showStep=2&id=" + poId;
              $('a[href="{{ $backBtnLink }}"]').attr('href', backUrl);
          }
          
          var form = $('.form-validate');
          
          if (form.length) {
              form.validate({
                  ignore: ":hidden", // Skip hidden fields
                  errorClass: 'help-block text-danger',
                  errorElement: "span",
                  onkeyup: false,
                  onfocusout: false,
                  onclick: false,
      
                  rules: {
                      document_front: {
                          required: true
                          // extension: "jpg|jpeg|png|pdf|doc"
                      },
                      document_back: {
                          required: true
                          // extension: "jpg|jpeg|png|pdf|doc"
                      },
                      expiry: {
                          required: true,
                          date: true,
                      },
                      type_of_document: {
                          required: true
                      }
                  },
                  messages: {
                      document_front: {
                          required: "Please upload the front side of the document"
                      },
                      document_back: {
                          required: "Please upload the back side of the document"
                      },
                      expiry: {
                          required: "Please select an expiry date",
                          date: "Please enter a valid date",
                      },
                      type_of_document: {
                          required: "Please select the type of document"
                      }
                  },
                  highlight: function (element, errorClass) {
                      $(element).closest('.form-group').addClass('has-error');
                  },
                  unhighlight: function (element, errorClass) {
                      $(element).closest('.form-group').removeClass('has-error');
                  },
                  errorPlacement: function (error, element) {
                      if (element.attr("type") === "file") {
                          element.closest('.form-group').append(error);
                      } else {
                          error.insertAfter(element);
                      }
                  }
              });
      
              // Save button click handler
              $('.save-btn').on('click', function (e) {
                  e.preventDefault();
                  e.stopPropagation();

                  // Disable hidden file inputs to avoid duplicate FormData keys
                  $('#front_back input[type="file"]:hidden, #single_file input[type="file"]:hidden').prop('disabled', true);
      
                  if (!form.valid()) {
                      console.log('Form is not valid.');
                      return;
                  }
      
                  var formData = new FormData(form[0]);

                  // Re-enable file inputs after FormData is created
                  $('#front_back input[type="file"], #single_file input[type="file"]').prop('disabled', false);
      
                  $.ajax({
                      url: form.attr('action'),
                      type: "POST",
                      data: formData,
                      cache: false,
                      contentType: false,
                      processData: false,
                      beforeSend: function () {
                          $('.save-btn').prop('disabled', true);
                          $('.save-btn').html('<em class="fa fa-spinner fa-spin"></em> Uploading...');
                      },
                        success: function (response) {
                          if (response.status === 'success') {
                            if (response.source === 'add-purchase-order') {
                            // Redirect back to addCustomer with a query param
                            toastr.success('Document uploaded successfully');
                            setTimeout(function() {
                            window.location.href = "{{ route('admin.purchase-orders.create') }}?showStep=2&id=" + response.purchase_order_id;
                            }, 1500);
                            } else {
                                toastr.success('Document uploaded successfully');
                                setTimeout(function() {
                                // Redirect to detail page
                                window.location.href = response.redirect_url;
                                }, 1500);
                            }
                              
                          } else {
                              toastr.error(response.message || 'Upload failed');
                          }
                      },
                      error: function (xhr, status, error) {
                          console.log('Error:', xhr, status, error);
                      },
                      complete: function () {
                          $('.save-btn').prop('disabled', false);
                          $('.save-btn').html('{{ $saveBtn }}');
                      }
                  });
              });
      
              // Preview handler
              ['document_front', 'document_back'].forEach(name => {
                  const $input = $(`input[name="${name}"]`);
                  $input.on('change', function () {
                      const file = this.files[0];
                      const $card = $input.closest('.card');
      
                      $card.find('.preview-img, .filename-overlay').remove();
      
                      if (file && file.type.startsWith('image/')) {
                          const url = URL.createObjectURL(file);
                          $('<img>')
                              .attr('src', url)
                              .addClass('preview-img')
                              .css({
                                  position: 'absolute',
                                  top: 0,
                                  left: 0,
                                  width: '100%',
                                  height: '100%',
                                  objectFit: 'cover',
                                  borderRadius: '1rem',
                                  zIndex: 2,
                                  cursor: 'pointer'
                              })
                              .prependTo($card)
                              .on('click', () => $input.click());
                      } else if (file) {
                          $('<div>')
                              .text(file.name)
                              .addClass('filename-overlay')
                              .css({
                                  position: 'absolute',
                                  bottom: '10px',
                                  left: '10px',
                                  right: '10px',
                                  background: 'rgba(0,0,0,0.6)',
                                  color: '#fff',
                                  padding: '5px',
                                  fontSize: '12px',
                                  borderRadius: '4px',
                                  textAlign: 'center',
                                  zIndex: 2,
                                  cursor: 'pointer'
                              })
                              .prependTo($card)
                              .on('click', () => $input.click());
                      }
                  });
              });
      
              // Datepicker init
              $('.date-picker').datepicker({
                  format: 'dd/mm/yyyy', // Set to day/month/year
                  autoclose: true,
                  // startDate: new Date(), // Remove or comment out if you want to allow all dates
                  todayHighlight: true
              });
          }
      
          // DataTable initialization
          $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable-error-message")}}');
          var table = $('#tbl-users').DataTable({
              info: true,
              searching: true,
              pageLength: 10,
              pagingType: "full_numbers",
              dom: 'frt<"bottom"ipl><"clear">'
          });
      
          $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');
      
          $('#tbl-users_filter').append(`
              <div class="position-relative">
                  <input type="text" class="form-control date-picker" id="calendar">
                  <span class="position-absolute date-picker-icon">
                      <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
                  </span>
              </div>
          `);
      
          $('#calendar').datepicker({
              format: 'dd/mm/yyyy', // Set to day/month/year
              autoclose: true,
              todayHighlight: true
          });
      
          $('#roleFilter').on('change', function () {
              let selected = $(this).val();
              table.column(1).search(selected).draw();
          });
      
          $('#type_of_document').on('change', function () {
              var typeId = $(this).val();

              if (typeId) {
                  $.ajax({
                      url: '{{ route("admin.purchase-order.document-types") }}',
                      type: 'GET',
                      data: { id: typeId },
                      success: function (response) {
                          response = response.document;
                          console.log(response);

                          let fileType = response.type;
                          let extensions = fileType === 'image' ? 'jpg|jpeg|png' : 'pdf';
                          let readableExtensions = extensions.replace(/\|/g, ", ").toUpperCase();

                          // Update extension validation
                          $('input[name="document_front"], input[name="document_back"]').rules("remove");
                          $('input[name="document_front"], input[name="document_back"]').rules("add", {
                              extension: extensions,
                              messages: {
                                  extension: `Only ${readableExtensions} files are allowed.`
                              }
                          });

                          // Show allowed extensions in UI
                          $('.allowed-extensions').text(`Allowed: ${readableExtensions}`);

                          if (response.front && response.back) {
                              $('#front_back').show();
                              $('#single_file').hide();

                              $('input[name="document_front"]').rules("add", {
                                  required: true,
                                  messages: { required: "Please upload the front side of document" }
                              });
                              $('input[name="document_back"]').rules("add", {
                                  required: true,
                                  messages: { required: "Please upload the back side of document" }
                              });

                          } else {
                              $('#front_back').hide();
                              $('#single_file').show();

                              $('input[name="document_front"]').rules("add", {
                                  required: true,
                                  messages: { required: "Please upload the document" }
                              });
                              $('input[name="document_back"]').rules("remove", "required");
                          }

                          // Expiry toggle
                          if (response.expiry) {
                              $('input[name="expiry"]').closest('.col-md-12').show();
                              $('input[name="expiry"]').rules("add", {
                                  required: true,
                                  date: true,
                                  // futureDate: true
                              });
                          } else {
                              $('input[name="expiry"]').closest('.col-md-12').hide();
                              $('input[name="expiry"]').rules("remove");
                          }
                      },
                      error: function () {
                          console.error('Error fetching document details');
                      }
                  });
              } else {
                  $('#document-description').text('');
                  $('#front_back, #single_file').hide();
                  $('input[name="expiry"]').closest('.col-md-12').hide();
                  $('input[type="file"]').val('');
                  $('.preview-img, .filename-overlay').remove();
                  $('input[name="document_front"], input[name="document_back"]').rules("remove");
                  $('input[name="expiry"]').rules("remove");
              }
          });


      });
      </script>
      
@endsection