@extends('layouts.app')

@section('title', $receipt->receipt_number)

@section('content')
<style>@media print { body > div > header, aside, .no-print { display:none!important } main { padding:0!important } body { background:white!important } }</style>
<div class="max-w-3xl mx-auto space-y-4">
    <div class="no-print flex justify-between items-center"><a href="{{ route('app.billing.invoices.show', $receipt->payment->invoice_id) }}" class="text-xs font-bold text-sky-600">← Back to invoice</a><button onclick="window.print()" class="rounded-xl bg-slate-900 px-4 py-2 text-xs font-bold text-white">Print receipt</button></div>
    <article class="bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm">
        <header class="bg-slate-950 text-white p-8 flex items-start justify-between">
            <div><div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-sky-500 to-emerald-400 flex items-center justify-center font-extrabold">UAE</div><h1 class="mt-4 text-xl font-extrabold">{{ auth()->user()->tenant->company_name }}</h1><p class="text-xs text-slate-400">Government Services & PRO Operations</p></div>
            <div class="text-right"><p class="text-xs uppercase tracking-[0.2em] text-sky-300">Payment receipt</p><p class="mt-1 text-2xl font-extrabold">{{ $receipt->receipt_number }}</p><p class="text-xs text-slate-400">{{ $receipt->created_at->format('d M Y, H:i') }}</p><p class="mt-2 text-sm" dir="rtl">إيصال دفع</p></div>
        </header>
        <div class="p-8 space-y-7">
            <div class="grid grid-cols-2 gap-6 text-sm"><div><p class="text-[10px] font-bold uppercase text-slate-400">Received from</p><p class="font-bold text-slate-900">{{ $receipt->payment->invoice->customer?->full_name_en ?? $receipt->payment->invoice->company?->name_en ?? 'Customer' }}</p></div><div class="text-right"><p class="text-[10px] font-bold uppercase text-slate-400">Against invoice</p><p class="font-bold text-sky-700">{{ $receipt->payment->invoice->invoice_number }}</p></div></div>
            <div class="rounded-2xl bg-slate-50 border border-slate-200 p-5"><p class="text-[10px] font-bold uppercase text-slate-400">Tender breakdown</p>@foreach($receipt->payment->components as $component)<div class="mt-2 flex justify-between text-sm"><span>{{ str_replace('_', ' ', ucfirst($component->payment_method)) }} @if($component->transaction_reference)<small class="text-slate-400">· {{ $component->transaction_reference }}</small>@endif</span><span class="font-bold">AED {{ number_format((float) $component->amount, 2) }}</span></div>@endforeach</div>
            <div class="rounded-2xl bg-emerald-600 text-white p-6 flex items-end justify-between"><div><p class="text-xs font-bold uppercase tracking-wider text-emerald-100">Amount received</p><p class="text-xs text-emerald-100 mt-1" dir="rtl">المبلغ المستلم</p></div><p class="text-3xl font-extrabold">AED {{ number_format((float) $receipt->amount, 2) }}</p></div>
            <div class="grid grid-cols-2 gap-6 text-xs text-slate-500"><div><p class="font-bold text-slate-700">Payment reference</p><p>{{ $receipt->payment->payment_number }}</p></div><div class="text-right"><p class="font-bold text-slate-700">Issued by</p><p>{{ $receipt->payment->cashier?->name ?? auth()->user()->name }}</p></div></div>
        </div>
    </article>
</div>
@endsection