<!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>
            * {
                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: .2cm;
            }

            header h1 {
                font-size: 24px;
                font-weight: bold;
            }

            header .info {
                font-size: 20px;
                margin-top: 0.5cm;
                border: 2px solid #000;
                padding: 10px;
                background-color: #e4e4e4;
                position: relative;
            }
            header .info:after{
                position: absolute;
                width: 103%;
                height: 103%;
                background-color:#e4e4e4 ;
                border: 2px solid #000;
            }

            .details {
                margin-bottom: 2cm;
            }

            .detail-row {
                margin-bottom: 0.1cm;
                display: flex
                    ;
                justify-content: space-between;
                font-size: 18px;
            }
            .detail-row span{
                width: 70%;
                text-align: center;
                height: 37px;
                line-height: 1.8;
            }
            .detail-row span:first-child{
                width: 30%;
            }
            footer {
                text-align: center;
                font-size: 18px;
                margin-top: -1cm;
            }

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

        </style>


        <script>
            $(document).ready(function (e) {
                window.print();
            });
        </script>
    </head>
    <body dir="rtl">
        <div class="a4-container">
            <div class="receipt-container">
                <header>
                    <div class="logo">
                        <img src="../views/default/images/upload/{$Programsettingdata->logo}" height="49" style="width: 100%;">
                    </div>
                    <div class="info" style="display:flex;justify-content:space-between;">
                        <h3 >إيصال  تحصيل نقدية </h3>
                        <div style="width: 30%;">
                            رقم {$clientdebtchangeData->clientdebtchangemodelid}
                        </div>
                    </div>


                </header>

                <section class="details">
                    <div class="detail-row">
                        <span style="background-color: #e4e4e4;border:1px solid #444">التاريخ</span><span style="border:1px solid #ddd">{$clientdebtchangeData->clientdebtchangedate}</span>
                    </div>
                    <div class="detail-row">
                        <span style="background-color: #e4e4e4;border:1px solid #444"> اسم العميل</span><span style="border:1px solid #ddd">
                            {foreach $clientsData as $data}
                            {if {$data->clientid} eq {$clientdebtchangeData->clientid}} {$data->clientname} {/if}

                            {/foreach}
                        </span>
                    </div>
                    <div class="detail-row">
                        <span style="background-color: #e4e4e4;border:1px solid #444">البيان   </span><span style="border:1px solid #ddd">{$clientdebtchangeData->comment}</span>
                    </div>
                    <div class="detail-row">
                        <span style="background-color: #e4e4e4;border:1px solid #444"> المدفوع</span><span style="background-color: #97bdfc;border:1px solid #ddd">{$clientdebtchangeData->clientdebtchangeamount}</span>
                    </div>
                </section>

                <footer style="border:1px solid #ddd;height:40px;line-height: 2;">
                    <p style="font-weight: bold;">{$ar_number}</p>
                </footer>

                <p style="font-size: 17px;text-align: center;font-weight: bold;margin-top: 30px;">المستخدم: {$user->employeename}</p>
            </div>
        </div>
    </body>
</html>
