@extends('modules.users.layouts.base')
@section('title', __('users.create_title'))

@section('content_body')

<form id="kt_user_create_form" class="kt-form" action="{{ route('users.store') }}" method="POST">
    <div class="kt-card">    
        <div id="cardHeader" class="kt-card-header">
            <div class="flex items-center gap-2.5" data-kt-tabs="true">
                <button type="button" class="kt-btn kt-btn-ghost active" data-kt-tab-toggle="#tab_1_1">
                    @lang('users.main_tab')
                </button>
                <button type="button" class="kt-btn kt-btn-ghost" data-kt-tab-toggle="#tab_1_3">
                    @lang('users.modules_tab')
                </button>
                <button type="button" class="kt-btn kt-btn-ghost" data-kt-tab-toggle="#tab_1_4">
                    @lang('users.reports_tab')
                </button>
                <button type="button" class="kt-btn kt-btn-ghost" data-kt-tab-toggle="#tab_1_2">
                    @lang('users.objects_tab')
                </button>
            </div>
        </div>
        <div class="kt-card-content">  
            @csrf
            <div class="flex flex-col gap-5" id="tab_1_1">
                
                <!-- Active -->
                <div class="flex items-center gap-2">
                        <input type="checkbox" class="kt-checkbox" id="active" name="active" checked />
                        <label class="kt-label" for="active">@lang('users.active')</label>
                    </div>

                <!-- Language -->
                <div class="kt-form-item">
                    <label class="kt-form-label required">Language</label>
                    <div class="kt-form-control">
                        <select class="kt-select" name="lang">
                            @foreach($languages as $code => $name)
                                <option value="{{ $code }}" {{ old('lang', 'fr') == $code ? 'selected' : '' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Email -->
                <div class="kt-form-item">
                    <label class="kt-form-label required">@lang('users.email')</label>
                    <div class="kt-form-control">
                        <input type="email" class="kt-input" name="email" value="{{ old('email') }}" placeholder="@lang('users.email')" />
                    </div>
                </div>

                <!-- Phone -->
                <div class="kt-form-item">
                    <label class="kt-form-label">@lang('users.phone_number')</label>
                    <div class="kt-form-control">
                        <input type="text" class="kt-input" name="phone_number" value="{{ old('phone_number') }}" placeholder="@lang('users.phone_number')" />
                    </div>
                </div>

                <!-- Group & SubAdmin Removed -->


                <!-- Available Maps -->
                <div class="kt-form-item">
                    <label class="kt-form-label">@lang('users.maps')</label>
                    <div class="grid md:grid-cols-2 gap-2 kt-checkbox-list">
                        @foreach($maps as $id => $name)
                            <div class="flex items-center gap-1.5 pe-7.5">
                                <input type="checkbox" class="kt-checkbox" name="available_maps[]" value="{{ $id }}"
                                    {{ (old('_token') === null || (is_array(old('available_maps')) && in_array($id, old('available_maps')))) ? 'checked' : '' }} />
                                <label class="kt-label">{{ $name }}</label>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Password -->
                <div class="kt-form-item">
                    <label class="kt-form-label required">@lang('users.password')</label>
                    <div class="kt-form-control">
                        <input type="password" class="kt-input" name="password" placeholder="@lang('users.password')" />
                    </div>
                </div>

                <!-- Password Confirmation -->
                <div class="kt-form-item">
                    <label class="kt-form-label required">@lang('users.confirm_password')</label>
                    <div class="kt-form-control">
                        <input type="password" class="kt-input" name="password_confirmation" placeholder="@lang('users.confirm_password')" />
                    </div>
                </div>
            </div>
            <div class="hidden" id="tab_1_2">
                <div class="p-2 flex items-center justify-between gap-4">
                    <div class="flex items-center gap-2 w-full max-w-[400px]">
                        <input type="text" class="kt-input" id="object_search_input" placeholder="{{ __('users.search_objects') }}" />
                        <span class="text-gray-500 text-sm whitespace-nowrap" id="object_search_count">{{ count($devices) }} @lang('users.total')</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" class="kt-btn kt-btn-outline kt-btn-sm whitespace-nowrap" id="btn_select_all">
                            @lang('users.select_all')
                        </button>
                        <button type="button" class="kt-btn kt-btn-outline kt-btn-sm whitespace-nowrap" id="btn_deselect_all">
                            @lang('users.deselect_all')
                        </button>
                    </div>
                </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="#cardHeader,#cardFooter"
                    data-kt-scrollable-wrappers="#vehContent" data-kt-scrollable-offset="180px">
                    
                    <div class="rounded-lg w-full grow h-[1000px]">
                        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 lg:gap-5" id="object_list_container">
                            @foreach($devices as $device)
                                <div class="flex align-start gap-3.5 object-item">
                                    <div class="flex items-center justify-center w-[1.875rem] h-[1.875rem]">
                                        <input type="checkbox" class="kt-checkbox" name="attached_devices[]" value="{{ $device->id }}" />
                                    </div>
                                    <div class="flex flex-col justify-start gap-1">
                                        <span class="text-sm font-semibold leading-none kt-label-name">
                                            {{ $device->name }}
                                        </span>
                                        <span class="text-sm font-medium text-mono kt-label-plate">
                                            {{ $device->plate_number ?? '-' }}
                                        </span>
                                        <span class="text-xs text-secondary-foreground kt-label-model">
                                            {{ $device->device_model ?? '-' }}
                                        </span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden" id="tab_1_3">
                <div class="p-2 flex items-center justify-between gap-4">
                    <div class="flex items-center gap-2 w-full max-w-[400px]">
                        <input type="text" class="kt-input" id="module_search_input" placeholder="@lang('users.search_modules')" />
                        <span class="text-gray-500 text-sm whitespace-nowrap" id="module_search_count">{{ count($modules) }} @lang('users.total')</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" class="kt-btn kt-btn-outline kt-btn-sm whitespace-nowrap" id="btn_select_all_modules">
                            @lang('users.select_all')
                        </button>
                        <button type="button" class="kt-btn kt-btn-outline kt-btn-sm whitespace-nowrap" id="btn_deselect_all_modules">
                            @lang('users.deselect_all')
                        </button>
                    </div>
                </div>

                <div id="modulesContent" 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="#cardHeader,#cardFooter"
                        data-kt-scrollable-wrappers="#modulesContent" data-kt-scrollable-offset="180px">
                    <div class="rounded-lg w-full grow h-[1000px]">
                        <div class="grid gap-5" id="module_list_container">
                            @foreach($modules as $module)
                            <div class="flex items-center justify-between flex-wrap lg:flex-nowrap border border-border rounded-xl gap-2 px-3.5 py-2.5 module-item">
                                <div class="flex items-center flex-wrap lg:flex-nowrap gap-3.5">
                                    <div class="relative size-[50px] shrink-0">
                                            <img class="w-full h-full object-contain" alt="{{ $module->translation_name }}" src="{{ asset($module->icon_path) }}">
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-semibold text-mono mb-px kt-label-name">
                                            {{ $module->translation_name }}
                                        </span>
                                        <span class="text-sm text-secondary-foreground">
                                            {{ $module->translation_description }}
                                        </span>
                                    </div>
                                </div>
                                <label class="kt-label">
                                    <input {{ (is_array(old('modules')) && in_array($module->id, old('modules'))) ? 'checked' : '' }} class="kt-switch" name="modules[]" type="checkbox" value="{{ $module->id }}"/>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="hidden" id="tab_1_4">
                <div class="p-2 flex items-center justify-between gap-4">
                    <div class="flex items-center gap-2 w-full max-w-[400px]">
                        <input type="text" class="kt-input" id="report_search_input" placeholder="@lang('users.search_reports')" />
                        <span class="text-gray-500 text-sm whitespace-nowrap" id="report_search_count">{{ count($reports) }} @lang('users.total')</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" class="kt-btn kt-btn-outline kt-btn-sm whitespace-nowrap" id="btn_select_all_reports">
                            @lang('users.select_all')
                        </button>
                        <button type="button" class="kt-btn kt-btn-outline kt-btn-sm whitespace-nowrap" id="btn_deselect_all_reports">
                            @lang('users.deselect_all')
                        </button>
                    </div>
                </div>

                <div id="reportsContent" 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="#cardHeader,#cardFooter"
                        data-kt-scrollable-wrappers="#reportsContent" data-kt-scrollable-offset="180px">
                    <div class="rounded-lg w-full grow h-[1000px]">
                        <div class="grid gap-5" id="report_list_container">
                            @foreach($reports as $report)
                            <div class="flex items-center justify-between flex-wrap lg:flex-nowrap border border-border rounded-xl gap-2 px-3.5 py-2.5 report-item">
                                <div class="flex items-center flex-wrap lg:flex-nowrap gap-3.5">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-semibold text-mono mb-px kt-label-name">
                                            @lang($report->title)
                                        </span>
                                        <span class="text-sm text-secondary-foreground">
                                            {{ $report->group ? $report->group->title : '' }}
                                        </span>
                                    </div>
                                </div>
                                <label class="kt-label">
                                    <input {{ (is_array(old('reports')) && in_array($report->id, old('reports'))) ? 'checked' : '' }} class="kt-switch" name="reports[]" type="checkbox" value="{{ $report->id }}"/>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="cardFooter" class="kt-card-footer justify-end">
            <div class="kt-form-actions">
                <a href="{{ route('users.index') }}" class="kt-btn kt-btn-outline">@lang('users.return')</a>  
                <button type="submit" class="kt-btn">@lang('users.save')</button>
            </div>
        </div>
    </div>
</form>
@endsection

@section('extra_scripts')
    <script>
        window.UsersConfig = {
            indexUrl: "{{ route('users.index') }}",
            translations: {
                success: "@lang('users.created_success')",
                error: "@lang('users.error')",
                ok_got_it: "@lang('users.ok_got_it')"
            }
        };
    </script>
    <script src="{{ asset('assets/js/apps/users/create.js') }}"></script>
@endsection