{{!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <style>
        @page {
            size: A4 landscape;
            margin: 1cm;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            margin: 0 auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        thead {
            position: sticky;
            top: 0;
            background-color: #6e6c6c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Balance Sheet</h1>
        <table>
            <thead>
                <tr>
                    <th>Account ID</th>
                    <th>Account Name</th>
                    <th>Account Type</th>
                    <th>Initial Balance (Debit)</th>
                    <th>Initial Balance (Credit)</th>
                    <th>Between Balance (Debit)</th>
                    <th>Between Balance (Credit)</th>
                    <th>Ending Balance (Debit)</th>
                    <th>Ending Balance (Credit)</th>
                </tr>
            </thead>
            <tbody>
                {{#each accounts}}
                <tr>
                    <td>{{this.id}}</td>
                    <td>{{this.accountName}}</td>
                    <td>{{this.accountType}}</td>
                    <td>{{this.initial_balance_debit}}</td>
                    <td>{{this.initial_balance_credit}}</td>
                    <td>{{this.between_debit}}</td>
                    <td>{{this.between_credit}}</td>
                    <td>{{this.ending_balance_debit}}</td>
                    <td>{{this.ending_balance_credit}}</td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</body>
</html> --}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">
    <title>ميزان المراجعة</title>
    <style>
    .cairo-<uniquifier> {
        font-family: "Cairo", sans-serif;
        font-optical-sizing: 10;
        font-weight: 100;
        font-style: normal;
        font-variation-settings:
            "slnt" 0;
        }
        @page {
            size: A4 landscape;
            margin: 1cm;
        }
        @media print {
    .page-break { 
        page-break-before: always; 
    }
}
        body {
            font-family: cairo, sans-serif;
            margin: 0;
            padding: 0;
            direction: rtl;
        }
        .container {
            width: 100%;
            margin: 0 auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
            font-size: 7px;
        }
        thead {
            position: sticky;
            top: 0;
            background-color: #6e6c6c;
            font-size: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3 align="center">ميزان المراجعة</h1>
        <table>
            <thead>
                <tr>
                    <th rowspan="2">كود الحساب</th>
                    <th rowspan="2">اسم الحساب</th>
                    <th rowspan="2">نوع الحساب</th>
                    <th colspan="2">رصيد اول المدة</th>
                    <th colspan="2">الحركات</th>
                    <th colspan="2">رصيد نهاية المدة</th>
                    
                </tr>
                <tr>
                    <th>مدين</th>
                    <th>دائن</th>
                    <th>مدين</th>
                    <th>دائن</th>
                    <th>مدين</th>
                    <th>دائن</th>
                </tr>
            </thead>
            <tbody>
                {{#each accounts}}
                <tr class="page-break">
                    <td>{{this.id}}</td>
                    <td>{{this.accountName}}</td>
                    <td>{{this.accountType}}</td>
                    <td>{{this.initial_balance_debit}}</td>
                    <td>{{this.initial_balance_credit}}</td>
                    <td>{{this.between_debit}}</td>
                    <td>{{this.between_credit}}</td>
                    <td>{{this.ending_balance_debit}}</td>
                    <td>{{this.ending_balance_credit}}</td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</body>
</html>
