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

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('admin.purchase-orders.index') }}">Purchase Orders</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($po))
          <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="customer-step-1">
              <form action="{{ $save }}" id="myForm" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                  @csrf
                  @if (isset($po))
                    @method('PUT')
                  @endif
                  <input type="hidden" name="id" value="{{ old('id', $po->id ?? '') }}" id="scret_id">
                  
                  <div class="box-body px-0 form-box-scroll">
                    <div class="row">
                  
                      {{-- PO Number --}}
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="po_number" class="control-label">PO Number</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="po_number" class="form-control" id="po_number" placeholder="Enter PO number" value="{{ old('po_number', $po->po_number ?? '') }}">
                            
                          </div>
                        </div>
                      </div>
                  
                      {{-- Company Name --}}
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="company_name" class="control-label">Company Name</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="company_name" class="form-control" id="company_name" placeholder="Enter company name" value="{{ old('company_name', $po->company_name ?? '') }}">
                            
                          </div>
                        </div>
                      </div>
                  
                      {{-- Contact Person --}}
                      <div class="col-md-4">
                        <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', $po->contact_person ?? '') }}">
                          </div>
                        </div>
                      </div>
                  
                      {{-- Phone --}}
                      <div class="col-md-4">
                        <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', $po->phone ?? '') }}">
                          </div>
                        </div>
                      </div>
                  
                      {{-- Email --}}
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="email" class="control-label">Email</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="email" class="form-control" id="email" placeholder="Enter email" value="{{ old('email', $po->email ?? '') }}">
                          </div>
                        </div>
                      </div>
                  
                      {{-- Quantity --}}
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="quantity" class="control-label">Quantity (Metric Tons)</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="quantity" class="form-control" id="quantity" placeholder="Enter quantity" value="{{ old('quantity', $po->quantity ?? '') }}">
                          </div>
                        </div>
                      </div>
                  
                      {{-- Load Date & Offload Date --}}
                      <div class="col-md-4">
                        <div class="row">
                          <div class="col-lg-12 col-xl-6">
                            <div class="form-group">
                              <label for="load_date" class="control-label">Load Date</label>
                              <div class="col-field-wrapper">
                                <div class="position-relative me-2">
                                  <input type="text" class="form-control date-picker" placeholder="Select" id="load_date" name="load_date" value="{{ old('load_date', isset($po) ? $po->load_date->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 class="fs-12 text-4B5563 mt-2">DD/MM/YYYY</div>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-12 col-xl-6">
                            <div class="form-group">
                              <label for="offload_date" class="control-label">Offload Date</label>
                              <div class="col-field-wrapper">
                                <div class="position-relative me-2">
                                  <input type="text" class="form-control date-picker" placeholder="Select" id="offload_date" name="offload_date" value="{{ old('offload_date', isset($po) ? $po->offload_date->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 class="fs-12 text-4B5563 mt-2">DD/MM/YYYY</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  
                      {{-- Notes --}}
                      <div class="col-md-4">
                        <div class="form-group">
                          <label for="notes" class="control-label">Notes</label>
                          <div class="col-field-wrapper">
                            <input type="text" name="note" class="form-control" id="note" placeholder="Enter note" value="{{ old('note', $po->note ?? '') }}">
                          </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="submit" id="submitBtn" class="btn btn-primary">{{ $saveBtn }}</button>
                              
                          </div>
                          
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            <div class="box-body  px-0 " id="customer-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="upload-doc-btn"><button class="btn  btn-primary "><em class="iconsax" icon-name="upload-2"></em> Upload Document</button></a>
              </div>

              <table class="table table-bordered table-hover" id="tbl-users" aria-describedby="add-purchase-order-list">
                <thead>
                  <th scope="col">Documents</th>
                  <th scope="col">Uploaded By</th>
                  <th scope="col">Date & Time</th>
                  <th scope="col" class="action">Action</th>
                </thead>
                <tbody id="documents-tbody">
                  @if(isset($documents) && $documents->count() > 0)
                    @foreach($documents as $document)
                      <tr>
                        <td><a href="{{ route('admin.purchase-order.documents.show', ['purchase_order' => $document->purchase_order_id, 'document' => $document->id]) }}" target="_blank">{{ $document->mandatoryDocument ? $document->mandatoryDocument->name : null }}</a></td>
                        <td>{{ $document->uploadedBy ? $document->uploadedBy->name : null }}</td>
                        <td>{{ $document->created_at ? $document->created_at->format('d/m/Y, h:i A') : null }}</td>
                        <td data-type='none'>
                          <a href="{{ route('admin.purchase-order.documents.show', ['purchase_order' => $document->purchase_order_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-doc-btn" data-purchase-order="{{ $document->purchase_order_id }}" data-document="{{ $document->id }}">
                            <em class="iconsax icon-292D32 fs-20" icon-name="trash"></em>
                          </a>
                        </td>
                      </tr>
                    @endforeach
                  @endif
                </tbody>
              </table>

              <!-- Footer Buttons for Step 2 -->
              @if(isset($documents) && $documents->count() > 0)
                <div class="box-footer px-0 mt-4">    
                  <div class="col-sm-12 text-end">
                    <a href="{{ route('admin.purchase-orders.index') }}" class="btn btn-outline-secondary me-3">Cancel</a>
                    <a href="{{ route('admin.purchase-orders.index') }}"><button type="button" class="btn btn-primary finish-btn">Submit</button></a>
                  </div>
                </div>
              @endif
            </div>
        </div>
      </div>
      <!-- /.box -->

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

