@props([
    'user' => null,
    'action',
    'method' => 'POST',
    'sectors' => collect(),
    'usersForLeader' => collect(),
    'trainingGroups' => collect(),
    'jobTitles' => collect(),
])

<form method="POST" action="{{ $action }}" class="space-y-6">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        {{-- Nome --}}
        <div>
            <x-form.label for="name" value="Nome" />
            <x-form.input
                id="name"
                name="name"
                value="{{ old('name', $user?->name) }}"
                required
            />
            <x-form.error name="name" />
        </div>

        {{-- Email --}}
        <div>
            <x-form.label for="email" value="E-mail" />
            <x-form.input
                id="email"
                name="email"
                type="email"
                value="{{ old('email', $user?->email) }}"
                required
            />
            <x-form.error name="email" />
        </div>

        @php
            $selectedSectorIds = collect(old('sector_ids', $user ? $user->sectors->pluck('id')->all() : []))
                ->map(fn ($id) => (string) $id)
                ->all();
            if ($selectedSectorIds === [] && $user?->sector_id !== null) {
                $selectedSectorIds = [(string) $user->sector_id];
            }
            $selectedGroupIds = collect(old('training_group_ids', $user ? $user->trainingGroups->pluck('id')->all() : []))
                ->map(fn ($id) => (string) $id)
                ->all();
            if ($selectedGroupIds === [] && $user?->traineeProfile?->training_group_id !== null) {
                $selectedGroupIds = [(string) $user->traineeProfile->training_group_id];
            }
        @endphp

        <div>
            <x-form.label for="job_title_id" value="Cargo" />
            <select
                name="job_title_id"
                id="job_title_id"
                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
            >
                <option value="">Selecione</option>
                @foreach($jobTitles as $jobTitle)
                    <option
                        value="{{ $jobTitle->id }}"
                        @selected((string) old('job_title_id', $user?->traineeProfile?->job_title_id) === (string) $jobTitle->id)
                    >
                        {{ $jobTitle->name }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="job_title_id" />
        </div>

        {{-- Áreas (N-N) --}}
        <div class="md:col-span-2">
            <x-form.label for="sector_ids" value="Áreas (setores)" />
            <select
                name="sector_ids[]"
                id="sector_ids"
                multiple
                size="{{ min(8, max(4, $sectors->count())) }}"
                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
            >
                @foreach($sectors as $sectorOption)
                    <option value="{{ $sectorOption->id }}" @selected(in_array((string) $sectorOption->id, $selectedSectorIds, true))>
                        {{ $sectorOption->name }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="sector_ids" />
            <x-form.error name="sector_ids.*" />
            <p class="mt-1 text-xs text-gray-500">
                Segure <kbd class="rounded border border-gray-300 bg-gray-100 px-1 text-xs">Ctrl</kbd> (Windows) ou <kbd class="rounded border border-gray-300 bg-gray-100 px-1 text-xs">⌘</kbd> (Mac) para selecionar várias áreas (ex.: VMA e VMR).
            </p>
        </div>

        {{-- Grupos (N-N, por setor) --}}
        <div class="md:col-span-2">
            <x-form.label for="training_group_ids" value="Grupos de treinamento" />
            <select
                name="training_group_ids[]"
                id="training_group_ids"
                multiple
                size="{{ min(10, max(4, $trainingGroups->count())) }}"
                class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
            >
                @php $openSectorLabel = null; @endphp
                @foreach($trainingGroups as $groupOption)
                    @php $sectorLabel = $groupOption->sector?->name ?? '—'; @endphp
                    @if($openSectorLabel !== $sectorLabel)
                        @if($openSectorLabel !== null)</optgroup>@endif
                        <optgroup label="{{ $sectorLabel }}">
                        @php $openSectorLabel = $sectorLabel; @endphp
                    @endif
                    <option value="{{ $groupOption->id }}" @selected(in_array((string) $groupOption->id, $selectedGroupIds, true))>
                        {{ $groupOption->name }}
                    </option>
                @endforeach
                @if($openSectorLabel !== null)</optgroup>@endif
            </select>
            <x-form.error name="training_group_ids" />
            <x-form.error name="training_group_ids.*" />
            <p class="mt-1 text-xs text-gray-500">
                Pode escolher vários grupos (mesmo em setores diferentes). As áreas dos grupos selecionados são incluídas automaticamente.
            </p>
        </div>

        {{-- Líder direto --}}
        <div>
            <x-form.label for="leader_user_id" value="Líder / gestor direto" />
            <select name="leader_user_id" id="leader_user_id"
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">Nenhum</option>
                @foreach($usersForLeader as $leaderOption)
                    <option value="{{ $leaderOption->id }}" @selected((string) old('leader_user_id', $user?->leader_user_id) === (string) $leaderOption->id)>
                        {{ $leaderOption->name }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="leader_user_id" />
            <p class="mt-1 text-xs text-gray-500">Opcional. O líder do <em>setor</em> (aprovação Uber) é cadastrado em Inventário → Setores.</p>
        </div>

        {{-- Tipo de conta --}}
        <div class="md:col-span-2">
            <x-form.label for="account_kind" value="Tipo de conta" />
            <select name="account_kind" id="account_kind"
                    class="block w-full max-w-xl rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
                    required>
                @foreach(\App\Enums\AccountKind::cases() as $kind)
                    <option value="{{ $kind->value }}" @selected(old('account_kind', $user?->account_kind?->value ?? \App\Enums\AccountKind::STAFF->value) === $kind->value)>
                        {{ $kind->label() }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="account_kind" />
            <p class="mt-1 text-xs text-gray-500">Somente portal: não pode receber roles de gestão.</p>
        </div>

        {{-- Senha: input nativo (evita bug em que <x-form.input type="password"> não renderizava o campo em alguns browsers) --}}
        <div class="md:col-span-2">
            <x-form.label for="user_account_password" value="{{ $user ? 'Nova senha (opcional)' : 'Senha' }}" />
            <input
                type="password"
                name="password"
                id="user_account_password"
                autocomplete="new-password"
                @if(! $user) required @endif
                class="block w-full min-h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
            >
            <x-form.error name="password" />
            @if($user)
                <p class="mt-1 text-xs text-gray-500">Deixe em branco para manter a senha atual.</p>
            @endif
        </div>

    </div>

    <div class="flex justify-end gap-3">
        <a href="{{ route('users.index') }}" class="text-gray-600 hover:text-gray-900">
            Cancelar
        </a>

        <x-ui.button type="submit">
            {{ $user ? 'Atualizar' : 'Criar' }}
        </x-ui.button>
    </div>
</form>