<link href="[[smc__theme_path]]css/style.css" rel="stylesheet" type="text/css"/>
<link href="[[smc__theme_path]]css/style-responsive.css" rel="stylesheet"> 
<style type="text/css">
    .ValSpan{
        opacity:0;
    }
    .inv-info{
        font-size: 15px;
        font-weight: bold;
    }
    .border-div{
        border: 2px solid #000;
        border-style: dotted;
        padding: 10px;
        border-right:0;
        border-left:0;
        border-top:0;
    }

    .border-tr{
        border: 2px solid #000;
        border-style: dotted;
        padding: 12px;
        border-bottom:0;
        border-left:0;
        border-top:0;
    }
    .border-td{
        border: 2px solid #000;
        border-style: dotted;
        padding: 10px;
        border-bottom:0;
        border-top:0;
    }
    .border-table{
        border: 2px solid #000;
        border-style: dotted;
        border-right:0;
        border-left:0;
        margin-top:15px;
    }
    .table tbody tr td{
        /*line-height:12px;*/
    }
    .table thead tr th{
        background: #ddd;
    }

    h5{
        font-size:17px !important;
    }
    .phone-l{
        margin-left:1px !important;
    }
    .font-type-1{
        font-size:medium !important;
    }
    .font-type{
        font-size:large !important;
    }
    h5{
        line-height: 15px !important;
    }
    h4{
        line-height: 18px !important;
    }
    @media print {
        .table thead tr th{
            background: #ddd;
        }

        h5{
            font-size:14px !important;
        }
        img{
            max-width: 50% !important;
        }

        .table tbody tr td{
            /*line-height:20px;*/
            font-size:1em !important;
        }
        .phone-l{
            margin-left:1px !important;
        }.font-type-1{
            font-size:medium !important;
        }
        .font-type{
            font-size:large !important;
        }
        .mytitle{
            font-size:2.5em !important;
        }


        .footer{
            bottom:-90px;
            position:fixed;
        }	
    }

</style>
<style>
    @media print{
        .no-print{display:none;}
    }
    .text-center{text-align:center;}
    .text-left{text-align:left;}
    .text-right{text-align:right;}
    .row:after, .row:before {
        display: table;
        content: " ";
        clear:both;
    }
    .col-xs-3,.col-xs-4,.col-xs-6,.col-xs-8,.col-xs-12{
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .col-xs-3{width:25%;}
    .col-xs-4{width:33.33333333%;}
    .col-xs-6{width:50%;}
    .col-xs-8{width:66.66666666%;}
    .col-xs-12{width:100%;}
</style>
<style>
    .col-xs-5{width:41.66666667%;}
    h4{
        font-size: 23px;

    }
    h5{
        font-size: 17px !important;
    }
    h1, h2, h3, h4, h5, h6 {
        margin: 10px 0;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
        color: #2c2c2c;
        font-weight:300!important;
    }
    body{
        font-family:"Arial","Tahoma","DejaVu Sans Mono", monospace;
    }
    .pull-right{float:right;}
    .pull-left{float:left;}
    .border-table {
        border: 1px solid #000;
        border-style: dotted;
        border-right: 0;
        border-left: 0;
        margin-top: 15px;
    }
    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        background-color: transparent;
        border-collapse: collapse;
    }
    .table thead tr th {
        text-transform: uppercase;

        font-size: 13px;
        padding-top: 8px;
        padding-bottom: 8px;
        vertical-align: middle;

    }
    .table thead tr th{

        font-weight: 600;
        color: rgba(44,44,44,0.35);}
    .btn-danger, .btn-danger:focus {
        color: #ffffff !important;
        background-color: #ed9421 !important;
        border-color: #ed9421 !important; 
    }
    .btn {
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.01em;
        margin-bottom: 0;
        border: 1px solid #f0f0f0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        background-image: none!important;
        color: #eb9220;
        background-color: #ffffff;
        line-height: 21px;
        padding-left: 17px;
        padding-right: 17px;
        position: relative;
        display: inline-block;
        padding: 6px 12px;
    }
    .btn-success-darker, .btn-success-darker:focus {
        color: #ffffff;
        background-color: #ed9421;
        border-color: #ed9421;
    }
    @media print
    {

        .invoice h1{
            font-size:22px!important;
        }
        .total-purchase,.amount{
            /*display:none !important;*/
        }
        .invoice,.table tbody tr td,.table thead tr th {font-size:10px !important;}
        .font-type{font-size:12px !important;}

        .table thead tr th{background-color:white!important;color:black!important;}
        .header-div{font-size:13px;}
    }
