@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary rounded-circle me-3 shadow-sm">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div>
            <h2 class="fw-bold text-dark mb-0">Nouvel Utilisateur</h2>
            <p class="text-muted small mb-0">Enregistrez un collaborateur et définissez ses droits d'accès aux 5 grands menus.</p>
        </div>
    </div>

    <form action="{{ route('admin.users.store') }}" method="POST" id="userForm">
        @csrf
        <div class="row">
            {{-- Colonne de Gauche : Informations de base & Droits --}}
            <div class="col-xl-7">
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4 text-primary"><i class="fas fa-info-circle me-2"></i>Identité & Connexion</h5>
                        
                        <div class="mb-3">
                            <label for="name" class="form-label fw-bold">Nom & Prénoms</label>
                            <input type="text" name="name" id="name" class="form-control rounded-3 @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="Ex: Jean Kouassi" required>
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label fw-bold">Adresse Email</label>
                            <input type="email" name="email" id="email" class="form-control rounded-3 @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="jean.kouassi@conseil-etat.ci" required>
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-3">
                            <label for="role_id" class="form-label fw-bold">Rôle principal</label>
                            <select name="role_id" id="role_id" class="form-select rounded-3 @error('role_id') is-invalid @enderror" required>
                                <option value="" selected disabled>Choisir un rôle...</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                        {{ $role->nom }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="password" class="form-label fw-bold">Mot de passe</label>
                                <input type="password" name="password" id="password" class="form-control rounded-3 @error('password') is-invalid @enderror" placeholder="••••••••" required>
                                @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="password_confirmation" class="form-label fw-bold">Confirmer</label>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control rounded-3" placeholder="••••••••" required>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Section des Droits d'Accès réorganisée selon les 5 Grands Menus --}}
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3 text-primary"><i class="fas fa-th-large me-2"></i>Droits d'Accès aux Menus</h5>
                        <p class="text-muted small mb-4">Cochez les modules principaux à attribuer à l'utilisateur.</p>

                        <div class="row g-3">
                            @php
                                $available_menus = [
                                    'dashboard'    => ['label' => '1. DASHBOARD', 'icon' => 'fa-tachometer-alt', 'color' => 'text-primary'],
                                    'site_web'     => ['label' => '2. SITE WEB (Slides, Articles, Flash...)', 'icon' => 'fa-globe', 'color' => 'text-success'],
                                    'audiences'    => ['label' => '3. RÔLE D\'AUDIENCE (Audiences, Requêtes)', 'icon' => 'fa-gavel', 'color' => 'text-danger'],
                                    'base_comoe'   => ['label' => '4. BASE COMOÉ (Jurisprudence)', 'icon' => 'fa-database', 'color' => 'text-dark'],
                                    'settings'     => ['label' => '5. PARAMÈTRES (Chambres, Membres...)', 'icon' => 'fa-gears', 'color' => 'text-warning'],
                                ];
                            @endphp

                            @foreach($available_menus as $key => $menu)
                                <div class="col-12">
                                    <div class="form-check form-switch p-3 border rounded-3 bg-light d-flex align-items-center justify-content-between shadow-sm-hover transition-all">
                                        <div class="d-flex align-items-center">
                                            <div class="icon-box me-3 {{ $menu['color'] }} bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                <i class="fas {{ $menu['icon'] }}"></i>
                                            </div>
                                            <label class="form-check-label fw-bold mb-0 cursor-pointer" for="menu_{{ $key }}">
                                                {{ $menu['label'] }}
                                            </label>
                                        </div>
                                        <input class="form-check-input ms-0 custom-switch-lg menu-checkbox" type="checkbox" name="menus_access[]" 
                                               value="{{ $key }}" id="menu_{{ $key }}" data-menu="{{ $key }}"
                                               {{ is_array(old('menus_access')) && in_array($key, old('menus_access')) ? 'checked' : '' }}>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="d-grid mb-5">
                    <button type="submit" class="btn btn-primary btn-lg rounded-pill shadow py-3 fw-bold">
                        <i class="fas fa-save me-2"></i> Enregistrer l'utilisateur
                    </button>
                </div>
            </div>

            {{-- Colonne de Droite : Aide & Récapitulatif --}}
            <div class="col-xl-5">
                <div class="sticky-top" style="top: 20px;">
                    <div class="card bg-dark text-white border-0 shadow-lg rounded-4 overflow-hidden mb-4">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-shield-alt fa-2x text-warning me-3"></i>
                                <h4 class="fw-bold mb-0">Gestion des privilèges</h4>
                            </div>
                            <p class="small opacity-75">
                                Sélectionner un rôle pré-remplira automatiquement les accès recommandés. Vous pouvez toujours ajuster manuellement les cases selon les besoins.
                                <br><br>
                                <strong>Note importante :</strong> L'accès au menu <strong>Paramètres</strong> affichera les rubriques de configuration (Chambres et Membres). Seul le rôle Super Administrateur aura accès à la gestion des utilisateurs au sein de ce menu.
                            </p>
                        </div>
                    </div>

                    <div class="alert alert-warning border-0 shadow-sm rounded-4 d-flex align-items-start p-4">
                        <i class="fas fa-exclamation-triangle mt-1 me-3"></i>
                        <div>
                            <h6 class="fw-bold">Sécurité du mot de passe</h6>
                            <p class="small mb-0">Assurez-vous d'utiliser une combinaison de lettres, chiffres et caractères spéciaux pour la sécurité du compte de votre collaborateur.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .cursor-pointer { cursor: pointer; }
    .transition-all { transition: all 0.3s ease; }
    .shadow-sm-hover:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08)!important; border-color: #0d6efd!important; }
    .custom-switch-lg { width: 3rem !important; height: 1.5rem !important; cursor: pointer; }
    .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
</style>

{{-- Script d'auto-sélection dynamique des menus selon le rôle --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const roleSelect = document.getElementById('role_id');
    const menuCheckboxes = document.querySelectorAll('.menu-checkbox');

    function updateMenuAccess() {
        const roleId = roleSelect.value;
        
        // On désactive d'abord toutes les cases
        menuCheckboxes.forEach(cb => cb.checked = false);

        if (roleId === "1" || roleId === "2") {
            // Super-Admin (1) & Admin (2) -> Tous les menus
            menuCheckboxes.forEach(cb => cb.checked = true);
        } else if (roleId === "3") {
            // Éditeur (3) -> Seulement Dashboard et Site Web
            menuCheckboxes.forEach(cb => {
                const menuName = cb.getAttribute('data-menu');
                if (menuName === 'dashboard' || menuName === 'site_web') {
                    cb.checked = true;
                }
            });
        }
    }

    // Écouter le changement de rôle
    roleSelect.addEventListener('change', updateMenuAccess);

    // Exécuter au chargement uniquement si c'est une nouvelle création (pas de "old" inputs en session)
    @if(!old('menus_access'))
        if(roleSelect.value) {
            updateMenuAccess();
        }
    @endif
});
</script>
@endsection