<x-form @submit.prevent="submit">
    <x-modal>
        <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">
                <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="row">
            <div class="form-group col-6">
                <x-label for="origin_port"  > {{__('Origin Port') }}</x-label>
                <v-select name="origin_port"    v-model="fields.origin_port" @search="fetchOriginPorts" :options="origin_ports" :reduce="item => item.code" label="name"  />
                <x-error v-if="errors && errors.origin_port">@{{ errors.origin_port[0] }}</x-error>
            </div>
            <div class="form-group col-6">
                <x-label for="destination_port"  > {{__('Destination Port') }}</x-label>
                <v-select name="destination_port"    v-model="fields.destination_port" @search="fetchDestinationPorts" :options="destination_ports" :reduce="item => item.code" label="name"  />
                <x-error v-if="errors && errors.destination_port">@{{ errors.destination_port[0] }}</x-error>
            </div>
        </div>

        <div class="form-group">
            <label for="">Subject Type</label>
            <select class="form-control" v-model="subject_type">
                <option value="room-type">Room Type</option>
                <option value="car">Car</option>
                <option value="article">Article</option>
            </select>
        </div>
        <div v-if="subject_type === 'car'">
            <x-label for="car_id"  > {{__('Car') }}</x-label>
            <v-select name="car_id"    v-model="fields.car_id" @search="fetchCars" :options="cars" :reduce="item => item.id" label="type"  />
            <x-error v-if="errors && errors.car_id">@{{ errors.car_id[0] }}</x-error>
        </div>
        <div v-else-if="subject_type === 'room-type'">
            <x-label for="room_type_id"  > {{__('Room Type') }}</x-label>
            <v-select name="room_type_id"    v-model="fields.room_type_id" @search="fetchRoomTypes" :options="room_types" :reduce="item => item.id" label="name"  />
            <x-error v-if="errors && errors.room_type_id">@{{ errors.room_type_id[0] }}</x-error>
        </div>
        <div v-else="subject_type === 'article'">
            <x-label for="article_id"  > {{__('Article') }}</x-label>
            <v-select name="article_id"    v-model="fields.article_id" @search="fetchArticles" :options="articles" :reduce="item => item.id" label="name"  />
            <x-error v-if="errors && errors.article_id">@{{ errors.article_id[0] }}</x-error>
        </div>
        <div class="row">
            <div class="form-group col-6">
                <x-label for="price"  > {{__('Price') }}</x-label>
                <x-input type="text"  name="price"  v-model="fields.price" required />
                <x-error v-if="errors && errors.price">@{{ errors.price[0] }}</x-error>
            </div>
            <div class="form-group col-6">
                <x-label for="price_two"  > {{__('Price Two') }}</x-label>
                <x-input type="text"  name="price_two"  v-model="fields.price_two" required />
                <x-error v-if="errors && errors.price_two">@{{ errors.price_two[0] }}</x-error>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-12" v-if="subject_type !== 'room-type'">
                <x-label for="qty"  > {{__('Qty') }}</x-label>
                <x-input type="text"  name="qty"  v-model="fields.qty" required />
                <x-error v-if="errors && errors.qty">@{{ errors.qty[0] }}</x-error>
            </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>