@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">
    <div class="main-content">
        <div class="content-wrapper">
          <!-- Minimal statistics section start -->
<section id="minimal-statistics">
        <div class="row">
          <div class="col-12 mt-3 mb-1">
            <div class="content-header">Add Shipment Type</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('save_shipment') }}" >
                    @csrf
                      <div class="form-body">
                    
                        <div class="row">
                          <!--<div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                            <fieldset class="form-group">
                              <label for="disabledInput">Country</label>
                              <select class="form-control" name="country" id="country">
                                <option value="">Select Country</option>
                                
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{$country->country}}</option>
                                @endforeach
                                
                              </select>
                            </fieldset>
                          </div>-->

                          <div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                            <fieldset class="form-group">
                              <label for="disabledInput">Vehicle Type</label>
                              <select class="form-control" name="type" id="type">
                                <option value="">Select Vehicle Type</option>
                                @foreach ($types as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                                @endforeach
                              </select>
                            </fieldset>
                          </div>  

                          <div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                            <fieldset class="form-group">
                              <label for="disabledInput">Vehicle Size</label>
                              <select class="form-control" name="size" id="size">
                                <option value="">Select Size</option>
                              </select>
                            </fieldset>
                          </div>

                          <div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                            <fieldset class="form-group">
                                <input type="radio" name="area" value="local"> Local<br>
                                <input type="radio" name="area" value="non-local"> Non-Local<br>
                            </fieldset>
                          </div>
                          
                          <div class="col-xl-4 col-lg-4 col-md-4 mb-1 fromNonLocal" id="fromNonLocal" style="display:none;">
                            
                            <fieldset class="form-group">
                              <label for="disabledInput">From Country</label>
                              <select class="form-control" name="fromCountry" id="from0">
                                <option value="">Select Country</option>
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{$country->country}}</option>
                                @endforeach
                              </select>
                            </fieldset>
                            <fieldset class="form-group">
                              <label for="disabledInput">To Country</label>
                              <select class="form-control" name="toCountry" id="to0">
                                <option value="">Select Country</option>
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{$country->country}}</option>
                                @endforeach
                              </select>
                            </fieldset>
                          </div>  

                          <div class="col-xl-4 col-lg-4 col-md-4 mb-1 toNonLocal" id="toNonLocal" style="display:none;">
                            <fieldset class="form-group">
                              <label for="disabledInput">From City</label>
                              <select class="form-control" name="from[0]" id="from_cities0">
                                <option value="">Select City</option>
                                
                              </select>
                            </fieldset>
                           
                            <fieldset class="form-group">
                              <label for="disabledInput">To City</label>
                              <select class="form-control" name="to[0]" id="cities_to0">
                                <option value="">Select City</option>
                                
                              </select>
                            </fieldset>
                          </div>
                           
                          
                          
                          <div class="col-xl-4 col-lg-4 col-md-4 mb-1 chargesNonLocal" id="chargesNonLocal" style="display:none;">
                            <fieldset class="form-group">
                              <label for="basicInput">Charges (price per km)</label>
                            <input type="text" class="form-control" name="charges_nonlocal[0]" value="{{ old('charges_nonlocal[0]') }}" placeholder="Charges">
                            </fieldset>
                            
                          </div>
                          <p id="output" style="margin-left: 27px;"></p>
                          <div class="row col-xl-12 col-lg-12 col-md-12 mb-1" id="extra"></div>
      
                          <input type="button" class="form-control" value="Add more" id="more" style="display:none" />

                          <div class="col-xl-12 col-lg-12 col-md-12 mb-1" id="chargesLocal" style="display:none;">
                            <fieldset class="form-group">
                              <label for="disabledInput">Country</label>
                              <select class="form-control" name="country" id="from">
                                <option value="">Select Country</option>
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{$country->country}}</option>
                                @endforeach
                              </select>
                            </fieldset>
                            <fieldset class="form-group">
                              <label for="basicInput">Charges (price per km)</label>
                            <input type="text" class="form-control" name="charges" value="{{ old('charges') }}" placeholder="Charges">
                            </fieldset>
                          </div>
                         
                          <div class="col-xl-12 col-lg-12 col-md-12 mb-1">
                            <fieldset class="form-group">
                              <label for="basicInput">Shipment Type</label>
                              <select class="form-control" name="shipment_type" id="shipment_type">
                                <option value="">Select Shipment Type</option>
                                <option value="Heavy Equipment">Heavy Equipment</option>
                                <option value="Military Equipment">Military Equipment</option>
                                <option value="Scrap">Scrap</option>
                                <option value="Trucks">Trucks</option>
                                <option value="Building Material">Building Material</option>
                                <option value="Cleaning Products">Cleaning Products</option>
                                <option value="Engine Oil">Engine Oil</option>
                                <option value="Fodder">Fodder</option>
                                <option value="Food">Food</option>
                                <option value="Meats">Meats</option>
                                <option value="Medicine">Medicine</option>
                                <option value="Milk">Milk</option>
                                <option value="Furnishing">Furnishing</option>
                                <option value="Napkin Rolls">Napkin Rolls</option>
                                <option value="Paper">Paper</option>
                                <option value="Plant">Plant</option>
                                <option value="Plastic">Plastic</option>
                                <option value="Others">Others</option>
                                <option value="Steel">Steel</option>
                                <option value="Animals">Animals</option>
                                <option value="Containers">Containers</option>
                                <option value="Flowers">Flowers</option>
                                <option value="Fruits">Fruits</option>
                                <option value="Vegetable">Vegetable</option>
                              </select>
                            </fieldset>
                          </div>

                          {{-- <div id="extra"></div>
      
                        <input type="button" class="form-control" value="Add more" id="more" /> --}}

                        </div>
                      </div>

                      <div class="col-md-12 text-center mt-2"> <input class="btn btn-success btn-raised" type="submit" value="Submit"> </div>

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


              <div class="backbutton mt-5"><a href="{{ route('list_shipment') }}">  
                <button type="button" class="btn btn-raised btn-primary btn-min-width mr-1 mb-1">Back</button></a>
              </div>

            </div>
          </div>
      </section>
      <!-- // Minimal statistics section end -->
    </div>
