@extends('layouts.admin')
@section('title', 'All Purchases')

@section('content')
@php
  $field = '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',
  ];
  $cards = [
    ['Total purchases',           number_format($stats->purchase_count),            'text-sky-500'],
    ['Total amount (with VAT)',   'AED ' . number_format($stats->total_sum, 2),     'text-emerald-500'],
    ['Input VAT',                 'AED ' . number_format($stats->vat_sum, 2),       'text-brand-500'],
    ['Due to suppliers',          'AED ' . number_format($stats->due_sum, 2),       'text-red-500'],
  ];
  $today = now()->format('Y-m-d');
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <span>Purchases</span><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">All purchases</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

{{-- Summary (filter onujayi) --}}
<div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-5">
  @foreach ($cards as [$label, $value, $color])
    <div class="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
      <div class="text-sm text-slate-500">{{ $label }}</div>
      <div class="mt-2 text-2xl font-extrabold {{ $color }}">{{ $value }}</div>
    </div>
  @endforeach
</div>

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

  {{-- Filter --}}
  <div class="p-5 space-y-4 border-b border-slate-200 dark:border-slate-800">
    <div class="flex flex-wrap items-end justify-between gap-4">
      <form method="GET" class="flex flex-wrap items-end gap-3">
        <div>
          <label class="block text-xs font-semibold text-slate-500 mb-1.5">Search</label>
          <input type="text" name="q" value="{{ request('q') }}" placeholder="PUR no, supplier, bill no…" class="{{ $field }} w-full sm:w-60">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-500 mb-1.5">Supplier</label>
          <select name="supplier" class="{{ $field }}">
            <option value="">All suppliers</option>
            @foreach ($suppliers as $s)
              <option value="{{ $s->id }}" @selected(request('supplier') == $s->id)>{{ $s->name }}</option>
            @endforeach
          </select>
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-500 mb-1.5">From</label>
          <input type="date" name="from" value="{{ request('from') }}" class="{{ $field }}">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-500 mb-1.5">To</label>
          <input type="date" name="to" value="{{ request('to') }}" class="{{ $field }}">
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-500 mb-1.5">Status</label>
          <select name="status" class="{{ $field }}">
            <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>
        </div>

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

        @if (request()->hasAny(['q', 'supplier', 'from', 'to', 'status']))
          <a href="{{ route('admin.purchases.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.purchases.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">+ Create Purchase</a>
    </div>

    <div class="flex flex-wrap gap-2">
      <a href="{{ route('admin.purchases.index', ['from' => $today, 'to' => $today]) }}" class="h-9 px-4 inline-flex items-center rounded-full border border-slate-300 dark:border-slate-700 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800">Today</a>
      <a href="{{ route('admin.purchases.index', ['from' => now()->startOfMonth()->format('Y-m-d'), 'to' => now()->endOfMonth()->format('Y-m-d')]) }}" class="h-9 px-4 inline-flex items-center rounded-full border border-slate-300 dark:border-slate-700 text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800">This month</a>
      <a href="{{ route('admin.purchases.index', ['status' => 'due']) }}" class="h-9 px-4 inline-flex items-center rounded-full border border-red-500/40 text-red-500 text-sm font-medium hover:bg-red-500/10">Unpaid only</a>
    </div>
  </div>

  {{-- Table --}}
  <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">Reference</th>
          <th>Date</th>
          <th>Supplier</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 ($purchases as $p)
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-6 py-3 whitespace-nowrap">
              <div class="font-semibold">{{ $p->reference }}</div>
              @if ($p->supplier_invoice_no)<div class="text-xs text-slate-500">Bill: {{ $p->supplier_invoice_no }}</div>@endif
            </td>
            <td class="whitespace-nowrap">{{ $p->date->format('d M Y') }}</td>
            <td class="font-medium">{{ $p->supplier->name }}</td>
            <td class="text-right font-semibold">{{ number_format($p->total, 2) }}</td>
            <td class="text-right">{{ number_format($p->paid_amount, 2) }}</td>
            <td class="text-right {{ $p->due_amount > 0 ? 'text-red-500 font-semibold' : '' }}">{{ number_format($p->due_amount, 2) }}</td>
            <td class="px-4"><span class="px-2.5 py-1 rounded-full text-xs font-semibold capitalize {{ $badge[$p->payment_status] }}">{{ $p->payment_status }}</span></td>
            <td class="px-6 text-right">
              <a href="{{ route('admin.purchases.show', $p) }}" class="inline-flex items-center h-9 px-3 rounded-lg text-brand-600 dark:text-brand-400 font-semibold hover:bg-brand-500/10">View</a>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="8" class="px-6 py-16 text-center text-slate-500">
              No purchase record found
              <a href="{{ route('admin.purchases.create') }}" class="text-brand-600 dark:text-brand-400 font-semibold">Notun purchase koro</a>
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

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