document.getElementById('locationSearchResults').innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">Type to search and press Enter...</td></tr>';
      
>     var modal = new bootstrap.Modal(document.getElementById("locationSearchModal"));
      modal.show();
      
      setTimeout(() => {
          document.getElementById('locSearchInput').focus();
          performLocationSearch(); // Auto fetch on open
      }, 200);
  }
  
  function performLocationSearch() {
      let kw = document.getElementById('locSearchInput').value;
      let tbody = document.getElementById('locationSearchResults');
      tbody.innerHTML = '<tr><td colspan="3" class="text-center py-4"><i class="fa-solid fa-spinner fa-spin me-2"></i>Searching...</td></tr>';
      
      let url = (typeof baseUrl !== 'undefined' ? baseUrl : (window.location.origin + '/flystarcourier/public')) + '/admin/shipments/geocodeSearch';
      if (window.location.href.indexOf('/branch/') !== -1) {
          url = url.replace('/admin/shipments/', '/branch/shipments/');
      }
      
      fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
          body: 'keyword=' + encodeURIComponent(kw)
      })
      .then(r => r.json())
      .then(res => {
          if(res.status === 'success' && res.data && res.data.length > 0) {
              let html = '';
              res.data.forEach(item => {
                  let code = item.code || item.name.substring(0,3).toUpperCase();
                  let fullAddr = (item.full_address || item.name).replace(/'/g, "\\'");
                  html += `<tr>
                      <td>
                          <div class="fw-bold">${item.name}</div>
                          <div class="small text-muted" style="font-size:0.7rem;">${item.full_address}</div>
                      </td>
                      <td><span class="badge bg-secondary">${item.pincode || code}</span></td>
                      <td><button type="button" class="btn btn-sm btn-light border py-0 px-2" onclick="selectLocation('${item.name.replace(/'/g, "\\'")}', '${code.replace(/'/g, "\\'")}', '${(item.state || '').replace(/'/g, "\\'")}', '${item.pincode || ''}', '${item.lat || ''}', '${item.lon || ''}', '${(item.country || 'INDIA').replace(/'/g, "\\'")}')"><i class="fa-solid fa-check me-1"></i>Select</button></td>
                  </tr>`;
              });
              tbody.innerHTML = html;
      }
      
>     var modalEl = document.getElementById("locationSearchModal");
      var modal = bootstrap.Modal.getInstance(modalEl);
      if (modal) modal.hide();
      
      if(typeof checkVendorServiceability === 'function') checkVendorServiceability();
  }
  </script>
  <?= $this->endSection() ?>
  
  <?= $this->section('styles') ?>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
  <style>
  .select2-container--bootstrap-5 .select2-selection {
      font-size: 0.8rem !important;
      min-height: 28px !important;
      padding: 2px 8px !important;
  }
  .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
      line-height: normal;
      padding-top: 2px;
  }
  </style>
  
  <!-- Custom styles to match the provided screenshot UI -->
  <style>
      .ship-entry-form label {
          font-size: 0.75rem !important;
          font-weight: 600 !important;
          color: #495057 !important;
          margin-bottom: 2px;
      }
      .ship-entry-form .form-control, 
      .ship-entry-form .form-select {
          font-size: 0.8rem !important;
          padding: 4px 8px !important;
          border-radius: 4px !important;
          border: 1px solid #ced4da !important;
          min-height: 28px;
      }
      .section-title {
      document.getElementById('locationSearchResults').innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">Type to search and press Enter...</td></tr>';
      
>     var modal = new bootstrap.Modal(document.getElementById("locationSearchModal"));
      modal.show();
      
      setTimeout(() => {
          document.getElementById('locSearchInput').focus();
          performLocationSearch(); // Auto fetch on open
      }, 200);
  }
  
  function performLocationSearch() {
      let kw = document.getElementById('locSearchInput').value;
      let tbody = document.getElementById('locationSearchResults');
      tbody.innerHTML = '<tr><td colspan="3" class="text-center py-4"><i class="fa-solid fa-spinner fa-spin me-2"></i>Searching...</td></tr>';
      
      let url = (typeof baseUrl !== 'undefined' ? baseUrl : (window.location.origin + '/flystarcourier/public')) + '/admin/shipments/geocodeSearch';
      if (window.location.href.indexOf('/branch/') !== -1) {
          url = url.replace('/admin/shipments/', '/branch/shipments/');
      }
      
      fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
          body: 'keyword=' + encodeURIComponent(kw)
      })
      .then(r => r.json())
      .then(res => {
          if(res.status === 'success' && res.data && res.data.length > 0) {
              let html = '';
              res.data.forEach(item => {
                  let code = item.code || item.name.substring(0,3).toUpperCase();
                  let fullAddr = (item.full_address || item.name).replace(/'/g, "\\'");
                  html += `<tr>
                      <td>
                          <div class="fw-bold">${item.name}</div>
                          <div class="small text-muted" style="font-size:0.7rem;">${item.full_address}</div>
                      </td>
                      <td><span class="badge bg-secondary">${item.pincode || code}</span></td>
                      <td><button type="button" class="btn btn-sm btn-light border py-0 px-2" onclick="selectLocation('${item.name.replace(/'/g, "\\'")}', '${code.replace(/'/g, "\\'")}', '${(item.state || '').replace(/'/g, "\\'")}', '${item.pincode || ''}', '${item.lat || ''}', '${item.lon || ''}', '${(item.country || 'INDIA').replace(/'/g, "\\'")}')"><i class="fa-solid fa-check me-1"></i>Select</button></td>
                  </tr>`;
              });
              tbody.innerHTML = html;
      }
      
>     var modalEl = document.getElementById("locationSearchModal");
      var modal = bootstrap.Modal.getInstance(modalEl);
      if (modal) modal.hide();
      
      if(typeof checkVendorServiceability === 'function') checkVendorServiceability();
  }
  </script>
  <?= $this->endSection() ?>
  
  <?= $this->section('content') ?>
  <div class="d-flex justify-content-between align-items-center mb-2">
      <div>
          <button type="button" class="btn btn-toggle active" id="btn-awb">AWB</button>
          <button type="button" class="btn btn-toggle" id="btn-kyc">KYC</button>
      </div>
      <div class="d-flex gap-2 align-items-center">
          <button type="button" class="btn btn-light border btn-sm text-secondary" onclick="alert('Filter functionality coming soon!')"><i class="fa-solid fa-filter"></i></button>
          <button type="button" class="btn btn-light border btn-sm text-secondary" onclick="alert('Column layout customization coming soon!')"><i class="fa-solid fa-columns"></i></button>
          <div class="input-group input-group-sm" style="width: 250px;">
              <input type="text" class="form-control" placeholder="Search By AWB No.">
              <button class="btn btn-dark" type="button" onclick="alert('AWB Search coming soon!')"><i class="fa-solid fa-search"></i></button>
          </div>
      </div>
  </div>
  
  <?php if (session()->has('error')): ?>
      <div class="alert alert-danger py-2 px-3 mb-3 small">
          <?= session('error') ?>
      </div>
  <?php endif ?>
  
  <form action="<?= isset($submit_url) ? $submit_url : base_url('admin/shipments/store') ?>" method="POST" id="bookingForm" class="ship-entry-form">
      <input type="hidden" name="branch_id" value="<?= session()->get('branch_id') ?? 1 ?>">
      
      <!-- Account Details -->
      <div class="fieldset-box mt-3">
          <span class="section-title">Account Details</span>
          <div class="row g-2 align-items-center">
              <div class="col-md-2">
                  <label>Book Date *</label>
                  <div class="d-flex gap-1">
      
      <!-- Location Search Modal -->
>     <div class="modal fade" id="locationSearchModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header bg-dark text-white py-2">
              <h5 class="modal-title fs-6" id="locationSearchTitle">Search Location</h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
              <div class="d-flex justify-content-end p-2 bg-light border-bottom">
                 <div class="input-group input-group-sm" style="width: 250px;">
                    <span class="input-group-text bg-white">Search</span>
                    <input type="text" class="form-control" id="locSearchInput" onkeyup="if(event.key === 'Enter') performLocationSearch()">
                    <button class="btn btn-dark" type="button" onclick="performLocationSearch()"><i class="fa-solid fa-search"></i></button>
                 </div>
              </div>
              <div class="table-responsive" style="max-height:400px; overflow-y:auto;">
                <table class="table table-hover table-bordered mb-0 text-sm" style="font-size: 13px;">
                  <thead class="table-dark sticky-top">
                    <tr>
                      <th>Name <i class="fa-solid fa-sort ms-1"></i></th>
                      <th>Code <i class="fa-solid fa-sort ms-1"></i></th>
                      <th style="width:100px;">Action <i class="fa-solid fa-sort ms-1"></i></th>
                    </tr>
                  </thead>
                  <tbody id="locationSearchResults">
                    <tr>
                      <td colspan="3" class="text-center text-muted py-4">Type to search and press Enter...</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Generic Search Modal -->
      <div class="modal fade" id="genericSearchModal" tabindex="-1" aria-labelledby="searchModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header bg-dark text-white py-2">
              <h5 class="modal-title fs-6" id="searchModalTitle">Search Lookup</h5>
      document.getElementById('locationSearchResults').innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">Type to search and press Enter...</td></tr>';
      
>     var modal = new bootstrap.Modal(document.getElementById("locationSearchModal"));
      modal.show();
      
      setTimeout(() => {
          document.getElementById('locSearchInput').focus();
          performLocationSearch(); // Auto fetch on open
      }, 200);
  }
  
  function performLocationSearch() {
      let kw = document.getElementById('locSearchInput').value;
      let tbody = document.getElementById('locationSearchResults');
      tbody.innerHTML = '<tr><td colspan="3" class="text-center py-4"><i class="fa-solid fa-spinner fa-spin me-2"></i>Searching...</td></tr>';
      
      let url = (typeof baseUrl !== 'undefined' ? baseUrl : (window.location.origin + '/flystarcourier/public')) + '/admin/searchLookup';
      // Use branch endpoint if in branch panel
      if (window.location.href.indexOf('/branch/') !== -1) {
          url = url.replace('/admin/', '/branch/');
      }
      
      // Using type=State because user requested states data
      fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
          body: 'type=State&keyword=' + encodeURIComponent(kw)
      })
      .then(r => r.json())
      .then(res => {
          if(res.status === 'success' && res.data && res.data.length > 0) {
              let html = '';
              res.data.forEach(item => {
                  let code = item.code || item.name.substring(0,3).toUpperCase();
                  html += `<tr>
                      <td>${item.name}</td>
                      <td><span class="badge bg-secondary">${code}</span></td>
                      <td><button type="button" class="btn btn-sm btn-light border py-0 px-2" onclick="selectLocation('${item.name.replace(/'/g, "\\'")}', '${code.replace(/'/g, "\\'")}', '${item.name.replace(/'/g, "\\'")}')"><i class="fa-solid fa-check me-1"></i>Select</button></td>
                  </tr>`;
              });
              tbody.innerHTML = html;
          } else {
              tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">No locations found.</td></tr>';
      }
      
>     var modalEl = document.getElementById("locationSearchModal");
      var modal = bootstrap.Modal.getInstance(modalEl);
      if (modal) modal.hide();
  }
  </script>
  <?= $this->endSection() ?>
  
  <?= $this->section('scripts') ?>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <script>
      $(document).ready(function() {
          $('#customer_id').select2({
              theme: 'bootstrap-5',
              placeholder: 'Select Client Account',
              width: '100%'
          }).on('select2:select', function (e) {
              onClientChange();
      onVendorChange();
      filterServices();
          });
      });
  </script>
  
  <script>
  document.addEventListener("DOMContentLoaded", function() {
      var esPincode = document.getElementById("es_pincode");
      if (esPincode) {
          esPincode.addEventListener("input", async function() {
              var pin = this.value.trim();
              if (pin.length === 6) {
                  try {
                      var res = await fetch("<?= base_url("admin/bookings/lookupPincode") ?>?pincode=" + encodeURIComponent(pin));
                      var json = await res.json();
                      if (json.status === "success") {
                          document.getElementById("es_city_display").value = json.data.city  || "";
                          document.getElementById("es_state").value        = json.data.state || "";
                      }
                  } catch(e) {}
              }
          });
      }
      document.getElementById('locationSearchResults').innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">Type to search and press Enter...</td></tr>';
      
>     var modal = new bootstrap.Modal(document.getElementById("locationSearchModal"));
      modal.show();
      
      setTimeout(() => {
          document.getElementById('locSearchInput').focus();
          performLocationSearch(); // Auto fetch on open
      }, 200);
  }
  
  function performLocationSearch() {
      let kw = document.getElementById('locSearchInput').value;
      let tbody = document.getElementById('locationSearchResults');
      tbody.innerHTML = '<tr><td colspan="3" class="text-center py-4"><i class="fa-solid fa-spinner fa-spin me-2"></i>Searching...</td></tr>';
      
      let url = (typeof baseUrl !== 'undefined' ? baseUrl : (window.location.origin + '/flystarcourier/public')) + '/admin/searchLookup';
      // Use branch endpoint if in branch panel
      if (window.location.href.indexOf('/branch/') !== -1) {
          url = url.replace('/admin/', '/branch/');
      }
      
      // Using type=State because user requested states data
      fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
          body: 'type=State&keyword=' + encodeURIComponent(kw)
      })
      .then(r => r.json())
      .then(res => {
          if(res.status === 'success' && res.data && res.data.length > 0) {
              let html = '';
              res.data.forEach(item => {
                  let code = item.code || item.name.substring(0,3).toUpperCase();
                  html += `<tr>
                      <td>${item.name}</td>
                      <td><span class="badge bg-secondary">${code}</span></td>
                      <td><button type="button" class="btn btn-sm btn-light border py-0 px-2" onclick="selectLocation('${item.name.replace(/'/g, "\\'")}', '${code.replace(/'/g, "\\'")}', '${item.name.replace(/'/g, "\\'")}')"><i class="fa-solid fa-check me-1"></i>Select</button></td>
                  </tr>`;
              });
              tbody.innerHTML = html;
          } else {
              tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">No locations found.</td></tr>';
      }
      
>     var modalEl = document.getElementById("locationSearchModal");
      var modal = bootstrap.Modal.getInstance(modalEl);
      if (modal) modal.hide();
  }
  </script>
  <?= $this->endSection() ?>