<?php

$pageName  = "Login";
include_once($_SERVER['DOCUMENT_ROOT'] . "/auth/header2.php");

if (@$_SESSION['acct_no']) {
    header("Location:./user/dashboard.php");
}

$toast_type = '';
$toast_message = '';

// --- Account Number Login ---
if (isset($_POST['login'])) {
    $acct_no = inputValidation($_POST['acct_no']);
    $acct_password = inputValidation($_POST['acct_password']);
    $log = "SELECT * FROM users WHERE acct_no =:acct_no";
    $stmt = $conn->prepare($log);
    $stmt->execute(['acct_no' => $acct_no]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($stmt->rowCount() === 0) {
        $toast_type = 'error';
        $toast_message = 'Invalid login details';
    } else {
        $validPassword = password_verify($acct_password, $user['acct_password']);
        if ($validPassword === false) {
            $toast_type = 'error';
            $toast_message = 'Invalid login details';
        } elseif ($user['acct_status'] === 'hold') {
            $toast_type = 'error';
            $toast_message = 'Account on Hold, Kindly contact support to activate your account';
        } else {
            $number    = $user['acct_phone'];
            $full_name = $user['firstname'] . " " . $user['lastname'];
            if ($page['twillio_status'] == '1') {
                $messageText = "Dear " . $full_name . ", New Login Notification " . $APP_NAME . ".";
                $sendSms->sendSmsCode($number, $messageText);
            }
            $APP_NAME    = WEB_TITLE;
            $APP_URL     = WEB_URL;
            $SITE_ADDRESS = $page['url_address'];
            $APP_NUMBER  = WEB_PHONE;
            $APP_EMAIL   = WEB_EMAIL;
            $user_email  = $user['acct_email'];
            $user_acctno = $user['acct_no'];
            $message = $sendMail->LoginMsg($full_name, $user_acctno, $APP_NAME, $APP_NUMBER, $APP_EMAIL, $APP_URL, $SITE_ADDRESS);
            $subject = "Login Notification" . "-" . $APP_NAME;
            $email_message->send_mail($user_email, $message, $subject);
            $_SESSION['login'] = $user['acct_no'];
            header("Location:./pin.php");
            exit;
        }
    }
}

// --- Email Login ---
if (isset($_POST['emaillogin'])) {
    $acct_email    = inputValidation($_POST['acct_email']);
    $acct_password = inputValidation($_POST['acct_password']);
    $log = "SELECT * FROM users WHERE acct_email =:acct_email";
    $stmt = $conn->prepare($log);
    $stmt->execute(['acct_email' => $acct_email]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($stmt->rowCount() === 0) {
        $toast_type = 'error';
        $toast_message = 'Invalid login details';
    } else {
        $validPassword = password_verify($acct_password, $user['acct_password']);
        if ($validPassword === false) {
            $toast_type = 'error';
            $toast_message = 'Invalid login details';
        } elseif ($user['acct_status'] === 'hold') {
            $toast_type = 'error';
            $toast_message = 'Account on Hold, Kindly contact support to activate your account';
        } else {
            $number    = $user['acct_phone'];
            $full_name = $user['firstname'] . " " . $user['lastname'];
            if ($page['twillio_status'] == '1') {
                $messageText = "Dear " . $full_name . ", New Login Notification " . $APP_NAME . ".";
                $sendSms->sendSmsCode($number, $messageText);
            }
            $APP_NAME    = WEB_TITLE;
            $APP_URL     = WEB_URL;
            $SITE_ADDRESS = $page['url_address'];
            $APP_NUMBER  = WEB_PHONE;
            $APP_EMAIL   = WEB_EMAIL;
            $user_email  = $user['acct_email'];
            $user_acctno = $user['acct_no'];
            $message = $sendMail->LoginMsg($full_name, $user_acctno, $APP_NAME, $APP_NUMBER, $APP_EMAIL, $APP_URL, $SITE_ADDRESS);
            $subject = "Login Notification" . "-" . $APP_NAME;
            $email_message->send_mail($user_email, $message, $subject);
            $_SESSION['login'] = $user['acct_no'];
            header("Location:./pin.php");
            exit;
        }
    }
}
?>
<!doctype html>
<html lang="en">

<head>
    <title>Account Login - <?= $web_title ?></title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="robots" content="index, follow">
    <meta name="apple-mobile-web-app-title" content="<?= $web_title ?>" />
    <meta name="application-name" content="<?= $web_title ?>" />
    <meta name="description" content="Swift and Secure Money Transfer to any bank account will become a breeze with <?= $web_title ?>." />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="theme-color" content="#49786B">
    <link rel="shortcut icon" href="<?= $web_url ?>/admin/assets/images/favicon/<?= htmlspecialchars($page['favicon']) ?>" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

    <script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: {
                        50:  '#f0f7f4',
                        100: '#d9ede3',
                        200: '#b3dbc7',
                        300: '#7fc29f',
                        400: '#4da576',
                        500: '#2d8659',
                        600: '#1f6b45',
                        700: '#195539',
                        800: '#15442e',
                        900: '#0d2a1c',
                    },
                },
                fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
                boxShadow: { 'elegant': '0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08)' },
            }
        }
    }
    </script>

    <style>
    [x-cloak] { display: none !important; }

    :root {
        --color-primary: #2d8659;
        --color-primary-dark: #1f6b45;
        --color-primary-light: #4da576;
        --color-text-primary: #0D1B23;
        --color-text-secondary: #4A4A4A;
        --color-text-muted: #7A7A7A;
        --color-border: #E0E5E5;
        --color-border-dark: #C8D1D1;
    }

    * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    body {
        font-family: 'Inter', system-ui, sans-serif;
        background: #F9F9F9;
        min-height: 100vh;
        letter-spacing: -0.011em;
    }

    .auth-card {
        background: #FFFFFF;
        border: 1px solid var(--color-border);
        box-shadow: 0 8px 32px rgba(13,27,35,0.06), 0 2px 8px rgba(13,27,35,0.04);
    }

    .auth-input {
        background: #FFFFFF;
        border: 1px solid var(--color-border-dark);
        color: var(--color-text-primary);
        transition: border-color 0.2s ease;
    }

    .auth-input:focus {
        background: #FFFFFF;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(73,120,107,0.12);
        outline: none;
    }

    .auth-input::placeholder { color: var(--color-text-muted); }

    .auth-button {
        background: var(--color-primary);
        transition: background 0.2s ease;
    }
    .auth-button:hover { background: var(--color-primary-dark); }

    .auth-link { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }
    .auth-link:hover { color: var(--color-primary-light); }

    /* Tab styles */
    .tab-btn {
        flex: 1;
        padding: 10px 0;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.2s ease;
        color: var(--color-text-muted);
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .tab-btn.active {
        background: #FFFFFF;
        color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(13,27,35,0.08);
    }

    /* Toast animation */
    @keyframes toastSlideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes toastSlideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
    }
    .toast-enter { animation: toastSlideIn 0.35s ease-out forwards; }
    .toast-exit { animation: toastSlideOut 0.3s ease-in forwards; }
    </style>
