<script type="text/x-template" id="booking-template">
    <div>
        <div class="card">
            <div class="card-body">
                <div class="row align-items-center row">
                    <div class="input-icon col-md-4" v-if="!search_disable">
                        <label for="">{{ __('From') }}</label>
                        <v-select name="origin_port" :filterable="false"   v-model="search.from" @search="fetchOriginPorts" :options="origin_ports" :reduce="item => item.code" >
                            <template slot="option" slot-scope="option">
                                <div class="d-center">
                                  @{{option.name+'-'+option.country}}
                                </div>
                              </template>
                              <template slot="selected-option" slot-scope="option">
                                <div class="d-center">
                                  @{{option.name+'-'+option.country}}
                                </div>
                              </template>
                        </v-select>
                    </div>
                    <div class="input-icon col-md-4" v-if="!search_disable">
                        <label for="">{{ __('To') }}</label>
                        <v-select name="search_to" :filterable="false"    v-model="search.to" @search="fetchDestinationPorts" :options="destination_ports" :reduce="item => item.code" >
                            <template slot="option" slot-scope="option">
                                <div class="d-center">
                                  @{{option.name+'-'+option.country}}
                                </div>
                              </template>
                              <template slot="selected-option" slot-scope="option">
                                <div class="d-center">
                                  @{{option.name+'-'+option.country}}
                                </div>
                              </template>
                        </v-select>
                    </div>
                     <div class="input-icon col-md-4">
                        <div>
                            <label for="">{{ __('Departure Date') }}</label>
                            <input v-model="search.departure_date" type="date"  class="form-control" value="<?php echo date('Y-m-d'); ?>"  />
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <table class="table table-separate table-hover">
                    <tr>
                        <th>#</th>
                        <th>{{ __('Cruise Name') }}</th>
                        <th>{{ __('Departure Date') }}</th>
                        <th>{{ __('Arrival Date') }}</th>
                        <th>{{ __('From') }} </th>
                        <th>{{ __('To') }}</th>
                    </tr>
                    <template v-for="cruise in cruises">
                        <tr>
                            <td><input :value="cruise" v-model="selected_cruise" :id="`cruise${cruise.id}`" type="radio" ></td>
                            <td>@{{ cruise . name }}</td>
                            <td dir="ltr">@{{ dateFormat(cruise.departure_date_time) }}</td>
                            <td dir="ltr">@{{ dateFormat(cruise.arrival_date_time) }}</td>
                            <td>@{{ cruise.origin_port }} </td>
                            <td>@{{ cruise.destination_port }}</td>
                        </tr>
                        <tr class="collapse" :id="`collapse${cruise.id}`">
                            <td colspan="7">
                                <div class="row">
                                  
                                    <a @click="selectRoomType(item)" href="#" v-for="item in room_types" :key="item.id+'-'+cruise.id" class="col-md-4 ">
                                      
                                        <div v-bind:class="[item.is_double==0  ?'bg-primary':'bg-success','info-box  my-1 mx-1']">
                                            <span class="info-box-icon"><i class="fas fa-bed"></i></span>
                                            <div class="info-box-content">
                                            <span class="info-box-text">@{{ item .name }}</span>
                                            <span class="info-box-number">@{{ item .fake_capacity }}</span>
                                            </div>
                                        </div>
                                        <!-- /.info-box-content -->
                                    </a>
                                </div>
    
                            </td>
                        </tr>
                    </template>
                </table>
            </div>
        </div>
    </div>
</script>

<script>
    Vue.component('v-booking', {
        mixins: [ FetchMixin],
        props: ['cruise_id', 'room_type_id', 'origin_port', 'destination_port', 'search_disable','has_retour'],
        data: function() {
            return {
                selected_cruise: {},
                cruises: [],
                room_types: [],
                capacity: 0,
                search: {
                    id: null,
                    from: this.origin_port,
                    to: this.destination_port,
                    departure_date: "<?php echo date('Y-m-d'); ?>"
                   
                },
                origin_ports: [],
                destination_ports: []
            }
        },
        watch: {
            has_retour: function() {
                this.selected_cruise = null;
            },
            'search.from': function() {
                this.searching();
            },
            'search.to': function() {
                this.searching();
            },
            'search.departure_date': function() {
                this.searching();
            },
            'selected_cruise.id': function(){
                this.$emit('change-cruise', this.selected_cruise);
                $('.collapse').collapse('hide');
                axios.get("/search/cruise_room_type/" + this.selected_cruise.id,{params:{back: this.has_retour}}).then((res) => {
                    this.room_types = res.data;
                    this.$emit('update:cruise_id', this.selected_cruise.id);
                    $('#collapse' + this.selected_cruise.id).collapse('show');
                    if(this.room_type_id){
                        const v = res.data.filter(item=>item.id===this.room_type_id);
                        if(v.length)this.selectRoomType(v[0],false);
                    }
                    
                });
            }
        },
        mounted: function() {
            if(this.cruise_id){
                this.search.id = this.cruise_id;
                const vm = this;
                this.searching(function(){
                    vm.selected_cruise = vm.cruises.filter(item => item.id == vm.cruise_id)[0];
                });
            }
        },
        methods: {
            fetchOriginPorts(search, loading) {
                const vm = this;
                this.fetchOptions("{{ route('ports.origin.search') }}", search, loading, function(
                    res) {
                    vm.origin_ports = res.data;
                });
            },
            fetchDestinationPorts(search, loading) {
                const vm = this;
                this.fetchOptions("{{ route('ports.destination.search') }}", search, loading, function(
                    res) {
                    vm.destination_ports = res.data;
                });
            },
            searching: function(callback = null) {
                axios.post("/search/cruises", this.search).then((res) => {
                    this.cruises = res.data;
                    if(callback) callback();
                });
            },
            dateFormat(date) {
                return moment(date).utc(false).format('DD/MM/YYYY h:mm a'); // July 9th 2021, 9:46:57 am;
            },
            selectRoomType(room_type,newItem=true) {
                // console.log(room_type, this.capacity)
                if (room_type.capacity - this.capacity <= 0) {
                    alert('You have exceeded the number available! Error');
                    return;
                }
                if (this.room_type_id === room_type.id && newItem) {
                    if(room_type.is_double ==1){
                        
                      this.capacity+=2;
                        
                    }
                    else{
                      this.capacity++;
                        
                    }
                    this.$emit('change-capacity', this.capacity);
                } else {

                        if(room_type.is_double ==1)
                        {
                            
                           this.capacity = 2;
                        }
                        else{
                          this.capacity = 1;
                            
                        }
                        this.$emit('update:room_type_id', room_type.id);
                        this.$emit('change-room', {...room_type, cruise_id: this.selected_cruise.id});
                        this.$emit('change-capacity', this.capacity);
                    }

            },
        },
        template: '#booking-template'
    });

</script>