<script type="text/javascript">
$(document).ready(function () {
  // Check if datepicker plugin is available
  console.log('Datepicker plugin available:', typeof $.fn.datepicker !== 'undefined');
  
  // Initialize datepicker for form fields
  console.log('Initializing datepicker for load_date:', $('#load_date').length);
  // Update datepicker initialization
  $('#load_date').datepicker({ 
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true
  });

  console.log('Initializing datepicker for offload_date:', $('#offload_date').length);
  // Update datepicker initialization
  $('#offload_date').datepicker({ 
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true
  });

  // Custom validator for DD/MM/YYYY date 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.");

  $.validator.addMethod("greaterThanOrEqualTo", function(value, element, param) {
    if (!value || !$(param).val()) return true; // Allow empty values
    
    // Parse DD/MM/YYYY format
    var startParts = $(param).val().split('/');
    var endParts = value.split('/');
    
    var startDate = new Date(parseInt(startParts[2]), parseInt(startParts[1]) - 1, parseInt(startParts[0]));
    var endDate = new Date(parseInt(endParts[2]), parseInt(endParts[1]) - 1, parseInt(endParts[0]));
    
    return this.optional(element) || endDate >= startDate;
  }, "Offload Date must be same or after Load Date.");


  $('.form-validate').validate({
    errorClass: 'help-block',
    errorElement: 'span',
    highlight: function (element) {
        $(element).closest('.col-field-wrapper').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.col-field-wrapper').removeClass('has-error');
    },
    rules: {
        po_number: {
            required: true,
            minlength: 3,
            maxlength: 20,
            pattern: /^[a-zA-Z0-9\-]+$/
        },
        company_name: {
            required: true,
            maxlength: 50,
            pattern: /^[a-zA-Z\s]+$/
        },
        contact_person: {
            required: true,
            minlength: 3,
            maxlength: 50
        },
        phone: {
            required: true,
            minlength: 10,
            maxlength: 20,
            // pattern: /^\+\d{1,3}\s\d{1,4}\s\d{3}\s\d{4}$/
        },
        email: {
            required: true,
            maxlength: 320,
            email: true
        },
        quantity: {
            required: true,
            number: true,
            min: 1,
        },
        load_date: {
            required: true,
            dateFormat: true
            // notInPast: true // <-- Remove this line
        },
        offload_date: {
            required: true,
            dateFormat: true,
            greaterThanOrEqualTo: '#load_date'
        },
    },
    messages: {
        po_number: {
            required: "Please enter po number.",
            minlength: "po number must be at least 3 characters.",
            maxlength: "po number must not exceed 20 characters.",
            pattern: "po number must be alphanumeric (letters, numbers, hyphens)."
        },
        company_name: {
            required: "Please enter company name.",
            maxlength: "company name must not exceed 50 characters.",
            pattern: "company name should contain only letters and spaces."
        },
        contact_person: {
            required: "Please enter contact person.",
            minlength: "contact person must be at least 3 characters.",
            maxlength: "contact person must not exceed 50 characters."
        },
        phone: {
            required: "Please enter phone number.",
            minlength: "phone number must be at least 10 characters.",
            maxlength: "phone number must not exceed 20 characters.",
            // pattern: "Phone must be in the format: +XX XXX XXX XXXX"
        },
        email: {
            required: "Please enter email.",
            maxlength: "email must not exceed 320 characters.",
            email: "Enter a valid email address."
        },
        quantity: {
            required: "Please enter quantity.",
            number: "quantity must be a number.",
            min: "quantity must be a positive number."
        },
        load_date: {
            required: "Please select load date.",
            dateFormat: "Please enter a valid load date in DD/MM/YYYY format.",
            // notInPast: "Load Date cannot be in the past." // <-- Remove this line
        },
        offload_date: {
            required: "Please select offload date.",
            dateFormat: "Please enter a valid offload date in DD/MM/YYYY format.",
            greaterThanOrEqualTo: "offload date must be same or after load date."
        },
        note: {
            maxlength: "Notes must not exceed 250 characters."
        }
    }
  });

  $(function () {
      let startDate = null;
      let endDate = null;

      // Update daterangepicker initialization if present
      $('#user-date-range').daterangepicker({
        autoUpdateInput: false,
        locale: {
          cancelLabel: 'Clear',
          format: 'DD/MM/YYYY'
        }
      });

      $('#user-date-range').on('apply.daterangepicker', function (ev, picker) {
        startDate = picker.startDate;
        endDate = picker.endDate;
        $(this).val(startDate.format('YYYY-MM-DD') + ' - ' + endDate.format('YYYY-MM-DD'));
        $('#tbl-users').DataTable().draw();
      });

      $('#user-date-range').on('cancel.daterangepicker', function () {
        $(this).val('');
        startDate = null;
        endDate = null;
        $('#tbl-users').DataTable().draw();
      });

      // Date filter logic
      $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        if (settings.nTable.id !== 'tbl-users') return true;
        if (!startDate || !endDate) return true;

        const createdAt = data[2]; // index of "Date & Time" column
        const parsedDate = moment(createdAt, 'MMM D, YYYY HH:mm:ss', true); // must match your PHP format

        if (!parsedDate.isValid()) return true;

        return parsedDate.isSameOrAfter(startDate) && parsedDate.isSameOrBefore(endDate);
      });
    });


    $('#myForm').on('submit', function (e) {
        e.preventDefault();

        let form = $(this)[0];

        if (!$(form).valid()) {
            return; // Stop here if validation fails
        }

        let formData = new FormData(form);
        let submitBtn = $('#submitBtn');

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

        $.ajax({
            url: $(form).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status === 'success') {
                    var isEditMode = $('#scret_id').val() !== '';
                    if (!isEditMode) {
                        var poId = response.poId;
                        var uploadUrl = "{{ route('admin.purchase-order.documents.create', ':id') }}?from=add-purchase-order";
                        uploadUrl = uploadUrl.replace(':id', poId);
                        sessionStorage.setItem('po_document_source', 'add-purchase-order');
                        sessionStorage.setItem('po_id', poId);
                        $('.upload-doc-btn').attr('href', uploadUrl);
                        $('#customer-step-1').hide();
                        $('#customer-step-2').show();
                        // Update step indicator
                        $('.step-1').removeClass('step-active').addClass('step-previous');
                        $('.step-2').removeClass('step-not-active').addClass('step-active');
                    } else {
                        toastr.success(response.message || 'Success!');
                        setTimeout(function() {
                            window.location.href = response.redirect || "{{ route('admin.purchase-orders.index') }}";
                        }, 1500);
                    }
                } else {
                    toastr.error(response.message || 'Something went wrong.');
                }
            },
            error: function(xhr) {
                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function (field, messages) {
                        toastr.error(messages[0]);
                    });
                } else {
                    toastr.error('Unexpected error occurred.');
                }
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('{{ $saveBtn }}');
            }
        });
    });

    // Handle finish button click
    $('.finish-btn').on('click', function() {
        window.location.href = "{{ route('admin.purchase-orders.index') }}";
    });

    // Handle document deletion
    $(document).on('click', '.delete-doc-btn', function() {
        var purchaseOrderId = $(this).data('purchase-order');
        var documentId = $(this).data('document');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "This document will be deleted. You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.purchase-order.documents.destroy', [':purchase_order', ':document']) }}"
                        .replace(':purchase_order', purchaseOrderId)
                        .replace(':document', documentId),
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            toastr.success('Document deleted successfully');
                            $('#tbl-users').DataTable().row(this).remove().draw();
                            // Refresh the page to show updated documents
                        } else {
                            toastr.error(response.message || 'Failed to delete document');
                        }
                    },
                    error: function() {
                        toastr.error('Failed to delete document');
                    }
                });
            }
        });
    });


});

