<x-form @submit.prevent="submit">
    <x-modal classModel="modal-xl">
      <div class="row">
        <div class="col-4 card">
            <div class="card-body">
                <div class="form-group">
                    <x-label for="ship_id"  > {{__('Ship') }}</x-label>
                    <v-select name="ship_id" :filterable="false"     v-model="fields.ship_id" @search="fetchShips" :options="ships" :reduce="item => item.id" label="name">
                         <template slot="option" slot-scope="option">
                            <div class="d-center">
                              @{{option.name+'-'+option.ship_number}}
                            </div>
                          </template>
                          <template slot="selected-option" slot-scope="option">
                            <div class="d-center">
                              @{{option.name+'-'+option.ship_number}}
                            </div>
                          </template>
                    </v-select>
                    <x-error v-if="errors && errors.ship_id">@{{ errors.ship_id[0] }}</x-error>
                </div>
                <div class="form-group">
                    <x-label for="cruise_number"  > {{__('Number') }}</x-label>
                    <x-input type="text"  name="cruise_number"  v-model="fields.cruise_number" required />
                    <x-error v-if="errors && errors.cruise_number">@{{ errors.cruise_number[0] }}</x-error>
                </div>
                <div class="form-group">
                    <x-label for="name"  > {{__('Name') }}</x-label>
                    <x-input type="text"  name="name"  v-model="fields.name" required />
                    <x-error v-if="errors && errors.name">@{{ errors.name[0] }}</x-error>
                </div>
                <div class="form-group">
                    <div class="custom-control custom-switch">
                        <x-input name="status" type="checkbox" id="status" v-model="fields.status" class="custom-control-input" />
                        <x-label for="status"  class="custom-control-label" > {{__('Status') }}</x-label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-8">
           <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <x-label for="origin_port"  > {{__('Origin Port') }}</x-label>
                            <v-select name="origin_port"    v-model="fields.origin_port" @search="fetchPorts" :options="ports" :reduce="item => item.code" label="name"  />
                            <x-error v-if="errors && errors.origin_port">@{{ errors.origin_port[0] }}</x-error>
                        </div>
                        <div class="row">
                            <div class="form-group col-6">
                                <x-label for="departure_date"  > {{__('Departure Date') }}</x-label>
                                <x-input type="date"  name="departure_date"  v-model="fields.departure_date" required />
                                <x-error v-if="errors && errors.departure_date">@{{ errors.departure_date[0] }}</x-error>
                            </div>
                            <div class="form-group col-6">
                                <x-label for="departure_time"  > {{__('Departure Time') }}</x-label>
                                <x-input type="time"  name="departure_time"  v-model="fields.departure_time" required />
                                <x-error v-if="errors && errors.departure_time">@{{ errors.departure_time[0] }}</x-error>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <x-label for="destination_port"  > {{__('Destination Port') }}</x-label>
                            <v-select name="destination_port"    v-model="fields.destination_port" @search="fetchPorts" :options="ports" :reduce="item => item.code" label="name"  />
                            <x-error v-if="errors && errors.destination_port">@{{ errors.destination_port[0] }}</x-error>
                        </div>
                        <div class="row">
                            <div class="form-group col-6">
                                <x-label for="arrival_date"  > {{__('Arrival Date') }}</x-label>
                                <x-input type="date"  name="arrival_date"  v-model="fields.arrival_date" required />
                                <x-error v-if="errors && errors.arrival_date">@{{ errors.arrival_date[0] }}</x-error>
                            </div>
                            <div class="form-group col-6">
                                <x-label for="arrival_time"  > {{__('Arrival Time') }}</x-label>
                                <x-input type="time"  name="arrival_time"  v-model="fields.arrival_time" required />
                                <x-error v-if="errors && errors.arrival_time">@{{ errors.arrival_time[0] }}</x-error>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           </div>
           <div class="row">
            <div class="form-group col-6">
                <x-label for="weight"  > {{__('Weight') }}</x-label>
                <x-input type="text"  name="weight"  v-model="fields.weight" required />
                <x-error v-if="errors && errors.weight">@{{ errors.weight[0] }}</x-error>
            </div>
            <div class="form-group col-6">
                <x-label for="bags"  > {{__('Bags') }}</x-label>
                <x-input type="text"  name="bags"  v-model="fields.bags" required />
                <x-error v-if="errors && errors.bags">@{{ errors.bags[0] }}</x-error>
            </div>
        </div>
        </div>
      </div>

        <x-slot name="footer">
            <a @click="save" class="btn btn-success float-left mx-1 float-right link-submit">{{ __('Save') }}</a>
            <button type="submit" class="btn btn-primary float-right link-submit">{{ __('save and continue') }}</button>
        </x-slot>
    </x-modal>
</x-form>