@extends('admin.layouts.app')

@section('content')
<form method="POST" id="admin-form" action="{{ isset($admin) && $admin->id ? route('admin.admins.update', $admin->id) : route('admin.admins.store') }}" enctype="multipart/form-data">
    @csrf
    @if(isset($admin) && $admin->id)
    @method('PUT')
    @endif
    <div class="row">
        <div class="col-xl-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">{{ isset($admin) && $admin->id ? __('admin/useradmins.edit_admin') : __('admin/useradmins.add_admin') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/useradmins.name_many') }}</a></li>
                        <li class="breadcrumb-item active">{{ isset($admin) && $admin->id ? __('admin/global.edit') : __('admin/useradmins.add_admin_button') }}</li>
                    </ol>
                </div>
            </div>

            <!-- menu bar -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="flex-grow-1">
                                <a href="{{ route('admin.admins.index') }}" class="btn btn-light me-2">{{ __('admin/global.close') }}</a>
                                <button class="btn btn-info add-btn" id="saveadmin" data-bs-loading-text="Enregistrement..."><i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/global.save') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0 flex-grow-1">{{ isset($admin) && $admin->id ? __('admin/useradmins.edit_admin') : __('admin/useradmins.add_admin') }}</h4>
                </div>
                <div class="card-body">

                    <div class="row">
                        <!-- Informations personnelles -->
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">{{ __('admin/useradmins.personal_information') }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firstname" class="form-label">{{ __('admin/useradmins.firstname') }} <span class="text-danger">*</span></label>
                                                <input type="text" id="firstname" name="firstname" class="form-control @error('firstname') is-invalid @enderror"
                                                    value="{{ old('firstname', $admin->firstname ?? '') }}" >
                                                @error('firstname')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="lastname" class="form-label">{{ __('admin/useradmins.lastname') }} <span class="text-danger">*</span></label>
                                                <input type="text" id="lastname" name="lastname" class="form-control @error('lastname') is-invalid @enderror"
                                                    value="{{ old('lastname', $admin->lastname ?? '') }}" >
                                                @error('lastname')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="email" class="form-label">{{ __('admin/useradmins.email') }} <span class="text-danger">*</span></label>
                                                <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                                    value="{{ old('email', $admin->email ?? '') }}" >
                                                @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="password" class="form-label">
                                                    {{ __('admin/useradmins.password') }}
                                                    @if(!isset($admin) || !$admin->id)
                                                    <span class="text-danger">*</span>
                                                    @endif
                                                </label>
                                                <input type="password" id="password" name="password" class="form-control @error('password') is-invalid @enderror"
                                                    {{ (!isset($admin) || !$admin->id) ? __('admin/global.required') : '' }}>
                                                @if(isset($admin) && $admin->id)
                                                <small class="text-muted">{{ __('admin/useradmins.password_current') }}</small>
                                                @endif
                                                @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="password_confirmation" class="form-label">
                                                    {{ __('admin/useradmins.password_confirmation') }}
                                                    @if(!isset($admin) || !$admin->id)
                                                    <span class="text-danger">*</span>
                                                    @endif
                                                </label>
                                                <input type="password" id="password_confirmation" name="password_confirmation" class="form-control"
                                                    {{ (!isset($admin) || !$admin->id) ? __('admin/global.required') : '' }}>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="note" class="form-label">{{ __('admin/useradmins.note') }}</label>
                                        <textarea id="note" name="note" class="form-control @error('note') is-invalid @enderror" rows="3"
                                            placeholder="{{ __('admin/useradmins.note_placeholder') }}">{{ old('note', $admin->note ?? '') }}</textarea>
                                        @error('note')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Rôles -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">{{ __('admin/useradmins.roles_and_permissions') }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/useradmins.roles_assigned') }} <span class="text-danger">*</span></label>
                                        <div class="row">
                                            @foreach($roles as $role)
                                            <div class="col-md-4 mb-2">
                                                <div class="form-radio-secondary">
                                                    <input class="form-check-input @error('roles') is-invalid @enderror"
                                                        type="radio"
                                                        name="role"
                                                        value="{{ $role->name }}"
                                                        id="role_{{ $role->id }}"
                                                        {{ (isset($admin) && $admin->hasRole($role->name)) || $role->name == old('role') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="role-{{ $role->id }}">
                                                        {{ $role->name }}
                                                    </label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                        @error('roles')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Sidebar -->
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">{{ __('admin/useradmins.status_and_photo') }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-5">
                                        <div class="form-check form-switch form-switch-right form-switch-md">
                                            <label for="activeswitch" class="form-label">{{ __('admin/useradmins.status') }}</label>
                                            <input class="form-check-input code-switcher" name="status" type="checkbox" id="activeswitch" value="1"  role="switch" {{ (old('status', $admin->status ?? true)) ? 'checked' : '' }}>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="picture" class="form-label">{{ __('admin/useradmins.profile_picture') }}</label>
                                        <input type="file" id="picture" name="picture" class="form-control @error('picture') is-invalid @enderror"
                                            accept="image/*">
                                        @error('picture')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror

                                        @if(isset($admin) && $admin->picture)
                                        <div class="mt-2">
                                            <img src="{{ asset('storage/' . $admin->picture) }}"
                                                alt="{{ __('admin/useradmins.current_picture') }}"
                                                class="img-thumbnail"
                                                style="max-width: 150px;">
                                            <div class="mt-1">
                                                <small class="text-muted">{{ __('admin/useradmins.current_picture') }}</small>
                                            </div>
                                        </div>
                                        @endif
                                    </div>

                                    @if(isset($admin) && $admin->id)
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/useradmins.last_login') }}</label>
                                        <div class="text-muted">
                                            @if($admin->last_login_at)
                                            {{ $admin->last_login_at->format('d/m/Y à H:i') }}
                                            @if($admin->last_login_ip)
                                            <br><small>IP: {{ $admin->last_login_ip }}</small>
                                            @endif
                                            @else
                                            {{ __('admin/useradmins.never_connected') }}
                                            @endif
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Validation du formulaire
        const form = document.getElementById('admin-form');

        // Validation en temps réel du mot de passe
        const password = document.getElementById('password');
        const passwordConfirmation = document.getElementById('password_confirmation');

        function validatePassword() {
            if (password.value && passwordConfirmation.value && password.value !== passwordConfirmation.value) {
                passwordConfirmation.classList.add('is-invalid');
                passwordConfirmation.setCustomValidity("Les mots de passe ne correspondent pas");
            } else {
                passwordConfirmation.classList.remove('is-invalid');
                passwordConfirmation.setCustomValidity('');
            }
        }

        if (password && passwordConfirmation) {
            password.addEventListener('input', validatePassword);
            passwordConfirmation.addEventListener('input', validatePassword);
        }

        // Validation des rôles en temps réel
        const roleRadios = form.querySelectorAll('input[name="role"]');
        roleRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                const roleContainer = radio.closest('.mb-3');
                if (roleContainer) {
                    roleContainer.classList.remove('is-invalid');
                }
            });
        });

        // Fonction de validation principale
        function validateForm() {
            let isValid = true;

            // Validation des champs obligatoires
            const requiredFields = form.querySelectorAll('input[required]');
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    field.classList.add('is-invalid');
                    isValid = false;
                } else {
                    field.classList.remove('is-invalid');
                }
            });

            // Vérifier qu'un rôle est sélectionné
            const selectedRole = form.querySelector('input[name="role"]:checked');
            const roleContainer = form.querySelector('input[name="role"]')?.closest('.mb-3');

            if (!selectedRole && roleContainer) {
                roleContainer.classList.add('is-invalid');
                // message d'erreur si pas sélectionné
                if (!roleContainer.querySelector('.invalid-feedback')) {
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'invalid-feedback d-block';
                    errorDiv.textContent = 'Veuillez sélectionner un rôle.';
                    roleContainer.appendChild(errorDiv);
                }
                isValid = false;
            } else if (selectedRole && roleContainer) {
                roleContainer.classList.remove('is-invalid');
                // Supprimer le message d'erreur si sélectionné
                const errorDiv = roleContainer.querySelector('.invalid-feedback');
                if (errorDiv) {
                    errorDiv.remove();
                }
            }

            // Validation du mot de passe pour les nouveaux admins
            const isNewAdmin = !form.querySelector('input[name="_method"][value="PUT"]');
            if (isNewAdmin) {
                if (!password.value) {
                    password.classList.add('is-invalid');
                    isValid = false;
                }
                if (!passwordConfirmation.value) {
                    passwordConfirmation.classList.add('is-invalid');
                    isValid = false;
                }
            }

            // Vérifier la correspondance des mots de passe
            if (password.value && passwordConfirmation.value && password.value !== passwordConfirmation.value) {
                passwordConfirmation.classList.add('is-invalid');
                isValid = false;
            }

            return isValid;
        }

        // Initialiser le validateur multilingue
        const validator = new MultilingualFormValidator({
            formId: 'admin-form',
            submitBtnId: 'saveadmin',
            
            // Champs multilingues requis (title_fr, title_en, content_fr, content_en, etc.)
            fields: [],
            
            // Champs simples requis (si vous en avez)
            singleFields: ['firstname', 'lastname', 'email', 'role'],
            
            alertMessage: "{{ __('admin/trainingcategories.validation.please_fill_all_required_fields') }}",
            loadingText: "{{ __('admin/trainingcategories.system.saving') }}",
            debug: false,
            
            onBeforeSubmit: function() {
                if (!validateForm()) {
                    swal.fire({
                        title: "{{ __('admin/trainingcategories.validation.please_fill_all_required_fields') }}",
                        icon: "error",
                        confirmButtonText: "{{ __('admin/global.ok') }}"
                    });
                    return false;
                }
            }
        });  

        // Vérification du template après initialisation
        setTimeout(() => {
            if (validator.checkTemplate()) {
                console.log('Template HTML correctement configuré');
            } else {
                console.warn('Problèmes détectés dans le template HTML');
            }
        }, 200);        

    });
</script>
@endpush