@extends('layouts.master')

@section('title', 'DHCP Reservations')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card mg-b-20">
                <div class="card-header">
                    <div class="card-title">
                        <h3 class="card-title mb-0">
                            Lot Parking
                        </h3>
                    </div>
                </div>

                <div class="card-body">
                    {{-- Container yang akan di-refresh --}}
                    <div id="parking-container">
                        @include('livewire.partial-lot', ['parkingDataByArea' => $parkingDataByArea])
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const parkingContainer = document.getElementById('parking-container');

            const refreshUrl = "{{ route('parking-lot.data') }}";

            async function refreshParking() {

                try {

                    const response = await fetch(refreshUrl, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'text/html'
                        }
                    });

                    if (!response.ok) {
                        throw new Error('HTTP Error: ' + response.status);
                    }

                    const html = await response.text();

                    parkingContainer.innerHTML = html;

                } catch (error) {

                    console.error(
                        'Gagal mengambil data parking:',
                        error
                    );

                }

            }
            // Refresh setiap 5 detik
            setInterval(refreshParking, 5000);
        });
    </script>
@endsection