@extends('layouts.master')

@section('title') @lang('translation.Vehicle') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Vehicle @endslot
@slot('title') Add Vehicle @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="edit_form" action="{{ route('vehicles.update', ['vehicle' => $vehicle->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @csrf
    <input name="id" type="hidden"  value="{{ $vehicle->id }}" />
    <div class="card">
            <div class="card-body">
                <h5>Operational Vehicle</h5><br>
               
                <div class="mb-3 row">
                    <label for="oem_id" class="col-md-2 col-form-label">Vendor OEM</label>
                    <div class="col-md-6">
                        <select id="oem_id" name="oem_id" data-selected="{{ $vehicle->oem_id }}" class="form-control">
                            <option value=''>Select...</option>
                        </select>
                        <div  id="oem_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="vehicle" class="col-md-2 col-form-label">Name the Vehicle Dealer</label>
                    <div class="col-md-6"> 
                        <input id="category_id" name="category_id" type="hidden"  value="1">
                        <input id="vehicle_dealer" name="vehicle_dealer" type="text" class="form-control" placeholder="Name the Vehicle Dealer" value="{{ $vehicle->vehicle_dealer }}" required>
                        <div  id="vehicle_dealer_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5>Contact Details</h5><br>
                <div class="mb-3 row">
                    <label for="phone_number" class="col-md-2 col-form-label">Phone Number</label>
                    <div class="col-md-6">
                        <input id="phone_number" name="phone_number" type="text" class="form-control" placeholder="Phone Number" value="{{ $vehicle->phone_number }}" />
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="email" class="col-md-2 col-form-label">Email Id</label>
                    <div class="col-md-6">
                        <input id="email" name="email" type="text" class="form-control" placeholder="Email Id"  value="{{ $vehicle->email }}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="address" class="col-md-2 col-form-label">Address</label>
                    <div class="col-md-6">
                        <input id="address" name="address" type="text" class="form-control" placeholder="Address"  value="{{ $vehicle->address }}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="postal_code" class="col-md-2 col-form-label">Pin Code</label>
                    <div class="col-md-6">
                        <input id="postal_code" name="postal_code" type="text" class="form-control" placeholder="Pin Code"  value="{{ $vehicle->postal_code }}"/>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="city_id" class="col-md-2 col-form-label">City</label>
                    <div class="col-md-6">
                        <select id="city_id" name="city_id" class="form-control">
                            <option value=''>Select...</option>
                            @foreach($cities as $city)
                                <option value="{{ $city->id }}" {{ $city->id == $vehicle->city_id ? 'selected' :'' }}>{{ $city->city}}</option>
                            @endforeach 
                        </select>
                        <div  id="city_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="district_id" class="col-md-2 col-form-label">District</label>
                    <div class="col-md-6">
                        <select id="district_id" name="district_id" class="form-control">
                            <option value=''>Select...</option>
                        </select>
                        <div  id="district_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="state_id" class="col-md-2 col-form-label">State</label>
                    <div class="col-md-6">
                        <select id="state_id" name="state_id" class="form-control">
                            <option value=''>Select...</option>
                        </select>
                        <div  id="state_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="zone_id" class="col-md-2 col-form-label">Zone</label>
                    <div class="col-md-6">
                        <select id="zone_id" name="zone_id" class="form-control">
                            <option value=''>Select...</option>
                        </select>
                        <div  id="zone_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card btn-card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2 btn-sm-end">
                    <button type="submit" class="btn btn-primary waves-effect waves-light">Update</button>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/custom.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        var actionUrl = "{{ route('vendor-oem.oem-by-category') }}";
        var token = "{{ csrf_token() }}";
        updateVendorOemOption(actionUrl, token);
        actionUrl = "{{ route('city') }}";
        updateStateOptions(actionUrl, token);
        updateDistrictOptions(actionUrl, token);
        updateZoneOptions(actionUrl, token);
        $('#city_id').on('change', function() {
            actionUrl = "{{ route('city') }}";
            updateStateOptions(actionUrl, token);
            updateDistrictOptions(actionUrl, token);
            updateZoneOptions(actionUrl, token);
        });
        $( "#edit_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('vendor.vehicle.validate') }}";
            form = $( "#edit_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
    });
    
    </script>
@endsection