<div class="tab-pane fade" id="step-2" role="tabpanel" aria-labelledby="step-2-tab">
    <h5 class="mb-0 d-inline">
            {{__('Passenger data')}}:
    </h5>
    <button  @click.prevent="addChild()" class="btn btn-primary float-right d-inline btn-sm">
        {{__('Add Child')}}
    </button>
    <hr class="mt-3 mb-3"/>
    <div v-if="passengerNumber()<booking.capacity" class="">
        <h4 class="mb-10 font-weight-bold text-dark">
            {{__('Passenger data')}} (@{{passengerNumber()+1}})
        </h4>
        <div class="row">
            <!--begin::input-->
            <div class="form-group col-md-3 required">
                <label> {{__('Title')}} </label>
                <select v-model="passenger.called" class="form-control">
                    <option value="">{{__('Choose')}}</option>
                    <option v-for="(called,index) in calleds" :key="index" :value="called">
                        @{{ called }}
                    </option>
                </select>
            </div>


            <div class="form-group col-md-3 required ">
                <x-label for="firstName"  > {{__('First Name') }}</x-label>
                <x-input type="text"  name="firstName"  v-model="passenger.firstName" required />
            </div>
            <div class="form-group col-md-3 required ">
                <x-label for="lastName"  > {{__('Last Name') }}</x-label>
                <x-input type="text"  name="lastName"  v-model="passenger.lastName" required />
            </div>
            <div class="form-group col-md-3 required">
                    <label>{{__('Gender')}}</label>
                <select v-model="passenger.gender" class="form-control">
                <option value="">{{__('Choose')}}</option>
                <option value="M">{{__('Male')}}</option>
                <option value="F">{{__('Female')}}</option>
                </select>
                </div>

            <div class="form-group col-md-3 required">
                <label> {{__('Nationality')}} </label>
                <select v-model="passenger.nationality" class="form-control">
                    <option value="">{{__('Choose')}}</option>
                    <option v-for="(nationality,index) in nationalities" :key="index" :value="nationality">
                        @{{ nationality }}
                    </option>
                </select>
            </div>
        
            <div class="form-group col-md-3 required ">
                <x-label for="birth_date"  > {{__('Birth Date') }}</x-label>
                <x-input type="date"  name="birth_date"  v-model="passenger.birth_date" required />
            </div>
            <div class="form-group col-md-3 required ">
                <x-label for="place_of"  > {{__(' Place Of Birth') }}</x-label>
                <x-input type="text"  name="place_of"  v-model="passenger.place_of" required />
            </div>

            <div class="form-group col-md-3 required ">
                <x-label for="passport"  > {{__('Passport Number') }}</x-label>
                <x-input type="text"  name="passport_number"  v-model="passenger.passport" required />
            </div>
            <div class="form-group col-md-3 required ">
                <x-label for="expiry_date"  > {{__('Expiry Date') }}</x-label>
                <x-input type="date"  name="expiry_date"  v-model="passenger.expiry_date" required />
            </div>

            <div class="form-group col-md-3 required">
                <x-label for="phone"  > {{__('Mobile Number') }}</x-label>
                <x-input type="text"  name="phone"  v-model="passenger.phone" required />
            </div>
            
            <div class="form-group col-md-3 ">
                <label> {{__('1ST VACC Dose')}} </label>
                <select v-model="passenger.vacc1n_name" class="form-control">
                <option value="">{{__('Choose')}}</option>
                <option value="ASTRA ZENECA">{{__('ASTRA ZENECA')}}</option>
                <option value="SINOPHARM">{{__('SINOPHARM')}}</option>
                <option value="MODERNA">{{__('MODERNA')}}</option>
                <option value="BIOTECH">{{__('BIOTECH')}}</option>
                <option value="PFIZER">{{__('PFIZER')}}</option>
                <option value="JANSSEN">{{__('JANSSEN')}}</option>
                <option value="JANSSEN">{{__('Sputnik')}}</option>
               
                </select>
            </div>
            <div class="form-group col-md-3 ">
                <x-label for="vacc1n_date"  > {{__(' 1ST V Date') }}</x-label>
                <x-input type="date"  name="vacc1n_date"  v-model="passenger.vacc1n_date" required />
            </div>

            <div class="form-group col-md-3  ">
                <label> {{__('2ND VACC Dose')}} </label>
                <select v-model="passenger.vacc2n_name" class="form-control">
                <option value="">{{__('Choose')}}</option>
                <option value="ASTRA ZENECA">{{__('ASTRA ZENECA')}}</option>
                <option value="SINOPHARM">{{__('SINOPHARM')}}</option>
                <option value="MODERNA">{{__('MODERNA')}}</option>
                <option value="BIOTECH">{{__('BIOTECH')}}</option>
                <option value="PFIZER">{{__('PFIZER')}}</option>
                <option value="JANSSEN">{{__('JANSSEN')}}</option>
                <option value="JANSSEN">{{__('Sputnik')}}</option>
               
                </select>
            </div>
                 <div class="form-group col-md-3 ">
                      <x-label for="vacc2n_date"  > {{__(' 2ND V Date') }}</x-label>
                      <x-input type="date"  name="vacc1n_date"  v-model="passenger.vacc2n_date" required />
                  </div>
            <div class="form-group col-md-3 ">
                <x-label for="address"  > {{__('Address') }}</x-label>
                <x-input type="text"  name="address"  v-model="passenger.address" required />
            </div>
            <div class="form-group col-md-3 ">
                <x-label for="email"  > {{__('E-Mail Address') }}</x-label>
                <x-input type="text"  name="email"  v-model="passenger.email" required />
            </div>
        </div>
        <hr class="mt-2 mb-3"/>
        <div class="row">
            <div class="form-group col-md-6 required">
                <x-label for="phone"  > {{__('Passport Photo Copy') }}</x-label>
                <x-input type="file" id="file"  name="file"  v-on:change="handleFileUpload" required />
            </div>
            <div class="col-md-6 img-thumbnail " style="height:200px">
                <img class="float-right" style="height:100%" :src="urlFile(passenger.passport_file)" alt="No Image Available" />
            </div>
        </div>

        <div class="row">
            <button :disabled="
                                 passenger.firstName == '' ||
                                 passenger.lastName == '' ||
                                
                                 passenger.phone == '' ||
                                 passenger.called == '' ||
                                 passenger.nationality == '' ||
                                 passenger.phone == ''||
                                 passenger.birth_date==''||
                                 passenger.place_of==''||
                                 passenger.passport=='' ||
                                 passenger.passport_file==''||
                                 passenger.place_of==''||
                                 passenger.expiry_date==''|| isChild()
                                 " @click.prevent="storePassenger()" class="btn btn-success">
                {{__('Save')}}
            </button>
        </div>
    </div>
    <div v-if="booking.passengers.length" class="mt-2">
        <h4 class="mb-10 font-weight-bold text-dark"> {{__('Passenger List')}}</h4>
        <table class="table table-separate table-head-custom table-checkable">
            <thead>
                <tr>
                    <th>{{__('Title')}}</th>
                    <th>{{__('First Name')}}</th>
                    <th>{{__('Last Name')}}</th>
                    <th>{{__('Passport Number')}}</th>
                    <th>{{__('Nationality')}}</th>
                    <th>{{__('Phone Number')}}</th>
                    <th>{{__('Address')}}</th>
                    <th>{{__('E-Mail Address')}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-show="!passenger.is_child" v-for="passenger in booking.passengers" :key="passenger.index">
                    <td>@{{ passenger.called }}</td>
                    <td>@{{ passenger.firstName }}</td>
                    <td>@{{ passenger.lastName }}</td>
                    <td>@{{ passenger.passport }}</td>
                    <td>@{{ passenger.nationality }}</td>
                    <td>@{{ passenger.phone }}</td>
                    <td>@{{ passenger.address }}</td>
                    <td>@{{ passenger.email }}</td>
                 
                </tr>
            </tbody>
        </table>
        <hr>
        <h4 class="mb-10 font-weight-bold text-dark"> {{__('Infants List')}}</h4>
        <!--begin: Datatable-->
        <table class="table table-separate table-head-custom table-checkable">
            <thead>
                <tr>
                    <th>{{__('Birth Date')}}</th>
                    <th>{{__('First Name')}}</th>
                    <th>{{__('Last Name')}}</th>
                    <th>{{__('Passport Number')}}</th>
                    <th>{{__('Expiry Date')}}</th>
                    <th>{{__('Edite')}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-show="passenger.is_child" v-for="passenger in booking.passengers" :key="passenger.index">
                    <td>@{{ passenger.birth_date }}</td>
                    <td>@{{ passenger.place_of }}</td>
                    <td>@{{ passenger.firstName }}</td>
                    <td>@{{ passenger.lastName }}</td>
                    <td>@{{ passenger.passport }}</td>
                    <td>@{{ passenger.expiry_date }}</td>
                    <td>
                        <button type="button" @click="editChild(passenger)" class="btn btn-primary">
                            <i class="fa fa-edit"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

<div class="modal fade" id="addNew2" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-body row">
                <!--begin::input-->

                <div class="form-group col-md-12 required">
                    <label>{{__('First Name')}}</label>
                    <input name="firstName" v-model="passenger.firstName" type="text" class="form-control" required />
                </div>
                <!--end::input-->
                <!--begin::input-->
                <div class="form-group col-md-12 required">
                    <label>{{__('Last Name')}}</label>
                    <input name="lastName" v-model="passenger.lastName" type="text" class="form-control" required />
                </div>
                <!--end::input-->

                <!--begin::input-->
                <div class="form-group col-md-12 required">
                    <label>{{__('Gender')}}</label>
                <select v-model="passenger.gender" class="form-control">
                <option value="">{{__('Choose')}}</option>
                <option value="M">{{__('Male')}}</option>
                <option value="F">{{__('Female')}}</option>
                </select>
                </div>
                <!--end::input-->
                <div class="form-group col-md-12 required">
                <label> {{__('Nationality')}} </label>
                <select v-model="passenger.nationality" class="form-control">
                    <option value="">{{__('Choose')}}</option>
                    <option v-for="(nationality,index) in nationalities" :key="index" :value="nationality">
                        @{{ nationality }}
                    </option>
                </select>
                  </div>
                <!--begin::input-->
                <div class="form-group col-md-12 required">
                    <label>{{__('Passport Number')}}</label>
                    <input name="passport_number" v-model="passenger.passport" type="text" class="form-control" />
                </div>
                <!--end::input-->
                        
                <div class="form-group col-md-12 required">
                <x-label for="birth_date"  > {{__('Birth Date') }}</x-label>
                <x-input type="date"  name="birth_date"  v-model="passenger.birth_date" required />
            </div>
            <div class="form-group col-md-12 required ">
                <x-label for="place_of"  > {{__('Place Of Birth') }}</x-label>
                <x-input type="text"  name="place_of"  v-model="passenger.place_of" required />
            </div>
            <div class="form-group col-md-12 required ">
                <x-label for="expiry_date"  > {{__('Expiry Date') }}</x-label>
                <x-input type="date"  name="expiry_date"  v-model="passenger.expiry_date" required />
            </div>
            <div class="form-group col-md-6 required">
                <x-label for="passport_file"  > {{__('Passport Photo Copy') }}</x-label>
                <x-input type="file"   name="file_child"  v-on:change="handleFileUpload" required />
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    @{{ $t("close") }}
                </button>
                <button :disabled="passenger.firstName == '' || passenger.lastName == '' || passenger.birth_date==''|| passenger.expiry_date=='' || passenger.place_of=='' ||  passenger.passport=='' || !isChild()" v-if="!editMode" @click="storeChild" type="button" class="btn btn-primary">
                    @{{$t("create") }}
                </button>
                <button  v-if="editMode" @click="storeChild" type="button" class="btn btn-primary">
                    @{{ $t("update") }}
                </button>
            </div>
        </div>
    </div>
</div>