@php use Carbon\Carbon; @endphp

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

@section('content_body')

    <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 id="view-title" class="text-xl font-medium leading-none text-mono">
                <i id="view-icon" class="fa-solid fa-table-cells-large"></i> {{ __('escooter.grid_view') }}
            </h1>
        </div>
        <div class="flex items-center gap-2.5">
            <!-- Search Filter -->
            <div class="kt-input max-w-48 h-10">
                <i class="ki-filled ki-magnifier"></i>
                <input id="global_search_input" placeholder="{{ __('translation.global.search') ?? 'Search' }}" type="text">
            </div>

            <!-- Ignition Filter -->
            <button id="filter-ignition-btn" title="Ignition" data-state="all"
                class="flex items-center justify-center w-11 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors border border-transparent cursor-pointer">
                <i class="fa-solid fa-power-off text-gray-400 text-lg font-bold" id="ignition-icon"></i>
            </button>

            <!-- Battery Filter -->
            <div class="flex items-center relative">
                <div class="flex items-center gap-1 px-1.5 h-10 rounded-lg bg-gray-100 border border-transparent shadow-sm relative"
                    id="filter-battery-container">
                    <button data-battery-val="red" title="{{ __('escooter.battery_red_title') }}"
                        class="battery-segment w-5 h-7 rounded bg-destructive hover:opacity-80 transition-all cursor-pointer border-2 border-transparent"></button>
                    <button data-battery-val="orange" title="{{ __('escooter.battery_orange_title') }}"
                        class="battery-segment w-5 h-7 rounded bg-warning hover:opacity-80 transition-all cursor-pointer border-2 border-transparent"></button>
                    <button data-battery-val="green" title="{{ __('escooter.battery_green_title') }}"
                        class="battery-segment w-5 h-7 rounded bg-success hover:opacity-80 transition-all cursor-pointer border-2 border-transparent"></button>
                </div>
                <!-- Battery Terminal Knob -->
                <div style="width: 10px;" class="h-5 bg-gray-100 rounded-r-md -ml-1 relative z-0"></div>
            </div>

            <div data-kt-dropdown="true" data-kt-dropdown-trigger="click" data-kt-dropdown-placement="bottom-end">
                <button class="kt-btn kt-btn-outline h-[40px]" data-kt-dropdown-toggle="true">
                    View
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="lucide lucide-chevron-down" aria-hidden="true">
                        <path d="m6 9 6 6 6-6"></path>
                    </svg>
                </button>
                <div class="kt-dropdown-menu w-52" data-kt-dropdown-menu="true">
                    <ul class="kt-dropdown-menu-sub">
                        <li>
                            <a href="#" class="kt-dropdown-menu-link" data-view="map">
                                <i class="fa-solid fa-map"></i> {{ __('escooter.map_view') }}
                            </a>
                        </li>
                        <li>
                            <a href="#" class="kt-dropdown-menu-link" data-view="list">
                                <i class="fa-solid fa-table-list"></i> {{ __('escooter.list_view') }}
                            </a>
                        </li>
                        <li>
                            <a href="#" class="kt-dropdown-menu-link" data-view="grid">
                                <i class="fa-solid fa-table-cells-large"></i> {{ __('escooter.grid_view') }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


        </div>
    </div>

    <div class="grid gap-5 lg:gap-7.5">
        <div data-view-container="grid" data-view-text="{{ __('escooter.grid_view') }}">
            @include('modules.escooter.partials.view.grid')
        </div>
        <div data-view-container="map" data-view-text="{{ __('escooter.map_view') }}" style="display: none;">
            @include('modules.escooter.partials.view.map')
        </div>
        <div data-view-container="list" data-view-text="{{ __('escooter.list_view') }}" style="display: none;">
            @include('modules.escooter.partials.view.list')
        </div>
    </div>
    <!-- Battery Graph Modal -->
    <div id="batteryGraphModal" class="kt-modal" data-kt-modal="true">
        <div class="kt-modal-content max-w-[800px] top-[10%]">
            <div class="kt-modal-header">
                <h3 class="kt-modal-title">{{ __('escooter.battery_graph') }}</h3>
                <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="lucide lucide-x" aria-hidden="true">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="kt-modal-body">
                <div id="batteryGraphContainer" style="height: 400px; width: 100%;"></div>
            </div>
        </div>
    </div>

@endsection

@section('config')
    <script>
        window.EscooterConfig = {};
        window.EscooterConfig.indexUrl = "{{ route('escooter.index') }}";
        window.EscooterConfig.batteryGraphUrl = "{{ route('escooter.battery-graph') }}";
    </script>
@endsection

@section('extra_scripts')
    <script src="{{ asset('assets/js/apps/escooter/index.js') }}"></script>
@endsection