@php use Carbon\Carbon; @endphp

@extends('modules.speedlimit.layouts.base')
@section('title', __('modules.speedlimit.name'))

@section('content_body')
    @section('extra_styles')
        <link href="{{ asset('assets/css/speedlimits.css') }}?v={{ time() }}" rel="stylesheet" />
    @endsection

    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
        <div class="flex flex-col justify-center gap-2">
            <h1 class="text-xl font-medium leading-none text-mono">
                {{ __('speedlimit.infractions_title', ['name' => $data['name'] ?? 'Vehicle']) }}
            </h1>
        </div>
        <div class="flex items-center gap-2.5">
            <button type="button" id="date" data-action="date" class="kt-btn kt-btn-light-primary">
                <i class="ki-duotone ki-calendar fs-2"></i>
                @php
                    $defaultStart = Carbon::now()->subDays(7)->format('Y-m-d');
                    $defaultEnd = Carbon::now()->subDays(1)->format('Y-m-d');
                @endphp
                {{ $defaultStart }} - {{ $defaultEnd }}
            </button>
            <a class="kt-btn kt-btn-outline"
                href="{{ route('speedlimit.details', ['device_id' => $deviceId, 'date_from' => $startDate, 'date_to' => $endDate]) }}">
                {{ __('speedlimit.back_to_details') }}
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 lg:gap-7.5" id="infractions-grid">
        <div class="lg:col-span-3 transition-all duration-300" id="table-container">
            @include('modules.speedlimit.partials.table_details')
        </div>
        <div class="lg:col-span-1 hidden transition-all duration-300" id="map-container">
            <div class="kt-card h-full min-h-[500px] relative">
                <div class="kt-card-body p-0 h-full w-full rounded-xl overflow-hidden" id="map" style="min-height: 500px;">
                </div>

                <!-- Floating Suggestion Box -->
                <div class="absolute top-4 left-6 bg-white rounded-lg shadow-lg p-5 w-auto z-[1000]">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="text-sm font-semibold text-gray-800">{{ __('speedlimit.suggest_speed_limit') }}</h3>
                        <button type="button" id="close-map-btn"
                            class="text-gray-400 hover:text-gray-600 transition-colors ms-2">
                            <i class="ki-duotone ki-cross fs-2"></i>
                        </button>
                    </div>

                    <form id="speed-suggestion-form">
                        <input type="hidden" name="device_id" id="sugg-device-id" value="{{ $deviceId }}">
                        <input type="hidden" name="latitude" id="sugg-lat">
                        <input type="hidden" name="longitude" id="sugg-lng">
                        <input type="hidden" name="address" id="sugg-address">
                        <input type="hidden" name="current_speedlimit" id="sugg-current-limit">

                        <!-- Added Display Info -->
                        <div class="mb-4 p-3 bg-gray-50 rounded border border-gray-200 text-xs text-gray-700 space-y-2">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-500">Date:</span>
                                <span id="sugg-display-date" class="font-semibold">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-500">Speed:</span>
                                <span id="sugg-display-speed" class="font-semibold">-</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="font-medium text-gray-500">Authorized Speed:</span>
                                <span id="sugg-display-auth-speed" class="font-semibold">-</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="suggested_speedlimit"
                                class="block text-xs text-gray-600 mb-1">{{ __('speedlimit.correct_speed_limit') }}
                                (km/h)</label>
                            <input type="number" id="suggested_speedlimit" name="suggested_speedlimit"
                                class="kt-input form-control kt-input-solid text-sm" placeholder="e.g. 60" required min="0">
                        </div>

                        <button type="submit" class="kt-btn kt-btn-primary w-full kt-btn-sm" id="btn-submit-suggestion">
                            {{ __('speedlimit.submit_suggestion') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('config')
    <script>
        window.SpeedLimitConfig = {};
        window.SpeedLimitConfig.infractionsUrl = "{{ route('speedlimit.infractions') }}";
        window.SpeedLimitInitialData = @json($data ?? null);
    </script>
@endsection

@section('extra_scripts')
    <script src="{{ asset('assets/js/apps/speedlimit/infractions.js') }}?v={{ time() }}"></script>
@endsection