<html dir="rtl">
    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>GT4</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 */
                    /* size: 139mm 215mm;
  height: 215mm;
  width: 139mm; */
                }

            }
            table.info tr{
                width:100%;
            }



            .body{
                direction: rtl
            }
            td{
                margin: 0
            }

            .table-black1 tbody>tr>td {

                vertical-align: middle;
                text-align: center;
                border: 1px solid #000;
            }

            .result,.result tr,.result tr td{
                border:1px solid #000
            }
            .td td
            {
                border-right-widtd: 1px;
                border-bottom-widtd: 1px;
                border-left-widtd: 0px;
                border-top-style: none;
                border-right-style: dotted;
                border-bottom-style: solid;
                border-left-style: none;
                border-bottom-color: #999;
                font-size: 17px;
                border-right-color: #999;
            }
            .NEE
            {
                font-size: 14px;
            }
            .newdesign
            {
                font-size: 14px;
            }
            .copywrites
            {
                font-size: 11px;
            }
            td{
                margin: 0!important
            }


        </style>


        <style>
            td{
                font-size:15px;
                font-weight: 200;
                padding: 0 2px

            }
            .td td
            {
                border-right-width: 1px;
                border-bottom-width: 1px;
                border-left-width: 0px;
                border-top-style: none;
                border-right-style: dotted;
                border-bottom-style: solid;
                border-left-style: none;
                border-bottom-color: #999;
                font-size: 17px;
                border-right-color: #999;
                padding: 0 2px
            }
            .NEE
            {
                font-size: 14px;
            }
            .newdesign
            {
                font-size: 14px;
            }
            .copywrites
            {
                font-size: 11px;
            }
        </style>
        <style>
            .td td
            {
                border-right-width: 1px;
                border-bottom-width: 1px;
                border-left-width: 0px;
                border-top-style: none;
                border-right-style: dotted;
                border-bottom-style: solid;
                border-left-style: none;
                border-bottom-color: #999;
                font-size: 18px;
                border-right-color: #999;
                padding: 0 2px
            }
            .NEE
            {
                font-size: 14px;
            }
            .newdesign
            {
                font-size: 14px;
            }
            .copywrites
            {
                font-size: 11px;
            }
            .style2 {
                font-family: tahoma
            }
            .style4 {
                font-family: tahoma; font-size: 14px; font-weight: bold;
                border: 1px solid  #999  !important;
            }
            .serial {
                background-color: #C8C8C8;
                height: 20px;
                width: 150px;
                padding: 5px;
                margin: 5px;
                border: medium double #000000;
                text-align: center;
            }
            .style1 {
                font-size: 15px
            }
            .style-num {
                font-size: 12px
            }
            table.data td{
                border:1px solid #000;
                text-align: center;
            }
            td{
                font-size:13px;
                padding: 0 2px
            }
            .table-last td{
                border:1px solid #444;
                text-align: center;
            }
        </style>


        <script src="../views/default/assets/js/jquery.js"></script>
        <script language="javascript" type="text/javascript">
            /*$(document).ready(function() {
             //window.print();

             // printDiv();
             });*/
            function printDiv() {
                var sellDataArr = JSON.parse(localStorage.getItem('sellDataArr'));
                var retDataArr = JSON.parse(localStorage.getItem('retDataArr'));
                var theComment = localStorage.getItem('theComment');

                if (theComment && theComment != "") {
                    $('#theComment').show();
                    $('#theCommentText').text(theComment);
                } else {
                    $('#theComment').hide();
                }
                var sellTotal = 0;
                var html = '';
                sellDataArr.forEach(function (val) {
                    html += '<tr>' +
                            '    <td align="center" class="style2 style-num">' + val.total + '</td>' +
                            '    <td align="center" class="style2 style1">' + val.client + '</td>' +
                            '    <td align="center" class="style2 style-num">' + val.id + '</td>' +
                            '</tr>';
                    sellTotal += Number(val.total);
                });
                $('#sellTbody').html(html);

                var retTotal = 0;
                var html = '';
                retDataArr.forEach(function (val) {
                    html += '<tr>' +
                            '    <td align="center" class="style2 style-num">' + val.total + '</td>' +
                            '    <td align="center" class="style2 style1">' + val.client + '</td>' +
                            '    <td align="center" class="style2 style-num">' + val.id + '</td>' +
                            '</tr>';
                    retTotal += Number(val.total);
                });
                $('#retTbody').html(html);


                $('#sellTotal').html(sellTotal);
                $('#retTotal').html(retTotal);
                $('#netTotal').html(sellTotal - retTotal);


                if (sellDataArr.length > 0) {
                    $('#sellPart').show();
                } else {
                    $('#sellPart').hide();
                }
                if (retDataArr.length > 0) {
                    $('#retPart').show();
                } else {
                    $('#retPart').hide();
                }

                if (sellDataArr.length > 0 && retDataArr.length > 0) {
                    $('#netPart').show();
                } else {
                    $('#netPart').hide();
                }






                var divId = document.getElementById('printdiv');
                divId.setAttribute("className", "print_section print");
                divId.setAttribute("class", "print_section print");
                window.print();
                setTimeout(window.close, 0);
                localStorage.removeItem("sellDataArr");
                localStorage.removeItem("sellDataArr");
                localStorage.removeItem("theComment");
                //window.close();
            }
        </script>
    </head>




    <body onLoad="printDiv()">
        <div  id="printdiv" >

            <b>
                <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="table-black">
                    <tr>
                        <td colspan="2" align="center" class="style1">
                            <img src="{$logoImageSrc}" alt="" width="134" height="49">
                            {*$Programsettingdata->phone*}
                        </td>
                    </tr>
                    <tr>
                        <td align="center" style="font-family: tahoma; font-size: 14px;">
                            <label style="font-weight: bold">المراجع:</label>{$userData->employeename}
                        </td>
                        <td align="center" style="font-family: tahoma; font-size: 14px;">
                            <label style="font-weight: bold">تاريخ المراجعه:</label>{$now}
                        </td>
                    </tr>
                </table>

            </b>
            <div style="clear:both"></div>
            <br/>
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <b id="sellPart">
                <h2 style="text-align: center;margin: 0">فواتير المبيعات</h2>
                <table width="100%" border="0" cellpadding="" cellspacing="" class="table-black1" style="direction: ltr">
                    <tr>
                        <td align="center" bgcolor="#B4B4B4" class="style4">الاجمالى</td>
                        <td align="center" bgcolor="#B4B4B4" width="50%"  class="style4">العميل</td>
                        <td align="right" bgcolor="#B4B4B4" class="style4">رقم الفاتورة </td>
                    </tr>
                    <tbody id="sellTbody">

                    </tbody>

                </table>
                <!--                <hr style="background-color: #000">-->
                <table width="30%" border="" cellpadding="0" cellspacing="" class="result" style="float:left">
                    <tr>
                        <td align="center" bgcolor="#B4B4B4" class="style1" width="50%">اجمالى المبيعات</td>
                        <td align="center" class="style1" width="50%" id="sellTotal"></td>
                    </tr>
                </table>
            </b>
            <div style="clear:both"></div>
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <b id="separatePart"></b>
            <b id="retPart">
                <h2 style="text-align: center;margin: 0">فواتير المرتجعات</h2>
                <table width="100%" border="0" cellpadding="" cellspacing="" class="table-black1" style="direction: ltr">
                    <tr>
                        <td align="center" bgcolor="#B4B4B4" class="style4">الاجمالى</td>
                        <td align="center" bgcolor="#B4B4B4" width="50%"  class="style4">العميل</td>
                        <td align="right" bgcolor="#B4B4B4" class="style4">رقم الفاتورة </td>
                    </tr>
                    <tbody id="retTbody">

                    </tbody>

                </table>
                <!--<hr style="background-color: #000">-->
                <table width="30%" border="" cellpadding="0" cellspacing="" class="result" style="float:left">
                    <tr>
                        <td align="center" bgcolor="#B4B4B4" class="style1" width="50%">اجمالى المرتجعات</td>
                        <td align="center" class="style1" width="50%" id="retTotal"></td>
                    </tr>
                </table>
            </b>
            <div style="clear:both"></div>

            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <b id="netPart">
                <hr style="background-color: #000">
                <div style=" display: flex;justify-content: center;">
                    <table width="30%" border="" cellpadding="0" cellspacing="" class="result" style=" align-self: center;">
                        <tr>
                            <td align="center" bgcolor="#B4B4B4" class="style1" width="50%">الصافى</td>
                            <td align="center" class="style1" width="50%" id="netTotal"></td>
                        </tr>
                    </table>
                </div>

            </b>
            <div style="clear:both"></div>
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <p id="theComment">
                <label style="font-size: 30px; color: red;">*</label>
                <label id="theCommentText"></label>
            </p>
            <p style="{if $Programsettingdata->billReviewNote ==''}display: none;{/if}">
                <label style="font-size: 30px; color: red;">*</label>
                <label>{$Programsettingdata->billReviewNote}</label>
            </p>
            <div style="clear:both"></div>
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->
            <!-------------------------------------------------------------------------------->

            <!-- footer -->
            <b>
                <div style="text-align: center">
                    <p><span class="copywrites">تصميم شركة جي تي فور 01110070882</span></p>
                </div>
            </b>

        </div>

    </body>
</html>