@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-6xl mx-auto pb-20">
    <div class="flex justify-between items-center mb-4 no-print bg-slate-50 p-4 border border-slate-300 rounded-sm">
        <h1 class="text-xl font-black text-slate-900 uppercase tracking-tighter">Customer Statement</h1>
        <form class="flex gap-2">
            <input type="date" name="start_date" value="{{ $start_date }}" class="border border-slate-300 text-[10px] font-bold p-1.5 rounded-sm">
            <input type="date" name="end_date" value="{{ $end_date }}" class="border border-slate-300 text-[10px] font-bold p-1.5 rounded-sm">
            <button type="submit" class="bg-indigo-600 text-white px-4 py-1.5 text-[10px] font-black uppercase rounded-sm">Filter</button>
            <button type="button" onclick="window.print()" class="bg-slate-900 text-white px-4 py-1.5 text-[10px] font-black uppercase rounded-sm">Print</button>
        </form>
    </div>

    <div class="bg-white border border-slate-400 rounded-sm p-8 shadow-sm print:border-none print:p-0">
        <div class="flex justify-between mb-8 pb-6 border-b-2 border-slate-900">
            <div>
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">To:</p>
                <h2 class="text-xl font-black text-slate-900 uppercase leading-none">{{ $customer->name }}</h2>
                <p class="text-[10px] text-slate-500 mt-1 font-bold">{{ $customer->address }}</p>
            </div>
            <div class="text-right">
                <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Date Range:</p>
                <p class="text-[11px] font-black text-slate-900 font-mono">
                    {{ date('d/m/Y', strtotime($start_date)) }} - {{ date('d/m/Y', strtotime($end_date)) }}
                </p>
            </div>
        </div>

        <table class="w-full text-left border-collapse">
            <thead class="bg-slate-100 border-t border-b border-slate-400 text-[9px] font-black text-slate-600 uppercase tracking-widest">
                <tr>
                    <th class="px-3 py-2 border-l border-slate-400">Date</th>
                    <th class="px-3 py-2 border-l border-slate-400">Transaction Details</th>
                    <th class="px-3 py-2 border-l border-slate-400 text-right">Debit (+)</th>
                    <th class="px-3 py-2 border-l border-slate-400 text-right">Credit (-)</th>
                    <th class="px-3 py-2 border-l border-r border-slate-400 text-right bg-slate-200/50">Running Balance</th>
                </tr>
            </thead>
            <tbody class="text-[10px] font-medium">
                <tr class="bg-slate-50 italic border-b border-slate-300">
                    <td class="px-3 py-2 border-l border-slate-300 font-mono">{{ date('d/m/Y', strtotime($start_date)) }}</td>
                    <td class="px-3 py-2 border-l border-slate-300 font-black uppercase">Balance Brought Forward</td>
                    <td class="px-3 py-2 border-l border-slate-300 text-right">-</td>
                    <td class="px-3 py-2 border-l border-slate-300 text-right">-</td>
                    <td class="px-3 py-2 border-l border-r border-slate-300 text-right font-mono font-black text-slate-900">
                        {{ number_format($openingBalance, 2) }}
                    </td>
                </tr>

                @php $currentBalance = $openingBalance; @endphp
                @foreach($transactions as $trx)
                    @php $currentBalance += ($trx->debit - $trx->credit); @endphp
                    <tr class="border-b border-slate-300 hover:bg-slate-50 transition-colors">
                        <td class="px-3 py-2 border-l border-slate-300 text-slate-500 font-mono">{{ date('d/m/Y', strtotime($trx->date)) }}</td>
                        <td class="px-3 py-2 border-l border-slate-300">
                            <span class="font-black text-slate-800 uppercase text-[9px]">{{ $trx->type }}</span>
                            <span class="text-[8px] text-slate-400 font-mono ml-2">[{{ $trx->ref }}]</span>
                        </td>
                        <td class="px-3 py-2 border-l border-slate-300 text-right font-mono text-rose-600">
                            {{ $trx->debit > 0 ? number_format($trx->debit, 2) : '-' }}
                        </td>
                        <td class="px-3 py-2 border-l border-slate-300 text-right font-mono text-emerald-600">
                            {{ $trx->credit > 0 ? number_format($trx->credit, 2) : '-' }}
                        </td>
                        <td class="px-3 py-2 border-l border-r border-slate-300 text-right font-mono font-black text-slate-900 bg-slate-50/50">
                            {{ number_format(abs($currentBalance), 2) }} {{ $currentBalance < 0 ? 'Cr' : '' }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="mt-8 flex justify-end">
            <div class="w-72 bg-slate-50 border-2 border-slate-900 p-4">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-[9px] font-black text-slate-400 uppercase">Closing Balance</span>
                    <span class="text-sm font-black font-mono text-slate-900">K{{ number_format($currentBalance, 2) }}</span>
                </div>
                <div class="flex justify-between items-center pt-2 border-t border-slate-300">
                    <span class="text-[11px] font-black text-indigo-600 uppercase">Amount Due</span>
                    <span class="text-xl font-black font-mono text-slate-900 underline underline-offset-4">
                        K{{ number_format(abs($currentBalance), 2) }}
                    </span>
                </div>
            </div>
        </div>

        <div class="mt-12 text-[8px] text-slate-400 font-bold uppercase tracking-widest text-center no-print">
            Generated by AuraAccountify &bull; All figures in Zambian Kwacha (ZMW)
        </div>
    </div>
</div>

<style>
    @media print {
        .no-print { display: none !important; }
        .max-w-6xl { max-width: 100% !important; margin: 0 !important; }
        table { width: 100% !important; border: 1px solid #334155 !important; }
        th, td { border: 1px solid #cbd5e1 !important; }
    }
</style>
@endsection