$(document).ready(function() {
    // Check sessionStorage for step navigation
    const showStep = sessionStorage.getItem('po_show_step');
    const poId = sessionStorage.getItem('po_return_id');
    
        if (showStep === '2' && poId) {
        // Hide step 1 and show step 2
        $('#customer-step-1').hide();
        $('#customer-step-2').show();
        
        // Update the upload button href with the PO ID
        var uploadUrl = "{{ route('admin.purchase-order.documents.create', ':id') }}?from=add-purchase-order";
        uploadUrl = uploadUrl.replace(':id', poId);
        $('.upload-doc-btn').attr('href', uploadUrl);
        
        // Store source context in sessionStorage for document upload
        sessionStorage.setItem('po_document_source', 'add-purchase-order');
        sessionStorage.setItem('po_id', poId);
        
        // Clear the step navigation data
        sessionStorage.removeItem('po_show_step');
        sessionStorage.removeItem('po_return_id');
    }
    
    @if(isset($po) && $po)
        // On edit, always show only step 1
        $('#customer-step-1').show();
        $('#customer-step-2').hide();
    @endif
    
        // Initialize DataTable for documents table
    $.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">',
      columnDefs: [
        { targets: ['status', 'action'], orderable: false }
      ]
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
      <div class="d-flex align-items-end gap-2 ms-3 mt-2 flex-wrap">

        <!-- Document Type Dropdown -->
        <div style="min-width: 200px;">
          <select id="document-type-filter"  class="form-control custom-width-200 ">
            <option value="">All Types</option>
            @foreach ($documentTypes as $type)
              <option value="{{ $type->name }}">{{ $type->name }}</option>
            @endforeach
          </select>
        </div>

        <!-- Date Range Picker -->
        <div class="position-relative" style="min-width:150px;">
          <input type="text" class="form-control form-control-sm" id="user-date-range" placeholder="Filter by Date Range">
          <span class="position-absolute date-picker-icon" style="right: 10px; top: 50%; transform: translateY(-50%);">
            <em class="iconsax icon-292D32 fs-16" icon-name="calendar-1"></em>
          </span>
        </div>

      </div>
    `);

  
  
  // Initialize datepicker for DataTable filter
  $('#calendar').datepicker({ 
    format: 'dd/mm/yyyy',   // day/month/four-digit-year
    autoclose: true,
    todayHighlight: true,
   });

  // Initialize datepicker for form fields
  console.log('Initializing datepicker for load_date:', $('#load_date').length);
  $('#load_date').datepicker({ 
    format: 'dd/mm/yyyy',   // day/month/four-digit-year
    autoclose: true,
    todayHighlight: true,
   });

  console.log('Initializing datepicker for offload_date:', $('#offload_date').length);
  $('#offload_date').datepicker({ 
    format: 'dd/mm/yyyy',   // day/month/four-digit-year
    autoclose: true,
    todayHighlight: true,
   });

  // Update offload_date picker when load_date changes
  $('#load_date').on('change', function() {
    var loadDate = $(this).val();
    if (loadDate) {
      // Parse DD/MM/YYYY format correctly
      var parts = loadDate.split('/');
      var day = parseInt(parts[0]);
      var month = parseInt(parts[1]) - 1; // Month is 0-indexed in JavaScript Date
      var year = parseInt(parts[2]);
      var startDate = new Date(year, month, day);
      $('#offload_date').datepicker('setStartDate', startDate);
      
      // Clear offload_date if it's before the new load_date
      var currentOffload = $('#offload_date').val();
      if (currentOffload) {
        var offloadParts = currentOffload.split('/');
        var offloadDay = parseInt(offloadParts[0]);
        var offloadMonth = parseInt(offloadParts[1]) - 1;
        var offloadYear = parseInt(offloadParts[2]);
        var offloadDate = new Date(offloadYear, offloadMonth, offloadDay);
        
        if (offloadDate < startDate) {
          $('#offload_date').val('');
        }
      }
    }
  });

  let selectedDocType = '';

$('#document-type-filter').on('change', function () {
  selectedDocType = $(this).val().toLowerCase();
  $('#tbl-users').DataTable().draw();
});

  // Add to DataTable custom search
  $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
    if (settings.nTable.id !== 'tbl-users') return true;

    const type = data[0]?.toLowerCase(); // Assuming "Documents" column is index 0

    if (!selectedDocType || type.includes(selectedDocType)) {
      return true;
    }

    return false;
  });

  // 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')) {
      $('#customer-step-1').hide();
      $('#customer-step-2').show();
      $('.step-1').removeClass('step-active').addClass('step-previous');
      $('.step-2').removeClass('step-not-active').addClass('step-active');
      // Optionally update the upload button href with the PO ID from the URL
      var uploadUrl = "{{ route('admin.purchase-order.documents.create', ':id') }}?from=add-purchase-order";
      uploadUrl = uploadUrl.replace(':id', urlParams.get('id'));
      $('.upload-doc-btn').attr('href', uploadUrl);
      // Store context for document upload
      sessionStorage.setItem('po_document_source', 'add-purchase-order');
      sessionStorage.setItem('po_id', urlParams.get('id'));
  }
});
</script>
@endsection