<x-app-layout>

    <div class="row mt-2">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h3 class="page-title">{{ __('Check In') }}</h3>
                </div>
                <div class="card-body">
                    <form method="post" @submit.prevent="checkIn">
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <input v-model="code" type="search" class="form-control form-control-lg"
                                    placeholder="Type your code here">
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-lg btn-default">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <div class="card">
        <div class="card-header">
            {{ __('List Passengers') }}
        </div>

        <div class="card-body">
            <table id="table" class="table table-bordered table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>{{ __('#') }}</th>
                        <th>{{ __('Checked At') }}</th>
                        <th>{{ __('Ticket Number') }}</th>
                        <th>{{ __('First Name') }}</th>
                        <th>{{ __('Last Name') }}</th>
                        <th>{{ __('Passport Number') }}</th>
                        <th>{{ __('Phone Number') }}</th>
                        <th>{{ __('Cruise') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <x-slot name="after_script">
        <script>
                var table;
                $(document).ready(function() {

                       table = $('#table').DataTable({
                            order: [1, 'desc'],
                            responsive: true,
                            processing: true,
                            serverSide: false,
                            ajax: "{{ route('check_in.list',['cruise'=>$cruise->id]) }}",
                            columns: [{
                                    "data": "id"
                                
                                },
                                {
                                    "data": "checked_at"
                                
                                },  
                                {
                                    "data": "ticket_number",
                                    "searchable": false,
                                    "orderable": false
                                },
                                {
                                    "data": "first_name",
                                    "searchable": false,
                                    "orderable": false
                                },
                                {
                                    "data": "last_name",
                                    "searchable": false,
                                    "orderable": false
                                },
                                {
                                    "data": "passport_number",
                                    "searchable": false,
                                    "orderable": false
                                },
                                {
                                    "data": "phone_number",
                                    "searchable": false,
                                    "orderable": false
                                },
                                {
                                    "data": "cruise",
                                    "searchable": false,
                                    "orderable": false
                                },
                            ]
                        })
                });
            var app = new Vue({
                el: '#app',
                data: {
                    code: '',
                    boardingPass: null
                },
                mounted: function() {
                    this.$root.load = false;
                },
                methods: {
                    checkIn() {
                        axios.post("{{ route('check_in', ['cruise' => $cruise->id]) }}", {
                                code: this.code
                            })
                            .then(res => {
                                this.boardingPass = res.data;
                                table.ajax.reload(null, false);
                                this.success(this.boardingPass.ticket.firstName+' '+this.boardingPass.ticket.lastName+': is checked');
                            })
                            .catch(error => {                          
                                this.error(error);
                            });
                            this.code = '';
                    }
                }
            });

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