@extends('layouts.admin')
@section('title', 'Sales')

@section('content')
@php
  $select = 'h-11 px-3 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500';
  $badge = [
    'paid'    => 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
    'partial' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
    'due'     => 'bg-red-500/10 text-red-500',
  ];
  $item = 'flex items-center gap-3 w-full px-4 py-2.5 text-sm font-medium text-left hover:bg-slate-100 dark:hover:bg-slate-700';
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <span>Sales</span><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">All sales</span>
</div>

@if (session('success'))
  <div class="px-4 py-3 rounded-xl bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30 text-sm font-medium">
    {{ session('success') }}
  </div>
@endif

@if ($errors->any())
  <div class="px-4 py-3 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30 text-sm">
    <ul class="list-disc ml-5">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
  </div>
@endif

<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">

  {{-- Search + Filter --}}
  <div class="p-5 flex flex-col xl:flex-row gap-4 xl:items-center xl:justify-between border-b border-slate-200 dark:border-slate-800">
    <form method="GET" class="flex flex-wrap gap-3">
      <input type="text" name="q" value="{{ request('q') }}" placeholder="Invoice no, customer, phone…" class="{{ $select }} w-full sm:w-64">

      <select name="status" class="{{ $select }}">
        <option value="">All status</option>
        <option value="paid" @selected(request('status') === 'paid')>Paid</option>
        <option value="partial" @selected(request('status') === 'partial')>Partial</option>
        <option value="due" @selected(request('status') === 'due')>Due</option>
      </select>

      <button class="h-11 px-5 rounded-xl bg-slate-900 dark:bg-slate-700 text-white text-sm font-semibold hover:opacity-90">Search</button>

      @if (request()->hasAny(['q', 'status']))
        <a href="{{ route('admin.sales.index') }}" class="h-11 px-4 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800">Reset</a>
      @endif
    </form>

    <a href="{{ route('admin.sales.create') }}" class="h-11 px-6 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold text-sm shadow-lg shadow-brand-500/25 hover:opacity-90">+ New Sale</a>
  </div>

  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
        <tr>
          <th class="px-6 py-3">Invoice</th>
          <th>Date</th>
          <th>Customer</th>
          <th class="text-right">Total</th>
          <th class="text-right">Paid</th>
          <th class="text-right">Due</th>
          <th class="px-4">Status</th>
          <th class="px-6 text-right">Action</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse ($sales as $s)
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-6 py-3 font-semibold whitespace-nowrap">{{ $s->invoice_no }}</td>
            <td class="whitespace-nowrap">{{ $s->date->format('d M Y') }}</td>
            <td>
              <div class="font-medium">{{ $s->customer_name }}</div>
              @if ($s->customer_phone)<div class="text-xs text-slate-500">{{ $s->customer_phone }}</div>@endif
            </td>
            <td class="text-right font-semibold">{{ number_format($s->total, 2) }}</td>
            <td class="text-right">{{ number_format($s->paid_amount, 2) }}</td>
            <td class="text-right {{ $s->due_amount > 0 ? 'text-red-500 font-semibold' : '' }}">{{ number_format($s->due_amount, 2) }}</td>
            <td class="px-4">
              <span class="px-2.5 py-1 rounded-full text-xs font-semibold capitalize {{ $badge[$s->payment_status] }}">{{ $s->payment_status }}</span>
            </td>
            <td class="px-6 text-right">
              {{-- 3-dot button --}}
              <button type="button" data-menu-btn="menu-{{ $s->id }}" aria-label="Actions"
                      class="w-9 h-9 inline-grid place-items-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="12" cy="19" r="1.7"/></svg>
              </button>

              {{-- Menu (JS diye position hoy, tai table er bhetore kete jay na) --}}
              <div id="menu-{{ $s->id }}" data-menu
                   class="hidden fixed z-50 w-56 py-1.5 text-left rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-2xl">

                <a href="{{ route('admin.sales.show', $s) }}" class="{{ $item }}">
                  <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
                  View / Print invoice
                </a>

                @if ($s->due_amount > 0)
                  <a href="{{ route('admin.sales.payments.index', $s) }}#pay" class="{{ $item }} text-brand-600 dark:text-brand-400">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2.5"/></svg>
                    Add payment
                  </a>
                @endif

                <a href="{{ route('admin.sales.payments.index', $s) }}" class="{{ $item }}">
                  <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                  Payment history
                </a>

                <a href="{{ route('admin.sales.edit', $s) }}" class="{{ $item }}">
                  <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
                  Edit sale
                </a>

                <div class="my-1 border-t border-slate-200 dark:border-slate-700"></div>

                <form action="{{ route('admin.sales.destroy', $s) }}" method="POST"
                      onsubmit="return confirm('{{ $s->invoice_no }} delete korben? Stock ferot ashbe. Eta ar ferano jabe na.')">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="{{ $item }} text-red-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6"/></svg>
                    Delete sale
                  </button>
                </form>
              </div>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="8" class="px-6 py-16 text-center text-slate-500">
              Kono sale paoa jayni.
              <a href="{{ route('admin.sales.create') }}" class="text-brand-600 dark:text-brand-400 font-semibold">Notun sale koro</a>
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  @if ($sales->hasPages())
    <div class="p-4 border-t border-slate-200 dark:border-slate-800">{{ $sales->links() }}</div>
  @endif
</div>
@endsection

@push('scripts')
<script>
  function closeMenus() {
    document.querySelectorAll('[data-menu]').forEach(function (m) { m.classList.add('hidden'); });
  }

  document.addEventListener('click', function (e) {
    const btn = e.target.closest('[data-menu-btn]');

    if (!btn) {
      // menu er bhetore click korle bondho hobe na (link/form kaj korbe)
      if (!e.target.closest('[data-menu]')) closeMenus();
      return;
    }

    const menu = document.getElementById(btn.dataset.menuBtn);
    const wasOpen = !menu.classList.contains('hidden');
    closeMenus();
    if (wasOpen) return;

    menu.classList.remove('hidden');

    // Button er thik niche, jaygा na thakle upore
    const r = btn.getBoundingClientRect();
    const h = menu.offsetHeight;
    const w = menu.offsetWidth;
    let top = r.bottom + 6;
    if (top + h > window.innerHeight - 8) top = Math.max(8, r.top - h - 6);
    menu.style.top  = top + 'px';
    menu.style.left = Math.max(8, r.right - w) + 'px';
  });

  window.addEventListener('scroll', closeMenus, true);
  window.addEventListener('resize', closeMenus);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenus(); });
</script>
@endpush