@php
    $isEdit = isset($pageData['driver']);
    $driver = $pageData['driver'] ?? null;
@endphp
@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="{{ $backBtnLink }}">{{ __('app.drivers.title') }}</a>
        </li>
        <li class="active">{{ $title }}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        @if(!isset($pageData['id']))
          <div class="d-flex justify-content-between align-items-center flex-wrap">
            <div class="d-flex align-items-center step-active pe-89 step-line position-relative" id="step-1">
              <div >
                <svg class="step-noraml-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3.38379" y="3.88367" width="24.2326" height="24.2326" rx="8.5" stroke="#D1D1D6"/>
                <rect x="10.093" y="10.593" width="10.814" height="10.814" rx="4" fill="#D1D1D6"/>
                </svg>
                <svg class="step-previous-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2.88379" y="3.38367" width="25.2326" height="25.2326" rx="9" fill="#34C759"/>
                <mask id="mask0_667_26123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="18" height="19">
                <rect x="7" y="7.5" width="18" height="18" fill="#D9D9D9"/>
                </mask>
                <g mask="url(#mask0_667_26123)">
                <path d="M14.1623 18.8625L20.5185 12.5063C20.6685 12.3563 20.8435 12.2812 21.0435 12.2812C21.2435 12.2812 21.4185 12.3563 21.5685 12.5063C21.7185 12.6563 21.7935 12.8344 21.7935 13.0406C21.7935 13.2469 21.7185 13.425 21.5685 13.575L14.6873 20.475C14.5373 20.625 14.3623 20.7 14.1623 20.7C13.9623 20.7 13.7873 20.625 13.6373 20.475L10.4123 17.25C10.2623 17.1 10.1904 16.9219 10.1967 16.7156C10.2029 16.5094 10.281 16.3313 10.431 16.1813C10.581 16.0313 10.7592 15.9563 10.9654 15.9563C11.1717 15.9563 11.3498 16.0313 11.4998 16.1813L14.1623 18.8625Z" fill="white"/>
                </g>
                </svg>
              </div>
              <div class="ms-2">
                <div class="fs-12 text-8E8E93">Step 1</div>
                <div class="fs-13 fw-semibold step-not-active">Driver Details</div>
              </div>
            </div>
            <div class="d-flex align-items-center" id="step-2">
              <div class="">
                <svg class="step-noraml-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="3.38379" y="3.88367" width="24.2326" height="24.2326" rx="8.5" stroke="#D1D1D6"/>
                <rect x="10.093" y="10.593" width="10.814" height="10.814" rx="4" fill="#D1D1D6"/>
                </svg>
                <svg class="step-previous-icon" width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2.88379" y="3.38367" width="25.2326" height="25.2326" rx="9" fill="#34C759"/>
                <mask id="mask0_667_26123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="18" height="19">
                <rect x="7" y="7.5" width="18" height="18" fill="#D9D9D9"/>
                </mask>
                <g mask="url(#mask0_667_26123)">
                <path d="M14.1623 18.8625L20.5185 12.5063C20.6685 12.3563 20.8435 12.2812 21.0435 12.2812C21.2435 12.2812 21.4185 12.3563 21.5685 12.5063C21.7185 12.6563 21.7935 12.8344 21.7935 13.0406C21.7935 13.2469 21.7185 13.425 21.5685 13.575L14.6873 20.475C14.5373 20.625 14.3623 20.7 14.1623 20.7C13.9623 20.7 13.7873 20.625 13.6373 20.475L10.4123 17.25C10.2623 17.1 10.1904 16.9219 10.1967 16.7156C10.2029 16.5094 10.281 16.3313 10.431 16.1813C10.581 16.0313 10.7592 15.9563 10.9654 15.9563C11.1717 15.9563 11.3498 16.0313 11.4998 16.1813L14.1623 18.8625Z" fill="white"/>
                </g>
                </svg>
              </div>
              <div class="ms-2">
                <div class="fs-12 text-8E8E93">Step 2</div>
                <div class="fs-13 fw-semibold step-not-active">Document</div>
              </div>
            </div>
          </div>
        @endif
      </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">
            <!-- Step 1: Driver Details -->
          <div class="" id="driver-step-1">
            <form action="{{ $save }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                @csrf
                @if(isset($pageData['id']))
                    @method('PUT')
                @endif
                <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                <div class="box-body px-0 form-box-scroll">
                  <div class="align-items-center d-flex justify-content-between mb-2">
                    <h2 class="fs-24 fw-semibold text-black">Driver Details </h2>
                  </div>
                  <div class="row">
                    <div class="col-md-auto">
                      <div class="custom-width-144 custom-height-144 rounded-5 overflow-hidden custom-profile-main driver-upload-img">
                        <div class="image-file">
                          <input type="file" name="profile_picture" id="img-file-upload" class="" required>
                          <label class="image-file-label" for="img-file-upload">
                            <img src="{{url('images/default.png')}}" alt="driver-profile" srcset="">
                            @if(isset($pageData['image_path']) && $pageData['image_path_exist'])
                            <span class="image-container"><img src="{{ $pageData['image_path'] }}" alt="driver-profile"></span> 
                              <span class="image-file-upload-again">Change Photo</span>
                            @endif
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-7">
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
                              <label for="name" class="control-label">Name</label>
                              <div class="col-field-wrapper">
                                  <input type="text" name="name" class="form-control" id="name" placeholder="Enter driver's name" value="{{ old('name', $pageData['name'] ?? '') }}">
                                  @if ($errors->has('name'))
                                  <span class="help-block">{{ $errors->first('name') }}</span>
                                  @endif
                              </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                              <label for="name" class="control-label">Driver ID</label>
                              <div class="col-field-wrapper">
                                  <input type="text" name="driver_id" class="form-control" id="driver_id" placeholder="Enter driver id" value="{{ old('driver_id', $pageData['driver_id'] ?? '') }}">
                                  @if ($errors->has('driver_id'))
                                  <span class="help-block">{{ $errors->first('driver_id') }}</span>
                                  @endif
                              </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                              <label for="phone" class="control-label">Mobile Number</label>
                              <div class="col-field-wrapper">
                                  <input type="text" name="phone" class="form-control" id="phone" placeholder="Enter 10 digit mobile number" value="{{ old('phone', $pageData['phone'] ?? '') }}">
                                  @if ($errors->has('phone'))
                                  <span class="help-block">{{ $errors->first('phone') }}</span>
                                  @endif
                              </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                              <label for="email" class="control-label">Email</label>
                              <div class="col-field-wrapper">
                                  <input type="email" name="email" class="form-control" id="email" placeholder="Enter email" value="{{ old('email', $pageData['email'] ?? '') }}">
                                  @if ($errors->has('email'))
                                  <span class="help-block">{{ $errors->first('email') }}</span>
                                  @endif
                              </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 next-btn">
                            <span class="btn-text">{{ $saveBtn }}</span>
                            <span class="btn-loader" style="display: none;">
                                <em class="fa fa-spinner fa-spin"></em> Saving...
                            </span>
                        </button>
                    </div>
                </div>
            </form>
          </div>
          @if(!isset($pageData['id']))
            <!-- Step 2: Document Upload -->
            <div class="box-body px-0" id="driver-step-2" style="display:none">
              <div class="align-items-center d-flex justify-content-between mb-3">
                <h2 class="fs-24 fw-semibold text-black">Documents </h2>
                <a href="#" class="btn btn-primary upload-doc-btn"><em class="iconsax" icon-name="upload-2"></em> Upload Document</a>
              </div>
              <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="driver-list">
                <thead>
                  <th scope="col">Documents</th>
                  <th scope="col">Expiry</th>
                  <th scope="col">Created Date & Time</th>
                  <th scope="col">Status</th>
                  <th scope="col">Action</th>
                </thead>
                <tbody>
                  @if (isset($driverDoc) && $driverDoc->documents->count() > 0)
                    @foreach($driverDoc->documents as $document)
                      <tr>
                        <td>{{ $document->mandatoryDocument->name ?? null}}</td>
                        <td>{{ $document->expiry_date ? $document->expiry_date->format('d/m/Y') : null}}</td>
                        <td>{{ $document->uploaded_date_time ? $document->uploaded_date_time->format('d/m/Y h:iA') : null}}</td>
                        @php
                          $isExpired = isset($document->expiry_date) ? \Carbon\Carbon::parse($document->expiry_date)->lt(\Carbon\Carbon::today()) : '';
                        @endphp
                        <td data-type='text'>
                          @if($isExpired)<span class="px-3 py-2 rounded-5 text-danger fs-12 fw-medium tag-expired custom-width-90 text-center d-inline-block">Expired</span> 
                          @else <span class="px-3 py-2 rounded-5 text-success fs-12 fw-medium tag-active custom-width-90 text-center d-inline-block">Active</span>
                          @endif
                        </td>
                        
                        <td data-type='none'>
                          <a href="{{ route('transporter.drivers.documents.show', ['driver' => $driverDoc->id, 'document' => $document->id]) }}" target="_blank" class="view-docs-btn me-3">
                            <em class="iconsax icon-292D32 fs-20" icon-name="eye"></em>
                          </a>
                          <a href="javascript:void(0)" class="delete-document" data-document-id="{{$document->id ?? null}}" data-driver-id="{{$driverDoc->id ?? null}}" data-required="{{ $document->mandatoryDocument->is_required ?? 0 }}">
                            <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>

                          </a>
                        </td>
                      </tr>
                    @endforeach
                  @endif
                </tbody>
              </table>
              <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-doc-btn">
                    <span class="btn-text">Save & Complete</span>
                    <span class="btn-loader" style="display: none;">
                      <em class="fa fa-spinner fa-spin"></em> Saving...
                    </span>
                  </button>
                </div>
              </div>
            </div>
          @endif
        </div>
      </div>
    </section>
