<?php
require_once BASE_PATH . '/app/helpers/easychair_translate.php';

$lang = function_exists('ec_lang') ? ec_lang() : 'ar';
$dir  = function_exists('ec_dir') ? ec_dir() : 'rtl';

$error = $_SESSION['login_error'] ?? '';
unset($_SESSION['login_error']);

$conferenceId = (int)($_GET['conference_id'] ?? ($_SESSION['submit_conference_id'] ?? 0));
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars($lang) ?>" dir="<?= htmlspecialchars($dir) ?>">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title><?= t('login.title', 'EasyConf Login') ?></title>

<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=Cairo:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>

:root {
    --primary1:#0b1f4d;
    --primary2:#173b8c;
    --primary3:#275fdb;
    --glass:rgba(255,255,255,.12);
    --border:rgba(255,255,255,.18);
    --shadow:0 20px 60px rgba(0,0,0,.35);
}

*{
    font-family:'Cairo',sans-serif;
}

body{
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.25), transparent 35%),
        radial-gradient(circle at bottom right, rgba(37,99,235,.28), transparent 35%),
        linear-gradient(135deg,#06122d 0%,#0d2359 35%,#163a8a 100%);
    position:relative;
}

.bg-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.35;
    z-index:0;
}

.orb1{
    width:320px;
    height:320px;
    background:#3b82f6;
    top:-100px;
    left:-80px;
}

.orb2{
    width:280px;
    height:280px;
    background:#1d4ed8;
    bottom:-100px;
    right:-70px;
}

.login-wrapper{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
}

.login-card{
    width:100%;
    max-width:1150px;
    border-radius:32px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:var(--shadow);
}

.left-panel{
    position:relative;
    padding:70px 55px;
    color:#fff;
    background:
        linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    min-height:720px;
}

.left-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity:.08;
}

.brand-logo{
    width:95px;
    height:95px;
    object-fit:contain;
    background:#fff;
    border-radius:24px;
    padding:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.brand-title{
    font-size:2.2rem;
    font-weight:800;
    margin-top:25px;
    line-height:1.5;
}

.brand-subtitle{
    color:rgba(255,255,255,.82);
    line-height:2;
    margin-top:18px;
    font-size:1.03rem;
}

.feature-list{
    margin-top:40px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    margin-bottom:16px;
}

.feature-item i{
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
}

.right-panel{
    background:#fff;
    padding:70px 55px;
}

.lang-switch{
    display:flex;
    justify-content:flex-end;
    margin-bottom:25px;
}

.lang-btn{
    text-decoration:none;
    background:#eef4ff;
    color:#1741a6;
    border-radius:999px;
    padding:10px 18px;
    font-weight:700;
    transition:.25s;
}

.lang-btn:hover{
    background:#1741a6;
    color:#fff;
}

.form-title{
    font-size:2rem;
    font-weight:800;
    color:#0b1f4d;
}

.form-subtitle{
    color:#6b7280;
    margin-top:10px;
    margin-bottom:35px;
    line-height:1.9;
}

.form-floating>.form-control{
    height:62px;
    border-radius:18px;
    border:1px solid #dbe4ff;
    padding-top:1.7rem;
    background:#f8fbff;
}

.form-floating>label{
    padding-right:18px;
    padding-left:18px;
    color:#5b6475;
}

.form-control:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
    background:#fff;
}

.login-btn{
    height:60px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,#0f2f76,#2563eb);
    color:#fff;
    font-size:1.08rem;
    font-weight:800;
    width:100%;
    transition:.3s;
    box-shadow:0 12px 28px rgba(37,99,235,.25);
}

.login-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 35px rgba(37,99,235,.35);
}

.register-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    height:58px;
    border-radius:18px;
    background:#f4f7ff;
    border:1px solid #dbe4ff;
    color:#163a8a;
    font-weight:800;
    text-decoration:none;
    margin-top:16px;
    transition:.3s;
}

.register-btn:hover{
    background:#163a8a;
    color:#fff;
}

.conference-box{
    background:linear-gradient(135deg,#eef4ff,#f7faff);
    border:1px solid #d8e5ff;
    border-radius:22px;
    padding:20px;
    margin-bottom:24px;
}

.conference-box h6{
    color:#1741a6;
    font-weight:800;
    margin-bottom:10px;
}

.toast-container{
    z-index:99999;
}

.custom-toast{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.22);
}

