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

@section('subhead')
<title>Atarud MIS - Book Purchase Reciept</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;">
                                            Book Purchase 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"> {{$transaction->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;">
                                        {{$bookTransaction->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;">
                                        {{ ($transaction->transaction_type != 'Out' ? $expenseAccount->name:
                                        $incomeAccount->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;">
                                        {{$transaction->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;">
                                        {{$transaction->payment}}
                                    </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;">
                                        {{$transaction->description}}
                                    </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