@php use Carbon\Carbon; @endphp

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

@section('content_body')
    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
        <div class="flex align-start gap-2">
            <a class="" href="{{ route('dashboard') }}" title="Return">
                <i class="ki-outline ki-left-square text-2xl leading-none text-muted-foreground hover:text-primary"></i>
            </a>
            <div class="flex flex-col gap-2">
                <span class="text-2xl font-medium text-mono leading-none tracking-tight">
                    {{ __('planner.title') }}
                </span>
            </div>
        </div>
        @include('modules.planner.partials.settings-menu')
    </div>
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-5 lg:gap-7.5">
        <div class="col-span-1">

            <div id="plannerBox" class="grid gap-5 lg:gap-7.5">
                <div class="kt-card">
                    <div id="plannerHeader" class="kt-card-header">
                        <h3 class="kt-card-title">
                            {{ __('planner.subtitle.options') }}
                        </h3>
                    </div>
                    <div id="plannerContent" 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="#plannerHeader,#plannerFooter"
                        data-kt-scrollable-wrappers="#plannerContent" data-kt-scrollable-offset="155px">
                        <div class="rounded-lg w-full grow h-[1000px]">
                            <div class="grid gap-2.5 lg:gap-5">

                                <!-- Clients -->
                                <div class="kt-form-item">
                                    <label class="kt-form-label required">{{ __('planner.menu.clients') }}</label>
                                    <div class="kt-form-control">
                                        <select class="kt-select" name="clients" id="clients">
                                            <!-- User Clients here -->
                                        </select>
                                    </div>
                                </div>

                                <!-- Shifts -->
                                <div class="kt-form-item">
                                    <label class="kt-form-label required">{{ __('planner.menu.shifts') }}</label>
                                    <div class="kt-form-control">
                                        <select class="kt-select" name="shifts" id="shifts" disabled>
                                            <!-- User & Clients Shifts here -->
                                        </select>
                                    </div>
                                </div>

                                <!-- Destinations -->
                                <div class="kt-form-item">
                                    <label class="kt-form-label required">{{ __('planner.menu.destinations') }}</label>
                                    <div class="kt-form-control">
                                        <select class="kt-select" name="destinations" id="destinations" disabled>
                                            <!-- User & Clients Destinations here -->
                                        </select>
                                    </div>
                                </div>

                                <!-- Stop Duration -->
                                <div class="kt-form-item">
                                    <label class="kt-form-label required">{{ __('planner.menu.stop_duration') }}</label>
                                    <div class="kt-form-control">
                                        <input type="number" class="kt-input" name="stop_duration"
                                            id="stop_duration" value="60" disabled>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div id="plannerFooter" class="kt-card-footer justify-end">
                        <button type="button" id="plannerGenerate" data-action="generate-planner" class="kt-btn kt-btn-primary">
                            <i class="ki-filled ki-route"></i> {{ __('planner.generate') }}
                        </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">
                            {{ __('planner.subtitle.trip_list') }}
                        </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="155px">
                        <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-end">
                        <button type="button" id="doneRes" data-action="done-res" class="kt-btn kt-btn-outline">
                            <i class="ki-filled ki-arrows-circle"></i> {{ __('planner.reset') }}
                        </button>
                    </div>
                </div>
            </div>

            <div id="tripDetailsBox" class="grid gap-5 lg:gap-7.5 hidden">
                <div class="kt-card">
                    <div id="tripDetailsHeader" class="kt-card-header flex justify-between items-center">
                        <h3 class="kt-card-title">
                            {{ __('planner.subtitle.trip_details') }}
                        </h3>
                    </div>
                    <div id="tripDetails" 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="#tripDetailsHeader,#tripDetailsFooter"
                        data-kt-scrollable-wrappers="#tripDetails" data-kt-scrollable-offset="155px">
                        <div id="tripDetailsContent" class="rounded-lg w-full grow h-[1000px]">
                            <!-- Details injected via JS -->
                        </div>
                    </div>
                    <div id="tripDetailsFooter" class="kt-card-footer justify-end">
                        <button type="button" id="btn-back-to-list" class="kt-btn kt-btn-outline">
                            <i class="ki-filled ki-left-square fs-3"></i> {{ __('planner.back') }}
                        </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: 76vh; width: 100%; border-radius: 0.5em;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('config')
    <script>
        window.PlannerConfig = window.PlannerConfig || {};
        window.PlannerConfig.getClientsUrl = "{{ route('planner.get-clients') }}";
        window.PlannerConfig.getShiftsUrl = "{{ route('planner.get-shifts') }}";
        window.PlannerConfig.getDestinationsUrl = "{{ route('planner.get-destinations') }}";
        window.PlannerConfig.saveTripUrl = "{{ route('planner.trip.save') }}";
        window.PlannerConfig.getPointsUrl = "{{ route('planner.get-points') }}";
    </script>
@endsection

@section('extra_scripts')
    @include('partials.google-maps')
    <script src="{{ asset('assets/js/apps/planner/index.js') }}"></script>
    <script>
        initializeGoogleMap(null, 'map', "Google Normal", 10);
    </script>
@endsection