@php
    use App\Models\Setting;
    use Illuminate\Support\Str;

    $companyName = Setting::getValue('business.name', config('app.name', 'ISP Billing'));
    $companyPhone = Setting::getValue('business.phone', '');
    $companyEmail = Setting::getValue('business.email', '');
    $companyAddress = Setting::getValue('business.address', '');
    $companyLogo = Setting::getValue('business.logo');
    $currency = Setting::getValue('currency.symbol', '৳');
@endphp
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unpaid Invoice</title>
    <style>
        @page { size: A4; margin: 8mm; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, "Helvetica Neue", sans-serif; background: #f5f5f5; padding: 10px; color: #333; }
        .page { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; padding: 10mm 12mm; box-shadow: 0 0 10px rgba(0,0,0,.1); }
        .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 auto 16px; width: 210mm; }
        .toolbar h1 { font-size: 18px; }
        .toolbar p { font-size: 12px; color: #64748b; margin-top: 2px; }
        .toolbar-actions { display: flex; gap: 8px; }
        .toolbar-actions a, .toolbar-actions button { border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
        .toolbar-actions button { background: #dc2626; color: #fff; }
        .toolbar-actions a { background: #e2e8f0; color: #0f172a; }
        .copy-label { text-align: right; color: #b91c1c; font-weight: 700; font-size: 12px; margin-bottom: 4px; }
        .header { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
        .logo-circle, .logo-image { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; border: 2px solid #15803d; object-fit: cover; }
        .logo-circle { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4fc3f7 0%, #81c784 100%); color: #fff; font-size: 9px; font-weight: 700; }
        .company-name { color: #22c55e; font-size: 16px; font-weight: 700; }
        .company-info { font-size: 10px; line-height: 1.45; margin-bottom: 6px; padding-left: 44px; }
        .company-info .hotline { color: #dc2626; font-weight: 700; }
        .divider { border: 0; border-top: 1px solid #999; margin: 4px 0; }
        .customer-section { font-size: 10px; line-height: 1.55; margin-bottom: 8px; }
        .customer-row { display: grid; grid-template-columns: 80px 1fr; gap: 6px; }
        table { width: 100%; border-collapse: collapse; font-size: 10px; margin-bottom: 5px; }
        th, td { border: 1px solid #333; padding: 4px 6px; }
        th { background: #e5e7eb; text-align: center; font-weight: 700; }
        td { text-align: center; }
        td:nth-child(2) { text-align: left; }
        .total-section, .in-word, .footer-notes, .signature-line, .powered-by { font-size: 10px; }
        .total-section { text-align: right; font-weight: 700; margin-bottom: 2px; }
        .in-word { text-align: right; font-weight: 700; margin-bottom: 6px; }
        .footer-notes { color: #555; line-height: 1.45; margin-bottom: 8px; }
        .signature-line { text-align: right; margin-bottom: 2px; }
        .signature-line span { display: inline-block; border-bottom: 1px solid #333; width: 120px; margin-left: 6px; }
        .separator { border-top: 2px dotted #999; margin: 10px 0; }
        .powered-by { text-align: left; color: #666; margin-top: 4px; }
        .status-pill { display: inline-block; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 700; }
        .page-break { page-break-after: always; }
        @media print {
            body { background: #fff; padding: 0; margin: 0; }
            .toolbar { display: none !important; }
            .page { box-shadow: none; padding: 8mm 10mm; width: 100%; min-height: auto; margin: 0; }
        }
    </style>
</head>
<body>
    <div class="toolbar no-print">
        <div>
            <h1>Unpaid Invoice</h1>
            <p>Generated: {{ now()->format('Y-m-d H:i') }}</p>
        </div>
        <div class="toolbar-actions">
            <button onclick="window.print()">Print</button>
            <a href="{{ url('admin/billings') }}">Back</a>
        </div>
    </div>

    @foreach($billings as $billing)
        @php
            $customer = $billing->customer;
            $monthLabel = optional($billing->due_date)->format('F Y') ?: now()->format('F Y');
            $monthShort = optional($billing->due_date)->format('F') ?: now()->format('F');
            $invoiceNo = $billing->id.'-'.optional($billing->created_at)->format('YmdHis');
            $currentBill = (float) ($billing->amount ?? $customer->monthly_bill ?? 0);
            $previousDue = (float) ($billing->previous_due ?? 0);
            $paidAmount = (float) ($billing->paid_amount ?? 0);
            $totalDue = (float) ($billing->due_amount ?? max(0, ($currentBill + $previousDue) - $paidAmount));
            $packageLabel = $customer->package->name ?? ($customer->package->mikrotik_profile_name ?? 'N/A');
            $note = $billing->description ?: ($monthLabel.' bill');
        @endphp
        <div class="page">
            <div class="copy">
                <div class="copy-label">Customer Copy</div>
                <div class="header">
                    @if($companyLogo)
                        <img class="logo-image" src="{{ asset('storage/'.$companyLogo) }}" alt="Logo">
                    @else
                        <div class="logo-circle">{{ strtoupper(Str::limit($companyName, 5, '')) }}</div>
                    @endif
                    <div class="company-name">{{ $companyName }}</div>
                </div>
                <div class="company-info">
                    {{ $companyAddress ?: 'Address not set' }}<br>
                    @if($companyPhone)<span class="hotline">Hotline: {{ $companyPhone }}</span><br>@endif
                    {{ $companyEmail ?: 'Email not set' }}
                </div>
                <hr class="divider">
                <div class="customer-section">
                    <div class="customer-row"><strong>Status:</strong><span><span class="status-pill">UNPAID</span></span></div>
                    <div class="customer-row"><strong>Name:</strong><span>{{ $customer->name ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Mobile:</strong><span>{{ $customer->contact_phone ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Address:</strong><span>{{ $customer->office_address ?: 'N/A' }}</span></div>
                    <div class="customer-row"><strong>IP / User:</strong><span>{{ $customer->ip_address ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Customer ID:</strong><span>{{ $customer->customer_code ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Invoice No:</strong><span>{{ $invoiceNo }}</span></div>
                    <div class="customer-row"><strong>Date:</strong><span>{{ optional($billing->created_at)->format('Y-m-d') }}</span></div>
                    <div class="customer-row"><strong>Total Due:</strong><span>{{ number_format($totalDue, 2) }} {{ $currency }}</span></div>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th style="width:8%">SL</th>
                            <th style="width:42%">Description</th>
                            <th style="width:15%">Month</th>
                            <th style="width:15%">Speed/Pack</th>
                            <th style="width:20%">Bill Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>{{ $note }}</td>
                            <td>{{ $monthShort }}</td>
                            <td>{{ $packageLabel }}</td>
                            <td>{{ number_format($currentBill, 2) }}</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Previous Due</td>
                            <td>--</td>
                            <td>--</td>
                            <td>{{ number_format($previousDue, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="total-section">Total Due: {{ number_format($totalDue, 2) }} {{ $currency }}</div>
                <div class="in-word">Billing Month: {{ $monthLabel }}</div>
                <div class="footer-notes">
                    * Please clear the due before the disconnect date to avoid service interruption.<br>
                    * This is a system generated unpaid invoice.
                </div>
                <div class="signature-line">Signature: <span></span></div>
            </div>
            <div class="separator"></div>
            <div class="copy">
                <div class="copy-label">Office Copy</div>
                <div class="header">
                    @if($companyLogo)
                        <img class="logo-image" src="{{ asset('storage/'.$companyLogo) }}" alt="Logo">
                    @else
                        <div class="logo-circle">{{ strtoupper(Str::limit($companyName, 5, '')) }}</div>
                    @endif
                    <div class="company-name">{{ $companyName }}</div>
                </div>
                <div class="company-info">
                    {{ $companyAddress ?: 'Address not set' }}<br>
                    @if($companyPhone)<span class="hotline">Hotline: {{ $companyPhone }}</span><br>@endif
                    {{ $companyEmail ?: 'Email not set' }}
                </div>
                <hr class="divider">
                <div class="customer-section">
                    <div class="customer-row"><strong>Status:</strong><span><span class="status-pill">UNPAID</span></span></div>
                    <div class="customer-row"><strong>Name:</strong><span>{{ $customer->name ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Mobile:</strong><span>{{ $customer->contact_phone ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Address:</strong><span>{{ $customer->office_address ?: 'N/A' }}</span></div>
                    <div class="customer-row"><strong>IP / User:</strong><span>{{ $customer->ip_address ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Customer ID:</strong><span>{{ $customer->customer_code ?? 'N/A' }}</span></div>
                    <div class="customer-row"><strong>Invoice No:</strong><span>{{ $invoiceNo }}</span></div>
                    <div class="customer-row"><strong>Date:</strong><span>{{ optional($billing->created_at)->format('Y-m-d') }}</span></div>
                    <div class="customer-row"><strong>Total Due:</strong><span>{{ number_format($totalDue, 2) }} {{ $currency }}</span></div>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th style="width:8%">SL</th>
                            <th style="width:42%">Description</th>
                            <th style="width:15%">Month</th>
                            <th style="width:15%">Speed/Pack</th>
                            <th style="width:20%">Bill Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>{{ $note }}</td>
                            <td>{{ $monthShort }}</td>
                            <td>{{ $packageLabel }}</td>
                            <td>{{ number_format($currentBill, 2) }}</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Previous Due</td>
                            <td>--</td>
                            <td>--</td>
                            <td>{{ number_format($previousDue, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="total-section">Total Due: {{ number_format($totalDue, 2) }} {{ $currency }}</div>
                <div class="in-word">Billing Month: {{ $monthLabel }}</div>
                <div class="footer-notes">
                    * Please clear the due before the disconnect date to avoid service interruption.<br>
                    * This is a system generated unpaid invoice.
                </div>
                <div class="signature-line">Signature: <span></span></div>
                
            </div>
        </div>
        @if(!$loop->last)<div class="page-break"></div>@endif
    @endforeach
    <script>window.onload=function(){window.print();};</script>
</body>
</html>
