<x-app-layout>
    <x-slot name="after_style">
        <link href="/bower_components/smartwizard/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
    </x-slot>

    <div class="row mt-2">
        <div class="col-md-9">
            <div class="card">
                <div class="card-body" id="smartwizard">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class=" nav-link active" id="step-1-tab" data-toggle="tab" href="#step-1" role="tab"
                                aria-controls="step-1" aria-selected="true">{{ __('Choose Cruise') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="step-2-tab" data-toggle="tab" href="#step-2" role="tab"
                                aria-controls="step-2" aria-selected="false">{{ __('Passengers') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="step-3-tab" data-toggle="tab" href="#step-3" role="tab"
                                aria-controls="step-3" aria-selected="false">{{ __('Services') }}</a>
                        </li>
                        <li class="nav-item" id="tab_curise" style="display:none">
                            <a class="nav-link" id="step-4-tab" data-toggle="tab" href="#step-4" role="tab"
                                aria-controls="step-4" aria-selected="false">{{ __('Choose Cruise Return') }}</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="nav-tabContent">
                        @include('booking.step.choose_booking')
                        @include('booking.step.passengers')
                        @include('booking.step.services')
                        
                        
                        @include('booking.step.choose_booking_retour')
                    </div>
                </div>
                <div class="card-footer">
                    @include('booking.pagination',['end_step'=>3])
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-danger mt-2">
                <div class="card-header">
                    <div class="input-icon row">
                         <div class="form-check">
                          <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" v-model="has_retour" >
                          <label class="form-check-label" for="flexCheckChecked">
                                    {{ __('Round-trip' ) }}
                           </label>
                         </div>
                    </div>
               </div>
            </div>
            <v-card :is_bay="(step===3&&!has_retour)||(step===4&&booking.segments.retour.room_type)" :booking='booking' :step="step" :has_retour="has_retour"  :book="book" />
        </div>

    </div>



    <x-slot name="after_script">
        <script src="/bower_components/smartwizard/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
        <script src="/bower_components/admin-lte/plugins/moment/moment.min.js"></script>
        @include('booking.components.booking')
        @include('booking.components.services')
        @include('booking.components.card')
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    step: 1,
                    has_retour: false,
                    colors:[],
                    booking: {
                        capacity: 0,
                        passengers: [],
                        segments: {
                            aller: {
                                cruise_id: null,
                                room_type_id: null,
                                cruise: null,
                                room_type: null,
                                services: [],
                            },
                            retour: {
                                cruise_id: null,
                                room_type_id: null,
                                cruise: null,
                                room_type: null,
                                services: [],
                            }
                        }
                    },
                    passenger: {},
                    editMode: false,
                    search: {
                        from: '',
                        to: '',
                        departure_date: "<?php echo date('Y-m-d'); ?>",
                        has_retour: false,
                        retour_departure_date: "<?php echo date('Y-m-d'); ?>",
                    }
                },
                created(){
                  this.getColors();  
                },
                watch: {
                    has_retour: function() {
                        this.clear();
                    },
                    step: function() {
                        $("#step-" + this.step + "-tab").tab('show');
                        window.location.hash = "step-" + this.step;
                    }
                },
                mounted() {
                    moment.locale('en');
                    axios.get("/search/items/nationalities").then((res) => {
               
                        this.nationalities = res.data;

                    });
               
                    axios.get("/search/items/calleds").then((res) => {
                        this.calleds = res.data;
                    });
                    this.$root.load = false;
                    this.clear();
                },
                methods: {
                    getColors(){
                             axios.get("/search/items/colors").then((res) => {
               
                        this.colors = res.data;
                        console.log(this.colors );

                    });
                    },
                    storeService(service, type) {
                        var booking = this.booking.segments[type];
                        

                        if(service.car_id){
                                var car = booking.services.filter(item => service.car_id!== undefined)[0];
                                if(car !== undefined&&confirm('Do you want to update car')){
                                    booking.services= booking.services.map(item => {
                                        if(item.car_id){
                                            return {
                                                ...service,
                                                quantity: 1
                                            };
                                        }
                                        return item;
                                    });
                                    return;
                                }
                                
                        }

                        var v = booking.services.filter(item => service.id === item.id)[0];
                        if (v !== undefined) {
                            v.quantity += 1;
                        } else {
                            booking.services.push({
                                ...service,
                                quantity: 1
                            });
                        }

                    },
                    next() {
                        this.step++;
                    },
                    prev() {
                        this.step--;
                    },
                    isNext() {
                        switch (this.step) {
                            case 1:
                                return this.booking.segments.aller.room_type;
                                break;
                            case 2:
                                return this.booking.passengers.length >= this.booking.capacity;
                                break;
                            default:
                                return true;
                                break;
                        }
                    },
                    selectRoomType(room_type, type) {
                        var booking = this.booking.segments[type];
                        booking.room_type = room_type;
                    },
                    changeCruise(cruise, type) {
                        var booking = this.booking.segments[type];
                        booking.cruise = cruise;
                    },
                    changeCapacity(capacity) {
                        this.booking.capacity = capacity;
                    },
                    passengerNumber() {
                        return this.booking.passengers.length;
                    },
                    storePassenger() {
                        const config = {
                            headers: {
                                'content-type': 'multipart/form-data'
                            }
                        }
    
                        let formData = new FormData();
                        _.each(this.passenger, (value, key) => {
                          formData.append(key, value)
                        })
                        const vm = this;
                         axios.post("{{route('card_add_passenger')}}", formData, config)
                        .then(function (res) {
                          vm.booking.passengers = [...vm.booking.passengers, {id: vm.booking.passengers.length + 1, ...vm.passenger }]
                          vm.passenger = vm.clearPassenger();
                           $("#addNew2").modal("hide");
                        });
                        
                    },
                    editPassenger(passenger) {
                        this.booking.passengers = this.booking.passengers.filter(item => item.id !== passenger.id);
                        this.passenger = {
                            ...passenger
                        };
                    },
                    addChild(id) {
                        this.clearPassenger();
                        $("#addNew2").modal("show");
                        this.editMode = false;
                        this.passenger.is_child = true;
                    },
                    storeChild() {
                        this.storePassenger();
                       
                    },
                    editChild(passenger) {
                        $("#addNew2").modal("show");
                        this.editPassenger(passenger);
                        this.editMode = true;
                        this.passenger.is_child = true;
                    },
                    passengerNumber(booking) {
                        return this.booking.passengers.filter(item => item.is_child !== 0).length;
                    },
                    clearPassenger() {
                        return this.passenger = {
                            firstName: "",
                            lastName: "",
                            nationality: "",
                            called: "",
                            booking: "",
                            passport: "",
                            phone: "",
                            email: "",
                            address: "",
                            mobile: "",
                            is_child: false,
                            birth_date: "",
                            pcrneg: "",
                            vacc1n_name: "",
                            vacc1n_date: "",
                            vacc2n_name: "",
                            vacc2n_date: "",
                            place_of: "",
                            gender: "",
                            expiry_date: "",
                            passport_file: ""
                        };
                    },
                    isChild(){
                        const d1 = new Date(this.passenger.birth_date );
                        const d2 =  new Date();
                        var months = (d2.getFullYear() - d1.getFullYear()) * 12;
                        months -= d1.getMonth();
                        months += d2.getMonth();
                        return months <= parseInt("{{config('booking.age_child')}}") ;// inf months age 
                    },
                    clear() {
                        this.clearPassenger();
                        this.booking =  {
                            capacity: 0,
                            passengers: [],
                            segments: {
                                aller: {
                                    cruise_id: null,
                                    room_type_id: null,
                                    cruise: null,
                                    room_type: null,
                                    services: [],
                                },
                                retour: {
                                    cruise_id: null,
                                    room_type_id: null,
                                    cruise: null,
                                    room_type: null,
                                    services: [],
                                }
                            }
                        };
                        this.$root.load = false;
                        this.step = 1;
                    },
                      total() {
                         var s = 0;
                        if (this.booking.segments.aller.room_type) s += this.booking.capacity * this.booking.segments.aller.room_type.price;
                        if (this.booking.segments.retour.room_type) s += this.booking.capacity * this.booking.segments.retour.room_type.price;
                        this.booking.segments.aller.services.map(item => {
                            if(this.has_retour){
                            s += item.quantity * item.price_two;
                                
                            }
                            else{
                                
                                s += item.quantity * item.price;
                            }
                        });
                        this.booking.segments.retour.services.map(item => {
                            if(this.has_retour){
                            s += item.quantity * item.price_two;
                            }
                            else{
                            s += item.quantity * item.price;
                                
                            }
                        });
                         return s;
                    },
                    book() {
                        alert(this.total());
                         if (this.total() > this.$root.cota.balance) {
                            this.error(this.$t('You do not have enough credit to perform this operation'));
                            return false;
                        }
                        axios.post("{{ route('booking.store') }}", {
                                booking: this.booking,
                                has_retour: this.has_retour
                            })
                            .then((res) => {
                                this.clear();
                                window.open("/booking/print/" + res.data.id, "_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=500,height=400" );
                            })
                            .catch(error => {
                                this.error(error);
                            });
                    },
                      handleFileUpload(e){
                        this.passenger.passport_file = e.target.files[0];
                      }
                      ,
                      urlFile(file){
                          if(!file) return "";
                          return URL.createObjectURL(file);
                      }

                }
            });

        </script>
        <script>
            $(document).ready(function() {
                $('#myTab').on('click', 'a', function(e) {
                    e.preventDefault();

                    // Add this line
                    window.location.hash = $(this).attr('href');

                    $(this).tab('show');
                });


                $('#smartwizard').smartWizard({
                    selected: 0, // Initial selected step, 0 = first step
                    theme: 'dots',
                    autoAdjustHeight: false,
                    toolbarSettings: {
                        toolbarPosition: 'none', // none, top, bottom, both
                        toolbarButtonPosition: 'right', // left, right, center
                        showNextButton: true, // show/hide a Next button
                        showPreviousButton: true, // show/hide a Previous button
                        toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
                    }
                });
            });

        </script>
        <script>
        $('#flexCheckChecked').change(function() {
          
            if ($('#flexCheckChecked').is(':checked')) {
               $('#tab_curise').css('display','inline');

            }
            else{
               $('#tab_curise').css('display','none');
            }
        });
        </script>
    </x-slot>
</x-app-layout>
