@extends('layouts.master')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
@endsection

@section('content')
<div class="main-panel">
        
    <!-- BEGIN : Main Content-->
    <div class="main-content">
      <div class="content-wrapper"><!-- HTML (DOM) sourced data -->
<section class="basic-elements">
    <div class="row">
      <div class="col-sm-12">
        <div class="content-header">Add Insurance</div>
      </div>
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
            <li>{{$error}}</li>
        @endforeach
    </ul>
    </div>
    @endif
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-content mt-4">
            <div class="px-3">
            <form class="form" method="POST" action="{{ route('createInsurance') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-body">
                  
                  <div class="row">
                    <div class="col-md-12 mb-1">
                      <fieldset class="form-group">
                        <label for="basicInput">Insurance (Value in percentage)</label>
                        @if($insurance != null)
                      <input type="text" class="form-control" name="insurance" value="{{ $insurance->insurance }}" placeholder="Insurance">
                      @else
                      <input type="text" class="form-control" name="insurance" value="" placeholder="Insurance">
                      @endif

                      </fieldset>
                      <fieldset class="form-group">
                        <label for="basicInput">Vat (Value in percentage)</label>
                        @if($insurance != null)

                      <input type="text" class="form-control" name="vat" value="{{ $insurance->vat }}" placeholder="Vat">
                      @else
                      <input type="text" class="form-control" name="vat" value="" placeholder="Vat">
                      @endif

                      </fieldset> 
                     
                    </div>
                  </div>
                </div>

                <div class="col-md-12 text-center mt-2"> <input class="btn btn-raised btn-primary btn-min-width mr-1 mb-1" type="submit" value="Submit"> </div>

              </form>
            </div>
          </div>
        </div>


            

      </div>
    </div>
  </section>
  <!--/ HTML (DOM) sourced data -->
</div>
</div>
<!-- END : End Main Content-->

@endsection

@section('scripts')
<script src="{{ asset('app-assets/vendors/js/datatable/datatables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('app-assets/js/data-tables/datatables-sources.js') }}" type="text/javascript"></script>
<script>
$('#type').on('change', function(){
    var type = $(this).val();
		$.ajax({
            headers: {
            'X-CSRF-Token': $('input[name="_token"]').val()
        },
           type:'POST',
           url:"{{ route('get_vehicle_type_sizes') }}",
           data:{ type : type },
           success:function(data){
                console.log(data);
                let html = '<option value="">Select Size</option>';
                $.each(data,function(key,value){
					html += '<option data-id="'+value.id+'" value="'+value.id+'">'+value.name+'</option>';
				});
                $('#size').html(html);
            }
        });
});
</script>
@endsection