@php use Carbon\Carbon; @endphp

@extends('layouts.master')
@section('title', __('modules.nearby.name'))

@section('content')
    <main class="grow pt-5" id="content" role="content">
        <!-- Container -->
        <div class="kt-container-fluid">
            <div class="grid grid-cols-1 xl:grid-cols-3 gap-5 lg:gap-7.5">
                <div class="col-span-1">

                    <div id="poiBox" class="grid gap-5 lg:gap-7.5">
                        <div class="kt-card">
                            <div id="poiHeader" class="kt-card-header">
                                <h3 class="kt-card-title">
                                    {{ __('nearby.points_of_interest') }}
                                </h3>
                            </div>
                            <div id="poiContent" class="kt-card-content kt-scrollable grow overflow-y-auto p-4 pe-2 w-full"
                                data-kt-scrollable="true" data-kt-scrollable-height="auto"
                                data-kt-scrollable-dependencies="#poiHeader,#poiFooter"
                                data-kt-scrollable-wrappers="#poiContent" data-kt-scrollable-offset="100px">
                                <div class="rounded-lg w-full grow h-[1000px]">
                                    <div class="grid gap-2.5 lg:gap-5">
                                        @foreach ($userPoiList as $poi)
                                            <div class="flex items-center gap-3"
                                                data-role="poi-item"
                                                data-poi-id="{{ $poi->id }}"
                                                data-lat="{{ $poi->lat }}"
                                                data-lng="{{ $poi->lng }}"
                                                data-icon="{{ $poi->icon_url }}"
                                                data-title="{{ $poi->name }}"
                                            >
                                                <div class="flex items-center grow gap-2.5">
                                                    @if (!empty($poi->icon_url))
                                                        <img src="{{ $poi->icon_url }}" alt=""
                                                            style="width:32px; height:32px;">
                                                    @else
                                                        <i class="ki-duotone ki-pointers text-3xl"></i>
                                                    @endif
                                                    <div class="flex flex-col">
                                                        <span
                                                            class="text-sm font-medium text-mono mb-px">
                                                            {{ $poi->name ?? 'POI' }}
                                                        </span>
                                                        <span class="text-xs text-gray-500">
                                                            {{ $poi->lat }}, {{ $poi->lng }}
                                                        </span>
                                                    </div>
                                                    </img>
                                                </div>
                                                <div class="flex items-center gap-2">
                                                    <button type="button" class="kt-btn kt-btn-icon kt-btn-sm kt-btn-ghost" title="{{ __('nearby.view_on_map') }}"
                                                        data-action="focus-poi" data-poi-id="{{ $poi->id }}">
                                                        <i class="ki-duotone ki-eye"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div id="poiFooter" class="kt-card-footer justify-center">
                                <button type="button" id="poiNext" data-action="next-poi" class="kt-link kt-link-underlined kt-link-dashed">
                                    {{ __('nearby.next') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div id="vehicleBox" class="grid gap-5 lg:gap-7.5 hidden">
                        <div class="kt-card">
                            <div id="vehHeader" class="kt-card-header">
                                <h3 class="kt-card-title">
                                    {{ __('nearby.vehicles') }}
                                </h3>
                            </div>
                            <div id="vehContent" class="kt-card-content kt-scrollable grow overflow-y-auto p-4 pe-2 w-full"
                                data-kt-scrollable="true" data-kt-scrollable-height="auto"
                                data-kt-scrollable-dependencies="#vehHeader,#vehFooter"
                                data-kt-scrollable-wrappers="#vehContent" data-kt-scrollable-offset="100px">
                                <div class="rounded-lg w-full grow h-[1000px]">
                                    <div class="grid gap-2.5 lg:gap-5">


                                        @foreach ($listVehicles as $i => $vehicle)
                                            <div class="flex items-center gap-3" 
                                                data-role="vehicle-item"
                                                data-device-id="{{ $vehicle->id }}"
                                                data-lat="{{ $vehicle->lat ?? '' }}"
                                                data-lng="{{ $vehicle->lng ?? '' }}"
                                                data-icon="{{ $vehicle->icon_url ?? '' }}"  {{-- vehicle icon on map (optional) --}}
                                                data-title="{{ $vehicle->name }}"
                                            >
                                                <div class="flex items-center grow gap-2.5">
                                                    {{-- Optional checkbox if you want multi-select later --}}
                                                    {{-- <input type="checkbox" class="kt-checkbox kt-checkbox-mono" id="check_{{ $i }}" value="{{ $vehicle->id }}" /> --}}

                                                    <i class="ki-duotone ki-car text-3xl"></i>

                                                    <div class="flex flex-col">
                                                        <span
                                                            class="text-sm font-medium text-mono mb-px"
                                                            data-action="open-vehicle" data-device-id="{{ $vehicle->id }}">
                                                            {{ $vehicle->name }}
                                                        </span>

                                                        <span class="text-xs text-gray-500">
                                                            @if (!empty($vehicle->device_time))
                                                                {{ Carbon::parse($vehicle->device_time)->format('d/m/Y H:i:s') }}
                                                            @else
                                                                No last position
                                                            @endif
                                                        </span>

                                                        {{-- @if (!empty($vehicle->is_canbus))
                                                            <span
                                                                class="text-[10px] uppercase tracking-wide text-emerald-600 font-semibold">
                                                                CANBUS
                                                            </span>
                                                        @endif --}}
                                                    </div>
                                                </div>

                                                <div class="flex items-center gap-2">
                                                    <button type="button" class="kt-btn kt-btn-icon kt-btn-sm kt-btn-ghost" title="{{ __('nearby.view_on_map') }}"
                                                        data-action="toggle-vehicle" data-device-id="{{ $vehicle->id }}">
                                                        <i class="ki-duotone ki-eye"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach


                                    </div>
                                </div>
                            </div>
                            <div id="vehFooter" class="kt-card-footer flex flex-col md:flex-row justify-center md:justify-between items-center gap-3">
                                <button type="button" id="vehPrev" data-action="prev-veh" class="kt-link kt-link-underlined kt-link-dashed">
                                {{ __('nearby.previous') }}
                                </button>
                                <button type="button" id="vehNext" data-action="next-veh" class="kt-link kt-link-underlined kt-link-dashed">
                                    {{ __('nearby.next') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div id="resultBox" class="grid gap-5 lg:gap-7.5 hidden">
                        <div class="kt-card">
                            <div id="resHeader" class="kt-card-header">
                                <h3 class="kt-card-title">
                                    {{ __('nearby.result') }}
                                </h3>
                            </div>
                            <div id="resContent"
                                class="kt-card-content kt-scrollable grow overflow-y-auto p-4 pe-2 w-full"
                                data-kt-scrollable="true" data-kt-scrollable-height="auto"
                                data-kt-scrollable-dependencies="#resHeader,#resFooter"
                                data-kt-scrollable-wrappers="#resContent" data-kt-scrollable-offset="100px">
                                <div class="rounded-lg w-full grow h-[1000px]">
                                    <div class="grid gap-2.5 lg:gap-5 direction-result"></div>
                                </div>
                            </div>
                            <div id="resFooter" class="kt-card-footer justify-center">
                                <button type="button" id="doneRes" data-action="done-res" class="kt-link kt-link-underlined kt-link-dashed">
                                    {{ __('nearby.reset') }}
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-span-2">
                    <div class="flex flex-col gap-5 lg:gap-7.5">
                        <div class="flex flex-col gap-5 lg:gap-7.5">
                            <div class="kt-card">
                                <div class="kt-card-content p-0">
                                    <div id="map" style="height: 82vh; width: 100%; border-radius: 0.5em;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('custom_scripts')
    @include('partials.google-maps')
    <script src="{{ asset('assets/js/apps/nearby/index.js') }}"></script>
    <script>
        initializeGoogleMap(null, 'map', "Google Normal", 10);
        window.NearbyConfig = window.NearbyConfig || {};
        window.NearbyConfig.getDistanceUrl = "{{ route('nearby.get-vehicle-data') }}";
    </script>
@endsection