<x-app-layout>
    <x-slot name="header">
        <div class="row">
            <div class="col-6">
                <h4 class="" title><i class="circular icon fa fa-list"></i> {{ __('Bookings') }} </h4>
            </div>
           
    </x-slot>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{ $dataTable->table() }}
                </div>
            </div>
        </div>
    </div>


    <x-slot name="after_script">
        {{ $dataTable->scripts() }}
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    table: "booking-table",
                },
                mounted: function() {
                    const vm = this;
                    $(document).on('draw.dt', function(e) {
                       vm.$root.load = false;
                        $('.print-link').click(function() {
                            window.open($(this).attr('href'), "_blank",
                                "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=500,height=400"
                                );
                            return false;
                        });

                        $('.refund-link').click(function() {
                            axios.post($(this).attr('href')).then(res=>{
                                vm.reload();
                            })
                            return false;
                        });

                    });
                }
            })

        </script>
         <script>
               function hideModal(){
                     $(".modal-backdrop").remove();
                }   

        </script>


    </x-slot>
</x-app-layout>
