@extends('layouts.app')
@section('title', 'Quotations')

@section('content')
@php
  $f = $filters ?? [];
  $qParams = array_filter([
    'q' => $f['q'] ?? '',
    'status' => ($f['status'] ?? '') !== '' && ($f['status'] ?? '') !== 'all' ? ($f['status'] ?? '') : null,
    'client_id' => $f['client_id'] ?? '',
    'date_from' => $f['date_from'] ?? '',
    'date_to' => $f['date_to'] ?? '',
    'sort' => $f['sort'] ?? '',
    'direction' => $f['direction'] ?? '',
  ]);
@endphp
<div class="p-4 sm:p-6 lg:p-7">
  <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-file-lines text-blue-600 mr-1.5"></i>Quotations</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Click any quotation to view details and line items</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('quotations.export.excel', $qParams) }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-excel"></i> Export Excel</a>
      <a href="{{ route('quotations.export.pdf', $qParams) }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-pdf"></i> Export PDF</a>
      <button type="button" onclick="document.getElementById('qtn_ov_new').classList.add('open')" class="ba"><i class="fa-solid fa-plus text-xs"></i> New Quotation</button>
    </div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ number_format($total_count ?? 0) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pending</p>
      <p class="text-[22px] font-bold text-amber-600 mt-2">{{ number_format($pending_count ?? 0) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Approved</p>
      <p class="text-[22px] font-bold text-emerald-600 mt-2">{{ number_format($approved_count ?? 0) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total value</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwkDecimal($total_value ?? 0) }}</p>
      <p class="text-[9px] text-slate-400 mt-1">Pending + approved + converted</p>
    </div>
  </div>

  <form method="get" action="{{ route('quotations.index') }}" class="card p-4 mb-4 flex flex-wrap gap-2 items-end border-slate-200">
    @if($errors->any())
      <div class="w-full text-red-600 text-[12px] font-medium">{{ $errors->first() }}</div>
    @endif
    <div class="min-w-[160px] flex-1">
      <label class="fl text-[10px]">Search</label>
      <input type="search" name="q" value="{{ $f['q'] ?? '' }}" placeholder="Search quotation, client, description…" class="fi">
    </div>
    <div class="min-w-[130px]">
      <label class="fl text-[10px]">Status</label>
      <select name="status" class="fi">
        <option value="all" @selected(($f['status'] ?? 'all') === 'all' || ($f['status'] ?? '') === '')>All statuses</option>
        <option value="Pending" @selected(($f['status'] ?? '') === 'Pending')>Pending</option>
        <option value="Approved" @selected(($f['status'] ?? '') === 'Approved')>Approved</option>
        <option value="Rejected" @selected(($f['status'] ?? '') === 'Rejected')>Rejected</option>
        <option value="Converted" @selected(($f['status'] ?? '') === 'Converted')>Converted</option>
        <option value="Expired" @selected(($f['status'] ?? '') === 'Expired')>Expired</option>
      </select>
    </div>
    <div class="min-w-[140px]">
      <label class="fl text-[10px]">Client</label>
      <select name="client_id" class="fi">
        <option value="">All clients</option>
        @foreach($clients as $c)
          <option value="{{ $c->id }}" @selected((string)($f['client_id'] ?? '') === (string)$c->id)>{{ $c->company_name }}</option>
        @endforeach
      </select>
    </div>
    <div class="w-[130px]">
      <label class="fl text-[10px]">Date from</label>
      <input type="date" name="date_from" value="{{ $f['date_from'] ?? '' }}" class="fi">
    </div>
    <div class="w-[130px]">
      <label class="fl text-[10px]">Date to</label>
      <input type="date" name="date_to" value="{{ $f['date_to'] ?? '' }}" class="fi">
    </div>
    <div class="w-[150px]">
      <label class="fl text-[10px]">Sort</label>
      <select name="sort" class="fi">
        @foreach([
          'reference_number' => 'Reference #',
          'issue_date' => 'Issue date',
          'valid_until' => 'Valid until',
          'total_value' => 'Total value',
          'status' => 'Status',
          'created_at' => 'Created date',
        ] as $k => $label)
          <option value="{{ $k }}" @selected(($f['sort'] ?? 'issue_date') === $k)>{{ $label }}</option>
        @endforeach
      </select>
    </div>
    <div class="w-[100px]">
      <label class="fl text-[10px]">Direction</label>
      <select name="direction" class="fi">
        <option value="desc" @selected(($f['direction'] ?? 'desc') === 'desc')>Desc</option>
        <option value="asc" @selected(($f['direction'] ?? '') === 'asc')>Asc</option>
      </select>
    </div>
    <button type="submit" class="bp h-[38px] self-end">Apply</button>
    <a href="{{ route('quotations.index') }}" class="text-[12px] font-semibold text-slate-500 self-end pb-2 no-underline">Clear</a>
  </form>

  <div class="card p-0 card-has-table border-slate-200 overflow-hidden">
    @if($quotations->count() === 0)
      <div class="py-16 px-4 text-center">
        <i class="fa-solid fa-file-lines text-4xl text-slate-200 mb-3"></i>
        <p class="font-semibold text-slate-700">No quotations found</p>
        <p class="text-[12px] text-slate-500 mt-1 max-w-sm mx-auto">Create your first quotation or adjust your filters.</p>
        <button type="button" onclick="document.getElementById('qtn_ov_new').classList.add('open')" class="ba mt-4"><i class="fa-solid fa-plus text-xs"></i> New Quotation</button>
      </div>
    @else
      <table>
        <thead>
          <tr class="border-b border-slate-100">
            <th class="th">Ref #</th>
            <th class="th">Client</th>
            <th class="th">Description</th>
            <th class="th">Date</th>
            <th class="th">Valid until</th>
            <th class="th text-right">Value</th>
            <th class="th">Status</th>
            <th class="th"></th>
          </tr>
        </thead>
        <tbody>
          @foreach($quotations as $q)
            @php
              $ds = $q->displayStatus();
              $badge = match ($ds) {
                'Approved' => 'g',
                'Rejected' => 'r',
                'Converted' => 'b',
                'Expired' => 's',
                default => 'a',
              };
            @endphp
            <tr class="cursor-pointer hover:bg-slate-50/80" onclick="window.location='{{ route('quotations.show', $q) }}'">
              <td class="td font-mono font-bold text-blue-600">{{ $q->reference_number }}</td>
              <td class="td font-medium text-slate-800">{{ $q->client?->company_name ?? '—' }}</td>
              <td class="td text-slate-600 text-[12px]">{{ \Illuminate\Support\Str::limit($q->description, 56) }}</td>
              <td class="td text-slate-400 text-[12px] whitespace-nowrap">{{ $q->issue_date?->format('M j, Y') }}</td>
              <td class="td text-slate-400 text-[12px] whitespace-nowrap">{{ $q->valid_until?->format('M j, Y') }}</td>
              <td class="td text-right font-mono font-semibold text-slate-800">{{ \App\Support\Format::mwkDecimal($q->total_value) }}</td>
              <td class="td"><span class="badge {{ $badge }}">{{ $ds }}</span></td>
              <td class="td" onclick="event.stopPropagation()">
                <a href="{{ route('quotations.show', $q) }}" class="bsm bg-slate-100 text-slate-600 hover:bg-slate-200 no-underline">View</a>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
      <div class="p-4 border-t border-slate-100">{{ $quotations->withQueryString()->links() }}</div>
    @endif
  </div>
</div>

<div id="qtn_ov_new" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="max-width:640px">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900"><i class="fa-solid fa-file-lines text-blue-600 mr-1"></i>New quotation</p>
      <button type="button" onclick="document.getElementById('qtn_ov_new').classList.remove('open')" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">
      @include('quotations.partials.quotation-form', ['clients' => $clients])
    </div>
  </div>
</div>
@endsection

@push('scripts')
@include('quotations.partials.quotation-form-script')
@endpush