@extends('admin.layout.app')

@section('content')
    <div class="p-10 max-w-4xl mx-auto space-y-8">
        <section>
            <p class="font-label-md text-label-md text-secondary uppercase tracking-wider mb-2">Perfil</p>
            <h2 class="font-headline-lg text-headline-lg text-primary mb-2">Seguridad de la cuenta</h2>
            <p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
                Actualiza únicamente tu contraseña de acceso al sistema administrativo.
            </p>
        </section>

        @if (session('success'))
            <div class="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-green-800 font-body-sm">
                {{ session('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="rounded-lg border border-error/30 bg-error-container px-4 py-3 text-on-error-container font-body-sm">
                Revisa los campos marcados antes de continuar.
            </div>
        @endif

        <section class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
            <aside class="lg:col-span-4 bg-white rounded-xl border border-outline-variant p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.04)]">
                <div class="w-16 h-16 rounded-full bg-primary text-on-primary flex items-center justify-center font-title-md text-title-md mb-4">
                    {{ strtoupper(substr($user->name, 0, 1).substr($user->apellidos, 0, 1)) }}
                </div>
                <h3 class="font-title-md text-title-md text-primary">{{ $user->name }} {{ $user->apellidos }}</h3>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">{{ $user->email }}</p>
                <div class="mt-5 flex flex-wrap gap-2">
                    @foreach ($user->roles as $role)
                        <span class="rounded-full bg-surface-container px-3 py-1 font-label-md text-[10px] uppercase tracking-wider text-primary">
                            {{ $role->pretty_name ?? $role->name }}
                        </span>
                    @endforeach
                </div>
            </aside>

            <form class="lg:col-span-8 bg-white rounded-xl border border-outline-variant p-8 shadow-[0px_4px_20px_rgba(0,0,0,0.04)] space-y-6"
                id="profile-password-form" action="{{ route('admin.profile.password.update') }}" method="POST">
                @csrf
                @method('PUT')

                <div>
                    <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="current_password">
                        Contraseña actual
                    </label>
                    <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                        id="current_password" name="current_password" type="password" required />
                    @error('current_password')
                        <p class="mt-1 font-body-sm text-body-sm text-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="password">
                            Nueva contraseña
                        </label>
                        <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                            id="password" name="password" type="password" required />
                        @error('password')
                            <p class="mt-1 font-body-sm text-body-sm text-error">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="password_confirmation">
                            Confirmar contraseña
                        </label>
                        <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                            id="password_confirmation" name="password_confirmation" type="password" required />
                    </div>
                </div>

                <div class="rounded-lg bg-surface-container px-4 py-4">
                    <p class="font-label-md text-label-md text-primary uppercase tracking-wider mb-3">
                        Requisitos de seguridad
                    </p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 font-body-sm text-body-sm">
                        <div class="flex items-center gap-2 text-on-surface-variant" data-password-rule="length">
                            <span class="material-symbols-outlined text-[18px]">radio_button_unchecked</span>
                            <span>Minimo 8 caracteres</span>
                        </div>
                        <div class="flex items-center gap-2 text-on-surface-variant" data-password-rule="uppercase">
                            <span class="material-symbols-outlined text-[18px]">radio_button_unchecked</span>
                            <span>Al menos una mayuscula</span>
                        </div>
                        <div class="flex items-center gap-2 text-on-surface-variant" data-password-rule="lowercase">
                            <span class="material-symbols-outlined text-[18px]">radio_button_unchecked</span>
                            <span>Al menos una minuscula</span>
                        </div>
                        <div class="flex items-center gap-2 text-on-surface-variant" data-password-rule="symbol">
                            <span class="material-symbols-outlined text-[18px]">radio_button_unchecked</span>
                            <span>Un caracter especial</span>
                        </div>
                        <div class="flex items-center gap-2 text-on-surface-variant md:col-span-2" data-password-rule="match">
                            <span class="material-symbols-outlined text-[18px]">radio_button_unchecked</span>
                            <span>La confirmacion coincide</span>
                        </div>
                    </div>
                </div>

                <div class="hidden">
                    La contraseña debe tener mínimo 8 caracteres, una mayúscula, una minúscula y un carácter especial.
                </div>

                <div class="flex justify-end border-t border-outline-variant pt-6">
                    <button class="rounded-lg bg-primary px-5 py-3 font-label-md text-label-md text-on-primary disabled:opacity-50 disabled:cursor-not-allowed"
                        id="profile-password-submit" type="submit" disabled>
                        Actualizar contraseña
                    </button>
                </div>
            </form>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const passwordInput = document.getElementById('password');
            const confirmationInput = document.getElementById('password_confirmation');
            const submitButton = document.getElementById('profile-password-submit');
            const ruleItems = document.querySelectorAll('[data-password-rule]');

            if (!passwordInput || !confirmationInput || !submitButton || !ruleItems.length) {
                return;
            }

            const rules = {
                length: value => value.length >= 8,
                uppercase: value => /[A-Z]/.test(value),
                lowercase: value => /[a-z]/.test(value),
                symbol: value => /[^A-Za-z0-9]/.test(value),
                match: value => value.length > 0 && value === confirmationInput.value,
            };

            const setRuleState = (item, isValid) => {
                const icon = item.querySelector('.material-symbols-outlined');

                item.classList.toggle('text-green-700', isValid);
                item.classList.toggle('text-on-surface-variant', !isValid);

                if (icon) {
                    icon.textContent = isValid ? 'check_circle' : 'radio_button_unchecked';
                }
            };

            const validatePassword = () => {
                const value = passwordInput.value;
                let isValid = true;

                ruleItems.forEach((item) => {
                    const ruleName = item.dataset.passwordRule;
                    const ruleIsValid = rules[ruleName](value);

                    setRuleState(item, ruleIsValid);
                    isValid = isValid && ruleIsValid;
                });

                submitButton.disabled = !isValid;
            };

            passwordInput.addEventListener('input', validatePassword);
            confirmationInput.addEventListener('input', validatePassword);
            validatePassword();
        });
    </script>
@endsection