@extends('layouts.app')
@section('content')
    <div class="row">

        <div class="portlet light bg-inverse" style="min-height: 100%;">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-equalizer font-green-haze"></i>&nbsp;
                    <span class="caption-subject font-green-haze bold uppercase">  @lang('layout.VehicleLocationCreate')</span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">
                    
                </div>
            </div>
            <div id="app" class="portlet-body form" style="margin-bottom:50%;">
                <!-- BEGIN FORM-->
                {!! Form::open(array('route' => 'vehicleLocation.store','method'=>'POST','class'=>'form-horizontal', 'id'=>'vehicle_location_form')) !!}
                {{ csrf_field() }}
                <div class="form-body">

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Driver'):</label>
                            <div class="col-md-9">
                                <v-select placeholder="@lang('layout.SelectDriver')" label="name"
                                          v-model="selecteddriver"
                                          :options="allDrivers"
                                          @input="getVehicle"
                                          @click.native="getAllVehicle">
                                </v-select>
                                <input type="hidden" name="driver_id"
                                       v-model.number="(!selecteddriver)?null:selecteddriver.id">
                            </div>
                        </div>
                    </div>      

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('menu.Vehicle'):</label>
                            <div class="col-md-9">
                                  <v-select 
                                    label="name" 
                                    :options="allVehicles"
                                    v-model="selected_driverVehicle"
                                    >
                                </v-select>
                                <input type="hidden" name="vehicle_id"
                                   :value="!selected_driverVehicle?null:selected_driverVehicle.id">
                            </div>
                        </div>
                    </div>                    

                    <div class="col-md-2">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.RentCode'):</label>
                            <div class="col-md-9">
                                  <v-select 
                                    label="code" 
                                    :options="vehicleManagement"
                                    v-model="selected_vehicle_management"
                                    >
                                </v-select>
                                <input type="hidden" name="vehicle_management_id"
                                   :value="!selected_vehicle_management?null:selected_vehicle_management.id">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label col-md-4">@lang('layout.CargoLoading'):</label>
                            <div class="col-md-8">
                                  <v-select 
                                    label="number" 
                                    :options="cargoLoading"
                                    v-model="selected_cargoLoading"
                                    >
                                </v-select>
                                <input type="hidden" name="cargo_loading_id" :value="!selected_cargoLoading?null:selected_cargoLoading.id">
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="row">
                     <div class="col-md-3"> 
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Date'):</label>
                            <div class="col-md-9">
                                <input type="text" name="date" class="form-control date" autocomplete="off">
                            </div>
                        </div> 
                    </div>
                    
                     <div class="col-md-3"> 
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.AlertDate'):</label>
                            <div class="col-md-9">
                                <input type="text" name="date_alert" class="form-control date" autocomplete="off">
                            </div>
                        </div> 
                    </div> 
 
                    {{-- @if(getWhatsApp() =='true' && (getWhatsAppType() == 'direct' || getWhatsAppType() == 'simpleMessage'))
                    <td>
                        <label class="mt-checkbox mt-checkbox-outline" style="color: green;">
                            <i class="fa fa-whatsapp" style="color:green; font-size:20px; margin-top: 5px;"></i>
                            <input type="checkbox"  name="whatsapp" value="5" />
                            <span></span>
                        </label>
                    </td>
                    @endif --}}



                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Description'):</label>
                            <div class="col-md-9">
                                <textarea name="description" class="form-control" placeholder="@lang('layout.Description')"></textarea>
                            </div>
                        </div>
                        
                    </div> 
                </div>

                <div class="row">
                    @if(getWhatsApp() =='true' && (getWhatsAppType() == 'direct' || getWhatsAppType() == 'simpleMessage'))
                    <div class="col-md-3"> 
                       <div class="form-group">
                           <label class="control-label col-md-3">@lang('layout.Whatsapp'):</label>
                           <div class="col-md-9">  
                               {{-- <input type="text" name="date_alert" class="form-control date" autocomplete="off"> --}}
                               <i class="fa fa-whatsapp" style="color:green; font-size:20px; margin-top: 5px;"></i>
                               <input type="checkbox"  name="whatsapp" style="transform: scale(2);cursor:pointer" value="5" />
                               <span></span>
                           </div>
                       </div> 
                   </div> 
                   @endif
                </div>

                            <!--Begin Panels-->
                    <div class="tab-content" style="margin-top: 10px;">
                        <!-- GENERAL QUESTION TAB -->
                        <div class="tab-pane active" id="tab_1_1">
                            <div id="accordion1" class="panel-group">
                              
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a class="accordion-toggle accordion-toggle-styled" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_3"> @lang('layout.OtherInformations')</a>
                                        </h4>
                                    </div>
                                    <div id="accordion1_3" class="panel-collapse ">
                                        <div class="panel-body">

                                       <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">@lang('layout.State')</label>
                                                    <div class="col-md-9">
                                                      <select name="state" class="form-control">
                                                          <option value="">@lang('layout.SelectState')</option>
                                                          <option value="fill">@lang('layout.Fill')</option>
                                                          <option value="empty">@lang('layout.Empty')</option>
                                                      </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">@lang('layout.Road')</label>
                                                    <div class="col-md-9">
                                                      {!! Form::text('road', null, array('placeholder' =>__('layout.Road'),'class' => 'form-control','autocomplete'=>'off')) !!}
                                                    </div>
                                                </div>
                                            </div -->   
                                             <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">@lang('layout.Location')</label>
                                                    <div class="col-md-9">
                                                      {!! Form::text('location', null, array('placeholder' =>__('layout.Location'),'class' => 'form-control','autocomplete'=>'off')) !!}
                                                    </div>
                                                </div>
                                            </div>     
                                        </div> 

                                       <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">@lang('layout.Source')</label>
                                                    <div class="col-md-9">
                                                      {!! Form::text('source', null, array('placeholder' =>__('layout.Source'),'class' => 'form-control','autocomplete'=>'off')) !!}
                                                    </div>
                                                </div>
                                            </div> 
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">@lang('layout.Destination')</label>
                                                    <div class="col-md-9">
                                                        {!! Form::text('destination', null, array('placeholder' =>__('layout.Destination'),'class' => 'form-control')) !!}
                                                    </div>
                                                </div>
                                             </div> 
                                         
                                        </div>  

                    
                         

                                        </div>
                                    </div>
                                </div>
                             
                            </div>
                        </div>
                        <!-- END GENERAL QUESTION TAB -->
                    </div>
            <!--END Panels-->

                   
                </div>
                <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                    <button type="button" @click="handleSubmit($event)"
                            class="btn green">@lang('layout.Submit')</button>
                    <button type="button" class="btn blue"
                            @click="saveAndNew($event)">@lang('layout.SaveAndNew')</button>
                    <a href="{{route('vehicleLocation.index')}}" class="btn default"><i
                                class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                </div>
                {!! Form::close() !!}
            </div>
            <!-- END FORM-->
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        @if(App::getLocale())
    Vue.use(VeeValidate, {
        locale: '{{App::getLocale()}}',
    });
    @else
        Vue.use(VeeValidate, {
            locale: 'en',
        });
        @endif

        $(document).ready(function () {
            $('#initial-value-example').persianDatepicker({
                observer: true,
                format: 'YYYY/MM/DD',
                altField: '#observer-example-alt',
                altFormat: 'u',
                autoClose: true,
            });
        });
        Vue.component("v-select", VueSelect.VueSelect);


        var allDrivers = {!! $allDrivers !!};
        var allVehicles = {!! $allVehicles !!};
        var vehicleManagement = {!! $vehicleManagement !!};
        var cargoLoading = {!! $cargoLoading !!};

        let vu = new Vue({
            el: '#app',
            data: {

                allDrivers: allDrivers,
                allVehicles: allVehicles,
                selected_driverVehicle: null,
                selecteddriver     : null,
                driver_vehicle:allVehicles,
                vehicleManagement:vehicleManagement, 
                selected_vehicle_management:null,
                cargoLoading:cargoLoading,
                selected_cargoLoading:null
            },


            methods: {
                handleSubmit(e) {
                    this.$validator.validate().then(valid => {
                        if (valid) {
                            // alert(e.target);
                            regForm(e.target);
                        }
                    });
                },

                 //Get Driver All Vehicles
                    getVehicle() {
                        if (this.selecteddriver) {
                            axios.get("{{route('callMethod.search')}}",
                                {
                                    params: {
                                        driver_vehicle_plate: this.selecteddriver.plate,
                                        method_name: 'Search_driver_vehicle'
                                    },
                                })
                                .then(function (response) {
                                    if (response.data.result != null) {
                                        vu.selected_driverVehicle=response.data.result;
                                    }
                                    else {
                                        vu.selected_driverVehicle=null;
                                    }
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }
                    },            

                    getAllVehicle() {
                        if (!vu.selecteddriver) {
                        vu.driver_vehicle=vu.allVehicles;
                        }
                    },
                



                saveAndNew() {
                    this.$validator.validate()
                        .then(valid => {
                            if (valid) {

                                var url = "{{route('vehicleLocation.store')}}";
                                form_id = 'vehicle_location_form';
                                var data = $('#' + form_id).serialize();

                                axios.post(url, data)
                                    .then(function (response) {
                                        if (response.data.result == 1) {
                                            $('#' + form_id).trigger('reset');
                                            toastr.success('', response.data.message);
                                            vu.selected_driverVehicle = null;
                                            vu.selecteddriver = null;
                                        }
                                        else {
                                            var message = "{{__('message.Warning')}}";
                                            //$('#error-sound')[0].play();
                                            toastr.warning('', message);
                                        }
                                    })
                                    .catch(function (error) {
                                        console.log(error);
                                        var message = "{{__('message.Warning')}}";
                                        //$('#error-sound')[0].play();
                                        toastr.warning('', message);
                                    });

                            }
                        })
                }
            }
        })

    </script>
@endpush