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

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

@section('subcontent')
    <div class="flex items-center mt-8">

        <a href="{{ route('new-receipt') }}" data-tw-toggle="modal" data-tw-target="#new-exam"
            class="btn btn-primary w-24 ml-auto">
            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
        </a>
    </div>

    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Receipt List</h2>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12 table-responsive">
                <table class="table table-bordered receipt_datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Fathername</th>
                            <th>Position</th>
                            <th>Payment Type</th>
                            <th>Account</th>
                            <th>Amount</th>
                            <th>Description</th>
                            <th>Date</th>
                            <th width="100px">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
           
        </div>
    </div>
    @include('../pages/receipt/show')

@endsection


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

    <script type="text/javascript">
        $(function() {
            var table = $('.receipt_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('receipt') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'father_name',
                        name: 'father_name'
                    },
                    {
                        data: 'position',
                        name: 'position'
                    },
                    {
                        data: 'payment_type',
                        name: 'payment_type'
                    },
                    {
                        data: 'account',
                        name: 'account'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'timestamp',
                        name: 'timestamp'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });

        function show(id){
            // var id = idid;
            // alert(id);
            $.ajax({
                method: 'GET',
                url: "{{ url('/receipt/show/') }}",
                data: {
                    id: id,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#receipt_id').html(response[0]['id']);
                    jQuery('#date').html(response[6]);
                    jQuery('#name').html(response[2]);
                    jQuery('#father_name').html(response[3]);
                    jQuery('#position').html(response[4]);
                    jQuery('#payment_type').html(response[5]);
                    jQuery('#amount').html(response[1]['amount']);
                    jQuery('#payment').html(response[7]);
                    jQuery('#description').html(response[1]['description']);
                     
                }
            });
        }
        // 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