@extends('layouts.app')

@section('title', 'Customer Ledger')

@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Reports' => null, 'Customer Ledger' => null]])
@endsection

@section('content')
<div>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Customer Ledger</h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Track all customer transactions and outstanding balances</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <x-button variant="secondary" icon="filter">Filters</x-button>
            <x-button variant="outline" icon="printer">Print</x-button>
            <x-button variant="success" icon="file-spreadsheet">Excel</x-button>
            <x-button variant="danger" icon="file-text">PDF</x-button>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <x-stat-card title="Total Sales" :value="2850000" icon="trending-up" iconBg="success" gradient />
        <x-stat-card title="Total Received" :value="2480000" icon="circle-check" iconBg="primary" gradient />
        <x-stat-card title="Current Due" :value="370000" icon="alert-circle" iconBg="warning" gradient />
    </div>

    <x-card class="mb-6">
        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 flex items-center justify-center font-bold text-white text-lg shadow-glow">TC</div>
            <div class="flex-1">
                <h3 class="text-lg font-bold text-slate-900 dark:text-white">Textile Corp</h3>
                <p class="text-sm text-slate-500">+880 1800-111111 • accounts@textilecorp.com • 45 Banani, Dhaka</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <x-badge variant="success" icon="check-circle-2">Active Customer</x-badge>
                <x-badge variant="warning" icon="alert-triangle">Overdue</x-badge>
            </div>
        </div>
    </x-card>

    <x-card title="Transaction History" icon="scroll-text" :padding="false">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-800">
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Date</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Voucher</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Description</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">Debit (Dr)</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">Credit (Cr)</th>
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">Balance</th>
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500">Remarks</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    @foreach([
                        ['date' => '2026-06-25', 'voucher' => 'SAL-101', 'desc' => 'Cotton 40s - 30 bags', 'debit' => 342000, 'credit' => 0, 'balance' => 342000, 'remarks' => 'INV-2026-101'],
                        ['date' => '2026-06-28', 'voucher' => 'RCP-012', 'desc' => 'Cheque Received', 'debit' => 0, 'credit' => 200000, 'balance' => 142000, 'remarks' => 'DBBL Cheque'],
                        ['date' => '2026-07-01', 'voucher' => 'SAL-115', 'desc' => 'Polyester 30s - 25 bags', 'debit' => 240000, 'credit' => 0, 'balance' => 382000, 'remarks' => 'INV-2026-115'],
                        ['date' => '2026-07-02', 'voucher' => 'SAL-118', 'desc' => 'Cotton 30s - 40 bags', 'debit' => 426000, 'credit' => 0, 'balance' => 808000, 'remarks' => 'INV-2026-118'],
                        ['date' => '2026-07-03', 'voucher' => 'RCP-019', 'desc' => 'Bank Transfer', 'debit' => 0, 'credit' => 438000, 'balance' => 370000, 'remarks' => 'EBL A/C'],
                    ] as $row)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition">
                            <td class="px-4 py-3 text-xs text-slate-500 whitespace-nowrap">{{ \Carbon\Carbon::parse($row['date'])->format('M d, Y') }}</td>
                            <td class="px-4 py-3 text-xs font-mono font-semibold text-emerald-600">{{ $row['voucher'] }}</td>
                            <td class="px-4 py-3 text-sm text-slate-700 dark:text-slate-300">{{ $row['desc'] }}</td>
                            <td class="px-4 py-3 text-right text-sm font-semibold text-rose-600 counter-num">
                                {{ $row['debit'] > 0 ? '৳' . number_format($row['debit']) : '—' }}
                            </td>
                            <td class="px-4 py-3 text-right text-sm font-semibold text-emerald-600 counter-num">
                                {{ $row['credit'] > 0 ? '৳' . number_format($row['credit']) : '—' }}
                            </td>
                            <td class="px-4 py-3 text-right text-sm font-bold text-slate-900 dark:text-white counter-num">
                                ৳{{ number_format($row['balance']) }}
                            </td>
                            <td class="px-4 py-3 text-xs text-slate-500">{{ $row['remarks'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="bg-slate-50 dark:bg-slate-900/50 border-t-2 border-slate-200 dark:border-slate-700">
                        <td colspan="3" class="px-4 py-3 text-sm font-bold text-right">Total</td>
                        <td class="px-4 py-3 text-right text-sm font-bold text-rose-600 counter-num">৳1,008,000</td>
                        <td class="px-4 py-3 text-right text-sm font-bold text-emerald-600 counter-num">৳638,000</td>
                        <td class="px-4 py-3 text-right text-sm font-bold text-amber-600 counter-num">৳370,000</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </x-card>
</div>
@endsection
