<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

        <!--<title >طباعة الفاتوره</title>-->

        <style>
            html {
                font-size: 10px;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            body {
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-size: 12px;
                line-height: 1.42857143;
                color: #333;
                background-color: #fff;
            }



            @media print {
                #items th {
                    background: #c8e3f5 !important;
                    border: 1px solid #9c9999;
                    border-style: double;
                }
            }

            * {
                margin: 0;
                padding: 0;
            }

            #page-wrap {
                width: 98%;
                margin: 0 auto;
            }

            table {
                border-collapse: collapse;
            }

            table td,
            table th {
                padding: 0;
                vertical-align: middle;
                text-align: center;
            }

            .info-bill {
                width: 40%;

            }

            .info-table {
                width: 30%;
                float: left;
                margin-top: 2px
            }

            .info-table {
                clear: both;
                margin-top: 0 !important
            }

            .info-table .foot {
                background-color: #c8e3f5
            }

            .info-table {

                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
                margin-top: 10px
            }

            .info-table .head {
                border-bottom: 1px solid #008bd2
            }

            .info-table .head h3 {
                display: inline-block;
                border-left: 1px solid #008bd2;
                width: 30%;
                background-color: #c8e3f5;
                padding-right: 5px
            }

            .info-table .head h3 {
                background-color: transparent;
                width: 40%
            }

            .border {
                border: 1px solid #008bd2
            }

            table {
                width: 100%
            }

            #items {
                clear: both;
                width: 100%;
                margin: 0;
                border: 1px solid #9c9999;
                border-style: double;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            #items th,
            td {
                border: 1px solid #9c9999;
                border-style: double;
            }

            #items td {
                background-color: #eeeeee;
                font-size: 16px;
                font-weight: bold;
            }

            .red {
                background-color: #c0c0c0 !important;
                color: #06067a !important;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .red th {
                font-size: 13px
            }


            table td,
            table th {
                border: 1px solid #9c9999;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .bill-head {
                background-color: #008bd2 !important;
                border: 1px solid #008bd2 !important;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .bg-grey {
                background-color: #e0e0e0 !important;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .foot-color {
                color: #008ed3;
                font-weight: bold;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            table span {
                color: #444;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .head table td {
                text-align: right;
                border: 0
            }

            .topDiv {
                border: 1px solid black;
                border-radius: 15px;
                padding: 0;
                font-size: 12px;
                font-weight: bolder;
                margin: 0px 0px;
            }

            .topDiv td {
                font-size: 12px;
                font-weight: bolder;
            }

            .footer {
                border-top: 2px solid #ccc;
                padding: 10px 20px;
                font-size: 14px;
                background: #fff;
                bottom: 0px;
                margin-top: 30px;
                margin-left: 4px;
                width: 98%;
                margin: 0px 1%;
                text-align: center;
                color: #444;
                text-decoration: uppercase;
                padding: 4px 0px 17px;
                margin-bottom: 0;
                border-top: 1px solid #444;

                position: fixed;
            }

            .contact-icons {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .contact-icons a {
                text-decoration: none;
                color: blue;
                font-weight: bold;
            }

            .social-icons {
                display: flex;
                gap: 10px;
            }

            .social-icons i {
                font-size: 20px;
                border: 1px solid black;
                padding: 5px;
                border-radius: 5px;
            }

            .phone-icon {
                font-size: 18px;
                margin-left: 5px;
            }

            .page-number {
                text-align: center;
                flex-grow: 1;
                font-weight: bold;
            }

            @page {
                @bottom-center {
                    content: counter(page) "/" counter(pages);
                    vertical-align: top; /* or middle, or bottom */
                }
            }
        </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()" id="printdiv">
        <table>
            <tbody>
                <tr>
                    <td style="border: 0; padding: 0;">
                        <div id="page-wrap">

                            <!--            <div id="header" class="bill-head"
                                                 style="font-size:18px;font-weight: bold;width: 100%;text-align: center;color: white;font: bold 15px ;text-decoration: uppercase;padding:5px 0px 10px; margin-bottom: 5px">
                                                إذن  ص .ب من ({$sellbillData->storeName})</div>-->


                            <div class="head" style="margin-bottom: 0px;">
                                <table style="width: 100%;text-align: center;border: 0;">
                                    <tr>
                                        <td>
                                            <img src="../views/default/images/upload/{$Programsettingdata->headerPrint12Right}" alt="" height="50px" width="90%">
                                        </td>
                                        <td style="text-align: center;">
                                            <h2 style="    background-color: #e4e4e4;display: inline-block;padding: 9px 30px;font-size: 21px;">{$billName['name']}</h2><!--فاتورة نقدا-->
                                            <h4>{$sellbillData->storeName}</h4>
                                            <!-- <h5>{$sellbillData->storeDescription}</h5> -->
                                        </td>
                                        <td>
                                            <img src="../views/default/images/upload/{$Programsettingdata->headerPrint12Left}" alt="" height="50px" width="90%">
                                        </td>
                                    </tr>
                                </table>
                                <div class="topDiv">
                                    <table>
                                        <tr>
                                            <td>
                                                <h3 style="display: inline-block;padding-right: 5px"><!--height:24px;line-height:27px;-->
                                                    التاريــــــخ: <span>{$sellbillData->sellbilldateOnly}</span></h3>
                                            </td>
                                            <td>
                                                <h3 style=";display: inline-block;padding-right: 5px">
                                                    رقــــــــم :<span> ( {$sellbillData->sellbillid} ) </span></h3>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h3 style=";display: inline-block;padding-right: 5px">
                                                    اسم العميل: <span>{$sellbillData->tempclientName}</span></h3>
                                            </td>
                                            <td>
                                                <h3 style=";display: inline-block;padding-right: 5px">
                                                    كود العميل: <span>{$clientdata->clientcode}</span></h3>
                                            </td>

                                        </tr>
                                        <tr>


                                            <td>
                                                <h3 style=";display: inline-block;padding-right: 5px">
                                                    ملاحظات: <span>{$sellbillData->comment}</span></h3>
                                            </td>
                                            <td>
                                                <h3 style=";display: inline-block;padding-right: 5px">
                                                    محمول: <span>{$clientdata->clientmobile}</span></h3>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <p style="text-align: center; vertical-align: middle;">
                                                    ((البضاعة لا ترد ولا تستبدل إلا بالفاتورة خلال 14 يوم))
                                                </p>

                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            <table id="items" style="margin-bottom:5px;margin-top: 5px;">

                                <thead class="red">
                                    <tr>
                                        <th>م </th>
                                        <th>اسم الصنف</th>
                                        <!--<th>كود التلوين</th>-->
                                        <th>الكميه</th>
                                        <th>السعر</th>
                                        <th>الاجمالى</th>
                                    <tr>
                                </thead>
                                <tbody>
                                    {foreach $sellbilldetailData as $sellbilldetail}
                                    <tr class="item-row">
                                        <td class=""><span>{$sellbilldetail@index+1}</span></td>
                                        <td><span>{$sellbilldetail->productName}{if {$billsettingsData[60]->billsettingsvalue} eq 0}/
                                                {$sellbilldetail->productCatName}{/if}
                                                {if {$billsettingsData[79]->billsettingsvalue} eq 0}
                                                {if isset($sellbilldetail->sizeName) && $sellbilldetail->sizeName
                                                !=""}/{$sellbilldetail->sizeName}{/if}
                                                {if isset($sellbilldetail->colorName) && $sellbilldetail->colorName
                                                !=""}/{$sellbilldetail->colorName}{/if}
                                                {/if}

                                                {if $sellbilldetail->soldSerialsInDetails != ""} (sn:
                                                {$sellbilldetail->soldSerialsInDetails})
                                                {/if}</span></td>

                                        <!--<td><span>{$sellbilldetail->note}</span></td>-->
                                        <td><span>{$sellbilldetail->sellbilldetailquantity}</span></td>
                                        <td><span>{$sellbilldetail->sellbilldetailprice}</span></td>
                                        <td><span>{$sellbilldetail->sellbilldetailtotalprice}</span></td>
                                    </tr>
                                    {/foreach}
                                </tbody>

                                <!-- <tfoot>
                                        <tr class="item-row">
                                            <td colspan="2"><span></span></td>
                                            <td
                                                style="background-color:#f5f5f5;-webkit-print-color-adjust: exact; -moz-print-color-adjust: exact; print-color-adjust: exact;">
                                                <span>{$sellbillData->sellQuantity}</span>
                                            </td>
                                            <td style="background-color:#f5f5f5;-webkit-print-color-adjust: exact; -moz-print-color-adjust: exact; print-color-adjust: exact;"
                                                colspan="2"><span>{$totalWritten}</span></td>
                                            <td style="background-color:#f5f5f5;-webkit-print-color-adjust: exact; -moz-print-color-adjust: exact; print-color-adjust: exact;"
                                                colspan="3"><span>{$sellbillData->sellbillaftertotalbill}</span></td>
                                        </tr>
                                    </tfoot> -->

                            </table>


                            <div class="tfoot">
                                <div style="width: 40%;float: left; margin: 0;text-align: left;">
                                    <span style="width: 155px;text-decoration: underline;font-size: 14px;margin-inline-end: 7px;">المجموع
                                    </span>
                                    <span style="    border: 1px solid #000;
                                          display: inline-block;
                                          padding: 0px 0;
                                          text-align: center;
                                          width: 60%;
                                          font-weight: bold;
                                          font-size: 13px;
                                          ">{$sellbillData->sellbilltotalbill}</span>
                                </div>
                            </div>

                            <div style="clear:both"></div>

                            <div class="">
                                <div class="tfoot">

                                    <div style="width: 40%;float: left; margin: 3px 0 0;text-align: left;">
                                        <span
                                            style="width: 155px;text-decoration: underline;font-size: 11px;margin-inline-end: 7px;">قيمة الفاتوره
                                        </span>
                                        <span style="border: 1px solid #000;
                                              display: inline-block;
                                              padding: 0px 0;
                                              text-align: center;
                                              width: 60%;
                                              font-weight: bold;
                                              font-size: 13px;">{$sellbillData->sellbillaftertotalbill}</span>
                                    </div>
                                    <div style="width: 40%;float: left; margin: 3px 0 0;text-align: left;">
                                        <span style="width: 155px;text-decoration: underline;font-size: 14px;margin-inline-end: 7px;">خصم
                                        </span>
                                        <span style="border: 1px solid #000;
                                              display: inline-block;
                                              padding: 0px 0;
                                              text-align: center;
                                              width: 60%;
                                              font-weight: bold;
                                              font-size: 13px;">{$discountvalue}{if $sellbillData->sellbilldiscounttype eq
                                            2}(%{$sellbillData->sellbilldiscount}){/if}</span>
                                    </div>

                                    <div style="clear:both"></div>
                                </div>

                                <div class="tfoot">

                                    <div style="width: 40%;float: left; margin: 3px 0 0;text-align: left;">
                                        <span style="width: 155px;text-decoration: underline;font-size: 14px;margin-inline-end: 7px;">الباقى
                                        </span>
                                        <span style="border: 1px solid #000;
                                              display: inline-block;
                                              padding: 0px 0;
                                              text-align: center;
                                              width: 60%;
                                              font-weight: bold;
                                              font-size: 13px;">{$sellbillData->sellbillfinalbill}</span>
                                    </div>
                                    <div style="width: 40%;float: left; margin: 3px 0 0;text-align: left;">
                                        <span
                                            style="width: 155px;text-decoration: underline;font-size: 14px;margin-inline-end: 7px;">المدفوع
                                        </span>
                                        <span style="border: 1px solid #000;
                                              display: inline-block;
                                              padding: 0px 0;
                                              text-align: center;
                                              width: 60%;
                                              font-weight: bold;
                                              font-size: 13px;">{$sellbillData->sellbilltotalpayed}</span>
                                    </div>

                                    <div style="clear:both"></div>
                                </div>

                            </div>



                            <div style="display: flex;justify-content: space-between;margin: 6px 6px;">
                                <p style="width: 15%;text-align: right;font-size: 17px;font-weight: bold;">مراجعه / </p>
                                <p style="width: 50%;text-align: center;margin: 0;font-size: 17px;">{$totalWritten}</p>
                                <p style="font-size: 16px;border:2px solid #000;padding: 0px;float: right;width: 35%;font-weight: bold;text-align: center;">
                                    البضاعة المباعه شامله ض.م</p>

                            </div>

                        </div>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td style="border: 0; padding: 0;">
                        <!-- Footer Section -->
                        <div class="footer">
                            <!-- Contact Information -->
                            <div style="display: flex;justify-content: space-between;margin-bottom: 3px;">
                                <!-- Address -->
                                <div>
                                    <strong>العنوان :</strong>{$Programsettingdata->address}
                                </div>
                                <div class="contact-icons">
                                    <img src="../views/default/images/upload/phone.png" width="20">
                                    <a href="tel:0502356140">0502356140</a>
                                </div>
                            </div>

                            <div style="display: flex;justify-content: space-between;">
                                <div class="contact-icons">
                                    <img src="../views/default/images/upload/phone.png" width="20">
                                    <img src="../views/default/images/upload/whatsapp.png" width="20">
                                    <a href="tel:01099924600">{$Programsettingdata->phone} </a>
                                </div>
                                <!-- Social Icons -->
                                <div class="social-icons">
                                    <img src="../views/default/images/upload/tiktok.png" width="20">
                                    <img src="../views/default/images/upload/instagram.png" width="20">
                                    <img src="../views/default/images/upload/fb.png" width="20">
                                    <a href="#">@{$Programsettingdata->website}</a>
                                </div>
                            </div>







                            <!-- Page Number -->
                            <!--<div class="page-number"></div>--></td>
                </tr>






            </tfoot>
        </table>










    </div>

</body>

</html>