@extends('layouts.app')
@section('title')
Payment request form 
@stop

@section('css')
<style type="text/css">
.table-bordered, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: 1px solid #655656;
}
.table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 1px solid #655656;
}
.bg-t{
    background: #eee;
}
.unit-box-n {
    border: 1px solid;
    padding: 2px;
}
</style>
@stop


@section('content')

<div class="container-fluid">
    <div class="row printableArea"  id="content">
        <div class="col-lg-12">
            <div class="white-box border-none">
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <div class="row" style="margin-top: 4%;">
                            <img src="{{asset('images/logo.png')}}" style="height: 120px; width: 120px;    margin-left: 12px;">
                        </div>
                    </div>
                    <div class="col-sm-8 col-xs-8">
                        <div class="row" style="margin-top: 4%;">
                            
                            <div class="col-xs-12 col-sm-12">
                                <!-- <div class="unit-box-n bg-t">Plot #2, MR-09, Block C, Multi Gardens, B17, Islamabad</div> -->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 pull-right mt-18">
                                <div class="unit-box-n pull-right bg-t"> BILL-00{{$payment->bill_id}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12">
                                <div class="unit-box-n text-center bg-t"><b><u>PAYMENT REQUISITION FORM / PAYMENT REQUEST</u></b></div>
                            </div>
                </div>
            </div>
            <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 mt-18">
                           <div class="table-responsive">
                                <table class="table table-bordered">
  <tr>
    <td width="15%" class="bg-t">Name</td>
    <td colspan="3">&nbsp;{{$payment->bill->vendor->name}}</td>
  </tr>
  <tr>
    <td class="bg-t">CNIC / NTN</td>
    <td>&nbsp;{{$payment->bill->vendor->cnic}}</td>
    <td width="15%" class="bg-t">Rep Name:</td>
    <td>&nbsp;{{$payment->bill->vendor->rep_name}}</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td class="bg-t">Contact #:</td>
    <td>&nbsp;{{$payment->bill->vendor->phone_number}}</td>
  </tr>
</table>
                        </div>
                        <div class="table-responsive">
                                <table class="table table-bordered">
  <tr>
    <td width="15%" height="120px" class="bg-t">Nature of Work / Work Details:</td>
    <td >&nbsp;{{$payment->bill->notes}}</td>
  </tr>
</table>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                        <div class="table-responsive">
                                <table class="table table-bordered">
  <tr>
    <td width="30%" class="bg-t">Account Head:</td>
    <td >&nbsp;{{$payment->bill->category->number}} - {{$payment->bill->category->name}}</td>
  </tr>
</table>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                        <div class="table-responsive">
                                <table class="table table-bordered">
  <tr>
    <td width="25%" class="bg-t" >Sub Head:</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
      <td width="25%" class="bg-t">Activity:</td>
      <td>&nbsp;</td>
  </tr>
</table>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                        <div class="table-responsive">
                                <table class="table table-bordered">
  <tr>
    <td width="30%" class="bg-t">Amount Claimed:</td>
    <td >&nbsp;{{number_format($payment->bill->amount)}}</td>
  </tr>
</table>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                        <div class="table-responsive">
                                <table class="table table-bordered">
  <tr>
    <td width="30%" class="bg-t">Advance Paid:</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
      <td width="30%" class="bg-t">Tax Deducted:<br><small>(IF Applicable)</small></td>
      <td>&nbsp;</td>
  </tr>
</table>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12">
                        <div class="table-responsive">
                                <table class="table table-bordered">
                              <tr>
                                <td width="15%" class="bg-t">Net Payable:</td>
                                <td >&nbsp;{{number_format($payment->amount)}}</td>
                              </tr>
                              <tr>
                                <td width="15%" class="bg-t">Amount in Words:</td>
                                <td >&nbsp;{{$words}}</td>
                              </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="white-box border-none ">
                <div class="col-sm-12 col-xs-12">
                <div class="row">
                    <br><br>
                    <div class="col-sm-6 col-xs-6">
                        <span>________________________</span><br>
                        <span>CLAIMED BY</span>
                    </div>
                </div>
                <br><br><br>
                <div class="row mt-18">
                    <div class="col-sm-4 col-xs-4">
                        <span>______________________________</span><br>
                        <span>MANAGING DIRECTOR</span>
                    </div>
                    <div class="col-sm-4 col-xs-4 text-center">
                        <span>_____________________________</span><br>
                        <span>CEO</span>
                    </div>
                    <div class="col-sm-4 col-xs-4 text-center">
                        <span>_____________________________</span><br>
                        <span>CHAIRMAN</span>
                    </div>
                </div>
                </div>
            </div>
             <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                    <div class="table-responsive">
                                <table class="table table-bordered">
                                  <tr>
                                    <th class="bg-t">Account & Finance Deptt.</th>
                                    <th class="bg-t">Comments (If any)</th>
                                  </tr>
                                  <tr>
                                      <td height="150px">&nbsp;</td>
                                      <td>&nbsp;</td>
                                  </tr>
                                </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        

    </div>
    <div style="display: inline-block;    margin-bottom: 70px;">
       
    <div class="text-right" style="display: inline-block;">
        <button id="print" class="btn btn-default btn-outline" type="button"> <span><i class="fa fa-print"></i> Print</span> </button>
    </div>
    
</div>
</div>
<!-- /.container-fluid -->



@stop

@section('js')
<script src="{{asset('js/jquery.PrintArea.js')}}" type="text/JavaScript"></script>
<script>
$(function () {
    $("#print").on("click", function () {
        var mode = 'iframe'; //popup
        var close = mode == "popup";
        var options = {
            mode: mode,
            popClose: close
        };
        $("div.printableArea").printArea(options);
    });
});
</script>
<script>
    $('#example23').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
</script>
@stop