@extends('layouts.admin')

@section('breadcrumb')
	<div class="container">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="https://www.leylobby.gob.cl/admin">Inicio</a></li>
			<li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Mi Perfil</a></li>
			<li class="breadcrumb-item active" aria-current="page">Cambio de Contraseña</li>
		</ol>
	</div>
@endsection

@section('content')

<style>
.toggle-password {
    position: absolute;
    top: 37%;
    right: 12px;
    transform: translateY(-200%);
    border: 0;
    background: transparent;
    padding: 0;
    color: #6c757d;
    cursor: pointer;
    z-index: 5;
}

.toggle-password-confirm {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(50%);
    border: 0;
    background: transparent;
    padding: 0;
    color: #6c757d;
    cursor: pointer;
    z-index: 5;
}

.toggle-password:focus {
    outline: none;
    box-shadow: none;
}

.toggle-password:hover {
    color: #212529;
}
</style>

<div class="container">
    <div class="row">

		<div class="col-12">
			@if (session('success'))
				<div class="alert alert-success">
					{{ session('success') }}
				</div>
			@endif

			@if ($errors->any())
				<div class="alert alert-danger">
					Revise los campos del formulario.
				</div>
			@endif
		</div>

		<h2 class="destacado mb-1">Cambio de Contraseña</h2>
		<form method="POST" class="form-horizontal" action="{{route('admin.perfil.password.update')}}">
			@csrf
			@method('PUT')

			<fieldset>
				<h2 class="line mb-4">1. Complete los datos</h2>

				<div class="form-group">
					<div class="col-12 py-2">
						<label for="id" class="form-label">Contraseña actual *</label>
						<input type="password" class="form-control" name="current_password" autocomplete="current-password" required />

						@error('current_password')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
					</div>
				</div>

				<div class="form-group">
					<div class="col-12 position-relative py-2">
						<label for="password" class="form-label">Nueva contraseña *</label>
						<input oninput="checkPass()" 
							type="password" 
							class="form-control pe-5" 
							id="password" 
							name="password" 
							autocomplete="new-password" 
							required />
						<button
							type="button"
							class="btn btn-outline-secondary toggle-password"
							data-target="password"
							aria-label="Mostrar contraseña"
						>
							<i class="fa fa-eye"></i>
						</button>
						<div class="mt-2" id="passwordRules">
                            <small id="rule-length" class="d-block text-danger">
                                ✗ Mínimo 15 caracteres
                            </small>

                            <small id="rule-lowercase" class="d-block text-danger">
                                ✗ Al menos una letra minúscula
                            </small>

                            <small id="rule-uppercase" class="d-block text-danger">
                                ✗ Al menos una letra mayúscula
                            </small>

                            <small id="rule-number" class="d-block text-danger">
                                ✗ Al menos un número
                            </small>

                            <small id="rule-symbol" class="d-block text-danger">
                                ✗ Al menos un símbolo
                            </small>

                            <small id="rule-confirmation" class="d-block text-danger">
                                ✗ La confirmación debe coincidir
                            </small>
                            
                        </div>
						

						@error('password')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
					</div>
				</div>
				<div class="form-group">
					<div class="col-12 position-relative py-2">
						<label for="password_confirmation" class="form-label">Repita nueva contraseña *</label>
						<input oninput="checkPass()" 
							type="password" 
							class="form-control pe-5" 
							id="password_confirmation" 
							name="password_confirmation" 
							autocomplete="new-password" 
							required />
						
						<button
							type="button"
							class="btn btn-outline-secondary toggle-password toggle-password-confirm"
							data-target="password_confirmation"
							aria-label="Mostrar confirmación de contraseña"
						>
							<i class="fa fa-eye"></i>
						</button>

						@error('password_confirmation')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
					</div>
				</div>

				<div class="form-group">
					<div class="col-12 mt-2 text-right">
						<button type="submit" class="btn btn-primary">Cambiar Contraseña</button>
					</div>
				</div>
			</fieldset>

		</form> 
	</div>
</div>

@endsection

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.toggle-password').forEach(function (button) {
        button.addEventListener('click', function () {
            const targetId = this.getAttribute('data-target');
            const input = document.getElementById(targetId);

            if (!input) {
                return;
            }

            const icon = this.querySelector('i');
            const isPassword = input.getAttribute('type') === 'password';

            input.setAttribute('type', isPassword ? 'text' : 'password');

            this.setAttribute(
                'aria-label',
                isPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'
            );

            if (icon) {
                icon.classList.toggle('fa-eye', !isPassword);
                icon.classList.toggle('fa-eye-slash', isPassword);
            }
        });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    const password = document.getElementById('password');
    const confirmation = document.getElementById('password_confirmation');

    const rules = {
        length: document.getElementById('rule-length'),
        lowercase: document.getElementById('rule-lowercase'),
        uppercase: document.getElementById('rule-uppercase'),
        number: document.getElementById('rule-number'),
        symbol: document.getElementById('rule-symbol'),
        confirmation: document.getElementById('rule-confirmation'),
    };

    if (!password || !confirmation) {
        return;
    }

    function setRuleStatus(element, valid, validText, invalidText) {
        if (!element) {
            return;
        }

        element.classList.toggle('text-success', valid);
        element.classList.toggle('text-danger', !valid);
        element.textContent = valid ? `✓ ${validText}` : `✗ ${invalidText}`;
    }

    function validatePasswordRules() {
        const value = password.value;
        const confirmationValue = confirmation.value;

        const hasLength = value.length >= 15;
        const hasLowercase = /[a-z]/.test(value);
        const hasUppercase = /[A-Z]/.test(value);
        const hasNumber = /[0-9]/.test(value);
        const hasSymbol = /[^A-Za-z0-9]/.test(value);
        const matchesConfirmation = value.length > 0 && value === confirmationValue;

        setRuleStatus(
            rules.length,
            hasLength,
            'Mínimo 15 caracteres',
            'Mínimo 15 caracteres'
        );

        setRuleStatus(
            rules.lowercase,
            hasLowercase,
            'Al menos una letra minúscula',
            'Al menos una letra minúscula'
        );

        setRuleStatus(
            rules.uppercase,
            hasUppercase,
            'Al menos una letra mayúscula',
            'Al menos una letra mayúscula'
        );

        setRuleStatus(
            rules.number,
            hasNumber,
            'Al menos un número',
            'Al menos un número'
        );

        setRuleStatus(
            rules.symbol,
            hasSymbol,
            'Al menos un símbolo',
            'Al menos un símbolo'
        );

        setRuleStatus(
            rules.confirmation,
            matchesConfirmation,
            'La confirmación coincide',
            'La confirmación debe coincidir'
        );
    }

    password.addEventListener('input', validatePasswordRules);
    confirmation.addEventListener('input', validatePasswordRules);

    validatePasswordRules();
});
</script>