<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> {{__('Cruise :') }}
                    {{ $cruise->name . '-' . $cruise->cruise_number }} </h4>
            </div>
            <div class="col-6">
                <button v-if="form.room_id&&!boarding_pass" v-on:click="store"
                    class="btn btn-success btn-sm float-right" href=""><i class="fas fa-plus"></i>
                    {{ __('create') }} </button>
                    <div v-if="boarding_pass">
                        <button  v-on:click="printBoardingPass()"
                        class="btn btn-primary btn-sm float-right ml-3" href=""><i class="fas fa-print"></i>
                        {{ __('print boarding pass') }} </button>
                    <button   v-if="boarding_pass.ticket.car" v-on:click="printTicketCar(boarding_pass.ticket.car.id)"
                        class="btn btn-primary btn-sm float-right ml-3" href=""><i class="fas fa-print"></i>
                        {{ __('Print Car:') }} @{{boarding_pass.ticket.car.details.car_number}}</button>
                    </div>
            </div>
        </div>
    </x-slot>


    <div class="row">
        <div class="col-md-7">
            <div class="card">
                <div class="card-body">
                     <div class="form-group col-12">
                        <x-label for="model"  > {{__('Passport Number') }}</x-label>
                        <br>
                        <input type="text" id='passport' style="width:100%">
                    </div>
                    <div class="form-group col-12">
                        
                        <input type="text" id='ticket_number' style="display:none" />
                        <input type="hidden" value="{{$cruise->id}}" id="cruise" />
                        <x-label for="model"  > {{__('Ticket Number') }}</x-label>
                        <span>
                        <v-select  @search="fetchTicket" v-model="form.ticket_id" :class="{ 'is-invalid': errors.ticket_id }" :options="tickets" :reduce="item => item.id" label="ticket_number">
                            <template slot="option" slot-scope="option" >
                                <div class="d-center" >
                                @{{option.ticket_number}}
                                </div>
                            </template>
                            <template slot="selected-option" slot-scope="option">
                                <div class="d-center">
                                @{{option.ticket_number}}
                                </div>
                            </template>
                        </v-select>
                        </span>
                    </div>
                    <label>{{ __('Room') }}:</label>
                    <div class="row">
                        <div class="col-md-9">
                            <v-select v-model="form.room_id" required
                                :class="{ 'is-invalid': errors.room_id }" :options="rooms"
                                :reduce="room => room.id" label="code">
                                <template v-slot:option="option">
                                  <span v-if="option.capacity  - option.count_beds_not_available >0">
                                       @{{ option.code+' (beds: '+(option.capacity  - option.count_beds_not_available)+')'}}
                                  </span>
                                      
                                </template>
                            </v-select>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal"
                                data-target="#listRoom">
                                <i class="fa fa-list"></i>
                                {{ __('Select Room') }}
                            </button>
                        </div>

                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="box col-6">
                            <header>
                                <h4><i class="fas fa-thumbtack float-right"></i>{{ __('Ticket info') }}
                                </h4>
                            </header>
                            <ul class="list-group">
                                <li class="list-group-item"><strong>{{ __('Name') }} :</strong>
                                    <span
                                        v-if="ticket">@{{ ticket.called + ' ' + ticket.firstName + ' ' + ticket.lastName }}</span>
                                </li>
                                <li class="list-group-item"><strong>{{ __('Ticket Number') }} :</strong>
                                    <span v-if="ticket">@{{ ticket.ticket_number }}</span>
                                </li>
                                <li class="list-group-item"><strong>{{ __('Passport') }}
                                        :</strong>
                                    <span v-if="ticket">@{{ ticket.passport }}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="box col-6">
                            <header>
                                <h4><i
                                        class="fas fa-thumbtack float-right"></i>{{ __('Booking info') }}
                                </h4>
                            </header>
                            <ul class="list-group">
                                <li class="list-group-item"><strong>{{ __('Code') }} :</strong>
                                    <span v-if="ticket">@{{ ticket.segment.booking.number }}</span>
                                </li>
                                <li class="list-group-item"><strong>{{ __('State') }} :</strong>
                                    <span v-if="ticket">@{{ ticket.segment.booking.status }}</span>
                                </li>
                                <li class="list-group-item">
                                    <strong>{{ __('Boarding pass') }} :</strong> <span v-if="boarding_pass">@{{ boarding_pass.code }}</span>
                                    <button v-if="boarding_pass" @click="destroy('/boarding-pass/' + boarding_pass.id,clear)"
                                        class="btn btn-danger float-right btn-sm"><i class="fa fa-trash"></i></button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="card card-primary">
                <div class="card-header">
                    <h5>{{ __('Luggage scale') }}  </h5>
                </div>
                <div class="card-body">
                    <form @submit.prevent="addBag">
                        <table class="table">
                            <tr>
                                <th></th>
                                <!-- <th>{{ __('Allowed number') }}: (@{{ number_bags }}) </th> -->
                                <th> {{ __('Allowable Weight') }}: (@{{ weight_bags }} {{ __('KG') }}) </th>
                                <th></th>
                            </tr>
                            <tr v-for="(bag, index) in form.bags">
                                <td>{{ __('Weight') }} @{{ index + 1 }}</td>
                                <td>@{{ bag . weight }}</td>
                                <td>
                                    <a v-if="!boarding_pass" @click="removeBag(index) " class="btn btn-danger"><i
                                            class="fa fa-trash"></i></a>
                                    <a v-else v-on:click="printSticker(bag.id,$event)"
                                        class="btn btn-primary float-right ml-3"><i class="fas fa-print"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                {{ __('Bag Weight') }}
                                </td>
                                <td>
                                    <input class="form-control" type="number" v-model="bag.weight" />
                                </td>
                                <td>
                                    <button class="btn btn-success"><i class="fa fa-plus"></i> </button>
                                </td>
                            </tr>
                            <tr>
                                <td>{{ __('Bags Numer') }} </td>
                                <td> @{{ form . number_bags }}  {{ __('Bags') }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>{{ __(' Weights Total') }}</td>
                                <td>@{{ form . weight_bags }}   {{ __('KG') }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                
                                <td>  {{ __(' Overweight ') }}</td>
                                <td>@{{ form . weight_bags - weight_bags }}  {{ __('KG') }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>  {{ __(' Overweight price') }}</td>
                                <td>@{{ total() }}</td>
                                <td></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="listRoom" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        {{ __('Select room')  }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tr>
                            <th>#</th>
                            <th>{{ __('Number') }}</th>
                            <th>{{ __('Code') }}</th>
                            <th>{{ __('Beds count') }}</th>
                            <th>{{ __('Beds available') }}</th>
                        </tr>
                        <tr v-for="room in rooms"
                            v-bind:class="{ 'bg-danger': room.beds_count  <= room.count_beds_not_available }">
                            <td>
                                <input type="radio" :value="room.id" v-model="form.room_id" />
                            </td>
                            <td>@{{ room . room_number }}</td>
                            <td>@{{ room . code }}</td>
                            <td>@{{ room . capacity }}</td>
                            <td>@{{ room . capacity - room . count_beds_not_available }}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>



    <x-slot name="after_script">
        <script>
            window.app = new Vue({
                el: "#app",
                mixins: [ DestroyMixin],
                data: {
                    price_item: {{config('app.amount_weight')}},
                    tickets: [],
                    ticket: null,
                    segment: null,
                    rooms: [],
                    boarding_pass: null,
                    weight_bags: '{{ $cruise->weight }}',
                    number_bags: '{{ $cruise->bags }}',
                    form: {
                        ticket_id: '',
                        room_id: null,
                        number_bags: 0,
                        weight_bags: 0,
                        bags: []
                    },
                    errors:[],
                    bag: {
                        weight: ''
                    }
                },
                watch: {
                    'form.ticket_id': function(val) {
                        this.clear();
                        this.ticket = this.tickets.filter(item => item.id === val)[0];
                        this.fetchRooms(this.ticket.segment.room_type_id);
                        this.fetchBoardingPass();
                    }
                },
                mounted: function() {
                    this.$root.load = false;
                },
                methods: {

                    store: function(e) {
                           axios.post("/boarding-pass", this.form)
                            .then(res => {
                                this.success();
                                this.boarding_pass = res.data;
                                console.log(res.data);
                                if (this.boarding_pass) {
                                    
                                    this.form= {...this.form,...this.boarding_pass};
                                }
                            })
                            .catch(error => {});
                        e.preventDefault();
                    },
                    fetchTicket: function(search, loading) {
                        if(search.length<4){
                            return false;
                        }
                        loading(true);
                        axios.get("/search/tickets", {
                                params: {
                                    cruise_id: '{{ $cruise->id }}',
                                    q: search
                                }
                            })
                            .then(res => {
                                this.tickets = res.data.data;
                                loading(false);
                            });
                    },
                    fetchRooms: function(room_type_id) {
                        axios.get("/search/specific_rooms/" + room_type_id)
                            .then(res => {
                                this.rooms = res.data;
                                console.log( this.rooms);
                                
                            }).catch(err => {
                                this.error(err);
                            });
                    },
                    fetchBoardingPass: function() {
                        axios.get("/boarding-pass/" + this.ticket.id)
                            .then(res => {
                                this.boarding_pass = res.data;
                                if (this.boarding_pass) {
                                    this.form= {...this.form,...this.boarding_pass};
                                }
                            });
                    },
                    clear: function() {
                        this.boarding_pass = null;
                        this.form= {
                            ...this.form,
                            room_id: null,
                            number_bags: 0,
                            weight_bags: 0,
                            bags: []
                        };
                        this.bag = {
                            type: '',
                            weight: ''
                        };
                    },
                    updateBags: function() {
                        var t = 0;
                        for (let i = 0; i < this.form.bags.length; i++) {
                            const bag = this.form.bags[i];
                            t += bag.weight;
                        }
                        if (t > parseInt(this.weight_bags)) {
                            alert('{{ __('You have exceeded the permissible weight ') }}');
                        }
                        this.form.number_bags = this.form.bags.length;
                        this.form.weight_bags = t;
                    },
                    addBag: function() {
                        var weight = parseInt(this.bag.weight);
                        if (!weight) return;
                        this.form.bags.push({
                            weight: weight
                        });
                        this.bag = {
                            weight: ''
                        };
                        this.updateBags();
                    },
                    removeBag: function(i) {
                        this.form.bags.splice(i, 1);
                        this.updateBags();
                    },
                    total: function() {
                        var t = 0;
                        if (this.form.weight_bags > parseInt(this.weight_bags)) {
                            t = (this.form.weight_bags - parseInt(this.weight_bags)) * this.price_item;

                        }
                        return t;
                    },
                    printBoardingPass: function() {
                        var win= window.open("https://admin.mmtbook.com/boarding-print-" + this.boarding_pass.id, "_blank",
                            "toolbar=yes,scrollbars=yes,resizable=yes,top=200,left=200,width=800,height=400"
                        );
                        //setTimeout(() => {win.close();}, 500);
                        
                    },
                    printSticker: function(id, e) {
                        e.preventDefault();
                        var win=window.open("http://127.0.0.1:3000/boarding-sticker-" + id, "_blank",
                            "toolbar=yes,scrollbars=yes,resizable=yes,top=200,left=200,width=100,height=800"
                        );
                        setTimeout(() => {win.close();}, 500);
                    },

                    printTicketCar: function(car_id) {
                        var win=window.open("https://admin.mmtbook.com/boarding_pass/print-car/" + this.boarding_pass.id+"/"+car_id, "_blank",
                            "toolbar=yes,scrollbars=yes,resizable=yes,top=200,left=200,width=800,height=400"
                        );
                        //setTimeout(() => {win.close();}, 500);
                    }
                }
            });

        </script>
        <script>
          $('#passport').on('input',function(){
              var passport=$('#passport').val();
              var cruise= $('#cruise').val();
              
              $.ajax({
                type : 'post',
                 headers: {
              'X-CSRF-TOKEN':
               "{{ csrf_token()}}"
                },
                url : '{{URL::to('search/passport')}}',
                data:{'passport':passport,'cruise':cruise},
                success:function(data){
                    if(data =='fails' ||passport.length ==0){
                        console.log('dd');


                    }
                    else{
                      alert(data.ticket_number);
                    //  $('span .vs__search').val(data.ticket_number);
                    }


                }
                });

          });
                 

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