@extends('layouts.app')
@section('title', $supplier->name)

@section('content')
    <div class="mb-4"><a href="{{ route('suppliers.index') }}" class="text-sm text-brand-600 hover:underline">&larr; {{ __('Back') }}</a></div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="card">
            <h2 class="text-lg font-bold">{{ $supplier->name }}</h2>
            <dl class="mt-3 space-y-2 text-sm">
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Contact') }}</dt><dd>{{ $supplier->contact_name ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Phone') }}</dt><dd>{{ $supplier->phone ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Email') }}</dt><dd>{{ $supplier->email ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Address') }}</dt><dd>{{ $supplier->address ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Tax number') }}</dt><dd>{{ $supplier->tax_number ?? '—' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-400">{{ __('Products') }}</dt><dd>{{ $supplier->products_count }}</dd></div>
            </dl>
        </div>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:col-span-2">
            <div class="card"><p class="text-xs uppercase text-slate-400">{{ __('Total purchased') }}</p><p class="mt-1 text-xl font-bold">{{ money($totals['purchased']) }}</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 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['outstanding']) }}</p></div>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div>
            <h3 class="mb-3 font-semibold">{{ __('Recent purchases') }}</h3>
            <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">{{ __('Date') }}</th>
                        <th class="th text-right">{{ __('Total') }}</th><th class="th">{{ __('Payment') }}</th>
                    </tr></thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($purchases as $purchase)
                            <tr class="hover:bg-slate-50">
                                <td class="td font-mono text-xs"><a href="{{ route('purchases.show', $purchase) }}" class="text-brand-600 hover:underline">{{ $purchase->reference }}</a></td>
                                <td class="td">{{ $purchase->created_at->format('d/m/Y') }}</td>
                                <td class="td text-right font-semibold">{{ money($purchase->total) }}</td>
                                <td class="td"><span class="badge {{ $purchase->payment_status === 'paid' ? 'bg-brand-100 text-brand-700' : 'bg-amber-100 text-amber-700' }}">{{ __(ucfirst($purchase->payment_status)) }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="td py-8 text-center text-slate-400">{{ __('No purchases.') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-3">{{ $purchases->links() }}</div>
        </div>

        <div>
            <h3 class="mb-3 font-semibold">{{ __('Payments') }}</h3>
            <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">{{ __('Amount') }}</th>
                        <th class="th">{{ __('Due') }}</th><th class="th">{{ __('Status') }}</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">{{ money($payment->amount) }}</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' : 'bg-amber-100 text-amber-700' }}">{{ __(ucfirst($payment->status)) }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="td py-8 text-center text-slate-400">{{ __('No payments.') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection