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

<!-- @section('breadcrumb')
<ol class="breadcrumb pull-right no-print">
    <li><a href="{{route('home')}}"><i class="fa fa-dashboard"></i> Home</a></li>
    @permission('list-membership')
    <li ><a href="{{route('statement.all')}}">Statements</a></li>
    @endpermission
    <li class="active">Statement Detail</li>
</ol>
@stop -->
@section('content')

<div class="container-fluid">
    <div class="row printableArea"  id="content">
        <div class="col-lg-12">
            <div class="white-box">
                <div class="row">
                    <div class="col-sm-12 col-xs-12">
                        <div class="row">
                            <img src="{{asset('images/logo.png')}}" style="height: 60px; width: 60px;margin-left: 12px">

                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12">
                        <div class="row text-center">
                         <h3><u><b>PAYMENT REQUEST</b></u></h3>   
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-6">
                        <span><b>Project:</b> j7 Emporeum</span>
                    </div>
                    <div class="col-sm-6 col-xs-6">
                        <span><b>Address:</b> b17 Islamabad</span>
                    </div>
                </div>
            </div>
            <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-4 col-xs-4 mt-18">
                        <div class="row" >
                            <div class="col-xs-5 col-sm-5" style="white-space: nowrap;margin-right: -20px;">Name:</div>
                            <div class="col-xs-7 col-sm-7" style="border-bottom: 1px solid">Customer Name</div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-4 mt-18">
                        &nbsp;
                    </div>
                    <div class="col-sm-4 col-xs-4 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-4">Date</div>
                            <div class="col-xs-7 col-sm-8" style="border-bottom: 1px solid">12-AUG-2021</div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-4">NTN</div>
                            <div class="col-xs-7 col-sm-8" style="border-bottom: 1px solid">ntn-1233</div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-5 col-sm-4">Vendor / Designation</div>
                            <div class="col-xs-7 col-sm-8" style="border-bottom: 1px solid">Manpower Suppy</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="white-box border-none ">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 text-center" style="background: black;color: white">
                        <b>Running Payment</b>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-3 col-sm-2">Payment Details</div>
                            <div class="col-xs-9 col-sm-10" style="border-bottom: 1px solid">Customer name</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-7 col-sm-6">Head:</div>
                            <div class="col-xs-5 col-sm-6" style="border-bottom: 1px solid">head text</div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-7 col-sm-6">Sub Head:</div>
                            <div class="col-xs-5 col-sm-6" style="border-bottom: 1px solid">sub text</div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-5 col-sm-6">Floor</div>
                            <div class="col-xs-7 col-sm-6" style="border-bottom: 1px solid">seventh floor</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-xs-7 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-6">Amount Claimed</div>
                            <div class="col-xs-8 col-sm-6" style="border-bottom: 1px solid">265000/-</div>
                        </div>
                    </div>
                    <div class="col-sm-5 col-xs-5 mt-18">
                        <div class="row">
                            <div class="col-xs-7 col-sm-5">Adv. Paid (If Any):</div>
                            <div class="col-xs-5 col-sm-7" style="border-bottom: 1px solid">1200/-</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row" >
                            <div class="col-xs-4 col-sm-5">Tax Deducted (If Applicable):</div>
                            <div class="col-xs-8 col-sm-7" style="border-bottom: 1px solid"> tax amount</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">Net Payable</div>
                            <div class="col-xs-10 col-sm-10" style="border-bottom: 1px solid"> amount net payable</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-2 col-sm-3">Remarks</div>
                            <div class="col-xs-10 col-sm-9" style="border-bottom: 1px solid">remarks</div>
                            <div class="col-xs-12 col-sm-12" style="border-bottom: 1px solid">&nbsp;</div>
                            <div class="col-xs-12 col-sm-12" style="border-bottom: 1px solid">&nbsp;</div>
                            <div class="col-xs-12 col-sm-12" style="border-bottom: 1px solid">&nbsp;</div>
                            <div class="col-xs-12 col-sm-12" style="border-bottom: 1px solid">&nbsp;</div>
                            <div class="col-xs-12 col-sm-12" style="border-bottom: 1px solid">&nbsp;</div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <br><br><br>
                        <div class="row">
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12">Initiator:________________________</div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12">Verification:________________________</div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-7 col-sm-6">Manager:________________________________</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <br><br><br>
                        <div class="row">
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12"><b>Approved By:</b></div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12">Project Director:____________</div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12">Group Chairman:____________</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12">
                        <br><br>
                    <div class="table-responsive">
                                <table class="table table-bordered">
                                  <tr>
                                    <th class="bg-t text-center" width="50%">Accounts & Finance Deptt.</th>
                                    <th class="bg-t text-center">Comments (If any)</th>
                                  </tr>
                                  <tr>
                                      <td height="150px">&nbsp;</td>
                                      <td>&nbsp;</td>
                                  </tr>
                                </table>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 mt-18">
                        <div class="row">
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12">Paid By:______________________</div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12">Instrument#________________________</div>
                            </div>
                            <div class="col-xs-4 col-sm-4">
                                <div class="col-xs-12 col-sm-12">Received By: ________________</div>
                            </div>
                        </div>
                    </div>



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

        

    </div>
    <div style="display: inline-block;    margin-bottom: 70px;">
       
    <div class="text-left" style="display: inline-block;"><a target="_blank" href="#">
        <button  class="btn btn-default btn-outline" type="button"> <span><i class="fa fa-download"></i> Download</span> </button></a>
    </div>
    

  

    <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