@extends('layouts.app')
@section('title', __('Supplier Payments'))

@section('content')
    <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Outstanding') }}</p><p class="mt-1 text-xl font-bold text-amber-600">{{ money($totals['pending']) }}</p></div>
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Overdue') }}</p><p class="mt-1 text-xl font-bold text-red-600">{{ money($totals['overdue']) }}</p></div>
        <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Paid') }}</p><p class="mt-1 text-xl font-bold text-brand-700">{{ money($totals['paid']) }}</p></div>
    </div>

    <div class="card mb-4">
        <h2 class="font-semibold text-slate-800">{{ __('Record payment') }}</h2>
        <form method="POST" action="{{ route('supplier-payments.store') }}" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-6">
            @csrf
            <div><label class="label">{{ __('Supplier') }}</label>
                <select name="supplier_id" required class="input">@foreach ($suppliers as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach</select>
            </div>
            <div><label class="label">{{ __('Purchase') }}</label>
                <select name="purchase_id" class="input"><option value="">{{ __('None') }}</option>
                    @foreach ($purchases as $p)<option value="{{ $p->id }}">{{ $p->reference }} — {{ money($p->total) }}</option>@endforeach
                </select>
            </div>
            <div><label class="label">{{ __('Amount') }}</label><input type="number" step="0.01" name="amount" required class="input"></div>
            <div><label class="label">{{ __('Method') }}</label>
                <select name="payment_method" class="input">
                    @foreach (['cash','bank','mvola','orange_money','cheque','other'] as $m)<option value="{{ $m }}">{{ __(ucfirst(str_replace('_',' ',$m))) }}</option>@endforeach
                </select>
            </div>
            <div><label class="label">{{ __('Due date') }}</label><input type="date" name="due_date" class="input"></div>
            <div class="flex items-end gap-2">
                <div class="flex-1"><label class="label">{{ __('Status') }}</label>
                    <select name="status" class="input"><option value="pending">{{ __('Pending') }}</option><option value="paid">{{ __('Paid') }}</option></select>
                </div>
                <button class="btn-primary">{{ __('Save') }}</button>
            </div>
        </form>
    </div>

    <form method="GET" class="mb-3 flex items-end gap-2">
        <div><label class="label">{{ __('Status') }}</label>
            <select name="status" class="input" onchange="this.form.submit()">
                <option value="">{{ __('All') }}</option>
                @foreach (['pending','paid','overdue','cancelled'] as $s)<option value="{{ $s }}" @selected(request('status')===$s)>{{ __(ucfirst($s)) }}</option>@endforeach
            </select>
        </div>
    </form>

    <div class="table-wrap">
        <table class="min-w-full divide-y divide-slate-100">
            <thead class="bg-slate-50"><tr>
                <th class="th">{{ __('Reference') }}</th><th class="th">{{ __('Supplier') }}</th><th class="th">{{ __('Purchase') }}</th>
                <th class="th">{{ __('Amount') }}</th><th class="th">{{ __('Method') }}</th><th class="th">{{ __('Due') }}</th><th class="th">{{ __('Status') }}</th><th class="th"></th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($payments as $payment)
                    <tr class="hover:bg-slate-50">
                        <td class="td font-mono text-xs">{{ $payment->reference }}</td>
                        <td class="td">{{ $payment->supplier?->name }}</td>
                        <td class="td font-mono text-xs">{{ $payment->purchase?->reference ?? '—' }}</td>
                        <td class="td font-semibold">{{ money($payment->amount) }}</td>
                        <td class="td">{{ __(ucfirst(str_replace('_',' ',$payment->payment_method))) }}</td>
                        <td class="td">{{ $payment->due_date?->format('d/m/Y') ?? '—' }}</td>
                        <td class="td">
                            <span class="badge {{ $payment->status === 'paid' ? 'bg-brand-100 text-brand-700' : ($payment->status === 'overdue' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700') }}">
                                {{ __(ucfirst($payment->status)) }}
                            </span>
                        </td>
                        <td class="td text-right">
                            <div class="flex justify-end gap-2">
                                @if ($payment->status !== 'paid')
                                    <form method="POST" action="{{ route('supplier-payments.pay', $payment) }}">@csrf<button class="btn-primary !px-2 !py-1 text-xs">{{ __('Mark paid') }}</button></form>
                                @endif
                                <form method="POST" action="{{ route('supplier-payments.destroy', $payment) }}" onsubmit="return confirm('{{ __('Delete?') }}')">@csrf @method('DELETE')
                                    <button class="text-red-500"><x-icon name="trash" class="h-4 w-4"/></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="td py-10 text-center text-slate-400">{{ __('No payments.') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $payments->links() }}</div>
@endsection