@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 }}">Transporter</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($transporter))
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center step-1 step-active pe-89 step-line position-relative">
            <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">Basic Details</div>
            </div>
          </div>
          <div class="d-flex align-items-center ">
            <div class="step-2">
              <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">
            
            <div class="" id="transporter-step-1" > 
              <form action="{{ $save }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                  @csrf
                  @if(isset($transporter))
                      @method('PUT')
                  @endif
                  <input type="hidden" name="job_id" value="{{ $jobId ?? null }}" id="job_id">
                  
                      <div class="box-body px-0 form-box-scroll">
                        <div class="align-items-center d-flex justify-content-between mb-3">
                          <h2 class="fs-24 fw-semibold text-black">Basic Details </h2>
                          
                        </div>
                        <div class="row">
                          <div class="col-md-4">
                          <!-- Title -->
                            <div class="form-group">
                                <label for="name" class="control-label">Transporter Name</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Enter transporter name" value="{{ old('name', $transporter->name ?? '') }}">
                                    @if ($errors->has('name'))
                                    <span class="help-block">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                          <!-- Description -->
                            <div class="form-group">
                                <label for="contact_person" class="control-label">Contact Person</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="contact_person" class="form-control" id="contact_person" placeholder="Enter contact person name" value="{{ old('contact_person_accounts', $transporter->contact_person_accounts ?? '') }}">
                                    @if ($errors->has('contact_person'))
                                    <span class="help-block">{{ $errors->first('contact_person') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                          <!-- Description -->
                            <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', $transporter->email ?? '') }}">
                                    @if ($errors->has('email'))
                                    <span class="help-block">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                          <!-- Description -->
                            <div class="form-group">
                                <label for="phone" class="control-label">Phone</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="phone" class="form-control" id="phone" placeholder="Enter phone number" value="{{ old('phone_accounts', $transporter->phone_accounts ?? '') }}">
                                    @if ($errors->has('phone'))
                                    <span class="help-block">{{ $errors->first('phone') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                          <!-- Description -->
                            <div class="form-group">
                                <label for="address" class="control-label">Address</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="address" class="form-control" id="address" placeholder="Enter address" value="{{ old('address', $transporter->address ?? '') }}">
                                    @if ($errors->has('address'))
                                    <span class="help-block">{{ $errors->first('address') }}</span>
                                    @endif
                                </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>
                              @if (isset($transporter))
                                  <button type="submit" class="btn btn-primary save-btn">Save</button>
                              @else
                                  <button type="submit" class="btn btn-primary next-btn">Next</button>
                              @endif
                          </div>
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            @if (!isset($transporter))
              <div id="transporter-step-2" style="display:none;">
                <div class="box-body  px-0  form-box-scroll">
                    <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="upload-doc-btn"><button class="btn  btn-primary "><em class="iconsax" icon-name="upload-2"></em> Upload Document</button></a>
                    </div>
                    <input type="hidden" name="scret_id" id="scret_id">
                    <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="add-transporter-list">
                      <thead>
                        <th scope="col">Documents</th>
                        <th scope="col">Expiry</th>
                        <th scope="col">Uploaded By</th>
                        <th scope="col">Date & Time</th>
                        <th scope="col" class="status">Status</th>
                        <th scope="col" class="action">Action</th>
                      </thead>
                      <tbody>
                        @if(isset($transporter))
                          @foreach ($transporter->transporterDocuments as $document)
                            <tr>
                              <td data-type='text'><a href="{{ route('admin.transporter.documents.show', ['transporter' => $transporter->id, 'document' => $document->id]) }}" target="_blank">{{$document->mandatoryDocument->name ?? null }}</a></td>
                              <td data-type='text'>{{$document->expiry_date?->format('n/j/y')}}</td>
                              <td data-type='text'>{{$document->uploadedBy->name ?? null}}</td>
                              <td data-type='text'>{{$document->uploaded_date_time?->format('n/j/y h:iA')}}</td>
                              @php
                                $isExpired = $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('admin.transporter.documents.show', ['transporter' => $transporter->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}}" data-transporter-id="{{$transporter->id}}">
                                  <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>

                                </a>
                              </td>
                            </tr>
                          @endforeach
                        @endif
                        @if(isset($transporterDoc))
                          @foreach ($transporterDoc->transporterDocuments as $document)
                            <tr>
                              <td data-type='text'><a href="{{ route('admin.transporter.documents.show', ['transporter' => $transporterDoc->id, 'document' => $document->id]) }}" target="_blank">{{$document->mandatoryDocument->name ?? null}}</a></td>
                              <td data-type='text'>{{$document->expiry_date?->format('d/m/Y')}}</td>
                              <td data-type='text'>{{$document->uploadedBy->name ?? null}}</td>
                              <td data-type='text'>{{$document->uploaded_date_time?->format('d/m/Y, h:i A')}}</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('admin.transporter.documents.show', ['transporter' => $transporterDoc->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-transporter-id="{{$transporterDoc->id ?? null}}">
                                  <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>

                                </a>
                              </td>
                            </tr>
                          @endforeach
                        @endif
                      </tbody>
                    </table>
                </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-doc-btn">
                      Save
                    </button>
                  </div>
                </div>
              </div>
            @endif
        </div>
      </div>
      <!-- /.box -->


      <div class="modal fade" id="docsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">View Documents</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              <div id="docsCarousel" class="carousel slide" data-bs-interval="false">
                <div class="carousel-inner">
                  <div class="carousel-item active doc-item"></div>
                  <div class="carousel-item doc-item"></div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#docsCarousel" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#docsCarousel" data-bs-slide="next">
                  <span class="carousel-control-next-icon"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <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-label="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">
                <!-- Documents will be populated dynamically -->
              </ul>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
            </div>
          </div>
        </div>
      </div>

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

  <script type = "text/javascript">
    $(document).ready(function() {

        const urlParams = new URLSearchParams(window.location.search);
        const showStep = urlParams.get('showStep');
        const transporterId = urlParams.get('id');

        if (showStep === '2') {
            $('#transporter-step-1').hide();
            $('#transporter-step-2').show();

            // Update step indicators
            $('.step-1').removeClass('step-active').addClass('step-previous');
            $('.step-2').removeClass('step-not-active').addClass('step-active');

            // Update the upload link with the real transporter ID
            if (transporterId) {
                var uploadUrl = "{{ route('admin.transporter.documents.create', ':id') }}";
                uploadUrl = uploadUrl.replace(':id', transporterId) + '?from=add-transporter';
                $('.upload-doc-btn').attr('href', uploadUrl);
            }

            
        }

        jQuery.validator.addMethod("customEmailValidation", function(value, element, params) {
            var idname = $(element).attr('id');
            var emailText = $(element).val();
            var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
            return pattern.test(emailText);
        }, jQuery.validator.format("Please enter a valid email address."));


        var $form = $('.form-validate');

        if ($form.length) {
            // Remove any existing validation
            $form.removeData('validator');
            $form.removeData('unobtrusiveValidation');

            // Initialize validation
            $form.validate({
                debug: true,
                ignore: ":hidden", // Ignore all hidden inputs
                errorClass: 'help-block',
                errorElement: "span",
                onkeyup: false, // Disable validation on keyup
                onfocusout: false, // Disable validation on focusout
                onclick: false, // Disable validation on click
                rules: {
                    name: {
                        required: true,
                        minlength: 3,
                        maxlength: 50
                    },
                    contact_person: {
                        required: true,
                        minlength: 3,
                        maxlength: 50
                    },
                    email: {
                        required: true,
                        email: true,
                        maxlength: 320
                    },
                    phone: {
                        required: true,
                        minlength: 9,
                        maxlength: 15
                    },
                    address: {
                        required: true,
                        maxlength: 500
                    }
                },
                messages: {
                    name: {
                        required: "Please enter the transporter name",
                        minlength: "Name must be at least 3 characters",
                        maxlength: "Name must not exceed 50 characters"
                    },
                    contact_person: {
                        required: "Please enter the contact person name",
                        minlength: "Contact person name must be at least 3 characters",
                        maxlength: "Contact person name must not exceed 50 characters"
                    },
                    email: {
                        required: "Please enter an email address",
                        email: "Please enter a valid email address",
                        maxlength: "Email must not exceed 320 characters"
                    },
                    phone: {
                        required: "Please enter a phone number",
                        minlength: "Phone number must be at least 9 digits",
                        maxlength: "Phone number must not exceed 15 digits"
                    },
                    address: {
                        required: "Please enter the address",
                        maxlength: "Address must not exceed 500 characters"
                    }
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                invalidHandler: function(form, validator) {
                    if (!validator.numberOfInvalids()) return;
                    $('html, body').animate({
                        scrollTop: ($(validator.errorList[0].element).offset().top - 100)
                    }, 500);
                }
            });

            // Prevent global form-validate handler from interfering
            $form.on('submit', function(e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            });

            // Handle form submission - use more specific selector to avoid conflicts
            $('.next-btn, .save-btn').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation(); // Prevent event bubbling

                if ($form.valid()) {
                    var $submitBtn = $(this);
                    var isEditMode = $submitBtn.hasClass('save-btn');
                    var originalText = $submitBtn.html();

                    // Show loading state
                    $submitBtn.prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Saving...');

                    // Prepare form data
                    var formData = new FormData($form[0]);

                    $.ajax({
                        url: $form.attr('action'),
                        type: 'POST',
                        data: formData,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'X-Requested-With': 'XMLHttpRequest' // 👈 Important!
                        },
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                if (isEditMode) {
                                    toastr.success('Transporter updated successfully');
                                    setTimeout(function() {
                                        window.location.href = response.redirect;
                                    }, 1500);
                                } else {
                                    var transporterId = response.transporterId;
                                    $('#scret_id').val(transporterId);
                                    var uploadUrl = "{{ route('admin.transporter.documents.create', ':id') }}";
                                    uploadUrl = uploadUrl.replace(':id', transporterId) + '?from=add-transporter';
                                    $('.upload-doc-btn').attr('href', uploadUrl);
                                    $('.title').text('Add Document');
                                    $('#transporter-step-1').hide();
                                    $('#transporter-step-2').show();
                                    $('.step-1').removeClass('step-active').addClass('step-previous');
                                    $('.step-2').removeClass('step-not-active').addClass('step-active');
                                }
                            } else {
                                toastr.error(response.message);
                            }

                            $submitBtn.prop('disabled', false).html(originalText);
                        },

                        error: function(xhr) {
                            if (xhr.status === 422) {
                                // Clear previous error states
                                $form.find('.col-field-wrapper, .position-relative').removeClass('has-error');
                                $form.find('.help-block').remove();

                                // Server-side validation errors
                                var errors = xhr.responseJSON.errors;

                                $.each(errors, function(field, messages) {
                                    var $fieldElement = $form.find('[name="' + field + '"]');

                                    if ($fieldElement.length) {
                                        var $wrapper = $fieldElement.closest('.col-field-wrapper, .position-relative');
                                        if ($wrapper.length) {
                                            $wrapper.addClass('has-error');
                                            $wrapper.append('<span class="help-block text-danger">' + messages[0] + '</span>');
                                        }
                                    }
                                });

                                // Scroll to the first error
                                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 data.');
                            }

                            $submitBtn.prop('disabled', false).html(originalText);
                        }
                    });
                }
            });
        }

        $(document).on('click', '.delete-document', function(e) {
            e.preventDefault(); // Prevent default link behavior
            const transporterId = $(this).data('transporter-id');
            const documentId = $(this).data('document-id');
            const row = $(this).closest('tr');

            // Get transporter ID from URL or hidden input if not available from data attribute
            let finalTransporterId = transporterId;
            if (!finalTransporterId) {
                finalTransporterId = $('#scret_id').val();
                if (!finalTransporterId) {
                    const urlParams = new URLSearchParams(window.location.search);
                    finalTransporterId = urlParams.get('id');
                }
            }

            if (!finalTransporterId || !documentId) {
                toastr.error('Missing required information for deletion');
                return;
            }

            // SweetAlert confirmation dialog
            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('admin.transporter.documents.destroy', [':transporter', ':document']) }}?from=add";
                    deleteUrl = deleteUrl.replace(':transporter', finalTransporterId).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) {
                            console.error('Delete error:', xhr);
                            let errorMessage = 'Failed to delete document';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                            toastr.error(errorMessage);
                        }
                    });
                }
            });
        });

        // Handle save-doc-btn click
        $('.save-doc-btn').on('click', function(e) {
            e.preventDefault();
            // Get transporter ID from URL or hidden input
            const urlParams = new URLSearchParams(window.location.search);
            let transporterId = urlParams.get('id');

            if (!transporterId) {
                // Try to get from hidden input if available
                transporterId = $('#scret_id').val();
            }

            if (!transporterId) {
                toastr.error('Please upload Documents First');
                return;
            }

            const $btn = $(this);
            const originalText = $btn.html();

            // Show loading state
            $btn.prop('disabled', true).html('<em class="fa fa-spinner fa-spin"></em> Checking...');
           
            // Send AJAX request to check documents and send credentials
            $.ajax({
                url: "{{ route('admin.transporter.check-documents-and-send-credentials') }}",
                type: 'POST',
                data: {
                    transporter_id: transporterId,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        // All documents uploaded, credentials sent
                        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() {
                    $btn.prop('disabled', false).html(originalText);
                }
            });
        });

        // Function to show missing documents modal
        function showMissingDocumentsModal(missingDocuments) {
            let documentsList = '';
            missingDocuments.forEach(function(doc) {
                documentsList += '<li>• ' + doc + '</li>';
            });

            $('#missingDocumentsList').html(documentsList);

            // Update upload button href if transporter ID is available
            const urlParams = new URLSearchParams(window.location.search);
            const transporterId = urlParams.get('id');
            if (transporterId) {
                var uploadUrl = "{{ route('admin.transporter.documents.create', ':id') }}";
                uploadUrl = uploadUrl.replace(':id', transporterId) + '?from=add-transporter';
                $('.upload-doc-btn').attr('href', uploadUrl);
            }

            $('#staticBackdrop').modal('show');
        }
        var $table = $('#tbl-users');
        if ($table.length) {
            $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
            var table = $table.DataTable({
                info: true,
                searching: true,
                pageLength: 10,
                pagingType: "full_numbers",
                dom: 'frt<"bottom"ipl><"clear">',
                columnDefs: [{
                    targets: ['status', 'action'],
                    orderable: false
                }],
            });

            $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

            $('#tbl-users_filter').append(`
              <div class="d-flex justify-content-end  flex-wrap jobs-right-filter">
                <div class="custom-width-200 position-relative me-2">
                    <select id="statusFilter" class="form-control max-w-200">
                        <option value="">All Types</option>
                        @forelse($mandatoryDocuments ?? [] as $document)
                            <option value="{{$document->id}}">{{$document->name}}</option>
                        @empty
                        @endforelse
                    </select>
                </div>
                <div class="custom-width-200 position-relative ">
                  <input type="text" class="form-control date-picker ms-0" id="calendar" placeholder="Date Range">
                  <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>
                  </span>
                </div>
                
              </div>
              
            `);

            $('#calendar').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'DD/MM/YYYY'
                },
                // allow past dates
                minDate: false
            });

            $('#calendar').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
                table.draw(); // Trigger table redraw
            });

            $('#calendar').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                table.draw();
            });

            $('#statusFilter').on('change', function () {
                table.draw();
            });

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                const dateRange = $('#calendar').val();
                const selectedDocType = $('#statusFilter option:selected').text().trim(); // Get selected text (name)

                const documentType = data[0]; // column 0 = document name
                const createdAt = data[3];    // column 3 = created_at

                let matchDate = true;
                let matchDoc = true;

                // Filter by Date Range
                if (dateRange) {
                    const [start, end] = dateRange.split(' - ');
                    // Parse row date in dd/mm/yyyy format (with possible time)
                    const rowDate = moment(createdAt, ['D/M/YY h:mmA', 'DD/MM/YYYY', 'DD/MM/YYYY, h:mm A'], true);
                    matchDate = rowDate.isValid() && rowDate.isBetween(moment(start, 'DD/MM/YYYY'), moment(end, 'DD/MM/YYYY'), undefined, '[]');
                }

                // Filter by Document Name (not ID)
                if (selectedDocType && selectedDocType !== 'All Types') {
                    matchDoc = documentType === selectedDocType;
                }

                return matchDate && matchDoc;
            });

        }

        @if(isset($transporter))
        $('input[name="status"]').on('change', function() {
            const selectedStatus = $(this).val();
            const transporterId = $('#scret_id').val();
            
            // If selecting active status, check documents first
            if (selectedStatus === '1') {
                // Temporarily prevent the radio button change
                const $activeRadio = $(this);
                const $inactiveRadio = $('input[name="status"][value="0"]');
                
                // Store current state
                const wasChecked = $activeRadio.prop('checked');
                
                checkDocumentsBeforeActivation(transporterId, $activeRadio, $inactiveRadio);
            }
        });

        // Function to check documents before activation
        function checkDocumentsBeforeActivation(transporterId, $activeRadio, $inactiveRadio) {
            $.ajax({
                url: "{{ route('admin.transporter.check-documents-and-send-credentials') }}",
                type: 'POST',
                data: {
                    transporter_id: transporterId,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.success) {
                        // All documents uploaded, allow active selection
                        toastr.success('All required documents are uploaded. Transporter can be activated.');
                    } else if (response.hasMissingDocuments) {
                        // Show modal with missing documents and revert to inactive
                        showMissingDocumentsModal(response.missingDocuments);
                        $inactiveRadio.prop('checked', true);
                        $activeRadio.prop('checked', false);
                    } else {
                        $inactiveRadio.prop('checked', true);
                        $activeRadio.prop('checked', false);
                        toastr.error(response.message || 'Failed to check documents');
                    }
                },
                error: function(xhr) {
                    $inactiveRadio.prop('checked', true);
                    $activeRadio.prop('checked', false);
                    let errorMessage = 'An error occurred while checking documents';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    toastr.error(errorMessage);
                }
            });
        }

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