</div>

<!-- END : End Main Content-->

@include('partials.footer')

</div>
@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>
$(document).ready(function() {
    var x = 1;
    $('#more').click(function() {
        $('#extra').append('<div class="col-xl-4 col-lg-4 col-md-4 mb-1 fromNonLocal" id="fromNonLocal" ><fieldset class="form-group"><label for="disabledInput">From</label><select class="form-control" name="from['+x+']" id="from['+x+']"><option value="">Select City</option>@foreach ($cities as $city)<option value="{{ $city->city }}">{{ $city->city }}</option>@endforeach</select></fieldset></div><div class="col-xl-4 col-lg-4 col-md-4 mb-1 toNonLocal" id="toNonLocal" ><fieldset class="form-group"><label for="disabledInput">To</label><select class="form-control" name="to['+x+']" id="to'+x+'"><option value="">Select City</option>@foreach ($cities as $city)<option value="{{ $city->city }}">{{ $city->city }}</option>@endforeach</select></fieldset></div><div class="col-xl-4 col-lg-4 col-md-4 mb-1 chargesNonLocal" id="chargesNonLocal" ><fieldset class="form-group"><label for="basicInput">Charges (price per km)</label><input type="text" class="form-control" name="charges_nonlocal['+x+']" value="{{ old("charges_nonlocal['+x+']") }}" placeholder="Charges"></fieldset></div>');
        x++;
    });

    $('input[name ="area"]').on('change', function(){
      var radio = $(this).val();
      if(radio == 'local')
      {
        $('.fromNonLocal').hide();
        $('#more').hide();
        $('.toNonLocal').hide();
        $('.chargesNonLocal').hide();
        $('#chargesLocal').show();
      }
      else
      {
        $('#more').show();
        $('#chargesLocal').hide();
        $('.fromNonLocal').show();
        $('.toNonLocal').show();
        $('.chargesNonLocal').show();
      }
    });
});
$('#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);
            }
        });
});

$('#to0').on('change', function(){
    var type = $(this).val();
    $.ajax({
            headers: {
            'X-CSRF-Token': $('input[name="_token"]').val()
        },
           type:'POST',
           url:"{{ route('cities') }}",
           data:{ type : type },
           success:function(data){
                console.log(data);
                let html = '<option value="">Select City</option>';
                $.each(data,function(key,value){
					html += '<option data-id="'+value.id+'" value="'+value.city+'">'+value.city+'</option>';
				});
             
                $('#cities_to0').html(html);
            }
        });
});

$('#from0').on('change', function(){
    var type = $(this).val();
    $.ajax({
            headers: {
            'X-CSRF-Token': $('input[name="_token"]').val()
        },
           type:'POST',
           url:"{{ route('cities') }}",
           data:{ type : type },
           success:function(data){
                console.log(data);
                let html = '<option value="">Select City</option>';
                $.each(data,function(key,value){
					html += '<option data-id="'+value.id+'" value="'+value.city+'">'+value.city+'</option>';
				});
                $('#from_cities0').html(html);
                
            }
        });
});


$('#cities_to0').on('change', function(){

    var from = $('#from_cities0 :selected').text();
    var to = $(this).val();
    $.ajax({
            headers: {
            'X-CSRF-Token': $('input[name="_token"]').val()
        },
           type:'POST',
           url:"{{ route('distance') }}",
           data:{ from : from, to : to},
           success:function(data){
                console.log(data);
                //alert(data);
                document.getElementById('output').innerHTML = data;
             
                
            }
        });
});
</script>
@endsection