<script type="text/javascript">
var isEdit = {{ isset($isEdit) && $isEdit ? 'true' : 'false' }};
$(document).ready(function () {
  // Add custom filesize validation method
  $.validator.addMethod('filesize', function (value, element, param) {
    if (element.files.length === 0) return true;
    return element.files[0].size <= param;
  }, 'File size must be less than {0} bytes');

  // Step navigation
  $('.next-btn').on('click', function(e) {
    e.preventDefault();
    $('#step-1').removeClass('step-active').addClass('step-previous');
    $('#step-2').addClass('step-active');
    var $form = $('#driver-step-1 form');
    if ($form.valid()) {
      var $btn = $(this);
      var $btnText = $btn.find('.btn-text');
      var $btnLoader = $btn.find('.btn-loader');
      
      // Show loader
      $btn.prop('disabled', true);
      $btnText.hide();
      $btnLoader.show();
      
      var formData = new FormData($form[0]);
      $.ajax({
        url: $form.attr('action'),
        type: $form.find('input[name=_method]').val() === 'PUT' ? 'POST' : 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
          // Hide loader
          $btn.prop('disabled', false);
          $btnText.show();
          $btnLoader.hide();
          
          if (response.success) {
            // Optionally update hidden id field if new driver created
            if (isEdit) {
                  window.location.href = response.redirect;
            } else {
                $('#driver-step-1').hide();
                $('#driver-step-2').show();
                var driverId = response.driverId;
                $('#scret_id').val(driverId);
                var uploadUrl = "{{ route('transporter.drivers.documents.create', ':id') }}";
                uploadUrl = uploadUrl.replace(':id', driverId) + '?from=add-driver';
                $('.upload-doc-btn').attr('href', uploadUrl);
            }
          } else {
            toastr.error(response.message || 'Failed to save driver');
          }
        },
        error: function(xhr) {
          // Hide loader
          $btn.prop('disabled', false);
          $btnText.show();
          $btnLoader.hide();
          
          if (xhr.status === 422 && xhr.responseJSON.errors) {
            var errors = xhr.responseJSON.errors;
            $form.find('.col-field-wrapper').removeClass('has-error');
            $form.find('.help-block.server-error').remove();
            $.each(errors, function(field, messages) {
              var $input = $form.find('[name="' + field + '"]');
              if ($input.length) {
                var $wrapper = $input.closest('.col-field-wrapper');
                $wrapper.addClass('has-error');
                $wrapper.append('<span class="help-block server-error text-danger">' + messages[0] + '</span>');
              }
            });
            var $firstError = $form.find('.has-error').first();
            if ($firstError.length) {
              $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 500);
            }
          } else {
            toastr.error('An error occurred while saving the driver.');
          }
        }
      });
    }
  });

  // DataTable for documents
  var table = $('#tbl-users').DataTable({
    info: true,
    searching: true,
    pageLength: 10,
    pagingType: "full_numbers",
    dom: 'frt<"bottom"ipl><"clear">',
    columnDefs: [
      {
        orderable: false,
        targets: [4]
      }
    ]
  });
  $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

  // Upload Document button
  $('.upload-doc-btn').attr('href', function() {
    var driverId = $('#scret_id').val();
    return driverId ? "{{ route('transporter.drivers.documents.create', ':id') }}".replace(':id', driverId) : '#';
  });

  // Show Step 2 if showStep=2 is in the URL
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('showStep') === '2' && urlParams.get('id')) {
      $('#driver-step-1').hide();
      $('#driver-step-2').show();
      $('#step-1').removeClass('step-active').addClass('step-previous');
      $('#step-2').removeClass('step-not-active').addClass('step-active');
      // Update the Upload Document button link
      var driverId = urlParams.get('id');
      var uploadUrl = "{{ route('transporter.drivers.documents.create', ':id') }}";
      uploadUrl = uploadUrl.replace(':id', driverId) + '?from=add-driver';
      $('.upload-doc-btn').attr('href', uploadUrl);
    }

  // SweetAlert for delete (to be implemented with AJAX)
  $(document).on('click', '.delete-document', function(e) {
    e.preventDefault();
    var $btn = $(this);
    var driverId = $btn.data('driver-id');
    var documentId = $btn.data('document-id');
    var row = $btn.closest('tr');
    // Check if required (from DOM or data attribute)
    var isRequired = $btn.data('required') === true || $btn.data('required') === 1 || $btn.data('required') === '1';
    if (isRequired) {
      toastr.error('This document is required and cannot be deleted.');
      return;
    }
    if (!driverId || !documentId) {
      toastr.error('Missing required information for deletion');
      return;
    }
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'Cancel'
    }).then((result) => {
      if (result.isConfirmed) {
        var deleteUrl = "{{ route('transporter.drivers.documents.destroy', [':driver', ':document']) }}?from=add";
        deleteUrl = deleteUrl.replace(':driver', driverId).replace(':document', documentId);
        $.ajax({
          url: deleteUrl,
          type: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(response) {
            if (response.status === 'success') {
              row.remove();
              toastr.success(response.message || 'Document deleted successfully');
            } else {
              toastr.error(response.message || 'Failed to delete document');
            }
          },
          error: function(xhr) {
            let errorMessage = 'Failed to delete document';
            if (xhr.responseJSON && xhr.responseJSON.message) {
              errorMessage = xhr.responseJSON.message;
            }
            toastr.error(errorMessage);
          }
        });
      }
    });
  });

  // jQuery validation for step 1
  $('.form-validate').validate({
    rules: {
      name: { required: true },
      phone: { required: true, minlength: 9, maxlength: 15 },
      email: { required: true, email: true },
      driver_id: { required: true, maxlength: 20 },
      profile_picture: {
        required: function(){ return !isEdit || $('.image-container img').length === 0; },
        accept: 'image/jpg,image/png,image/jpeg',
        filesize: 10000000
      }
    },
    messages: {
      name: 'Please enter the driver\'s name',
      phone: {
        required: 'Please enter a valid phone number',
        minlength: 'Phone number must be at least 9 digits',
        maxlength: 'Phone number cannot exceed 15 digits'
      },
      
      email: 'Please enter a valid email address',
      profile_picture: {
        required: 'Please upload a profile picture',
        accept: 'Please select a valid image file (jpg, png, jpeg)',
        filesize: 'File size must be less than 10MB'
      },
      driver_id: {
        required: 'Please enter a driver ID',
        maxlength: 'Driver ID cannot exceed 20 characters'
      }
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
      if (element.attr('name') === 'profile_picture') {
        var container = element.closest('.custom-profile-main');
        error.addClass('text-danger d-block mt-2 text-center small');
        try {
          var w = container.outerWidth() || 144;
          error.css({ width: w + 'px', maxWidth: w + 'px' });
        } catch(_) {}
        container.after(error);
      } else {
        var wrapper = element.closest('.col-field-wrapper');
        if (wrapper.length) { error.insertAfter(wrapper); } else { error.insertAfter(element); }
      }
    },
    highlight: function(element) {
      var $el = $(element);
      if ($el.attr('name') === 'profile_picture') {
        $el.closest('.driver-upload-img').addClass('has-error');
      } else {
        $el.closest('.form-group').addClass('has-error');
      }
    },
    unhighlight: function(element) {
      var $el = $(element);
      if ($el.attr('name') === 'profile_picture') {
        $el.closest('.driver-upload-img').removeClass('has-error');
      } else {
        $el.closest('.form-group').removeClass('has-error');
      }
    }
  });

  // Image preview for profile picture
  $('#img-file-upload').on('change', function (e) {
    var input = this;
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        // If .image-container exists, update it, else create it
        var container = $('.image-container');
        if (container.length) {
          container.html('<img src="' + e.target.result + '" alt="Profile Preview">');
        } else {
          // Insert after the label image
          $('.image-file-label').append('<span class="image-container"><img src="' + e.target.result + '" alt="Profile Preview"></span>');
        }
        // Optionally show the 'Change Photo' text
        if ($('.image-file-upload-again').length === 0) {
          $('.image-file-label').append('<span class="image-file-upload-again">Change Photo</span>');
        }
      };
      reader.readAsDataURL(input.files[0]);
    }
  });

  // Add modal for missing documents
  $('body').append(`
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Missing Required Documents</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-describedby="Close"></button>
          </div>
          <div class="modal-body">
            <h5 class="mb-3">Please upload all the mandatory documents before proceeding:</h5>
            <ul id="missingDocumentsList" class="list-unstyled"></ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
          </div>
        </div>
      </div>
    </div>
  `);

  $('.save-doc-btn').on('click', function(e) {
    e.preventDefault();
    // Get driver ID from hidden input or URL
    const urlParams = new URLSearchParams(window.location.search);
    let driverId = urlParams.get('id');
    if (!driverId) {
      driverId = $('#scret_id').val();
    }
    if (!driverId) {
      toastr.error('Please upload Documents First');
      return;
    }
    const $btn = $(this);
    const $btnText = $btn.find('.btn-text');
    const $btnLoader = $btn.find('.btn-loader');
    
    // Show loader
    $btn.prop('disabled', true);
    $btnText.hide();
    $btnLoader.show();
    
    $.ajax({
      url: "{{ route('transporter.drivers.check-documents-and-send-credentials') }}",
      type: 'POST',
      data: {
        driver_id: driverId,
        _token: $('meta[name="csrf-token"]').attr('content')
      },
      success: function(response) {
        if (response.success) {
          toastr.success(response.message);
          setTimeout(function() {
            window.location.href = response.redirect;
          }, 2000);
        } else if (response.hasMissingDocuments) {
          // Show modal with missing documents
          showMissingDocumentsModal(response.missingDocuments);
        } else {
          toastr.error(response.message);
        }
      },
      error: function(xhr) {
        let errorMessage = 'An error occurred while checking documents';
        if (xhr.responseJSON && xhr.responseJSON.message) {
          errorMessage = xhr.responseJSON.message;
        }
        toastr.error(errorMessage);
      },
      complete: function() {
        // Hide loader
        $btn.prop('disabled', false);
        $btnText.show();
        $btnLoader.hide();
      }
    });
  });

  function showMissingDocumentsModal(missingDocuments) {
    let documentsList = '';
    missingDocuments.forEach(function(doc) {
      documentsList += '<li>• ' + doc + '</li>';
    });
    $('#missingDocumentsList').html(documentsList);
    $('#staticBackdrop').modal('show');
  }
});
</script>
@endsection