@extends('layouts.admin')

@section('title', 'Reports - Packing')
@section('page-title', 'Reports')

@section('content')
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <h5 class="mb-0">Packing Report</h5>
          <small class="text-muted">Data from so_packing</small>
        </div>
      </div>
      <div class="card-body">
        <form method="GET" action="{{ route('admin.reports.packing') }}" class="row g-3 align-items-end">
          <div class="col-md-3">
            <label for="from" class="form-label">From</label>
            <input type="date" id="from" name="from" value="{{ $from }}" class="form-control">
          </div>
          <div class="col-md-3">
            <label for="to" class="form-label">To</label>
            <input type="date" id="to" name="to" value="{{ $to }}" class="form-control">
          </div>
          <div class="col-md-3">
            <label for="so" class="form-label">SO Number (optional)</label>
            <div class="position-relative" id="pack-so-autocomplete">
              <input type="text" id="so" name="so" value="{{ $so ?? '' }}" class="form-control" placeholder="e.g., SO-12345" autocomplete="off">
              <div class="dropdown-menu w-100 p-2" id="packSoDropdown" style="max-height: 260px; overflow:auto;">
                <div class="mb-2">
                  <input type="text" class="form-control form-control-sm" id="packSoDropdownSearch" placeholder="Search in results...">
                </div>
                <div id="packSoDropdownList"></div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter me-1"></i> Submit</button>
            <a class="btn btn-outline-secondary ms-2" href="{{ route('admin.reports.packing.export', ['from' => $from, 'to' => $to, 'so' => $so ?? null]) }}">
              <i class="fas fa-file-export me-1"></i> Export CSV
            </a>
          </div>
        </form>

        <hr>

        <div class="row mb-3">
          <div class="col">
            <div class="d-flex gap-3">
              <span class="badge bg-secondary">Rows: {{ $summary['total_rows'] ?? 0 }}</span>
              <span class="badge bg-secondary">Boxes: {{ $summary['boxes'] ?? 0 }}</span>
              <span class="badge bg-secondary">Items: {{ $summary['items'] ?? 0 }}</span>
              <span class="badge bg-secondary">Qty: {{ number_format($summary['qty'] ?? 0) }}</span>
              <span class="badge bg-secondary">Weight: {{ number_format($summary['weight'] ?? 0, 2) }}</span>
            </div>
          </div>
        </div>

        <div class="table-responsive">
          <table class="table table-bordered table-striped table-hover">
            <thead class="table-light">
              <tr>
                <th>Date</th>
                <th>Location</th>
                <th>SO No</th>
                <th class="text-end">Boxes</th>
                <th class="text-end">Items</th>
                <th class="text-end">Total Qty</th>
                <th class="text-end">Total Weight</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              @forelse($rows as $r)
                <tr>
                  <td>{{ \Carbon\Carbon::parse($r->created_at)->format('Y-m-d H:i') }}</td>
                  <td>{{ $r->location_id }}</td>
                  <td>{{ $r->so_no }}</td>
                  <td class="text-end">{{ $r->boxes_count }}</td>
                  <td class="text-end">{{ $r->items_count }}</td>
                  <td class="text-end">{{ number_format($r->qty_total, 2) }}</td>
                  <td class="text-end">{{ number_format($r->weight_total, 2) }}</td>
                  <td>{{ $r->status }}</td>
                </tr>
              @empty
                <tr><td colspan="8" class="text-center text-muted">No records found for selected range.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
(function() {
  const soInput = document.getElementById('so');
  const menu = document.getElementById('packSoDropdown');
  const list = document.getElementById('packSoDropdownList');
  const filterInput = document.getElementById('packSoDropdownSearch');
  let suggestions = [];
  let lastTerm = '';
  let debounceTimer = null;

  function openMenu() { menu.classList.add('show'); }
  function closeMenu() { menu.classList.remove('show'); }
  function renderList(items) {
    list.innerHTML = '';
    if (!items || !items.length) {
      list.innerHTML = '<div class="text-muted small px-2">No matches</div>';
      return;
    }
    items.forEach(val => {
      const a = document.createElement('a');
      a.href = '#';
      a.className = 'dropdown-item';
      a.textContent = val;
      a.addEventListener('click', function(e){
        e.preventDefault();
        soInput.value = val;
        closeMenu();
      });
      list.appendChild(a);
    });
  }

  function fetchSuggestions(term) {
    const url = new URL('{{ route('admin.reports.packing.suggest') }}', window.location.origin);
    url.searchParams.set('term', term || '');
    fetch(url.toString(), { headers: { 'Accept': 'application/json' } })
      .then(r => r.json())
      .then(data => {
        suggestions = Array.isArray(data.data) ? data.data : [];
        renderList(suggestions);
        openMenu();
      })
      .catch(() => { /* ignore */ });
  }

  soInput.addEventListener('input', function(){
    const term = this.value.trim();
    if (term === lastTerm) return;
    lastTerm = term;
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => fetchSuggestions(term), 200);
  });
  soInput.addEventListener('focus', function(){
    if (suggestions.length) {
      openMenu();
    } else {
      fetchSuggestions(this.value.trim());
    }
  });
  filterInput.addEventListener('input', function(){
    const q = this.value.toLowerCase();
    const filtered = suggestions.filter(v => (v || '').toLowerCase().includes(q));
    renderList(filtered);
  });
  document.addEventListener('click', function(e){
    const box = document.getElementById('pack-so-autocomplete');
    if (!box.contains(e.target)) closeMenu();
  });
})();
</script>
@endsection