<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Monthly Statement Report</title>
    <style>
        /* General Reset */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: DejaVu Sans, Arial, sans-serif; /* PDF-safe font */
            margin: 20px;
            font-size: 13px;
            color: #000;
        }

        h1 {
            font-size: 20px;
            font-weight: bold;
            text-align: left;
            margin-bottom: 10px;
        }

        .statement-header {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .statement-header .left {
            width: 50%;
            float: left;
            line-height: 1.4;
        }

        .statement-header .right {
            width: 45%;
            float: right;
            background-color: #f9f9f9;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 6px;
        }

        .statement-header h4 {
            margin-top: 0;
            margin-bottom: 6px;
            font-size: 14px;
            font-weight: bold;
            text-decoration: underline;
        }

        .statement-header p {
            margin: 2px 0;
        }

        .account-number,
        .date-range {
            font-weight: bold;
            margin-bottom: 8px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 12px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 6px 8px;
            text-align: left;
            vertical-align: top;
            word-wrap: break-word;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        tr:nth-child(even) {
            background-color: #fafafa;
        }

        /* Page break handling for large reports */
        @page {
            margin: 20px;
        }

        @media print {
            body {
                margin: 0;
            }

            table {
                page-break-inside: auto;
            }

            tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }
        }

        /* Clear floats */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <h1>Your Statement</h1>

    <div class="statement-header clearfix">
        <div class="left">
            <p>{{ $data['member']?->business_name }}</p>
            <p>{{ $data['member']?->business_address }}</p>
            <p>{{ $data['member']?->business_address_line_two }}</p>
        </div>
        <div class="right">
            <h4>Account Summary</h4>
            <p>Opening Balance: <strong>{{ $data['opening_balance'] ?? 0 }}</strong></p>
            <p>Credits IN: <strong>{{ $data['credits_in'] ?? 0 }}</strong></p>
            <p>Credits OUT: <strong>{{ $data['debits_out'] ?? 0 }}</strong></p>
            <p>Closing Balance: <strong>{{ $data['closing_balance'] ?? 0 }}</strong></p>
        </div>
    </div>

    {{-- <div class="account-number">
        Account Number: {{ $data['member']?->account_number ?? '-' }}
    </div>

    <div class="date-range">
        Date Range:
        {{ \Carbon\Carbon::parse($data['start_date'])->format('d-M-y') }}
        to
        {{ \Carbon\Carbon::parse($data['end_date'])->format('d-M-y') }}
    </div> --}}

    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Code</th>
                <th>Description</th>
                <th>VRM</th>
                <th>Make</th>
                <th>Model</th>
                <th>Debit</th>
                <th>Credit</th>
                <th>Balance</th>
            </tr>
        </thead>
        <tbody>
            @forelse($data['report'] as $report)
                <tr>
                    <td>{{ \Carbon\Carbon::parse($report->date)->format('d-M-y') }}</td>
                    <td>{{ $report->time ?? '-' }}</td>
                    <td>{{ $report->area_code ?? '-' }}</td>
                    <td>{{ $report->area_name ?? '-' }}</td>
                    <td>{{ $report->vrm ?? '-' }}</td>
                    <td>{{ $report->make ?? '-' }}</td>
                    <td>
                        {{ strlen($report->model ?? '') > 15 
                            ? substr($report->model, 0, 15) . '...' 
                            : ($report->model ?? '-') }}
                    </td>
                    <td>{{ $report->debit ?? '-' }}</td>
                    <td>{{ $report->credit ?? '-' }}</td>
                    <td>{{ $report->balance ?? '-' }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="10" style="text-align:center;">No records found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</body>
</html>
