<script type="text/x-template" id="service-template">
    <div class="row">
        <div class="col-md-12">
            <h5>{{ _('List Articles') }}</h5>
            <div class="dividing mb-2"></div>
            <div class="mt-3">
                <a @click="selectArticle(service)" href="#" v-for="(service,index) in articles" key="index" class="info-box col-md-3 bg-info mx-1 my-1">
                    <span class="info-box-icon"><i class="fas fa-shopping-cart"></i></span>
        
                    <div class="info-box-content">
                      <span class="info-box-text">@{{service.name}}</span>
                      <span class="info-box-number">@{{ formatPrice(service.price) }} </span>
                    </div>
                    <!-- /.info-box-content -->
                </a>
            </div>
        </div>
        <input type="hidden" value=" {{ Session::get('quantity') }}" id="qunatity">
        
        <div class="col-md-12 mt-4">       

            <h5>{{ _('List Cars') }}</h5>
            <div class="dividing mb-2"></div>
            <div class="mt-3">
                <a @click="selectCar(service)" href="#" v-for="(service,index) in cars" key="index" class="info-box col-md-3 bg-info mx-1 my-1">
                    <span class="info-box-icon"><i class="fas fa-shopping-cart"></i></span>
                    <div class="info-box-content">
                      <span class="info-box-text">@{{service.name}}</span>
                      <span id="price1" class="info-box-number">@{{  formatPrice(service.price)  }} </span>
                      <span id="price_two" class="info-box-number">@{{  formatPrice(service.price_two)  }} </span>
                    </div>
                    <!-- /.info-box-content -->
                </a>
            </div>
        </div>
        <div v-if="selected_extra" class="modal fade" :id="id_modal" 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">@{{ selected_extra.name+ ' ('+formatPrice(selected_extra.price)+')' }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        
                        <div>
                            <div class="form-group">
                                <label> @{{$t("Passenger")}} </label>
                                <v-select   v-model="selected_extra.passenger_passport"  :options="passengers"   :reduce="item => item.passport"  >
                                    <template slot="option" slot-scope="option">
                                        <div class="d-center">
                                          @{{option.passport+': '+option.firstName+' '+option.lastName}}
                                        </div>
                                      </template>
                                      <template slot="selected-option" slot-scope="option">
                                        <div class="d-center">
                                         @{{option.passport+': '+option.firstName+' '+option.lastName}}
                                        </div>
                                      </template>
                                </v-select>
                            </div>
                            <div v-if="selected_extra.car_id">
                            <?php  
                            
                                 $colors= explode(',',config('app.'.'colors'));
                            ?>
                                <div class="form-group">
                                    <label> @{{$t("Color")}} </label>
                                     <select v-model="selected_extra.details.color" class="form-control">
                                        <option value="">{{__('Choose')}}</option>
                                         @foreach(array_values($colors) as $color)
                                         <option value="{{$color}}">{{$color}}</option>
                                         @endforeach
                                     </select>
                                </div>
                                <div class="form-group">
                                    <label> @{{$t("Plate Number")}} </label>
                                    <input type="text" class="form-control" v-model="selected_extra.details.car_number" />
                                </div>
                                <div class="form-group">
                                    <label> @{{$t("Owner Name")}} </label>
                                    <input type="text" class="form-control" v-model="selected_extra.details.owner" />
                                </div>

                                <div class="form-group">
                                    <label> @{{$t("Chassis No.")}} </label>
                                    <input type="text" class="form-control" v-model="selected_extra.details.chassis_number" />
                                </div>

                                <div class="form-group">
                                    <label> @{{$t("Engine No.")}} </label>
                                    <input type="text" class="form-control" v-model="selected_extra.details.engine_number" />
                                </div>

                                <div class="form-group">
                                    <label> @{{$t("Green Insurance No.")}} </label>
                                    <input type="text" class="form-control" v-model="selected_extra.details.green_insurance_number" />
                                </div>
                                
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">@{{ $t("Close") }}</button>


                             <button :disabled="selected_extra.details.car_number == '' || selected_extra.passenger_passport == '' || selected_extra.details.chassis_number == '' ||  selected_extra.details.engine_number == ''||selected_extra.details.color == '' || selected_extra.details.green_insurance_number == '' || selected_extra.details.owner == ''  "  @click="storeExtra()" type="button" class="btn btn-primary">
                               @{{$t("create") }}
                              </button
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
    Vue.component('v-service', {
        props: ['cruise_id', 'passengers'],
        data: function () {
            return {
               cars: [],
               articles: [],
               selected_extra: null,
               id_modal: Date.now()
            }
        },
        watch:{
            'cruise_id': function(){
                this.loadServices();
            }
        },
        mounted: function(){
            this.loadServices();
        },
        methods: {
            selectArticle(article){
                this.selected_extra  = {...article,details: {}};
                $('#'+this.id_modal).modal('show');
            },
            selectCar(car){
            
                this.selected_extra  = {...car,details: {}};
                
               axios.get("/search/car_capacity/"+this.selected_extra.car_id +'/'+this.selected_extra.cruise_id).then((res) => {
                   
                console.log( res.data,this.selected_extra.capacity);
                     var qunatity=res.data;
                
                 if(  res.data < this.selected_extra.capacity){
                    $('#'+this.id_modal).modal('show');
                 }
             else{
                alert('not available');
             }
                 
                   
                });
                
            },
            storeExtra(){
                   this.$emit('select-service',this.selected_extra);
                    $('#'+this.id_modal).modal('hide');
                
               
            },
            loadServices(){
                axios.get("/search/cruise_services/"+this.cruise_id).then((res) => {
                    const data = res.data.map(item => {
                        return {...item, cruise_id: this.cruise_id};
                    });
                    this.cars = data.filter(item => item.car_id !== null);
                    this.articles = data.filter(item => item.article_id !== null);
                });
            }
        },
        template: '#service-template'
    });
</script>
