@extends('layouts.location')

@section('title', 'LR Upload')
@section('page-title', 'LR Upload')

@section('content')
<div class="no-select">
  <div class="row">
    <div class="col-lg-12 mb-4">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">LR Upload (Dispatch)</h5>
            <small class="text-muted">Link LR and AWB with SO/PIC ID and notify customer via WhatsApp.</small>
          </div>
          <a href="{{ route('location.dashboard.dispatch') }}" class="btn btn-sm btn-outline-secondary">Back to Dispatch Dashboard</a>
        </div>
        <div class="card-body">
          <form id="lrUploadForm" class="row g-3">
            <div class="col-md-3">
              <label for="lr_no" class="form-label">LR No</label>
              <input type="text" class="form-control" id="lr_no" name="lr_no" required>
            </div>
            <div class="col-md-3 d-none">
              <label for="awb_no" class="form-label">AWB No</label>
              <input type="text" class="form-control" id="awb_no" name="awb_no">
            </div>
            <div class="col-md-3">
              <label for="pic_id_search" class="form-label">SO/PIC ID</label>
              <div class="position-relative">
                <input type="text" class="form-control" id="pic_id_search" placeholder="Search / select SO/PIC ID..." autocomplete="off">
                <input type="hidden" id="pic_id" name="pic_id" required>
                <div id="pic_id_dropdown" class="border rounded bg-white position-absolute w-100 mt-1 shadow-sm d-none" style="max-height: 200px; overflow-y: auto; z-index: 1050;">
                  @forelse(($lrPicIds ?? []) as $pid)
                    @php
                      $picVal = is_array($pid) ? ($pid['pic_id'] ?? '') : $pid;
                      $picLabel = is_array($pid) ? ($pid['label'] ?? $picVal) : $pid;
                    @endphp
                    <div class="dropdown-item py-1 px-2" data-value="{{ $picVal }}">{{ $picLabel }}</div>
                  @empty
                    <div class="dropdown-item py-1 px-2 text-muted">No SO/PIC IDs available</div>
                  @endforelse
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <label for="logistics_name" class="form-label">Transporter Name</label>
              <input type="text" class="form-control" id="logistics_name" name="logistics_name" placeholder="e.g. Delhivery" required>
            </div>
            <div class="col-md-4">
              <label for="lr_image" class="form-label">LR Document</label>
              <input type="file" class="form-control" id="lr_image" accept="image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" required>
              <div class="form-text">Image / PDF / DOC.</div>
            </div>
            <div class="col-md-12 d-flex align-items-end mt-2">
              <button type="submit" id="lrUploadSubmit" class="btn btn-primary me-3">
                <span class="submit-text">Upload LR &amp; Notify</span>
                <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
              </button>
              <div id="lrUploadResult" class="flex-grow-1"></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    try {
      const lrForm = document.getElementById('lrUploadForm');
      const picSearchInput = document.getElementById('pic_id_search');
      const picHiddenInput = document.getElementById('pic_id');
      const picDropdown = document.getElementById('pic_id_dropdown');
      const lrSubmitBtn = document.getElementById('lrUploadSubmit');
      const lrResultBox = document.getElementById('lrUploadResult');
      const lrSpinner = lrSubmitBtn ? lrSubmitBtn.querySelector('.spinner-border') : null;
      const lrSubmitText = lrSubmitBtn ? lrSubmitBtn.querySelector('.submit-text') : null;

      function setLrLoading(loading) {
        if (!lrSubmitBtn) return;
        if (loading) {
          lrSubmitBtn.setAttribute('disabled', 'disabled');
          if (lrSpinner) lrSpinner.classList.remove('d-none');
          if (lrSubmitText) lrSubmitText.textContent = 'Uploading...';
        } else {
          lrSubmitBtn.removeAttribute('disabled');
          if (lrSpinner) lrSpinner.classList.add('d-none');
          if (lrSubmitText) lrSubmitText.textContent = 'Upload LR & Notify';
        }
      }

      if (picSearchInput && picHiddenInput && picDropdown) {
        function showPicDropdown() {
          picDropdown.classList.remove('d-none');
        }
        function hidePicDropdown() {
          picDropdown.classList.add('d-none');
        }
        function filterPicOptions(term) {
          const items = picDropdown.querySelectorAll('[data-value]');
          const t = (term || '').toLowerCase();
          items.forEach(function (el) {
            const txt = (el.textContent || '').toLowerCase();
            el.style.display = !t || txt.indexOf(t) !== -1 ? '' : 'none';
          });
        }
        picSearchInput.addEventListener('focus', function () {
          filterPicOptions(picSearchInput.value || '');
          showPicDropdown();
        });
        picSearchInput.addEventListener('input', function () {
          filterPicOptions(picSearchInput.value || '');
          showPicDropdown();
        });
        picDropdown.addEventListener('click', function (e) {
          const target = e.target.closest('[data-value]');
          if (!target) return;
          const val = target.getAttribute('data-value') || '';
          picHiddenInput.value = val;
          picSearchInput.value = val;
          hidePicDropdown();
        });
        document.addEventListener('click', function (e) {
          if (!picDropdown.contains(e.target) && e.target !== picSearchInput) {
            hidePicDropdown();
          }
        });
      }

      if (lrForm) {
        lrForm.addEventListener('submit', function (e) {
          e.preventDefault();
          if (lrResultBox) lrResultBox.innerHTML = '';

          const lrNo = (document.getElementById('lr_no')?.value || '').trim();
          const awbNo = (document.getElementById('awb_no')?.value || '').trim();
          const picId = (document.getElementById('pic_id')?.value || '').trim();
          const logisticsName = (document.getElementById('logistics_name')?.value || '').trim();
          const fileInput = document.getElementById('lr_image');
          const file = fileInput && fileInput.files && fileInput.files[0] ? fileInput.files[0] : null;

          if (!lrNo || !picId || !logisticsName) {
            if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-warning mb-0">Please fill all required fields.</div>';
            return;
          }
          if (!file) {
            if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-warning mb-0">Please select an LR image.</div>';
            return;
          }

          setLrLoading(true);

          const reader = new FileReader();
          reader.onload = function () {
            const result = reader.result || '';
            const lrPayload = typeof result === 'string' ? result : '';

            const formData = new FormData();
            formData.append('lr_no', lrNo);
            formData.append('awb_no', awbNo);
            formData.append('pic_id', picId);
            formData.append('location_id', '{{ session('location_id') }}');
            formData.append('logistics_name', logisticsName);
            formData.append('lr_image', lrPayload);

            fetch('/directapi/upload_lr.php', {
              method: 'POST',
              body: formData
            })
              .then(function (res) { return res.json().catch(function () { return { status: 'error', message: 'Invalid JSON response' }; }); })
              .then(function (data) {
                if (!lrResultBox) return;
                if (data && data.status === 'success') {
                  let details = '';
                  let tableHtml = '';
                  if (data.whatsapp && Array.isArray(data.whatsapp) && data.whatsapp.length > 0) {
                    var okCount = data.whatsapp.filter(function (x) { return x.status === 'sent'; }).length;
                    var total = data.whatsapp.length;
                    details = ' WhatsApp: ' + okCount + ' of ' + total + ' orders notified.';

                    tableHtml += '<div class="mt-2">';
                    tableHtml += '<table class="table table-sm table-bordered mb-0">';
                    tableHtml += '<thead class="table-light"><tr>' +
                      '<th>SO Number</th><th>Status</th><th>HTTP</th><th>Error / Details</th>' +
                      '</tr></thead><tbody>';
                    data.whatsapp.forEach(function (row) {
                      var so = row.sales_order_number || '';
                      var st = row.status || '';
                      var hs = row.http_status != null ? row.http_status : '';
                      var err = row.error || row.reason || '';
                      if (typeof err === 'string' && err.length > 180) {
                        err = err.substring(0, 177) + '...';
                      }
                      tableHtml += '<tr>' +
                        '<td>' + so + '</td>' +
                        '<td>' + st + '</td>' +
                        '<td>' + hs + '</td>' +
                        '<td style="max-width:320px; white-space:normal; word-break:break-all;">' + err + '</td>' +
                        '</tr>';
                    });
                    tableHtml += '</tbody></table></div>';
                  }
                  lrResultBox.innerHTML = '<div class="alert alert-success mb-0">' + (data.message || 'LR uploaded successfully.') + details + '</div>' + tableHtml;
                  lrForm.reset();
                } else {
                  lrResultBox.innerHTML = '<div class="alert alert-danger mb-0">' + (data && data.message ? data.message : 'Failed to upload LR.') + '</div>';
                }
              })
              .catch(function (err) {
                if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-danger mb-0">Error: ' + (err && err.message ? err.message : 'Unexpected error') + '</div>';
              })
              .finally(function () {
                setLrLoading(false);
              });
          };

          reader.onerror = function () {
            setLrLoading(false);
            if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-danger mb-0">Unable to read LR image file.</div>';
          };

          reader.readAsDataURL(file);
        });
      }
    } catch (e) {}
  });
</script>
@endpush