</style>
<div class="wrapper">
    <div class="panel invoice">
        <div class="panel-body">
            <div class="row ">
                <div class="col-xs-4  m-b-10">
                    <h4 >[[org__Organization_Name]]</h4>
                    <h4 class="phone-l">[[org__Organization_Phone]]</h4>

                    <h5>[[org__Name]]-[[org__Organization_Province]]</h5>
                    <h4 class="phone-l">M.O.F Reg # [[org__Organization_Commercial_Registry]]</h4>
                    <h4 class="phone-l">E-mail: [[org__Organization_Email]]</h4>
                </div>
                <div class="col-xs-4 text-center">
                    <img src="[[smc__upload_path]]org_logo/invoice_logo.jpg" alt="" style="max-width:150px"/>
                </div>
                <div class="col-xs-4  m-b-10">
                    <h4 class="text-right">[[org__Organization_Legal_Name]]</h4>
                    <h4 class="text-right">[[org__Organization_Phone]]</h4>
                    <h5 class="text-right"> [[org__Organization_Street]]</h5>
                    <h4 class="text-right">  رقم التسجيل المالي : [[org__Organization_Commercial_Registry]]</h4>
                </div>
            </div>
            <div class="col-xs-8 col-md-8 pull-right">
                <div class="row">
                    <div class="col-xs-5">
                        <h1 class="text-center mytitle">Purchase Invoice</h1>
                    </div>

                </div>
            </div>
            <div class="col-xs-12 col-md-12 border-div">
                <div class="row">
                    <div class="col-xs-6 font-type ">
                        Name: [[Name]]
                        <br/>Address: [[Country_Name]] -  [[Address]]
                        <br/>Phone:[[Phone]]
                    </div>
                    <div class="col-xs-3 pull-right font-type">
                        <div> Invoice # [[ID]]</div>
                        <div>Date: [[Date]]</div>
                        <div>Due Date:[[Due_Date]]</div>
                        <div class="print_delv">Currency: [[Currency_Name]]</div>
                    </div>
                </div>
                <table class="table  border-table">
                    <thead>
                        <tr class="border-div">
                            <th class="border-td text-center">No.</th>
                            <th class="border-tr text-center">Compts</th>
                            <th class="border-tr text-center">Item</th>
                            <th class="border-tr text-center">Lits Obs</th>
                            <th class="border-tr text-center">Temp</th>
                            <th class="border-tr text-center">Coeff</th>
                            <th class="border-tr text-center">Lit. 15</th>
                            <th class="border-tr print_delv text-center">Price</th>
                            <th class="border-tr print_delv text-center">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        [[smc__start_inv_detail]]
                        <tr>
                            <td class=" border-td text-center">[[Count]]</td>
                            <td class="border-tr text-center">[[compts]]</td>                
                            <td class="border-tr text-center">[[Product_Name]]</td>
                            <td class="border-tr text-center">[[liter_abs]]</td>
                            <td class="border-tr text-center">[[temp]]</td>
                            <td class="border-tr text-center">[[coeff]]</td>
                            <td class="border-tr text-center">[[Item_Quantity_Current]]</td>
                            <td class="border-tr print_delv text-center"><span class='CurrencyIndicator'></span>&nbsp;<span class="">[[Product_Net_Price]]</span></td>
                            <td class="border-tr print_delv text-center"><span class='CurrencyIndicator'></span>&nbsp;<span class="">[[total_with_vat]]</span> </td>
                        </tr>
                        [[smc__end_inv_detail]]
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-xs-3 ">
                    </div>
                    <div class="col-xs-4 font-type  pull-right print_delv">
                        <div class="col-xs-6"><span>Subtotal</span>:&nbsp;</div>[[Invoice_Sub_Total]]<br/>
                        <div class="col-xs-6"><span>VAT [[smc__system_vat_percent]] %</span>:&nbsp;</div>[[Invoice_VAT]]<br/>
                        <div class="col-xs-6 "><span>Discount </span>:&nbsp;</div>[[Invoice_Discount]]<br/>
                        <div class="col-xs-6 "><span>Total Paid </span>:&nbsp;</div>[[Invoice_Paid_Amount]]<br/>
                        <div class="col-xs-6 "><span><strong>Grand Total</span>:</strong>&nbsp;</div><strong>[[Invoice_Net_Total]]</strong>
                    </div>
                </div>
            </div>
            <br>
            <div class="col-xs-12">
                <div class="row">
                    <div class="footer" style="direction:rtl;bottom:90px;position:fixed;font-size:large; text-align: center;">
                    </div>
                </div>
            </div>
            <div class="row no-print">
                <div class="col-md-12">
                    <div class="pull-right">
                        <a id="invoice_print_btn" class="btn btn-danger" onclick="javascript:$('.print_delv').removeClass('no-print');javascript:window.print();"><i class="fa fa-print"></i>Print</a>
                        <a id="delivery_print_btn" class="btn btn-success-darker" onclick="javascript:$('.print_delv').addClass('no-print');window.print();"><i class="fa fa-print"></i> Print Delivery Note</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
