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

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

<style>
   .notation_panel{
      position: absolute;
      top: 100px !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;
       height: 500px;
       overflow-y: auto;
   }
   .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">All Route</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">All Route</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">
         
            <div class="notation_panel">
            <table id="notation_panel_table">
                  
            </table>
         </div>