<?php
$this->load->view('includes/header');
?>
<section>
    <div class="container mt-4">
        <div class="container mt-4">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1 class="head-1 mb-2"> <span>Parking Availbility</span></h2>
                        <h2 class="mb-5"><?= date("D F j, Y ( h:i A )") ?></h2>
                </div>
                <?php
        
                if (count($ParkingArea)) {

                    foreach ($ParkingArea as $key => $area) {
                        $colors = ['bg-success', 'bg-primary', 'bg-warning'];
                ?>
                        <div class="col-md-4">
                            <div class="card shadow-sm mb-3">
                                <div class="card-body d-flex justify-content-between align-items-center">
                                    <span><b><?= $area['parkingLotType'] ?></b></span>
                                    <span class="badge <?= $area['status']=='ACTIVE' && $area['availableAreaCount']>0 ? $colors[$key % 3]:'bg-danger' ?> rounded-pill"><?= $area['status']=='ACTIVE' && $area['availableAreaCount']>0 ?$area['availableAreaCount']: 'FULL' ?></span>
                                </div>
                            </div>
                        </div>
                      
                    <?php
                    }
                } else {
                    ?>

                    <div class="col-md-12 text-center">
                        <h1 class="text-danger">No data Found!</h2>
                    </div>
                <?php
                }
                ?>
            </div>





        </div>
    </div>
</section>


<script>
let watchId = null;
let clientCode='<?= @$this->uri->segment('1') ?>';
function sendLocation(position) {

    $.ajax({
        url: "<?= base_url('Home/saveLocation') ?>",
        type: "POST",
        data: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            clientCode:clientCode
        },
        success: function(res) {
            console.log("Location Updated:", res);
        }
    });

}

if (navigator.geolocation) {

    // 1. Page load par ek baar
    navigator.geolocation.getCurrentPosition(
        function(position) {
            sendLocation(position);
        },
        function(error) {
            console.log(error.message);
        }
    );

    // 2. Location change hone par
    watchId = navigator.geolocation.watchPosition(
        function(position) {
            sendLocation(position);
        },
        function(error) {
            console.log(error.message);
        },
        {
            enableHighAccuracy: true,
            maximumAge: 0,
            timeout: 10000
        }
    );

}
</script>
<?php
$this->load->view('includes/footer');
?>