@extends('layouts.epelcon')
@section('title', 'Purchase Report')

@section('content')
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Purchase report</h1>
            <p class="text-sm text-slate-500">{{ $from->format('j M Y') }} → {{ $to->format('j M Y') }}</p>
        </div>
        <button onclick="window.print()" class="print:hidden rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">🖨 Print report</button>
    </div>

    <div class="print:hidden no-scrollbar mb-4 flex gap-2 overflow-x-auto">
        <a href="{{ route('epelcon.reports.bookings') }}" class="shrink-0 rounded-full bg-white px-4 py-2 text-xs font-bold text-slate-600 ring-1 ring-slate-200">Bookings</a>
        <a href="{{ route('epelcon.reports.purchases') }}" class="shrink-0 rounded-full bg-slate-900 px-4 py-2 text-xs font-bold text-white">Purchases</a>
        <a href="{{ route('epelcon.reports.stock') }}" class="shrink-0 rounded-full bg-white px-4 py-2 text-xs font-bold text-slate-600 ring-1 ring-slate-200">Stock</a>
    </div>

    <form method="GET" class="print:hidden mb-5 flex flex-wrap items-end gap-2">
        <label class="text-xs font-bold uppercase text-slate-500">From<br><input type="date" name="from" value="{{ $from->toDateString() }}" class="mt-1 rounded-xl border-0 bg-white py-2 text-sm shadow-sm ring-1 ring-slate-200"></label>
        <label class="text-xs font-bold uppercase text-slate-500">To<br><input type="date" name="to" value="{{ $to->toDateString() }}" class="mt-1 rounded-xl border-0 bg-white py-2 text-sm shadow-sm ring-1 ring-slate-200"></label>
        <button class="rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-bold text-white">Apply</button>
    </form>

    <div class="grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4">
        <div class="rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-600 p-5 text-white shadow-lg shadow-indigo-600/20">
            <p class="text-xs font-semibold uppercase tracking-wide text-indigo-100">Purchase orders</p>
            <p class="mt-1 text-2xl font-extrabold sm:text-3xl">{{ number_format($totals['count']) }}</p>
        </div>
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <p class="text-xs font-bold uppercase text-slate-400">Total PO value</p>
            <p class="mt-1 text-2xl font-extrabold text-slate-900">@money($totals['value'])</p>
        </div>
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <p class="text-xs font-bold uppercase text-slate-400">Spend (received)</p>
            <p class="mt-1 text-2xl font-extrabold text-rose-600">@money($totals['spend'])</p>
        </div>
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <p class="text-xs font-bold uppercase text-slate-400">Suppliers used</p>
            <p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $bySupplier->count() }}</p>
        </div>
    </div>

    <div class="mt-5 grid gap-5 lg:grid-cols-3">
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">By status</h2>
            <div class="space-y-2 text-sm">
                @forelse ($byStatus as $status => $row)
                    @php $badge = ['draft'=>'slate','pending_approval'=>'amber','approved'=>'sky','ordered'=>'indigo','received'=>'emerald','cancelled'=>'rose'][$status] ?? 'slate'; @endphp
                    <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2">
                        <span class="rounded-full bg-{{ $badge }}-100 px-2.5 py-1 text-[10px] font-bold uppercase text-{{ $badge }}-700">{{ str_replace('_', ' ', $status) }} ×{{ $row['count'] }}</span>
                        <span class="font-bold text-slate-900">@money($row['total'])</span>
                    </div>
                @empty
                    <p class="text-sm text-slate-400">No purchase orders in this period.</p>
                @endforelse
            </div>
        </div>

        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 lg:col-span-2">
            <h2 class="mb-3 font-bold text-slate-900">By supplier</h2>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead><tr class="border-b border-slate-100 text-left text-xs font-bold uppercase text-slate-400">
                        <th class="py-2 pr-4">Supplier</th><th class="py-2 pr-4 text-right">POs</th><th class="py-2 pr-4 text-right">Value</th><th class="py-2 text-right">Received</th>
                    </tr></thead>
                    <tbody class="divide-y divide-slate-100">
                    @forelse ($bySupplier as $name => $row)
                        <tr>
                            <td class="py-2.5 pr-4 font-bold text-slate-800">{{ $name }}</td>
                            <td class="py-2.5 pr-4 text-right text-slate-600">{{ $row['count'] }}</td>
                            <td class="py-2.5 pr-4 text-right font-bold text-slate-900">@money($row['total'])</td>
                            <td class="py-2.5 text-right font-bold text-emerald-600">@money($row['received'])</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-6 text-center text-slate-400">No purchase orders in this period.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="mt-5 overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[760px] text-sm">
            <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                <th class="px-4 py-3">Code</th><th class="px-4 py-3">Supplier</th><th class="px-4 py-3">Order date</th><th class="px-4 py-3">Expected</th><th class="px-4 py-3 text-right">Total</th><th class="px-4 py-3">Status</th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @forelse ($orders as $po)
                @php $badge = ['draft'=>'slate','pending_approval'=>'amber','approved'=>'sky','ordered'=>'indigo','received'=>'emerald','cancelled'=>'rose'][$po->status] ?? 'slate'; @endphp
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 font-mono text-xs font-bold text-slate-700">{{ $po->code }}</td>
                    <td class="px-4 py-3 font-bold text-slate-800">{{ $po->supplier->name ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-500">{{ $po->order_date?->format('j M Y') ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-500">{{ $po->expected_date?->format('j M Y') ?? '—' }}</td>
                    <td class="px-4 py-3 text-right font-extrabold text-slate-900">@money($po->total)</td>
                    <td class="px-4 py-3"><span class="rounded-full bg-{{ $badge }}-100 px-2.5 py-1 text-[10px] font-bold uppercase text-{{ $badge }}-700">{{ str_replace('_', ' ', $po->status) }}</span></td>
                </tr>
            @empty
                <tr><td colspan="6" class="px-4 py-10 text-center text-slate-400">No purchase orders in this period.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
@endsection
