@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Voucher</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('subcontent')
 
 
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Print Receipt</h2>
    </div>
                                   

         
    <div class="container box">
        <div class="row">
            <div class="col-12 table-responsive">
                <div class="p-10">
                 
                    <a onClick="PrintElem('#receipt_print')" class="btn btn-default btn-icon icon-left hidden-print pull-right">
                        Print Receipt
                        <i class="entypo-print"></i>
                    </a>
            
                
                    <br><br>
                
                    <div id="receipt_print">
                        <div style="padding:10px; width:830px; height:auto; margin-right: auto; margin-left: auto;">
                
                            <div style="width:100%; height:auto;">
                                <table align="center">
                                    <tr>
                                        <td colspan="2">
                                            <img style="width:400px;" id="logo" src="{{asset('uploads/logo.png')}}">
                                            <h4 style="margin-left:80px; margin-top:10px; font-size: 28px; color:#37AFEE;">VOUCHRE </h4>
                                        </td>
                                    </tr>
                                </table>
                                
                                <table style="color:#3AB2F4; margin-top:-60px; display:block;">
                                    <tr colspan="3">
                                        <td style="padding-left:750px; margin-top:0px;">ID NO: </td>
                                        <td style="border-bottom: 1px #37AFEE solid" id="receipt_id"> {{$voucher->id}}  </td>
                                    </tr>
                                </table>
                            </div>
                            <br>
                            <br>
                            <div style="color:#3AB2F4;">
                                <table style="margin-left:5px;">
                                    <tr>
                                        <td><label>Date: </label></td>
                                        <td id="date" style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed;  width:300px; height:25px;margin-right:10px;">{{$voucher->v_date}}
                                        </td>
                
                                        <td><label>Account Type:</label></td>
                                        <td id="payment_type"  style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed; width:300px; height:25px;margin-right:10px;">
                                           {{$account->name}}
                                        </td>

                                      
                                    </tr>
                                    <tr>
                                        <td><label>Name: </label></td>
                                        <td id="name" style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed; width:300px; height:25px;margin-right:10px;">{{$voucher->v_recieved_by}}</td>
                
                                        <td><label>F/Name: </label></td>
                                        <td id="father_name" style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed; width:300px; height:25px;margin-right:10px;">{{$voucher->father_name}}
                                        </td>
                                    </tr>
                
                                    <tr>
                                        <td><label>Amount:</label></td>
                                        <td id="amount" style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed;  width:300px; height:25px;margin-right:10px;">{{$voucher->v_amount}}
                                        </td>
                                        <td><label>Payment:</label></td>
                                        <td id="payment"  style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed; width:300px; height:25px;margin-right:10px;">{{$voucher->v_paid}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><label>Approved By:</label></td>
                                        <td id="amount" style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed;  width:300px; height:25px;margin-right:10px;">{{$voucher->v_approved_by}}
                                        </td>
                                        <td><label>Paid By:</label></td>
                                        <td id="payment"  style="border:0px red solid; border-bottom: 2px #3AB2F4 dashed; width:300px; height:25px;margin-right:10px;">{{$voucher->v_paid_by}}
                                        </td>
                                    </tr>
                                    
                                    <tr>
                                        <td style="padding-top:30px;"><label>Description: </label></td>
                                        <td colspan="3" id="description" style="padding-top: 50px; border:0px red solid; border-bottom: 2px #3AB2F4 dashed; width:690px; height:25px;margin-right:10px;"> {{$voucher->v_desc}}
                                        </td>
                                    </tr>
                
                                    <tr>
                                        <td><label>Finance Manager Signature: </label></td>
                                        <td></td>
                                        <td style="padding-bottom:60px; padding-top:30px;"><label>Signature: </label></td>
                                    </tr>
                                </table>
                            </div>
                
                            <div style="width:100%; height:auto; color:#3AB2F4;  margin-bottom:-18px; font-size: 18px;">
                                <p style="padding-top:6px; padding-left:40px; font-size:16px; font-weight: bold;">Contact No: +93 (0) 786555959</p>
                                <br>
                                <p style="margin-top:-25px;padding-bottom:5px; padding-left:40px; font-size:16px; font-weight: bold;">Address: Qala-e-Najara Square, Kabul</p>
                            </div>
                
                        </div> <br style="clear:both;">
                
                        
                        
                    </div>
            </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>

    <script type="text/javascript">
        
     // print receipt function
     function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data)
    {
        var mywindow = window.open('', 'receipt', 'height=600,width=850');
        mywindow.document.write('<html><head><title>receipt</title>');
        mywindow.document.write('<link rel="stylesheet" href="assets/css/neon-theme.css" type="text/css" />');
        mywindow.document.write('<link rel="stylesheet" href="assets/js/datatables/responsive/css/datatables.responsive.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        setTimeout(() => {
        mywindow.print();
        mywindow.close();
            
        }, 1000);

        return true;
    }
        
    </script>

 
@endsection