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

@section('content_body')

    @csrf
    <div class="kt-card">
        <div id="cardHeader" class="kt-card-header">
            <div class="flex items-center gap-2.5" data-kt-tabs="true">
                <button class="kt-btn kt-btn-ghost active" data-kt-tab-toggle="#tab_1_1">
                    @lang('users.main_tab')
                </button>
                <button class="kt-btn kt-btn-ghost" data-kt-tab-toggle="#tab_1_2">
                    @lang('reports.my_reports')
                </button>
                <button class="kt-btn kt-btn-ghost" data-kt-tab-toggle="#tab_1_3">
                    @lang('reports.history')
                </button>
            </div>
        </div>
        <div class="kt-card-body">

            <div class="flex flex-col gap-5 p-5" id="tab_1_1">
                <form id="kt_reports_form" class="kt-form" action="{{ route('reports.generate') }}" method="POST">
                    @csrf
                    <div class="grid grid-cols-1 xl:grid-cols-4 gap-5 lg:gap-7.5">
                        <div class="col-span-2">
                            <!-- Type -->
                            <div class="kt-form-item">
                                <label class="kt-form-label required">@lang('users.report_type')</label>
                                <div class="kt-form-control">
                                    <select class="kt-select" name="reportType">
                                        @php
                                            $groupMap = [
                                                1 => 'reports.group_synthesis',
                                                2 => 'reports.group_overspeed',
                                                3 => 'reports.group_speed'
                                            ];
                                            $reportMap = [
                                                1 => 'reports.fuel_consumption',
                                                2 => 'reports.daily_distance',
                                                3 => 'reports.daily_distance_v2',
                                                4 => 'reports.weekly_distance',
                                                5 => 'reports.outside_working_time',

                                                7 => 'reports.daily_distance_detail',
                                                12 => 'reports.daily_trip',
                                                10 => 'reports.speed_limit_detailed',
                                                11 => 'reports.canbus_overspeed',
                                            ];
                                        @endphp
                                        @foreach($reportGroups as $group)
                                            <optgroup
                                                label="{{ isset($groupMap[$group->id]) ? __($groupMap[$group->id]) : $group->title }}">
                                                @foreach($group->reports as $report)
                                                    <option value="{{ $report->value }}">
                                                        {{ isset($reportMap[$report->value]) ? __($reportMap[$report->value]) : $report->title }}
                                                    </option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>

                                    <!-- Button removed -->
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <!-- Format -->
                            <div class="kt-form-item">
                                <label class="kt-form-label required">@lang('users.report_format')</label>
                                <div class="kt-form-control">
                                    <select class="kt-select" name="reportFormat">
                                        <option value="1">HTML</option>
                                        <option value="2">XLS</option>
                                        <option value="3">PDF</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 xl:grid-cols-4 gap-5 lg:gap-7.5">
                        <div class="col-span-2">
                            <!-- Start Date -->
                            <div class="kt-form-item">
                                <label class="kt-form-label required">@lang('users.start_date')</label>
                                <div class="kt-form-control">
                                    <input type="text" class="kt-input" name="start_date" placeholder="DD/MM/YYYY">
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <!-- End Date -->
                            <div class="kt-form-item">
                                <label class="kt-form-label required">@lang('users.end_date')</label>
                                <div class="kt-form-control">
                                    <input type="text" class="kt-input" name="end_date" placeholder="DD/MM/YYYY">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tree View Container -->
                    <div class="grid grid-cols-1 gap-5 lg:gap-7.5" id="container_tree">
                        <div class="col-span-1">
                            <!-- Groups & Vehicles Tree -->
                            <div class="kt-form-item">
                                <label class="kt-form-label required">@lang('users.groups_and_vehicles')</label>
                                <div class=" rounded-lg border border-border bg-accent/60">
                                    @include('modules.reports.partials.tree')
                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- Filter Empty Distance -->
                    <div class="flex items-center gap-2" id="container_hide_empty">
                        <input class="kt-switch" type="checkbox" id="switch_hide_empty" name="hide_empty" value="1" /><label
                            class="kt-label" for="switch_hide_empty">Afficher uniquement avec distance > 0</label>
                    </div>



                    {{--
                    <!-- This shows only if reports with the following ids are selected : 8 -->
                    <div class="kt-form-item" id="container_price">
                        <label class="kt-form-label required">@lang('users.fuel_price')</label>
                        <div class="kt-form-control">
                            <input type="number" class="kt-input" name="price" />
                        </div>
                    </div>
                    --}}

                    {{--
                    <!-- This shows only if reports with the following ids are selected : 11 (Canbus Overspeed) -->
                    <div class="kt-form-item" id="container_speed_limit">
                        <label class="kt-form-label required">@lang('reports.speed_limit')</label>
                        <div class="kt-form-control">
                            <input type="text" class="kt-input" name="speed_limit" />
                        </div>
                    </div>
                    --}}

                    <!-- OWT Time Inputs -->
                    <!-- OWT Time Inputs (Flexible Days) -->
                    <div class="col-span-2 hidden" id="container_owt_time">
                        <label class="kt-form-label mb-3">Configuration des jours (Hors travail)</label>
                        <div class="flex items-center">
                            <button type="button" class="kt-link kt-link-underlined kt-link-dashed me-2"
                                data-kt-modal-toggle="#modal_owt_config">
                                <i class="ki-filled ki-calendar-tick"></i> Configurer les jours et horaires :
                            </button>
                            <span class="ml-3 text-muted text-sm" id="owt_config_summary">Aucune configuration
                                chargée.</span>
                        </div>
                        <!-- Hidden Inputs to store OWT config for Form Submission (Populated by JS) -->
                        <div id="owt_config_hidden_inputs"></div>
                    </div>

                    <!-- Custom Columns Selection -->
                    <div class="col-span-2 hidden" id="container_custom_columns">
                        <label class="kt-form-label mb-3">Personnalisation du rapport</label>
                        <div class="flex items-center">
                            <button type="button" class="kt-link kt-link-underlined kt-link-dashed me-2"
                                data-kt-modal-toggle="#modal_custom_columns">
                                <i class="ki-filled ki-setting-2"></i> Choisir les colonnes :
                            </button>
                            <span class="ml-3 text-muted text-sm" id="custom_columns_summary">Défaut</span>
                        </div>
                    </div>

                    <!-- Custom Columns Selection -->
                    <div class="col-span-2 hidden" id="container_custom_columns">
                        <label class="kt-form-label mb-3">Personnalisation du rapport</label>
                        <div class="flex items-center">
                            <button type="button" class="kt-link kt-link-underlined kt-link-dashed me-2"
                                data-kt-modal-toggle="#modal_custom_columns">
                                <i class="ki-filled ki-setting-2"></i> Choisir les colonnes :
                            </button>
                            <span class="ml-3 text-muted text-sm" id="custom_columns_summary">Défaut</span>
                        </div>
                    </div>

                    <div class="kt-form-actions justify-end">
                        <button type="button" class="kt-btn" id="btn_schedule"
                            data-kt-modal-toggle="#kt_modal_schedule_report">@lang('users.schedule')</button>
                        <button type="submit" class="kt-btn">@lang('users.generate')</button>
                    </div>
                </form>
            </div>



            <div class="hidden" id="tab_1_2">
                <div class="grid w-full space-y-5">
                    <div class="kt-card border-0 shadow-none">
                        <div class="kt-card-header">
                            <h3 class="kt-card-title">
                                @lang('reports.my_reports')
                            </h3>
                            <span class="inline-flex gap-2.5">
                                <div class="kt-input max-w-48">
                                    <i class="ki-filled ki-magnifier"></i>
                                    <input id="scheduled_search_input" placeholder="@lang('reports.search')" type="text">
                                </div>
                            </span>
                        </div>

                        <div class="kt-card-body">
                            <table class="kt-table table-striped table-row-bordered gy-5 gs-7" id="scheduled_reports_table">
                                <thead>
                                    <tr class="fw-semibold fs-6 text-gray-800 uppercase gs-0">
                                        <th>@lang('reports.title')</th>
                                        <th>@lang('reports.report_type')</th>
                                        <th>@lang('reports.report_format')</th>
                                        <th>@lang('reports.recurrence')</th>
                                        <th>@lang('reports.time')</th>
                                        <th>@lang('reports.recipients')</th>
                                        <th>@lang('reports.status')</th>
                                        <th class="text-end min-w-100px">@lang('reports.actions')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


            <div class="hidden" id="tab_1_3">
                <div class="grid w-full space-y-5">
                    <div class="kt-card-header">
                        <h3 class="kt-card-title">
                            @lang('reports.history')
                        </h3>
                        <span class="inline-flex gap-2.5">
                            <div class="kt-input max-w-48">
                                <i class="ki-filled ki-magnifier"></i>
                                <input id="history_search_input" placeholder="@lang('reports.search')" type="text">
                            </div>
                        </span>
                    </div>

                    <div class="kt-card-body">
                        <table class="kt-table table-striped table-row-bordered gy-5 gs-7" id="reports_log_table">
                            <thead>
                                <tr class="fw-semibold fs-6 text-gray-800 uppercase gs-0">
                                    <th>@lang('reports.date')</th>
                                    <th>@lang('reports.report_type')</th>
                                    <th>@lang('reports.report_format')</th>
                                    <th>@lang('reports.recipients')</th>
                                    <th>@lang('reports.filename')</th>
                                    <th>@lang('reports.is_auto')</th>
                                    <th>@lang('reports.status')</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @include('modules.reports.partials.schedule_modal')
        @include('modules.reports.partials.owt_modal')
        @include('modules.reports.partials.custom_columns_modal')
@endsection

    @section('extra_scripts')
        <script>         window.ReportsConfig = { dataScheduled: "{{ route('reports.data.scheduled') }}", dataHistory: "{{ route('reports.data.history') }}", translations: { auto: "@lang('reports.auto')", manual: "@lang('reports.manual')", success: "@lang('reports.success')", failed: "@lang('reports.failed')", edit: "@lang('users.edit')", delete: "@lang('users.delete')", download: "@lang('users.download')" }, routes: { configStore: "{{ route('reports.config.store') }}", configShow: "{{ route('reports.config.show', ':id') }}".replace(':id', '') } };
        </script>
        <script src="{{ asset('assets/js/apps/reports/common.js') }}?v={{ time() }}"></script>
        <script src="{{ asset('assets/js/apps/reports/index.js') }}?v={{ time() }}"></script>
    @endsection