<?= $this->extend('layout/register_layout') ?>
<?= $this->section('content') ?>
<div class="registration-form container mt-5 mb-5">

    <form id="loginForm" method="post" action="<?= base_url('/user/login') ?>">
        <?= csrf_field() ?>
        <input type="hidden" name="redirect_to" value="<?= esc(old('redirect_to', $redirect_to ?? '')) ?>">
        <div class="text-center mb-4">
            <a href="<?= base_url('/') ?>">
                <img src="<?= base_url('assets/images/alrahma_logo.png') ?>" alt=""
                    style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">
            </a>
        </div>

        <h3 class="text-center text-success" style="font-family: Arial, sans-serif;">Login to Your Account</h3>
        <br>
        <!-- Email Field -->
        <div class="form-group mb-3">
            <label for="email" class="form-label"></label>
            <input type="email" class="form-control item" id="email" name="email"
                placeholder="Enter your email" maxlength="254" autocomplete="username"
                inputmode="email" value="<?= old('email') ?>" required>
            <div id="email-error" class="text-danger small mt-1"></div>
        </div>

        <!-- Password Field -->
        <div class="form-group position-relative mb-4">
            <label for="password" class="form-label"></label>
            <input type="password"
                class="form-control item pe-5"
                id="password"
                name="password"
                placeholder="Enter your password"
                maxlength="255"
                autocomplete="current-password"
                required>
            <span class="position-absolute top-50 end-0 translate-middle-y me-3"
                onclick="togglePasswordVisibility('password', this)"
                style="cursor: pointer;">
                <i class="fa-solid fa-eye"></i>
            </span>
            <div id="password-error" class="text-danger small mt-1"></div>
        </div>

        <!-- Submit Button -->
        <div class="mb-3 d-grid">
            <button type="submit" class="btn btn-success item">Login</button>
        </div>
        <!-- Flash Error Message -->
        <?php if (session()->getFlashdata('error')): ?>
            <div class="alert alert-danger mt-3 text-center" role="alert">
                <?= esc(session()->getFlashdata('error')) ?>
            </div>
        <?php endif; ?>
        <!-- Forgot Password -->
        <div class="forgot-password text-center mt-3">
            <a href="<?= base_url('user/forgot_password') ?>">Forgot Password?</a>
        </div>
    </form>


</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    function togglePasswordVisibility(inputId, iconElement) {
        const input = document.getElementById(inputId);
        const icon = iconElement.querySelector('i');

        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    document.getElementById('loginForm').addEventListener('submit', function(event) {
        let isValid = true;

        const email = document.getElementById('email').value.trim();
        const password = document.getElementById('password').value.trim();

        const emailError = document.getElementById('email-error');
        const passwordError = document.getElementById('password-error');

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (!email) {
            emailError.textContent = 'Email is required.';
            isValid = false;
        } else if (!emailRegex.test(email)) {
            emailError.textContent = 'Please enter a valid email address.';
            isValid = false;
        } else {
            emailError.textContent = '';
        }

        if (!password) {
            passwordError.textContent = 'Password is required.';
            isValid = false;
        } else {
            passwordError.textContent = '';
        }

        if (!isValid) {
            event.preventDefault();
        }
    });
</script>
<?= $this->endSection() ?>