.toast-header{
    background:linear-gradient(135deg,#dc2626,#ef4444);
    color:#fff;
    border:none;
}

.toast-body{
    padding:18px;
    font-weight:700;
}

.footer-note{
    text-align:center;
    margin-top:28px;
    color:#6b7280;
    font-size:.95rem;
}

@media(max-width:991px){

    .left-panel{
        min-height:auto;
        padding:45px 30px;
    }

    .right-panel{
        padding:45px 28px;
    }

    .brand-title{
        font-size:1.7rem;
    }
}

</style>

</head>
<body>

<div class="bg-orb orb1"></div>
<div class="bg-orb orb2"></div>

<div class="toast-container position-fixed top-0 end-0 p-4">

    <div id="errorToast" class="toast custom-toast" role="alert">
        <div class="toast-header">
            <i class="fa-solid fa-circle-exclamation me-2"></i>
            <strong class="me-auto">
                <?= t('login.failed', 'Login Failed') ?>
            </strong>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            <?= htmlspecialchars($error ?: t('login.invalid_credentials', 'Invalid email or password')) ?>
        </div>
    </div>

</div>

<div class="login-wrapper">

    <div class="login-card">

        <div class="row g-0">

            <div class="col-lg-6">

                <div class="left-panel">

                    <img
                        src="https://www.jpu.edu.jo/easychair/storage/uploads/profile/easyconf_small.png"
                        class="brand-logo"
                        alt="Logo">

                    <div class="brand-title">
                        <?= t('login.welcome_title', 'EasyChair Enterprise Conference Management System') ?>
                    </div>

                    <div class="brand-subtitle">
                        <?= t('login.welcome_subtitle', 'Professional enterprise-grade platform for conference management, submissions, reviews, proceedings, publishing workflows, editorial boards, reviewer assignment, and academic collaboration.') ?>
                    </div>

                    <div class="feature-list">

                        <div class="feature-item">
                            <i class="fa-solid fa-file-circle-check"></i>
                            <div>
                                <div class="fw-bold">
                                    <?= t('login.feature1', 'Submission & Review Workflow') ?>
                                </div>
                                <small class="text-light opacity-75">
                                    <?= t('login.feature1_sub', 'End-to-end academic paper lifecycle management') ?>
                                </small>
                            </div>
                        </div>

                        <div class="feature-item">
                            <i class="fa-solid fa-users-gear"></i>
                            <div>
                                <div class="fw-bold">
                                    <?= t('login.feature2', 'Role-Based Access Control') ?>
                                </div>
                                <small class="text-light opacity-75">
                                    <?= t('login.feature2_sub', 'Multi-tenant organizations and conference isolation') ?>
                                </small>
                            </div>
                        </div>

                        <div class="feature-item">
                            <i class="fa-solid fa-globe"></i>
                            <div>
                                <div class="fw-bold">
                                    <?= t('login.feature3', 'Professional Publishing & Proceedings') ?>
                                </div>
                                <small class="text-light opacity-75">
                                    <?= t('login.feature3_sub', 'Production-ready publication workflow and indexing') ?>
                                </small>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <div class="col-lg-6">

                <div class="right-panel">

                    <div class="lang-switch">

                        <?php if ($lang === 'ar'): ?>

                            <a class="lang-btn" href="?lang=en<?= $conferenceId ? '&conference_id='.$conferenceId : '' ?>">
                                <i class="fa-solid fa-language"></i>
                                English
                            </a>

                        <?php else: ?>

                            <a class="lang-btn" href="?lang=ar<?= $conferenceId ? '&conference_id='.$conferenceId : '' ?>">
                                <i class="fa-solid fa-language"></i>
                                العربية
                            </a>

                        <?php endif; ?>

                    </div>

                    <div class="form-title">
                        <?= t('login.signin', 'Sign In') ?>
                    </div>

                    <div class="form-subtitle">
                        <?= t('login.enter_credentials', 'Enter your institutional or conference credentials to continue to your dashboard and workflow management area.') ?>
                    </div>

                    <?php if ($conferenceId): ?>

                        <div class="conference-box">
                            <h6>
                                <i class="fa-solid fa-calendar-check"></i>
                                <?= t('login.selected_conference', 'Selected Conference Context') ?>
                            </h6>

                            <div>
                                <?= t('login.submission_redirect', 'After successful login or registration, you will automatically continue to the selected conference submission workflow.') ?>
                            </div>
                        </div>

                    <?php endif; ?>

                    <form method="POST" autocomplete="off">

                        <div class="form-floating mb-4">
                            <input
                                type="email"
                                class="form-control"
                                id="email"
                                name="email"
                                placeholder="Email"
                                required>

                            <label for="email">
                                <i class="fa-solid fa-envelope"></i>
                                <?= t('login.email', 'Email Address') ?>
                            </label>
                        </div>

                        <div class="form-floating mb-4">
                            <input
                                type="password"
                                class="form-control"
                                id="password"
                                name="password"
                                placeholder="Password"
                                required>

                            <label for="password">
                                <i class="fa-solid fa-lock"></i>
                                <?= t('login.password', 'Password') ?>
                            </label>
                        </div>

                        <button class="login-btn" type="submit">
                            <i class="fa-solid fa-right-to-bracket"></i>
                            <?= t('login.login_btn', 'Login to Dashboard') ?>
                        </button>
 
                         <div style="text-align:center;margin-top:14px;margin-bottom:14px;">
                             <a href="/easychair/forgot-password" style="color:#1b6fd6;font-weight:700;text-decoration:none;font-family:Cairo;font-size:14px;">
                                 Forgot Password?
                             </a>
                         </div>


                        <a
                            href="/easychair/register<?= $conferenceId ? '?conference_id='.$conferenceId : '' ?>"
                            class="register-btn">

                            <i class="fa-solid fa-user-plus"></i>
                            <?= t('login.create_account', 'Create New Account') ?>
                        </a>

                    </form>

                    <div class="footer-note">
                        <?= t('login.footer', 'Jerash Private University • EasyChair Enterprise Conference Platform') ?>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>

<?php if (!empty($error)): ?>

const toast = new bootstrap.Toast(
    document.getElementById('errorToast'),
    {
        delay: 5000
    }
);

toast.show();

<?php endif; ?>

</script>

</body>
</html>


<div style="text-align:center;margin-top:18px">
<a href="/easychair/forgot-password">
Forgot Password?
</a>
</div>

