@extends('layouts.app')

@section('title', 'Billing & POS')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div>
            <p class="text-xs font-bold uppercase tracking-[0.18em] text-sky-600">Counter operations</p>
            <h1 class="text-2xl font-extrabold text-slate-950 dark:text-white">Billing & POS</h1>
            <p class="text-sm text-slate-500 mt-1">Create invoices from locked application fees and collect auditable split payments.</p>
        </div>
        <div class="flex flex-wrap gap-2 text-xs font-bold">
            <a href="{{ route('app.billing.invoices.index') }}" class="px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 hover:border-sky-400">Invoices</a>
            <a href="{{ route('app.billing.refunds.index') }}" class="px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 hover:border-sky-400">Refunds</a>
            <a href="{{ route('app.billing.cash_sessions.index') }}" class="px-4 py-2 rounded-xl bg-slate-900 text-white">Cash drawer</a>
        </div>
    </div>

    @if(!$openSession)
        <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 flex flex-col md:flex-row md:items-center justify-between gap-3">
            <div>
                <p class="text-sm font-bold text-amber-900">No open cash session</p>
                <p class="text-xs text-amber-700">Open your drawer before accepting cash. Card and bank collections remain available.</p>
            </div>
            <a href="{{ route('app.billing.cash_sessions.index') }}" class="px-4 py-2 rounded-xl bg-amber-600 text-white text-xs font-bold text-center">Open drawer</a>
        </div>
    @else
        <div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 flex items-center justify-between">
            <div>
                <p class="text-sm font-bold text-emerald-900">Cash drawer open</p>
                <p class="text-xs text-emerald-700">Opened {{ $openSession->opening_time->diffForHumans() }} with AED {{ number_format((float) $openSession->opening_cash, 2) }}.</p>
            </div>
            <span class="rounded-full bg-emerald-600 px-3 py-1 text-[11px] font-bold text-white">LIVE SHIFT</span>
        </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-[1fr_340px] gap-6">
        <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="p-5 border-b border-slate-200 dark:border-slate-700">
                <form method="GET" action="{{ route('app.cashier') }}" class="flex flex-col sm:flex-row gap-3">
                    <input name="q" value="{{ $search }}" placeholder="Application, customer or mobile…" class="flex-1 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm focus:ring-2 focus:ring-sky-500 focus:outline-none">
                    <button class="px-5 py-2.5 rounded-xl bg-slate-900 text-white text-xs font-bold">Search billing queue</button>
                </form>
            </div>

            <form method="POST" action="{{ route('app.billing.invoices.store') }}">
                @csrf
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-slate-50 dark:bg-slate-900/50 text-[11px] uppercase tracking-wider text-slate-500">
                            <tr>
                                <th class="p-4 text-left w-10"></th>
                                <th class="p-4 text-left">Application</th>
                                <th class="p-4 text-left">Customer / Service</th>
                                <th class="p-4 text-right">Government</th>
                                <th class="p-4 text-right">Revenue + VAT</th>
                                <th class="p-4 text-right">Total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                            @forelse($applications as $application)
                                <tr class="hover:bg-slate-50/70 dark:hover:bg-slate-900/30">
                                    <td class="p-4"><input type="checkbox" name="application_ids[]" value="{{ $application->id }}" class="rounded border-slate-300 text-sky-600 focus:ring-sky-500"></td>
                                    <td class="p-4">
                                        <p class="font-bold text-slate-900 dark:text-white">{{ $application->application_number }}</p>
                                        <p class="text-xs text-slate-400">{{ ucfirst($application->status) }}</p>
                                    </td>
                                    <td class="p-4">
                                        <p class="font-semibold text-slate-800 dark:text-slate-200">{{ $application->customer?->full_name_en }}</p>
                                        <p class="text-xs text-slate-400">{{ $application->service?->name_en }}</p>
                                    </td>
                                    <td class="p-4 text-right text-slate-600">AED {{ number_format((float) $application->gov_fee_total, 2) }}</td>
                                    <td class="p-4 text-right text-slate-600">AED {{ number_format((float) ($application->typing_fee_total + $application->service_charge_total + $application->vat_total), 2) }}</td>
                                    <td class="p-4 text-right font-extrabold text-slate-950 dark:text-white">AED {{ number_format((float) $application->total_price, 2) }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="p-12 text-center text-sm text-slate-400">No unbilled applications match this search.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($applications->isNotEmpty())
                    <div class="p-5 bg-slate-50 dark:bg-slate-900/40 border-t border-slate-200 dark:border-slate-700 grid grid-cols-1 md:grid-cols-4 gap-3 items-end">
                        <label class="text-xs font-bold text-slate-600">Branch
                            <select name="branch_id" class="mt-1 w-full rounded-xl border-slate-200 bg-white text-sm">
                                @foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach
                            </select>
                        </label>
                        <label class="text-xs font-bold text-slate-600">Corporate account
                            <select name="company_id" class="mt-1 w-full rounded-xl border-slate-200 bg-white text-sm">
                                <option value="">Individual customer</option>
                                @foreach($companies as $company)<option value="{{ $company->id }}">{{ $company->name_en }}</option>@endforeach
                            </select>
                        </label>
                        <label class="text-xs font-bold text-slate-600">Approved discount
                            <input name="discount_amount" type="number" min="0" step="0.01" value="0.00" class="mt-1 w-full rounded-xl border-slate-200 bg-white text-sm">
                        </label>
                        <button class="rounded-xl bg-sky-600 hover:bg-sky-700 px-5 py-3 text-xs font-extrabold text-white shadow-sm">Issue invoice from selected</button>
                    </div>
                @endif
            </form>
        </div>

        <aside class="bg-slate-950 text-white rounded-3xl p-5 shadow-xl h-fit">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-sky-400">Recent activity</p>
                    <h2 class="font-bold">Latest invoices</h2>
                </div>
                <a href="{{ route('app.billing.invoices.index') }}" class="text-xs text-sky-300">View all</a>
            </div>
            <div class="space-y-2">
                @forelse($recentInvoices as $invoice)
                    <a href="{{ route('app.billing.invoices.show', $invoice->id) }}" class="block rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 p-3">
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-xs font-bold">{{ $invoice->invoice_number }}</span>
                            <span class="text-xs font-extrabold">AED {{ number_format((float) $invoice->total_amount, 2) }}</span>
                        </div>
                        <div class="mt-1 flex justify-between text-[11px] text-slate-400">
                            <span class="truncate">{{ $invoice->customer?->full_name_en ?? $invoice->company?->name_en ?? 'Account' }}</span>
                            <span>{{ str_replace('_', ' ', ucfirst($invoice->status)) }}</span>
                        </div>
                    </a>
                @empty
                    <div class="rounded-2xl border border-dashed border-white/20 p-8 text-center text-xs text-slate-400">No invoices created yet.</div>
                @endforelse
            </div>
        </aside>
    </div>
</div>
@endsection