@extends('layouts.adminmaster')
@section('styles')
<link rel="stylesheet" href="{{asset('css/admincss/select2.min.css')}}">
@endsection
@section('admincontent')

<!-- Breadcubs Area Start Here -->
<div class="breadcrumbs-area">
  <h3>Vehicle Type</h3>
  <ul>
    <li>
      <a href="{{url('admin/dashboard')}}">Home</a>
    </li>
    <li>Vehicletype</li>
  </ul>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success alert-dismissible">
  {{ $message }}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
  </button>
</div>
@elseif($message = Session::get('failure'))
<div class="alert alert-dismissible alert-danger">
  {{ $message }}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
  </button>
</div>
@endif
<!-- Breadcubs Area End Here -->
<!-- Student Table Area Start Here -->
<div class="card height-auto">
  <div class="card-body">
    <div class="heading-layout1">
      <div class="item-title">
        <h3>All Routes</h3>
      </div>
      <div class="dropdown">
        @can('routes-create')
        <button type="button" class="modal-trigger fw-btn-fill btn-gradient-yellow" data-toggle="modal" data-target="#large-modal">Add Routes</button>
        @endcan
      </div>
    </div>
    <div class="table-responsive">
      <table class="table display data-table text-nowrap dataTable">
        <thead>
          <tr>
            <th>S no.</th>
            <th>Name</th>
            <th>Start Point</th>
            <th>End Point</th>
            <th>Distance</th>
            <th>Status</th>
            <th class="text-right">Action</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($routes as $key => $per)
          <tr>
            <td>{{ ++$key }}</td>
            <td>{{ $per->name}}</td>
            <td>{{ $per->start_point}}</td>
            <td>{{ $per->end_point}}</td>
            <td>{{ $per->distance}}</td>
            <td>{{ $per->status}}</td>
            <td class="text-right">
             @can('routes-edit')
             <a class="btn-fill-sm text-light radius-4 gradient-dodger-blue" data-toggle="modal" data-target="#edit-modal" onclick="edit('{{$per->id}}','{{$per->name}}','{{$per->start_point}}','{{$per->end_point}}','{{$per->distance}}','{{$per->status}}')">Edit</a>
             @endcan
             @can('routes-fee')
                <a class="btn-fill-sm text-light radius-4 gradient-dodger-blue" data-toggle="modal" data-target="#ratemodal" onclick="ratemap('{{$per->id}}','{{$per->name}}')">Add Rate</a>
             @endcan
             @can('routes-delete')
              <a class="btn-fill-sm text-light radius-4 bg-gradient-gplus" data-toggle="modal" data-target="#delete-modal" onclick="destroy('{{$per->id}}')" style="display:none">Delete</a>
             @endcan
           </td>
         </tr>
         @endforeach
       </tbody>
     </table>
   </div>
 </div>
</div>



<div class="modal fade" id="large-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Route</h5>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" action="{{route('route.store')}}">
            {{csrf_field()}}
            <div class="modal-body">
                <div class="row gutters-15">
                  	<div class="form-group col-6">
	                    <label>Name <span class="text-red">*</span></label>
	                    <input type="text" name="name" class="form-control" required>
                  	</div>
                  	<div class="form-group col-6">
	                    <label>Start Point <span class="text-red">*</span></label>
	                    <input type="text" name="start_point" class="form-control" required>
                  	</div>
                  	<div class="form-group col-6">
	                    <label>End Point <span class="text-red">*</span></label>
	                    <input type="text" name="end_point" class="form-control" required>
                  	</div>
                  	<div class="form-group col-6">
	                    <label>Distance (Km)<span class="text-red">*</span></label>
	                    <input type="number" name="distance" class="form-control" step="any" required>
                  	</div>
                  	<div class="form-group col-6">
	                    <label>Status <span class="text-red">*</span></label><br>
	                    <input type="radio" name="status" value="0" checked>&nbsp;Show
	                    <input type="radio" name="status" value="1">&nbsp;Hide
                  	</div>
                </div>

                      
            </div>
            <div class="modal-footer">
                <button type="submit" class="footer-btn bg-linkedin">Save</button>
                <button type="button" class="footer-btn bg-dark-low" data-dismiss="modal">Close</button>
            </div>
          </form>
        </div>
    </div>
</div>



<div class="modal fade" id="ratemodal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Rate for <span id="route_title"></span></h5>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row gutters-15">
                    <table class="table">
                        <thead>
                            <tr>
                              <th style="width: 50%;">Prali Name</th>
                              <th style="width: 20%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pralilist as $prali)
                            <tr>
                                <td>{{$prali->name}}</td>
                                <td>
                                    <input type="hidden" id="type_id">
                                    <button class="btn-fill-sm text-light radius-4 gradient-dodger-blue praliselect" data-prali_id="{{$prali->id}}" data-praliname="{{$prali->name}}">Add Price</button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Vehicle Type</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="edit-form">
              @csrf
              @method('patch')
            <div class="modal-body">
                <div class="row gutters-15">
                	<input type="hidden" name="id" value="" class="route_id">
                  	<div class="form-group col-6">
	                    <label>Name <span class="text-red">*</span></label>
	                    <input type="text" name="name" class="form-control route_name">
                  	</div>
                  	<div class="form-group col-6">
	                    <label>Start Point <span class="text-red">*</span></label>
	                    <input type="text" name="start_point" class="form-control route_start">
                  	</div>
                  	<div class="form-group col-6">
	                    <label>End Point <span class="text-red">*</span></label>
	                    <input type="text" name="end_point" class="form-control route_end">
                  	</div>
                  	<div class="form-group col-6">
	                    <label>Distance <span class="text-red">*</span></label>
	                    <input type="text" name="distance" class="form-control route_distance">
                  	</div>
                  	<div class="form-group col-6">
	                    <label>Status <span class="text-red">*</span></label>
	                    <input type="radio" name="status" class="route_status show" value="0">&nbsp;Show
	                    <input type="radio" name="status" class="route_status hide" value="1">&nbsp;Hide
                  	</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="footer-btn bg-linkedin">Save</button>
                <button type="button" class="footer-btn bg-dark-low" data-dismiss="modal">Close</button>
            </div>
          </form>
        </div>
    </div>
