@extends('layout.index')
@section('title', 'Tracked Vehicle Checkpoints')

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

    <style>
        #notation_panel {
            position: absolute;
            float: left !important;
            left: 5px;
            padding: 10px;
            top: 198px;
            z-index: 1000;
            width: 190px;
            max-height: 400px;
            background-color: #000000;
            border-radius: 5px;
            opacity: 0.7;
            color: #ffffff;
            border-radius: 5px;
        }
    </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">Tracked Vehicle Checkpoints</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">Tracked Vehicle Checkpoints</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="{{ route('track_checkpoints.search') }}">
                        @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 class="select2 form-select" id="Pakage_id" name="Pakage_id" onChange="get_tracked_details()">
                                            <option value="">--- All Pakage ---</option>
                                            @foreach ($Pakages as $val)
                                                @php $selected = '';   @endphp
                                                @if ($Pakage_id == $val->id)
                                                    @php $selected ='selected'; @endphp
                                                @endif
                                                <option {{ $selected }} value="{{ $val->id }}">
                                                    {{ $val->Pakage_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>


                                <div class="col-sm-2">
                                    @if ($Pakage_id)
                                        <a title="Clear" href="{{ url('home/clear_search') }}"
                                            class="btn btn-outline-secondary" data-column="3"><i data-feather="rotate-ccw"
                                                class="me-25"></i><span>Clear</span></a>
                                    @endif
                                </div>

                                <div class="col-sm-2">
                                  
                                   ssds
                                </div>
                            </div>
                        </div>
                    </form>

                    <div id="notation_panel_div"></div>

                    <div class="row">
                        <div id="rECcontents">
                    
                        </div>
                    </div>	

                </div>
            </div>
        </div>
        <!-- Bordered table end -->
    @endsection
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
	jQuery(document).ready(function(){
		get_tracked_details();
		setInterval(function(){ get_tracked_details() }, 180000);
	});

	function get_tracked_details(){
        //alert('ddddd');
		var loaderHtml = '<div class=""><div class="box"><div class="box-body" style="min-height:265px;"></div><div class="overlay"></div><div class="loading-img"></div></div></div>';
		
		$('#rECcontents').html(loaderHtml);
	    var Pakage_id = $('#Pakage_id').val();
      
        $.ajax({
            type: "post",
            url: "/track_checkpoints/track_vehicle",
            
            data: {
                "_token": "{{ csrf_token() }}",
                'Pakage_id': Pakage_id
            },

            success: function(response) {
                $('#rECcontents').html(response);
            },

            error: function() {
                // alert('Error while request..');
            }
        });
	}
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>