<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-12">
            <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" id="step-2-tab" data-toggle="tab" href="#step-2" role="tab"
                                aria-controls="step-2" aria-selected="false">{{ __('Passengers') }}</a>
                                
                        </li>
                                 <a  href="{{route('tickets.index')}}"class="nav-link" >back</a>

                    </ul>
                    <div>
                       <form action="{{route('ticket.passenger')}}" method="post" enctype="multipart/form-data">
                          @csrf
                          <input type="hidden" name="ticket_id" value="{{$ticket->id}}">
                           <div class="modal-body row">
                    
                                <div class="form-group col-md-4 required">
                                    <label>{{__('First Name')}}</label>
                                    <input name="firstName"  value="{{$ticket->firstName}}"   type="text" class="form-control" required />
                                </div>
                                <!--end::input-->
                                <!--begin::input-->
                                <div class="form-group  col-md-4 required">
                                    <label>{{__('Last Name')}}</label>
                                    <input name="lastName"  value="{{$ticket->lastName}}"  type="text" class="form-control" required />
                    
                                </div>
                                <!--end::input-->
                
                                <!--begin::input-->
                                <div class="form-group col-md-4 required">
                                    <label>{{__('Gender')}}</label>
                                <select  class="form-control">
                                <option value="">{{__('Choose')}}</option>
                                <option  {{$ticket->gender=='M'?'selected':'' }} value="M">{{__('Male')}}</option>
                                <option {{$ticket->gender=='F'?'selected':'' }} value="F">{{__('Female')}}</option>
                                </select>
                                </div>
                                <!--end::input-->
                                <div class="form-group  col-md-4 required">
                                <label> {{__('Nationality')}} </label>
                                <select name="nationality" class="form-control">
                                    <option value="">{{__('Choose')}}</option>
                                    @foreach($nationalities as $nationality)
                                        <option @if($ticket->nationality  == $nationality ) selected @endif value="{{$nationality}}">
                                             {{ $nationality }} 
                                        </option>
                                    @endforeach
                                </select>
                                  </div>
                                <!--begin::input-->
                                <div class="form-group  col-md-4 required">
                                    <label>{{__('Passport Number')}}</label>
                                    <input name="passport_number" type="text" value="{{$ticket->passport}}" class="form-control" readonly/>
                                </div>
                                <!--end::input-->
                                        
                              <div class="form-group col-md-4 required">
                                <x-label for="birth_date"  > {{__('Birth Date') }}</x-label>
                                  <x-input type="date"  name="birth_date"     value="{{$ticket->birth_date}}" required />

                            </div>
                                <div class="form-group  col-md-4 required ">
                                    <x-label for="place_of"  > {{__('Place Of Birth') }}</x-label>
                                    <x-input type="text"  name="place_of"   value="{{$ticket->place_of}}"  required />
                                </div>
                                <div class="form-group  col-md-4  required ">
                                    <x-label for="expiry_date"  > {{__('Expiry Date') }}</x-label>
                                    <x-input type="date"  name="expiry_date"     value="{{$ticket->expiry_date}}" required />
                                </div>
                                
                                <div class="form-group col-md-4 required">
                                    <x-label for="phone"  > {{__('Mobile Number') }}</x-label>
                                    <x-input type="text"  name="phone"  value="{{$ticket->phone}}" required />
                                </div>
                                
                                <div class="form-group col-md-4 ">
                                    <label> {{__('1ST VACC Dose')}} </label>
                                    <select name="vacc1n_name" class="form-control">
                                    <option value="">{{__('Choose')}}</option>
                                    <option  {{$ticket->vacc1n_name=="ASTRA ZENECA"?'selected':'' }}  value="ASTRA ZENECA">{{__('ASTRA ZENECA')}}</option>
                                    <option{{$ticket->vacc1n_name=="SINOPHARM"?'selected':'' }}  value="SINOPHARM">{{__('SINOPHARM')}}</option>
                                    <option {{$ticket->vacc1n_name=="MODERNA"?'selected':'' }} value="MODERNA">{{__('MODERNA')}}</option>
                                    <option   {{$ticket->vacc1n_name=="BIOTECH"?'selected':'' }}  value="BIOTECH">{{__('BIOTECH')}}</option>
                                    <option  {{$ticket->vacc1n_name=="PFIZER"?'selected':'' }}   value="PFIZER">{{__('PFIZER')}}</option>
                                    <option  {{$ticket->vacc1n_name=="JANSSEN"?'selected':'' }}   value="JANSSEN">{{__('JANSSEN')}}</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4 ">
                                    <x-label for="vacc1n_date"  > {{__(' 1ST V Date') }}</x-label>
                                    <x-input type="date"  name="vacc1n_date" value="{{$ticket->vacc1n_date}}"  required />
                                </div>
                    
                                <div class="form-group col-md-4 ">
                                    <label> {{__('2ND VACC Dose')}} </label>
                                    <select name="vacc2n_name" class="form-control">
                                    <option value="">{{__('Choose')}}</option>
                                    <option {{$ticket->vacc2n_name=="ASTRA ZENECA"?'selected':'' }} value="ASTRA ZENECA">{{__('ASTRA ZENECA')}}</option>
                                    <option  {{$ticket->vacc2n_name=="SINOPHARM"?'selected':'' }} value="SINOPHARM">{{__('SINOPHARM')}}</option>
                                    <option  {{$ticket->vacc2n_name=="MODERNA"?'selected':'' }} value="MODERNA">{{__('MODERNA')}}</option>
                                    <option  {{$ticket->vacc2n_name=="BIOTECH"?'selected':'' }} value="BIOTECH">{{__('BIOTECH')}}</option>
                                    <option  {{$ticket->vacc2n_name=="PFIZER"?'selected':'' }} value="PFIZER">{{__('PFIZER')}}</option>
                                    <option  {{$ticket->vacc2n_name=="JANSSEN"?'selected':'' }} value="JANSSEN">{{__('JANSSEN')}}</option>
                                    </select>
                                </div>
                                     <div class="form-group col-md-4 ">
                                          <x-label for="vacc2n_date"  > {{__(' 2ND V Date') }}</x-label>
                                          <x-input type="date"  name="vacc1n_date"  value="{{$ticket->vacc1n_date}}"  required />
                                      </div>
                                <div class="form-group col-md-4 ">
                                    <x-label for="address"  > {{__('Address') }}</x-label>
                                    <x-input type="text"  name="address"  value="{{$ticket->address}}"  required />
                                </div>
                                <div class="form-group col-md-4 ">
                                    <x-label for="email"  > {{__('E-Mail Address') }}</x-label>
                                    <x-input type="text"  name="email" value="{{$ticket->email}}" required />
                                </div>
                                <div class="form-group col-md-6 required">
                                    <x-label for="passport_file"  > {{__('Passport Photo Copy') }}</x-label>
                                    <div class="image">
                                        
                                       <img src="{{asset('uploads/passport/'.$ticket->passport_file)}}" id="image" width="300px"/>
                                    </div>
                                </div>
                          </div>
                          
                          <button     type="submit" class="btn-btn-primary">save</button>
                         </form>
                    
                    </div>
                </div>
                <div class="card-footer">
                </div>
            </div>
        </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>
 
        <script>
            var app = new Vue({
                el: '#app',
                 data(){
                     return {
                       nationalities:'',
                      ticket:[],
                      firstName:''
                 
                     }
                   },
                          
                created() {
                    moment.locale('en');
                    axios.get("/search/items/nationalities").then((res) => {
                          
                        this.nationalities = res.data;

                    });
                  
                    this.$root.load = false;
                    this.clear();
                },
                methods: {
                   submitPassanger(){
                     console.log(this.firstName)  ;
                   },
                    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 => {
                            s += item.quantity * item.price;
                        });
                        this.booking.segments.retour.services.map(item => {
                            s += item.quantity * item.price;
                        });
                        return s;
                    },
                    book() {
                        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>
            $('#change_image').on('change',function(){
               $('.image').css('display','none');
            })
        </script>
    </x-slot>
</x-app-layout>
