<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>A4 Receipt</title>
        <style>
            @media print {
                @page {
                    size: 100mm 200mm landscape;
                    /* landscape */
                    /* you can also specify margins here: */
                    margin: 0mm;
                    margin-right: 0mm;
                    /* for compatibility with both A4 and Letter */
                }

                #printdiv {
                    margin-top: {
                        $billsettingsData[82]->billsettingsvalue
                    }

                    mm;
                    /* user margin */
                }
            }
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Arial', sans-serif;
            }

            body {
                background-color: #f8f8f8;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }

            .a4-container {
                /* width: 21cm;
                height: 29.7cm; */
                padding: 1cm; /* Margin inside A4 */
                background-color: #fff;
            }

            .receipt-container {
                width: 100%;
                background-color: #fff;
                font-size: 14px;
                color: #000;
                text-align: right;
            }

            header {
                text-align: center;
                margin-bottom: 1cm;
            }

            header h1 {
                font-size: 30px;
                font-weight: bold;
                margin-top: 0.5cm;
                border: 1px solid #000;
                padding: 10px;
            }

            .details {
                margin-bottom: 0; /*2cm;*/
            }

            .detail-row {
                margin-bottom: 0.5cm;
                display: flex;
                justify-content: space-between;
                font-size: 17px;
            }
            .detail-row span{
                width: 50%;
                text-align: center;
            }
            footer {
                text-align: center;
                font-size: 16px;
                margin-top: 0;/*2cm;*/
            }

            footer .time {
                margin-top: 0.2cm;
                font-size: 14px;
                color: #555;
            }

            .bold{
                font-weight: bold;
                font-size: 20px;
            }

        </style>
        {literal}
        <script language="javascript" type="text/javascript">
            /*$(document).ready(function() {
             //window.print();

             // printDiv();
             });*/
            function printDiv() {
                var divId = document.getElementById('printdiv');
                divId.setAttribute("className", "print_section print");
                divId.setAttribute("class", "print_section print");
                window.print();
                setTimeout(window.close, 0);

                // window.close();
            }
        </script>
        {/literal}
    </head>
    <body dir="rtl" onLoad="printDiv()">
        <div class="a4-container" id="printdiv">
            <div class="receipt-container">
                <header>
                    <div class="logo">
                        <img src="../views/default/images/upload/{$Programsettingdata->logo}" style="width: 100%; height: 100px;">
                    </div>
                    <h1>
                        {if $type== 1}
                        إيصال دفع قيمة مرتجع
                        {else}
                        إيصال تحصيل قيمة فاتوره
                        {/if}</h1>
                </header>

                <section class="details">
                    <div class="detail-row">
                        <span class="bold">التاريخ: </span><span>{$todayDate}</span>
                    </div>
                    <div class="detail-row">
                        <span class="bold">{if $type== 1}مرتجع{else}فاتوره{/if} رقم: </span><span>{$billId}</span>
                    </div>
                    <div class="detail-row">
                        <span class="bold">سداد الى السيد: </span><span>{$clientName}</span>
                    </div>
                    <div class="detail-row">
                        <span class="bold">قيمة المسدد: </span><span>{$moneyPayed}</span>
                    </div>
                    <div class="detail-row">
                        <span class="bold">خدمه: </span><span>{$serviceMoneyPaid}</span>
                    </div>
                    <div class="detail-row">
                        <span class="bold">الاجمالى: </span><span>{$moneyPayed+$serviceMoneyPaid}</span>
                    </div>
                </section>

                <footer>
                    <p>{$totalWritten}</p>
                    <p class="time">{$todayTime}</p>
                </footer>
            </div>
        </div>
    </body>
</html>
