@extends('backend.layouts.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>
        
        @if(request()->get('from') == 'add-customer' || request()->get('from') == 'add_customer' || request()->get('source') == 'add-customer')
          <li><a href="{{ route('superadmin.customers.index') }}">{{__('app.customers.title')}}</a></li>
          <li><a href="{{ route('superadmin.customers.create') }}">{{ __('app.add') }}  {{__('app.customers.customer')}}</a></li>
          <li class="active">{{$title}}</li>
        @elseif(request()->get('from') == 'customer_detail' || request()->get('source') == 'customer-detail')
          <li><a href="{{ route('superadmin.customers.index') }}">{{__('app.customers.title')}}</a></li>
          <li><a href="{{ isset(request()->customer) ? route('superadmin.customers.show', request()->customer) : '#' }}">{{__('app.customers.customer_details')}}</a></li>
          <li class="active">{{$title}}</li>
        @else
          <li><a href="{{ route('superadmin.customers.index') }}">{{__('app.customers.title')}}</a></li>
          <li class="active">{{$title}}</li>
        @endif
      </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="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                  <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>
                                      @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 overflow-hidden position-relative">
                                    <!-- 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="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 overflow-hidden position-relative">
                                    <!-- 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="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"
                                        value="{{ old('expiry', isset($pageData['expiry']) ? \Carbon\Carbon::parse($pageData['expiry'])->format('d/m/Y') : '') }}">
                                        <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 () {
          var form = $('.form-validate');
          $.validator.addMethod("futureDate", function(value, element) {
              if (!value) return true;
              var parts = value.split('/');
              if (parts.length !== 3) return false;
              var day = parseInt(parts[0], 10);
              var month = parseInt(parts[1], 10) - 1; // JS months are 0-based
              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.");

          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,
                          futureDate: true,
                          dateFormat: 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",
                          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-customer') {
                                  // Redirect back to addCustomer with a query param
                                  window.location.href = "{{ route('superadmin.customers.create') }}?showStep=2&id=" + response.customer_id;
                              } else {
                                  // Redirect to detail page
                                  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();
                      $card.find('.upload-content').show(); // Show upload content by default
      
                      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',
                                  backgroundColor: '#fff' // Add white background for transparent images
                              })
                              .prependTo($card)
                              .on('click', () => $input.click());
                          
                          // Hide the upload content when image is shown
                          $card.find('.upload-content').hide();
                      } 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());
                          
                          // Hide the upload content when file is shown
                          $card.find('.upload-content').hide();
                      }
                  });
              });
      
              // Datepicker init
              $('.date-picker').datepicker({
                  format: 'dd/mm/yyyy',
                  autoclose: true,
                  startDate: new Date(),
                  todayHighlight: true
              });

              // Custom validator for dd/mm/yyyy format
              $.validator.addMethod("dateFormat", function(value, element) {
                  if (!value) return true; // Allow empty values (handled by required validation)
                  // Check if the format matches DD/MM/YYYY
                  var dateRegex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
                  if (!dateRegex.test(value)) {
                    return false;
                  }
                  // Parse the date to check if it's valid
                  var parts = value.split('/');
                  var day = parseInt(parts[0]);
                  var month = parseInt(parts[1]) - 1; // Month is 0-indexed
                  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.");
          }
      
          // 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();

              // Clear any previously selected files and previews when document type changes
              $('input[type="file"]').val('');
              $('.preview-img, .filename-overlay').remove();
              $('.upload-content').show(); // Show upload content again

              if (typeId) {
                  $.ajax({
                      url: '{{ route("superadmin.customer.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 - remove old rules first
                          $('input[name="document_front"]').rules("remove", "extension");
                          $('input[name="document_back"]').rules("remove", "extension");
                          
                          // Add new extension validation rules
                          $('input[name="document_front"]').rules("add", {
                              extension: extensions,
                              messages: {
                                  extension: `Only ${readableExtensions} files are allowed.`
                              }
                          });
                          $('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();
                  $('.upload-content').show(); // Show upload content again
                  $('input[name="document_front"], input[name="document_back"]').rules("remove");
                  $('input[name="expiry"]').rules("remove");
              }
          });


      });
      </script>
      
@endsection