@extends('layout.index')
@section('title','Route Deviation')

<!-- Dashboard Ecommerce start -->
@section('content')

<style>
	#notation_panel{
		position:fixed;
		float:left;
		right:5px;
		padding:10px;
		z-index:1000;
		width:220px;
		max-height: 300;
		overflow-y: scroll;
		background-color: #000000c4;
		border-radius: 5px;
		/* opacity: 0.7; */
		color: #ffffff;
		border-radius:5px;
		top: 92px;
      text-align:left;
	}

   .notation_panel{
      position: absolute;
      top: 180px !important;
      padding: 10px;
      z-index: 9;
      background-color: #000000c4;
      border-radius: 5px;
      /* opacity: 0.7; */
      color: #ffffff;
      width: fit-content;
      margin-left: 10px !important;
      float: right;
   }
   .notation_panel td{
      color: #edebeb;
   } 
</style>

<div class="content-body">
   <!-- Bordered table start -->
   <div class="row" id="table-bordered">
      <div class="col-12">
         <div class="card mb-1">
            <div class="card-header w-100" >
               <div class="content-header-left">
                  <div class="row breadcrumbs-top">
                     <div class="col-sm-12">
                        <h2 class="content-header-title float-left mb-0">Route Deviation</h2>
                     </div>
                  </div>
               </div>
               <div class="d-flex justify-content-end breadcrumb-wrapper">
                  <nav aria-label="breadcrumb">
                     <ol class="breadcrumb mr-1">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Route Deviation</li>
                     </ol>
                  </nav>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- Bordered table end -->
</div>
      
<div class="content-body">
   <!-- Bordered table start -->
   <div class="row" id="table-bordered">
      <div class="col-12">
         <div class="card">
         <form method="post" id="search_frm" action="{{url('route_deviation')}}">
            <input type="hidden" name="form_type" value="search_form">
            @csrf
            <div class="card-header w-100 p-1" >
               <div class="row w-100" >
                  <div class="col-sm-2">
                     <div class="form-group m-0">
                        <select name="vehicle_id" id="vehicle_id" class="select2 form-select">
                           <option value="">--- Select Vehicle ---</option>
                              @foreach($vehicle as $val)

                                 @php $selected = ''; @endphp 
                                 @if($vehicle_id == $val->id)
                                 @php $selected ='selected'; @endphp
                                 @endif
                              <option {{$selected}} value="{{$val->id}}" > {{$val->vehicle_number }}</option>
                           @endforeach            
                        </select>
                     </div>
                  </div>

                  <div class="col-sm-2">
                     <div class="form-group m-0">
                         <input id="date" name="date" class="form-control flatpickr-basic" type="text" value="01-01-1970" >
                     </div>
                  </div>
                  
                  <div class="col-sm-4">
   
                     <button type="submit" class="btn btn-primary">Search</button>
                         <a title="Clear" href="{{ url('route_deviation/clear_search') }}" class="btn btn-outline-primary" data-column="3"><i data-feather="rotate-ccw" class="me-25"></i><span> Clear</span></a> 
                        
               </div> 

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