<html dir="rtl">
    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>GT4</title>
        <style type="text/css"></style>
        <style>
            body{
                padding:20px;
            }
            table{
                width: 100%;
            }
            .topDiv{
                font-size: 18px;
                font-weight: bolder;
            }
            .topDiv td{
                font-size: 15px;
                font-weight: bolder;
            }
            .productsTable{
                border-collapse: collapse;
                text-align: center;
                border: 1px solid black;
                direction: rtl;
            }
            .productsTable thead {
                font-weight: bold;
                background-color: #c0c0c0;
            }
            .productsTable td,.productsTable th {
                border: 1px solid black;
            }
            .col6{
                width:55%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            .col5{
                width:45%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            .col4{
                width:33.33333333333333%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            /*col lg 3.5*/
            .col3_5{
                width:29%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            .col3{
                width:25%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }

            /*col lg 2.5*/
            .col2_5{
                width:20%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            .col2{
                width: 16.666666666666664%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }
            .col1_5{
                width: 9%;
                display: inline-block;
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            }

            .left{
                float: left;
            }
            .right{
                float: right;
            }

            .wdtPro{
                width: 200px;
            }
            .wdtPri, .wdtdis{
                width: 60px;
            }
            .bottomDiv{
                padding-top: 10px;
                margin: 0px 20px;
                font-size: 18px;
                font-weight: bolder;
                border-bottom: 1px solid black;
            }
            .warning{
                font-size: 14px;
                font-weight: bolder;
                text-align: center;
                color:red
            }

            .divOfColumnsContainer{
                min-height: 9vh;
                display: flex;
                height: 100%;
            }
            .divOfColumns{
                column-count: 3;
                direction: rtl;

                /* Chrome, Safari, Opera */
                -webkit-column-count: 3;
                /*                -webkit-column-gap: 2em;
                                -webkit-column-rule: 1px solid;*/
                -webkit-column-fill: auto;
                /* Firefox */
                -moz-column-count: 3;
                /*                -moz-column-gap: 2em;
                                -moz-column-rule: 1px solid;*/
                -moz-column-fill: auto;
                /* Standard */
                column-count: 3;
                /*                column-gap: 2em;
                                column-rule: 1px solid;*/
                column-fill: auto;
            }

            .clear{
                clear: both;
            }
            #div1,#div2,#div3{
                width: 33% !important;
                float: left !important;
            }
            #div1{
                text-align: left !important;
            }
            #div2{
                text-align: center; !important;
            }
            #div1{
                text-align: right; !important;
            }
            @media print {
                #div1,#div2,#div3{
                    width: 33% !important;
                    float: left !important;
                }
                #div1{
                    text-align: left !important;
                }
                #div2{
                    text-align: center; !important;
                }
                #div1{
                    text-align: right; !important;
                }
                thead{
                    font-size: 10px !important;
                    background-color: #ccc !important;
                }
                thead tr{
                    font-size: 10px !important;
                    background-color: #ccc !important;
                }
                tbody{
                    font-size: 10px !important;
                }
                .well{
                    width: 154px  !important;

                }

                .well h4{
                    width: 154px  !important;
                    padding: 3px !important;
                    margin: 3px !important;
                    font-size: 13px !important;
                }

            }
        </style>
        <link href="{$path}/assets/css/print.css" rel="stylesheet">

        <script src="../views/default/assets/js/jquery.js"></script>
        <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(function () {
            //         window.close;
            //         history.back();
            //     }, 0);
            //     // window.close();
            // }
        </script>
    </head>
    <!---->
    <body onLoad="printDiv()">
        <div  id="printdiv">
            <!-- <div class="topDiv">
                <p align="center" dir="rtl" style="font-size: 25px"><label>{$Programsettingdata->companyname}</label>
                     <label>{$Programsettingdata->email}</label>
                    </p>
                <p align="center">
                    {$Programsettingdata->phone}
                </p>

            </div> -->
            <div class="panel panel-default panel-m">
                <div class="panel-heading  visible-print">

                    {$message}
                </div>
            </div>



            <div  class=" container  visible-print"  style="width: 100% !important;margin:10px 0;">
                <div id="div1" >
                    <br>
                    {$programsettingsdata->companyname}
                </div>
                <div id="div2">
                    <img src="{$path}/images/upload/{$programsettingsdata->logo}" width="80px" height="80px">
                </div>

                <div id="div3">
                    <br>
                    {$programsettingsdata->phone}
                </div>
            </div>
            <div style="clear:both"></div>

            <div class="" style="margin-top:20px">
                <div class="">


                    <table class="productsTable table">
                        <thead>
                            <tr style="height:40px">
                                <th class="wdtPro">اسم الصنف</th>
                                <th class="wdtdis">الخصم</th>

                                <th class="wdtPri">السعر</th>
                            </tr>
                        </thead>

                        {foreach $productsData as $data}
                        <tr style="height:40px">
                            <td class="wdtPro">{$data->productName}</td>
                            <td class="wdtPri">{$data->weightedDiscount}</td>

                            <td class="wdtdis">{$data->weightedDiscountBuyPriceAfterDisc}</td>
                            <!--<td>{$data->weightedDiscountBuyPrice}</td>-->
                        </tr>
                        {/foreach}
                    </table>

                </div>
            </div>
            <p class="warning" style="color:red!important">
                لا تعد هذه الفاتورة خالصة السداد الا بايصال سداد رسمى من الشركة
            </p>

        </div>
    </body>


</html>