@extends('layout.index')
@section('title','KM Sweeping Report')

<!-- Dashboard Ecommerce start -->
@section('content')
<section>
    <div class="content-body">
        <!-- Bordered table start -->
        <div class="row" id="table-bordered">
           <div class="col-12">
              <div class="card">
                 <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">KM Sweeping Report List</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">KM Sweeping Report</li>
                             <li class="breadcrumb-item active" aria-current="page">KM Sweeping Report List</li>
                          </ol>
                       </nav>
                    </div>
                 </div>
              </div>
           </div>
        </div>
        <!-- Bordered table end -->
    </div>
        @if ($message = Session::get('success'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                            {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

    <div class="content-body">
        <!-- Bordered table start -->
        <div class="row" id="table-bordered">
            <div class="col-12">
                <div class="card">
                    <form class="dt_adv_search" action="{{url('/vehicle_tracking_reports/km_sweeping')}}" method="POST">
                            @csrf
                        <div class="card-header w-100" >
                            <div class="row w-100" >
                                <div class="col-sm-8">
                                    <div class="row">

                                        <div class="col-sm-3">
                                            <div class="form-group m-0">
                                            <!-- <label class="form-label">Pakage</label> -->
                                            <input type="text" id="txt_date_km" class="form-control" name="txt_date_km" value="{{ session('search_txt_date_km'); }}" placeholder="Date" autocomplete="off">
                                            </div>
                                        </div>

                                        <div class= "col-sm-3">
                                           
                                           <button type="submit" name="btn_search" class="btn btn-primary">Search</button>
                                            
                                          @if (session('search_txt_date_km'))
                                              <button type="submit" name="btn_reset" class="btn btn-outline-primary"><i data-feather="rotate-ccw" class="me-25"></i> Clear</button>
                                            @endif    
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div style="float: right;">
                                        
                                        <a href="{{url('vehicle_tracking_reports/km_sweeping_excel',['date'=>base64_encode(session('search_txt_date_km'))])}}" 
                                        class="btn btn-outline-primary"><i class='fa fa-download' arial-hidden="true"></i> Excel</a>
                                     
                                        <a href="{{ url('/vehicle_tracking_reports') }}" 
                                        class="btn btn-outline-primary"><span>Back</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                <!-- index.blade.php -->

<div class="table-responsive">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th rowspan="2" style="background-color:#29204f;color: #ffffff;" class="text-center">
                    Package Details
                </th>
                                <th rowspan="2" style="background-color:#29204f;color: #ffffff;" class="text-center">Total Sweeping Length( in KM )</th>
            </tr>
            <tr>
                                
            </tr>
            
        </thead>
        <tbody class="text-left">
                
                    
            <!-- <tr>
                <td colspan="5" style="text-align:center; color:red;">No Record Found</td>
            </tr> -->
        </tbody>
    </table>
</div>

                </div>

            </div>
        </div>
        <!-- Bordered table end -->
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>

       $("#txt_date_km").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy'
        });
   </script>
@endsection