</head>

<body class="antialiased overflow-x-hidden">

    <!-- Toast Notification Container -->
    <?php if (!empty($toast_type) && !empty($toast_message)): ?>
    <div id="toast-notification"
         class="toast-enter fixed top-6 right-6 z-50 flex items-start gap-3 max-w-sm w-full px-5 py-4 rounded-xl shadow-lg border
         <?php if ($toast_type === 'error'): ?>
             bg-red-50 border-red-200
         <?php elseif ($toast_type === 'success'): ?>
             bg-primary-50 border-primary-200
         <?php else: ?>
             bg-yellow-50 border-yellow-200
         <?php endif; ?>
         ">
        <!-- Icon -->
        <div class="flex-shrink-0 mt-0.5">
            <?php if ($toast_type === 'error'): ?>
                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            <?php elseif ($toast_type === 'success'): ?>
                <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            <?php else: ?>
                <svg class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86l-8.6 14.86A1 1 0 002.56 20h18.88a1 1 0 00.87-1.28l-8.6-14.86a1 1 0 00-1.72 0z"/>
                </svg>
            <?php endif; ?>
        </div>
        <!-- Message -->
        <div class="flex-1">
            <p class="text-sm font-semibold
                <?php if ($toast_type === 'error'): ?> text-red-800
                <?php elseif ($toast_type === 'success'): ?> text-primary-800
                <?php else: ?> text-yellow-800
                <?php endif; ?>
            ">
                <?php if ($toast_type === 'error'): ?>Error
                <?php elseif ($toast_type === 'success'): ?>Success
                <?php else: ?>Notice
                <?php endif; ?>
            </p>
            <p class="text-sm mt-0.5
                <?php if ($toast_type === 'error'): ?> text-red-600
                <?php elseif ($toast_type === 'success'): ?> text-primary-600
                <?php else: ?> text-yellow-600
                <?php endif; ?>
            "><?= htmlspecialchars($toast_message) ?></p>
        </div>
        <!-- Close button -->
        <button onclick="dismissToast()" class="flex-shrink-0 p-1 rounded-lg hover:bg-black/5 transition-colors">
            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
    <script>
        function dismissToast() {
            var t = document.getElementById('toast-notification');
            if (t) { t.classList.remove('toast-enter'); t.classList.add('toast-exit'); setTimeout(function(){ t.remove(); }, 300); }
        }
        // Auto-dismiss after 6 seconds
        setTimeout(dismissToast, 6000);
    </script>
    <?php endif; ?>

    <div class="min-h-screen flex items-center justify-center p-4">

        <div class="w-full max-w-6xl mx-auto">
            <div class="grid lg:grid-cols-2 gap-8 items-center">

                <!-- Left Side – Branding -->
                <div class="hidden lg:block space-y-8">
                    <div class="mb-8">
                        <img src="<?= $web_url ?>/admin/assets/images/logo/<?= htmlspecialchars($page['image']) ?>"
                             alt="<?= $web_title ?>"
                             class="h-12 w-auto mb-6">
                    </div>

                    <div class="space-y-6">
                        <h1 class="text-4xl font-semibold text-[#0D1B23] leading-tight">
                            Welcome to Your
                            <span class="text-[#2d8659]">Financial Future</span>
                        </h1>
                        <p class="text-lg text-[#4A4A4A] leading-relaxed">
                            Swift and Secure Money Transfer to any bank account will become a breeze with <?= $web_title ?>.
                        </p>
                    </div>

                    <div class="grid grid-cols-3 gap-4 pt-8">
                        <div class="text-center">
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white mb-3">
                                <i data-lucide="shield-check" class="w-5 h-5 text-[#2d8659]"></i>
                            </div>
                            <p class="text-sm text-[#7A7A7A]">Bank-Level Security</p>
                        </div>
                        <div class="text-center">
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white mb-3">
                                <i data-lucide="zap" class="w-5 h-5 text-[#7A7A7A]"></i>
                            </div>
                            <p class="text-sm text-[#7A7A7A]">Instant Transfers</p>
                        </div>
                        <div class="text-center">
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white mb-3">
                                <i data-lucide="globe" class="w-5 h-5 text-[#2d8659]"></i>
                            </div>
                            <p class="text-sm text-[#7A7A7A]">Global Reach</p>
                        </div>
                    </div>

                    <div class="bg-white border border-[#E0E5E5] rounded-xl p-5">
                        <div class="flex items-start space-x-3">
                            <i data-lucide="info" class="w-5 h-5 text-[#7A7A7A] flex-shrink-0 mt-0.5"></i>
                            <p class="text-xs text-[#7A7A7A] leading-relaxed">
                                Only individuals who have an authorised <?= $web_title ?> bank account should proceed beyond this point.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Right Side – Login Card -->
                <div class="w-full" x-data="{ tab: 'id', showPwd1: false, showPwd2: false }">

                    <!-- Mobile Logo -->
                    <div class="lg:hidden text-center mb-8">
                        <img src="<?= $web_url ?>/admin/assets/images/logo/<?= htmlspecialchars($page['image']) ?>"
                             alt="<?= $web_title ?>"
                             class="h-10 w-auto mx-auto">
                    </div>

                    <div class="auth-card rounded-xl p-8 md:p-10 space-y-7">

                        <!-- Header -->
                        <div class="space-y-1">
                            <h2 class="text-2xl font-semibold text-[#0D1B23]">Sign In</h2>
                            <p class="text-[#7A7A7A] text-sm">Access the <?= $web_title ?> panel using your credentials.</p>
                        </div>

                        <!-- Tab Switcher -->
                        <div class="flex bg-[#F9F9F9] border border-[#E0E5E5] rounded-xl p-1 gap-1">
                            <button type="button"
                                    @click="tab = 'id'"
                                    :class="tab === 'id' ? 'active' : ''"
                                    class="tab-btn flex items-center justify-center gap-2">
                                <i data-lucide="hash" class="w-4 h-4"></i>
                                Internet ID
                            </button>
                            <button type="button"
                                    @click="tab = 'email'"
                                    :class="tab === 'email' ? 'active' : ''"
                                    class="tab-btn flex items-center justify-center gap-2">
                                <i data-lucide="mail" class="w-4 h-4"></i>
                                Email Access
                            </button>
                        </div>

                        <!-- ── Tab 1: Account Number Login ── -->
                        <form x-show="tab === 'id'"
                              x-transition:enter="transition ease-out duration-200"
                              x-transition:enter-start="opacity-0 translate-y-1"
                              x-transition:enter-end="opacity-100 translate-y-0"
                              method="POST"
                              action=""
                              class="space-y-5">

                            <div class="space-y-2">
                                <label for="acct_no" class="block text-sm font-semibold text-[#4A4A4A]">
                                    Internet Banking ID
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i data-lucide="hash" class="w-5 h-5 text-[#7A7A7A]"></i>
                                    </div>
                                    <input
                                        id="acct_no"
                                        type="number"
                                        name="acct_no"
                                        minlength="8"
                                        maxlength="15"
                                        required
                                        autocomplete="username"
                                        placeholder="e.g. 0123456789"
                                        class="auth-input w-full pl-12 pr-4 py-3.5 rounded-xl text-sm font-medium"
                                    />
                                </div>
                            </div>

                            <div class="space-y-2">
                                <div class="flex items-center justify-between">
                                    <label for="pwd_id" class="block text-sm font-semibold text-[#4A4A4A]">Password</label>
                                    <a href="./forgot-password.php" class="auth-link text-sm font-medium">Forgot Password?</a>
                                </div>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i data-lucide="lock" class="w-5 h-5 text-[#7A7A7A]"></i>
                                    </div>
                                    <input
                                        id="pwd_id"
                                        :type="showPwd1 ? 'text' : 'password'"
                                        name="acct_password"
                                        required
                                        autocomplete="current-password"
                                        placeholder="••••••••••"
                                        class="auth-input w-full pl-12 pr-12 py-3.5 rounded-xl text-sm font-medium"
                                    />
                                    <button type="button"
                                            @click="showPwd1 = !showPwd1"
                                            class="absolute inset-y-0 right-0 pr-4 flex items-center text-[#7A7A7A] hover:text-[#4A4A4A] transition-colors">
                                        <i :data-lucide="showPwd1 ? 'eye-off' : 'eye'" class="w-5 h-5"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit"
                                    name="login"
                                    class="auth-button w-full py-3.5 rounded-xl font-semibold text-white text-sm flex items-center justify-center space-x-2 group">
                                <span>Sign In to Account</span>
                                <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                            </button>

                            <p class="text-sm text-center text-[#7A7A7A]">
                                Don't have an account?
                                <a href="./opening.php" class="auth-link font-medium">Register</a>
                            </p>
                        </form>

                        <!-- ── Tab 2: Email Login ── -->
                        <form x-show="tab === 'email'"
                              x-cloak
                              x-transition:enter="transition ease-out duration-200"
                              x-transition:enter-start="opacity-0 translate-y-1"
                              x-transition:enter-end="opacity-100 translate-y-0"
                              method="POST"
                              action=""
                              class="space-y-5">

                            <div class="space-y-2">
                                <label for="acct_email" class="block text-sm font-semibold text-[#4A4A4A]">
                                    Email Address
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i data-lucide="mail" class="w-5 h-5 text-[#7A7A7A]"></i>
                                    </div>
                                    <input
                                        id="acct_email"
                                        type="email"
                                        name="acct_email"
                                        required
                                        autocomplete="email"
                                        placeholder="email@example.com"
                                        class="auth-input w-full pl-12 pr-4 py-3.5 rounded-xl text-sm font-medium"
                                    />
                                </div>
                            </div>

                            <div class="space-y-2">
                                <div class="flex items-center justify-between">
                                    <label for="pwd_email" class="block text-sm font-semibold text-[#4A4A4A]">Password</label>
                                    <a href="./forgot-password.php" class="auth-link text-sm font-medium">Forgot Password?</a>
                                </div>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i data-lucide="lock" class="w-5 h-5 text-[#7A7A7A]"></i>
                                    </div>
                                    <input
                                        id="pwd_email"
                                        :type="showPwd2 ? 'text' : 'password'"
                                        name="acct_password"
                                        required
                                        autocomplete="current-password"
                                        placeholder="••••••••••"
                                        class="auth-input w-full pl-12 pr-12 py-3.5 rounded-xl text-sm font-medium"
                                    />
                                    <button type="button"
                                            @click="showPwd2 = !showPwd2"
                                            class="absolute inset-y-0 right-0 pr-4 flex items-center text-[#7A7A7A] hover:text-[#4A4A4A] transition-colors">
                                        <i :data-lucide="showPwd2 ? 'eye-off' : 'eye'" class="w-5 h-5"></i>
                                    </button>
                                </div>
                            </div>

                            <button type="submit"
                                    name="emaillogin"
                                    class="auth-button w-full py-3.5 rounded-xl font-semibold text-white text-sm flex items-center justify-center space-x-2 group">
                                <span>Sign In to Account</span>
                                <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                            </button>

                            <p class="text-sm text-center text-[#7A7A7A]">
                                Don't have an account?
                                <a href="./opening.php" class="auth-link font-medium">Register</a>
                            </p>
                        </form>

                        <!-- Footer -->
                        <div class="pt-4 border-t border-[#E0E5E5]">
                            <p class="text-xs text-[#7A7A7A] text-center leading-relaxed">
                                By signing in, you agree to our
                                <a href="#" class="auth-link">Terms of Service</a> and
                                <a href="#" class="auth-link">Privacy Policy</a>
                            </p>
                        </div>

                    </div>
                </div>
                <!-- /right side -->

            </div>
        </div>

    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });
        document.addEventListener('alpine:initialized', () => {
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });
        // Re-run icons whenever Alpine toggles visibility (eye icon swap)
        document.addEventListener('alpine:mutation', () => {
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });
    </script>

    <!-- GTranslate -->
    <style>
    .gtranslate_wrapper {
        border-radius: 8px !important; padding: 4px 6px !important;
        border: 1px solid rgba(51,65,85,0.6) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        max-width: 160px !important;
        background: rgba(15,23,42,0.95) !important;
        backdrop-filter: blur(8px) !important;
        position: fixed !important;
    }
    @media (max-width: 767px)  { .gtranslate_wrapper { bottom: 52px !important; left: 12px !important; z-index: 45 !important; } }
    @media (min-width: 768px)  { .gtranslate_wrapper { bottom: 20px !important; left: 20px !important; z-index: 45 !important; } }
    .gtranslate_wrapper select { font-size: 10px !important; background: transparent !important; color: #cbd5e1 !important; border: none !important; }
    </style>
    <div class="gtranslate_wrapper"></div>
    <script>
        window.gtranslateSettings = { default_language: "en", alt_flags: {"en":"usa"}, wrapper_selector: ".gtranslate_wrapper", flag_style: "3d" };
    </script>
    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>

</body>
</html>