<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Account Summary</title>
    <style>
        /* @page {
            margin: 10px;
        } */

        @page {
            margin: 7px 7px 7px 7px;
            /* top, right, bottom, left */
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.4;
            color: #333;
            margin: 0px;
            padding: 8px 8px 0px 8px;
            border: 1px solid #16a7e0;
        }

        /* .invoice-container {
            max-width: 1000px;
            margin: 2px auto;    /* 5px gap around container */
        /* padding: 20px;       space INSIDE the border */

        /* border-radius: 8px; */
        /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
        /* } */

        .header {
            margin-bottom: 5px;
        }

        .header img {
            float: left;
            max-width: 150px;
        }

        .header h1 {
            float: right;
            color: #0858a1;
            margin: 0;
            font-size: 24px;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .clearfix p {
            padding: 0px;
        }

        .invoice-details {
            /* margin-bottom: 1rem; */
            font-size: 13px;
            position: relative;
        }

        .invoice-details .left {
            width: 60%;
            float: left;
        }

        .invoice-details .right {
            width: 40%;
            text-align: right;
            float: right;
        }

        .invoice-table {
            width: 100%;
            border-collapse: collapse;
            /* margin-bottom: 15px; */
            font-size: 10px;
        }

        .invoice-table th,
        .invoice-table td {
            border: 1px solid #ddd;
            padding: 5px;
            text-align: center;
        }

        .invoice-table th {
            background-color: #04acea;
            color: #fff;
        }

        .invoice-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .totals {
            text-align: right;
            font-size: 13px;
            margin: 2.5rem 0 -2rem 0;
        }

        .totals p {
            margin: 5px 0;
        }

        .totals div {
            display: inline-block;
        }

        /* .totals .final-amount {
            font-weight: bold;
            color: #0858a1;
        } */

        .totals .left {
            width: 60%;
        }

        .totals .center {
            width: 15%;
            text-align: right;
        }

        .totals .right {
            width: 20%;
            text-align: right;
        }

        .footer {
            text-align: left;
            margin-top: 15px;
            color: #505050;
            font-size: 12px;
        }

        .invoice-details p {
            line-height: 1.2;
        }

        .header h1 {
            border-bottom: 2px solid #04acea;
            padding-bottom: 5px;
        }

        .invoice-table th {
            border-bottom: 2px solid #04acea;
        }

        .footer p {
            line-height: 1;
        }

        .fix_width {
            width: "20%";
        }

    </style>
</head>

<body>
    <div class="invoice-container">
        <!-- Header -->
        <div class="header clearfix">
            <img src="{{ $data['base64'] }}" alt="Company Logo" style="width: 150px;">
        </div>

        <div class="invoice-details clearfix">
            <h1>Your Statement</h1>
            <div class="clearfix">
                <div class="right">
                    <table style="font-size: 12px; width: 100%;">
                        <tr>
                            <td><strong style="font-size: 14px;">Account Summary</strong></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Opening Balance</td>
                            <td style="text-align: right;">{{ $data['opening_balance'] }} Credits</td>
                        </tr>
                        <tr>
                            <td>Credits In</td>
                            <td style="text-align: right;">{{ $data['credits_in'] }} Credits</td>
                        </tr>
                        <tr>
                            <td>Credits Out</td>
                            <td style="text-align: right;">{{ $data['debits_out'] }} Credits</td>
                        </tr>
                        <tr>
                            <td>Closing Balance</td>
                            <td style="text-align: right;">{{ $data['closing_balance'] }} Credits</td>
                        </tr>
                    </table>
                </div>
                <div class="left">
                    <div>{{ $data['member']->name }}</div>
                    <div>{{ $data['member']->business_name }}</div>
                    <div>{{ $data['member']->business_address }},
                        {{ $data['member']->business_address_line_two }}</div>
                    <div>{{ $data['member']->business_post_code }}</div>
                    {{-- <p><strong>Account Number:</strong> {{ $data['member']->account_number }}</p> --}}
                </div>
            </div>
            <br>
            <div style="width: 100%; font-size: 12px; margin-bottom: 10px;">
                <div style="float: left;">
                    <strong>Account Number:</strong> 503001
                </div>
                <div style="float: right;">
                    <strong>Date Range:</strong> {{ \Carbon\Carbon::parse($data['start_date'])->format('d-M-y') }} to {{\Carbon\Carbon::parse($data['end_date'])->format('d-M-y') }}
                </div>
                <div style="clear: both;"></div>
            </div>

            <table class="invoice-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['tabledata'] as $txn)
                        <tr>
                            <td style="width: 8%;">{{ \Carbon\Carbon::parse($txn->date)->format('d-M-y') }}</td>
                            <td style="width: 8%;">{{ \Carbon\Carbon::parse($txn->time)->format('H:i:s') }}</td>
                            <td style="width: 5%;">{{ $txn->area_code ?? '' }}</td>
                            <td>{{ $txn->area_name ?? '' }}</td>
                            <td  style="width: 8%;">{{ $txn->vrm ?? '' }}</td>
                            <td >{{ $txn->make ?? '' }}</td>
                            <td>{{ \Illuminate\Support\Str::limit($txn->model, 10, '...') }} </td>
                            <td style="width: 8%;">{{ $txn->debit ?? '' }}</td>
                            <td style="width: 8%;">{{ $txn->credit ?? '' }}</td>
                            <td style="width: 8%;">{{ $txn->balance ?? '' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="no-data">No data available</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="footer">
                {!! $data['footer'] !!}
            </div>
        </div>

       <script type="text/php">
    $font = $fontMetrics->get_font("Arial", "normal");
    $size = 8;
    $text = "Page $PAGE_NUM of $PAGE_COUNT";
    $width = $pdf->get_width();
    $textWidth = $fontMetrics->getTextWidth($text, $font, $size);
    $x = ($width - $textWidth) / 2;
    $y = 820; // adjust bottom margin
    $pdf->text($x, $y, $text, $font, $size);
</script>
    </body>

</html>
