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

@section('content')
@include('backend.layouts.alert')
<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.transporters.index') }}">{{__('app.transporters.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>
<section class="content pb-0">
  <div class="row">
    <div class="col-md-12">
      <div class="border-top">
        <form action="{{ $save }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
          @csrf
          <input type="hidden" name="transporter" value="{{ request()->route('transporter') }}">
          <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 }}">{{ $value->name }}</option>
                        @endforeach
                      </select>
                    </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>

          <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>
        </form>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  $(document).ready(function () {
      var form = $('.form-validate');
      $.validator.addMethod("futureDate", function(value, element) {
          if (!value) return true;
          // Parse DD/MM/YYYY
          var parts = value.split('/');
          if (parts.length !== 3) return false;
          var day = parseInt(parts[0], 10);
          var month = parseInt(parts[1], 10) - 1;
          var year = parseInt(parts[2], 10);
          var inputDate = new Date(year, month, day);

          var today = new Date();
          today.setHours(0,0,0,0);

          return inputDate >= today;
      }, "Expiry date cannot be in the past.");

      $.validator.addMethod("dateFormat", function(value, element) {
          if (!value) return true; // Allow empty values (handled by required validation)
          var dateRegex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
          if (!dateRegex.test(value)) {
              return false;
          }
          var parts = value.split('/');
          var day = parseInt(parts[0]);
          var month = parseInt(parts[1]) - 1;
          var year = parseInt(parts[2]);
          var date = new Date(year, month, day);
          return date.getDate() === day && date.getMonth() === month && date.getFullYear() === year;
      }, "Please enter a valid date in DD/MM/YYYY format.");

      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,
                      dateFormat: true,
                      futureDate: 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",
                      dateFormat: "Please enter a valid date in DD/MM/YYYY format.",
                      futureDate: "Expiry date cannot be in the past"
                  },
                  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-transporter') {
                            
                              // Redirect back to addCustomer with a query param
                              window.location.href = "{{ route('admin.transporters.create') }}?showStep=2&id=" + response.transporter_id;
                          } else {
                            
                              // Redirect to detaiif ($request->input('source') === 'add-customer') {
                              window.location.href = response.redirect_url;
                          }
                      }
                  },
                  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',
              autoclose: true,
              startDate: new Date(),
              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>
      `);
  
      $('#roleFilter').on('change', function () {
          let selected = $(this).val();
          table.column(1).search(selected).draw();
      });
  
      $('#calendar').datepicker();


      $('#type_of_document').on('change', function () {
          var typeId = $(this).val();

          if (typeId) {
              $.ajax({
                  url: '{{ route("admin.transporter.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,
                              dateFormat: 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