@extends('layouts.admin-layout')

@section('title', 'Ajouter un Utilisateur')

@section('content')
    <div class="p-6">
        <div class="max-w-4xl mx-auto">
            <!-- Page Header -->
            <div class="mb-6 sm:mb-8">
                <div class="flex items-center gap-3 mb-2">
                    <a href="{{ route('admin.users.index') }}" class="text-blue-600 hover:text-blue-800 transition">
                        <i class="fas fa-arrow-left text-xl"></i>
                    </a>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Ajouter un Utilisateur</h1>
                </div>
                <p class="ml-10 text-sm sm:text-base text-gray-600">Créez un nouvel utilisateur avec accès aux églises</p>
            </div>

            @if ($errors->any())
                <div class="bg-red-50 border-l-4 border-red-500 text-red-700 px-6 py-4 rounded-lg mb-6">
                    <div class="flex items-start">
                        <i class="fas fa-exclamation-triangle text-red-500 mr-3 text-xl mt-1"></i>
                        <div>
                            <p class="font-bold mb-2">Veuillez corriger les erreurs suivantes :</p>
                            <ul class="list-disc list-inside space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            <form action="{{ route('admin.users.store') }}" method="POST" class="space-y-6">
                @csrf

                <!-- User Information Card -->
                <div class="bg-white overflow-hidden shadow-lg sm:rounded-xl border border-gray-200">
                    <div class="px-6 py-4 bg-gradient-to-r from-blue-600 to-blue-700 border-b border-gray-200">
                        <h3 class="text-lg font-bold text-white flex items-center">
                            <i class="fas fa-user-circle mr-2"></i>
                            Informations Utilisateur
                        </h3>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Name -->
                        <div>
                            <label for="name" class="block text-sm font-bold text-gray-700 mb-2">
                                <i class="fas fa-user mr-1 text-blue-600"></i>Nom Complet *
                            </label>
                            <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 transition"
                                placeholder="Entrez le nom complet">
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-bold text-gray-700 mb-2">
                                <i class="fas fa-envelope mr-1 text-blue-600"></i>Email *
                            </label>
                            <input type="email" name="email" id="email" value="{{ old('email') }}" required
                                class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 transition"
                                placeholder="email@exemple.com">
                            @error('email')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Password -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="password" class="block text-sm font-bold text-gray-700 mb-2">
                                    <i class="fas fa-lock mr-1 text-blue-600"></i>Mot de passe *
                                </label>
                                <input type="password" name="password" id="password" required
                                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 transition"
                                    placeholder="Minimum 8 caractères">
                                @error('password')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="password_confirmation" class="block text-sm font-bold text-gray-700 mb-2">
                                    <i class="fas fa-lock mr-1 text-blue-600"></i>Confirmer le mot de passe *
                                </label>
                                <input type="password" name="password_confirmation" id="password_confirmation" required
                                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 transition"
                                    placeholder="Confirmez le mot de passe">
                            </div>
                        </div>

                        <!-- Role -->
                        <div>
                            <label for="role" class="block text-sm font-bold text-gray-700 mb-2">
                                <i class="fas fa-user-tag mr-1 text-purple-600"></i>Rôle *
                            </label>
                            <select name="role" id="role" required
                                class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 transition">
                                <option value="">Sélectionnez un rôle</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->name }}" {{ old('role') == $role->name ? 'selected' : '' }}>
                                        {{ ucfirst(str_replace('-', ' ', $role->name)) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Church Assignment Card -->
                <div class="bg-white overflow-hidden shadow-lg sm:rounded-xl border border-gray-200">
                    <div class="px-6 py-4 bg-gradient-to-r from-green-600 to-green-700 border-b border-gray-200">
                        <h3 class="text-lg font-bold text-white flex items-center">
                            <i class="fas fa-church mr-2"></i>
                            Affectation aux Églises
                        </h3>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Churches Selection -->
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-3">
                                <i class="fas fa-church mr-1 text-green-600"></i>Églises affectées * (Sélectionnez au moins une église)
                            </label>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-4 bg-gray-50">
                                @foreach($churches as $church)
                                    <label class="flex items-start p-3 bg-white border border-gray-300 rounded-lg hover:bg-blue-50 hover:border-blue-500 cursor-pointer transition">
                                        <input type="checkbox" name="churches[]" value="{{ $church->id }}"
                                            {{ in_array($church->id, old('churches', [])) ? 'checked' : '' }}
                                            class="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <div class="ml-3">
                                            <span class="text-sm font-semibold text-gray-900">{{ $church->name }}</span>
                                            <p class="text-xs text-gray-500">{{ $church->city }}, {{ $church->country }}</p>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                            @error('churches')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Primary Church -->
                        <div>
                            <label for="primary_church" class="block text-sm font-bold text-gray-700 mb-2">
                                <i class="fas fa-star mr-1 text-yellow-500"></i>Église Principale *
                            </label>
                            <select name="primary_church" id="primary_church" required
                                class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 transition">
                                <option value="">Sélectionnez l'église principale</option>
                                @foreach($churches as $church)
                                    <option value="{{ $church->id }}" {{ old('primary_church') == $church->id ? 'selected' : '' }}>
                                        {{ $church->name }}
                                    </option>
                                @endforeach
                            </select>
                            <p class="mt-2 text-sm text-gray-600">
                                <i class="fas fa-info-circle text-blue-600 mr-1"></i>
                                L'église principale doit être sélectionnée parmi les églises affectées ci-dessus
                            </p>
                            @error('primary_church')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex items-center justify-end gap-4 pt-4">
                    <a href="{{ route('admin.users.index') }}"
                        class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-200 shadow-md hover:shadow-lg">
                        <i class="fas fa-times mr-2"></i>Annuler
                    </a>
                    <button type="submit"
                        class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-200">
                        <i class="fas fa-save mr-2"></i>Créer l'utilisateur
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Update primary church dropdown when churches are selected/deselected
        document.querySelectorAll('input[name="churches[]"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const primaryChurchSelect = document.getElementById('primary_church');
                const selectedChurches = Array.from(document.querySelectorAll('input[name="churches[]"]:checked'))
                    .map(cb => cb.value);

                // Keep all options but disable those not selected
                Array.from(primaryChurchSelect.options).forEach(option => {
                    if (option.value && !selectedChurches.includes(option.value)) {
                        option.disabled = true;
                    } else if (option.value) {
                        option.disabled = false;
                    }
                });
            });
        });

        // Trigger on page load to handle old() values
        document.addEventListener('DOMContentLoaded', function() {
            const event = new Event('change');
            const firstCheckbox = document.querySelector('input[name="churches[]"]');
            if (firstCheckbox) {
                firstCheckbox.dispatchEvent(event);
            }
        });
    </script>
@endsection