
<?php ($date_format_setting = Hyvikk::get('date_format') ? Hyvikk::get('date_format') : 'd-m-Y'); ?>
<?php ($currency = Hyvikk::get('currency')); ?>
<?php $__env->startSection('breadcrumb'); ?>
    <li class="breadcrumb-item active"> <?php echo app('translator')->get('fleet.vehicle_track'); ?></li>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra_css'); ?>
    <style type="text/css">
        .checkbox,
        #chk_all {
            width: 20px;
            height: 20px;
        }

        .select {
            width: 35%;
        }
    </style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
    <?php if(isset($response['message_traccar_fail'])): ?>
        <div class="text-center alert-danger"
            style="height: 10vh;display: flex;justify-content: center;align-items: center;">
            <?php echo e($response['message_traccar_fail'] ?? ''); ?></div>
        
    <?php else: ?>
        <?php if(isset($response['error_exist'])): ?>
            <div class="text-center alert-danger"
                style="height: 10vh; display: flex; justify-content: center; align-items: center;">
                <?php echo e($response['error_exist'] ?? ''); ?>

            </div>
        <?php else: ?>
            <?php if(isset($response['message'])): ?>
                <div class="text-center alert alert-danger">
                    <?php echo e($response['message']); ?>

                </div>
            <?php else: ?>
                <div class="form-group text-center">
                    <label class="control-label col-md-3">Select Vehcile For Track</label>
                    <div class="col-lg-12 col-md-12">
                        <select name="vehicle" class="select mb-2" style="margin-bottom:10px;" id="vehicle_id">
                            <option value="">--Select--</option>
                            <?php $__currentLoopData = $data['active_vehicle']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($v->id); ?>" <?php if($data['select_vehicle'] == $v->id): ?> selected <?php endif; ?>>
                                    <?php echo e($v->model_name); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                </div>
                <div id="map" style="width:100%;height:400px;"></div>
                <div class="text-center">
                    <div class="card">
                        <div class="card-header d-flex justify-content-center align-items-center" style="padding-top:15px">
                            <h3><strong>Car Infomration</strong></h3>
                        </div>
                        <div class="card-body">
                            <table class='table table-striped'>
                                <thead>
                                    <tr>
                                        <th>Vehicle Name</th>
                                        <th>Vehicle Speed</th>
                                        <th>Booking PickUp</th>
                                        <th>Driver Name</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    <?php endif; ?>
    <div id="map" style="width:100%;height:400px;"></div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
    <!-- prettier-ignore -->
<script>
    $('.select').select2();
    var map;
    var markers = [];
    var lines=[];
    var lineOptions;
    var path;
    var carIcon;
    $('#vehicle_id').on('change',function(){
    var vehicle_id=$('#vehicle_id').val();
    // console.log(vehicle_id);
    if(vehicle_id != null){
    location.href="<?php echo e(url('admin/vehicles-track')); ?>/"+vehicle_id;
    }else{
    location.href="<?php echo e(url('admin/vehicles-track')); ?>";
    }
    });
    // Initialize the map and markers
    function initialize() {
    // car icon call only one time
    var carIcon = {
    url: '<?php echo e(asset('assets/images/small-car.png')); ?>',
    scaledSize: new google.maps.Size(50, 50),
    };
    var dotIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    fillColor: "#FFFFFF",
    strokeOpacity: 1,
    strokeColor: "#FF0000",
    strokeWeight: 1,
    scale: 4,
    };
    //intial map
    // Set the initial center of the map
    <?php if(count($data['positions'] ?? []) > 0): ?>
        const lat_first = '<?php echo e($data['positions'][0]->latitude); ?>';
        const lng_first ='<?php echo e($data['positions'][0]->longitude); ?>';
    <?php else: ?>
        const lat_first = 20.593683;
        const lng_first =78.962883;
    <?php endif; ?>
    var myLatlng = new google.maps.LatLng(lat_first,lng_first); // San Francisco
    // Map options
    var mapOptions = {
    zoom: 20,
    center: myLatlng
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    <?php if(!isset($response['error_exist']) && !isset($response['message_traccar_fail']) && !isset($response['message'])): ?>
        <?php if($data['vehicle_data'] != null): ?>
            <?php $__currentLoopData = $data['vehicle_data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                var myLatlng<?php echo e($v->id); ?> = new
                google.maps.LatLng(<?php echo e($v->position->latitude); ?>,<?php echo e($v->position->longitude); ?>);
                var marker = new google.maps.Marker({
                position: myLatlng<?php echo e($v->id); ?>,
                map: map,
                icon: carIcon,
                title: '<?php echo e($v->model_name); ?>'
                });
                $('table tbody').append(
                "<tr>"+
                    "<td><?php echo e($v->model_name); ?></td>"+
                    "<td><?php echo e($v->position->speed * 1.852); ?> km/h</td>"+
                    "<td><?php echo e($v->bookings->pickup ?? '-'); ?></td>"+
                    "<td><?php echo e($v->bookings->driver->name ?? '-'); ?></td>"+
                    "</tr>");
                markers[<?php echo e($v->id); ?>] = marker;
                // console.log(markers[<?php echo e($v->id); ?>]);
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <?php endif; ?>
    <?php endif; ?>
    }
    // Update the marker position for the given vehicle
    function updateMarker(vehicleId, lat, lng,speed,model_name,pickup,bookings_driver) {
    var marker = markers[vehicleId];
    console.log(bookings_driver=='');
    if (marker) {
    var rowHtml = "<tr>";
        rowHtml += "<td>" + (typeof model_name !== "undefined" ? model_name : "-") + "</td>";
        rowHtml += "<td>" + (typeof speed !== "undefined" ? speed*1.852+' km/h' : "-") + "</td>";
        rowHtml += "<td>" + (typeof pickup !== "undefined" ? pickup : "-") + "</td>";
        rowHtml += "<td>" + (bookings_driver !== "" ? bookings_driver : "-") + "</td>";
        rowHtml += "</tr>";
    $('table tbody').append(rowHtml);
    var myLatlng = new google.maps.LatLng(lat, lng);
    marker.setPosition(myLatlng);
    }
    }
    // Poll the server for all vehicles' locations every 10 seconds
    function pollServer() {
    setInterval(function() {
    var vehicle_id= $('#vehicle_id').val();
    vehicle_id!=null ? url='<?php echo e(url('admin/track/')); ?>/'+vehicle_id : url='<?php echo e(url('admin/track')); ?>';
    // Make an AJAX request to the server to get the current locations of all vehicles
    $.ajax({
    url:url ,
    type: "GET",
    dataType: "json",
    success: function(response) {
    // Update the marker positions for all vehicles
    $('tbody').text('');
    console.log(response);
    response.forEach(function(element){
    updateMarker(element.id, element.position.latitude,
    element.position.longitude,element.position.speed,element.model_name,element.pickup,element.bookings_driver);
    })
    },
    error: function(xhr, status, error) {
    // console.log("Error: " + error);
    }
    });
    }, 10000); // 10 seconds
    }
    // Initialize the map and start polling the server
    $(document).ready(function() {
    initialize();
    pollServer();
    });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo e(Hyvikk::get('traccar_map_key')); ?>"></script>
    
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/fwvrhhfw/vms.reservations.albertinehotel.com/framework/resources/views/tracker/map.blade.php ENDPATH**/ ?>