@extends('layouts.master')

@section('title', 'Parking Space Information')

@section('styles')
    <!-- Treeview Css -->
    {{-- <link rel="stylesheet" href="{{asset('build/assets/libs/js-treeview/treeview.min.css')}}"> --}}
    <style>
        .img-container {
            display: flex;
            flex-wrap: wrap;
        }
        .img-item {
            flex: 1 0 8.33%; /* 100% / 12 = 8.33% */
            max-width: 8.33%;
            padding: 5px;
        }
        .img-item img {
            width: 100%;
            height: auto;
            /* display: block;
            margin-top: 10px;  */
        }
        .img-item span {
            display: block;
            margin-top: 10px; /* Atur jarak antara gambar dan teks jika diperlukan */
        }
    </style>
@endsection

@section('content')

                    <!-- PAGE-HEADER -->
                    <!--<div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
                        <h1 class="page-title">Parking Lot Space</h1>
                        <div>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Admin UI</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Treeview</li>
                            </ol>
                        </div>
                    </div>-->
                    <!-- PAGE-HEADER END -->

                    <!-- CONTAINER -->
                    <div class="main-container container-fluid">
                        <!-- CONTAINER -->
                        {{-- <div class="main-container container-fluid">
                            <!-- ROW OPEN -->
                            <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">Lot Parking</h3>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <!-- Konten akan diperbarui oleh AJAX -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- ROW CLOSED -->
                        </div> --}}
                        <!-- ROW OPEN -->
                        <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">Lot Parking</h3>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row" id="lot-space">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- ROW CLOSED -->

                        {{-- <!-- ROW OPEN -->
                        <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">Treeview</h3>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="card-content">
                                            <div class="row">
                                                @foreach ($parkingDataByArea as $areaData)
                                                    <h3>Lantai: {{ $areaData['lantai'] }}</h3>
                                                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">
                                                        <div class="d-flex flex-wrap gap-2">
                                                            @foreach ($areaData['data'] as $log)
                                                                <div class="m-2">
                                                                    @if ($log->status == 1)
                                                                        <span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{ asset('images/lot/red_car.png') }}"></span>
                                                                        <li>Lot Number: {{ $log->lot_number }} - Status: {{ $log->status }}</li>
                                                                    @else
                                                                        <span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{ asset('images/lot/green_car.png') }}"></span>
                                                                        <li>Lot Number: {{ $log->lot_number }} - Status: {{ $log->status }}</li>
                                                                    @endif
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- ROW CLOSED --> --}}
                    </div>
                    <!-- CONTAINER END -->

@endsection

@section('javascript')
    <!-- Tambahkan ini dalam template blade Anda -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            function fetchParkingData() {

                fetch('{{ route("parking-lot.data") }}')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('HTTP Error: ' + response.status);
                        }

                        return response.json();
                    })
                    .then(data => {

                        const container = document.getElementById('lot-space');

                        container.innerHTML = '';

                        data.forEach(function (areaData) {

                            let html = `
                                    <div class="col-md-6 card-content mb-5 px-3">

                                        <h3 class="text-center">
                                            Parking Space : ${areaData.lantai}
                                        </h3>

                                        <div class="container mt-3">

                                            <div class="row img-container">
                                `;

                            areaData.data.forEach(function (log) {

                                const image = log.status == 1
                                    ? '{{ asset("images/lot/red_car.png") }}'
                                    : '{{ asset("images/lot/green_car.png") }}';

                                html += `
                                        <div class="col-md-6 img-item">
                                            <img src="${image}" alt="${log.status == 1 ? 'Red Car' : 'Green Car'}">
                                            <span class="d-block">${log.lot_number}</span>
                                        </div>
                                    `;

                            });

                            html += `
                                        </div>
                                    </div>
                                </div>
                            `;
                            container.insertAdjacentHTML('beforeend', html);
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching parking data:', error);
                    });
            }

            // Load pertama kali
            fetchParkingData();

            // Refresh setiap 5 detik
            setInterval(fetchParkingData, 5000);

        });
    </script>
@endsection