</div>

<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Vehicle Type</h5>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row gutters-15">
                      <p>Are You sure You want to delete this Vehicle Type?</p>
                  </div>
            </div>
            <div class="modal-footer">
              <form method="post" action="" id="delete_form">
                  {{csrf_field()}}
                  {{method_field('DELETE')}}
                  <button type="submit" class="footer-btn bg-danger" >Delete</button>
                  <button type="button" class="footer-btn bg-dark-low" data-bs-dismiss="modal">Cancel</button>
              </form>
            </div>
          
        </div>
    </div>
</div>




<div class="modal fade rate_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" id="routelist_rate">
                    <div class="modal-header">
                <h5 class="modal-title">Add Rates</h5>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="submitrate" action="{{url('/routeprice')}}">
                @csrf
                <input type="hidden" name="route_id" class="rate_route">
                <input type="hidden" name="prali_id" class="rate_prali">

                <div class="modal-body">
                    <div class="row gutters-15">
                        <table>
                            <tbody>
                                <tr>
                                    <td><strong>Route:</strong></td>
                                    <td><strong><span class="routename"></span></strong></td>
                                </tr>
                                <tr>
                                    <td><strong>Prali: </strong></td>
                                    <td><strong><span class="praliname"></span></strong></td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                                @foreach($vehicletype as $veh_type)
                                <tr>
                                    <td colspan="2">
                                        <strong>{{$veh_type->name}}</strong>
                                        <input type="hidden" name="vehicletype_id[]" value="{{$veh_type->id}}">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width:200px">Flat Rate: </td>
                                    <td><input type="number" step="any" name="flat_{{$veh_type->id}}"></td>
                                </tr>
                                <tr>
                                    <td>Rate (By Km): </td>
                                    <td><input type="number" step="any" name="ratekm_{{$veh_type->id}}"></td>
                                </tr>
                                <tr>
                                    <td>Reserve: </td>
                                    <td><input type="number" step="any" name="reserve_{{$veh_type->id}}"></td>
                                </tr>
                                <tr></tr>

                                @endforeach
                            </tbody>
                        </table> 
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="footer-btn bg-success submitrate" >Save</button>
                    <button type="button" class="footer-btn bg-dark-low" data-bs-dismiss="modal">Cancel</button>
                </div>
          
            </form>
        </div>
    </div>
</div>





@endsection

@section('scripts')
<script src="{{asset('js/adminjs/select2.min.js')}}"></script>

<script type="text/javascript">
  function edit(id,name,startpoint,endpoint,distance,status){
  	$('.route_id').val(id);
    $('.route_name').val(name);
    $('.route_start').val(startpoint);
    $('.route_end').val(endpoint);
    $('.route_distance').val(distance);

    if(status == 0){
    	$('.show').prop('checked','checked');
    }else{
    	$('.hide').prop('checked','checked');
    }
    var form=$('#edit-form');
        var address='{{url('/route/update')}}'+'/'+id; 
        form.prop('action',address)
  }

  function destroy(id){
        var form=$('#delete_form');
        var address='{{url('/route')}}'+'/'+id;
        form.prop('action',address)
    }


    function ratemap(id,name){
      $('#type_id').val(id);
      $('#route_title').html(name);
    }


    $(document).on('click', '.select-all', function () {
        $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
    });


    
    $(".praliselect").click(function(){
        $praliid = $(this).data('prali_id');
        $type_id = $('#type_id').val();
        $praliname = $(this).data('praliname');
        $routename = $('#route_title').html();
        var v_token = "{{csrf_token()}}";
        

        $.ajax({


            type: "POST",
            url: '{{url('/getratelist')}}',
            headers: {
                    'X-CSRF-Token': v_token 
               },
            data: { 
                praliid : $praliid,
                routeid : $type_id,
            },
            dataType: "JSON", // serializes the form's elements.
            beforeSend: function () {
            },
            success: function (response)
            {
                $('.rate_modal').modal('show');
                $('#routelist_rate').html(response.page);
            },
            error: function (xhr) { // if error occured

                alert("Error occured.please try again");
            },
            complete: function () {

            }
        });
    });



    

    $(document).on('submit', 'form#submitrate', function (e) {
    var form = $('#submitrate');
    var subsubmit_button = $('#submitrate .submitrate');
    e.preventDefault();
    var formdata = form.serializeArray();
    $.ajax({
            type: "POST",
            url: form.attr('action'),
            data: formdata,
            dataType: "JSON", // serializes the form's elements.
            beforeSend: function () {
                subsubmit_button.button('loading');
            },
            success: function (response)
            {
              alert('success');
              $('.rate_modal').modal('hide');
              form[0].reset();
              // alert("success");
            },
            error: function (xhr) { // if error occured

                alert("Error occured.please try again");
                subsubmit_button.button('reset');
            },
            complete: function () {
                subsubmit_button.button('reset');
            }
        });
  });
</script>

@if (count($errors) > 0)
    <script>
        $( document ).ready(function() {
            $('#large-modal').modal('show');
        });
    </script>
@endif
@endsection