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

<!-- 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;
   } 
   #load {
      position: fixed;
      top: 0; left: 0; z-index: 9999;
      width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 0.2s;
   }
</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">Daily Package 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">Daily Package 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">
         
            <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="package_id" id="package_id" class="select2 form-select" onchange="empty_checkbox_area_and_pocket();">
                           <option value="">--- Select Package ---</option>
                              @foreach($Pakages as $val)

                              <option value="{{$val->id}}" selected> {{$val->Pakage_name }}</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" onclick = "search_route(null,true)">Search</button>
                         <a title="Clear" href="{{ url('daily_package_route') }}" class="btn btn-outline-primary" data-column="3"><i data-feather="rotate-ccw" class="me-25"></i><span> Clear</span></a> 
                  </div> 
                  <div class="col-sm-1" style="display: flex;align-items: center;">
                     <input type="checkbox" class="form-control" id="show_load_map" name="show_load_map" value="" onClick="show_load_map()">
                     <label style="width: 160px;">Auto Load</label>
                  </div> 
               </div>
             </div>
         

         <div class="notation_panel" style="display: none;">
            <table id="notation_panel_table">
               <tr><td colspan="two" style=""><strong></strong></td></tr><tr class="show_default" style="display:none; justify-content: space-between;"><td>Show Work Area</td><td style="padding:5px;margin:5px;"><input type="checkbox" class="show_default_check" id="show_area" name="show_area" value="" onClick="hide_show_route(this);"></td></tr>

               <tr class="show_marker" style="display:none; justify-content: space-between;"><td>Show All Marker</td><td style="padding:5px;margin:5px;"><input type="checkbox" class="show_marker_check" id="show_marker" name="show_marker" value=""onClick="hide_show_route(this)"></td></tr>

               <tr class="show_arrow" style="display:none; justify-content: space-between;"><td>Show Direction</td><td style="padding:5px;margin:5px;"><input type="checkbox" class="show_arrow_check" id="show_arrow" name="show_arrow" value=""onClick="show_arrow_map()"></td></tr>

               <tr><td><strong>Speed</strong></td></tr>

               <tr><td>0 to 7</td><td><span style="border-radius:5px;display:block;padding:10px;margin:5px;background-color:yellow"></span></td></tr>

               <tr><td>8 to 10</td><td><span style="border-radius:5px;display:block;padding:10px;margin:5px;background-color:skyblue"></span></td></tr>

               <tr><td>Greater Than 10</td><td><span style="border-radius:5px;display:block;padding:10px;margin:5px;background-color:purple"></span></td></tr>
               <tr><td>&nbsp;</td></tr>
               
            </table>
         </div>
         <div id="load" style="display: none" class="loader">
            <div class="d-flex" style="align-items: center; justify-content: center; height: 100vh">
              <img height="100" src="