<?php
// ── Login Background — DB se fetch ──────────────
$login_bg_url = '../img/loginbg.png'; // default fallback
if (!empty($res_site[0]['login_bg'])) {
    $login_bg_url = '../img/' . $res_site[0]['login_bg'];
} elseif (!empty($res_site[0]['banner'])) {
    $login_bg_url = '../img/' . $res_site[0]['banner'];
}
$login_bg_url = htmlspecialchars($login_bg_url);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="../img/<?= $res_site[0]['logo']; ?>">
    <title><?= $res_site[0]['site_name']; ?> — Admin Panel</title>
    <link href="../vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="../vendor/sweetalert/sweetalert.js"></script>

<style>
/* ══ RESET ══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: 'Nunito', sans-serif;
    height: 100%;
    overflow: hidden;
}

/* ══ FULL PAGE — BG IMAGE COVERS ALL ══════════ */
.login-page {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Background Image — full page ── */
.page-bg {
    position: absolute;
    inset: 0;
    background:
        url('<?= $login_bg_url; ?>') center center / cover no-repeat;
    z-index: 0;
}

/* ── Dark navy border (screenshot jaisa) ── */
.page-border {
    position: fixed;
    inset: 0;
    border: 10px solid #0a1e5e;
    border-radius: 18px;
    pointer-events: none;
    z-index: 999;
}

/* Gold accent corners */
.page-border::before {
    content: '';
    position: absolute;
    top: -2px; right: -2px;
    width: 100px; height: 100px;
    background: linear-gradient(135deg, #c9a227 0%, #f0d060 45%, transparent 65%);
    border-radius: 0 16px 0 0;
    opacity: 0.9;
}
.page-border::after {
    content: '';
    position: absolute;
    bottom: -2px; right: -2px;
    width: 80px; height: 80px;
    background: linear-gradient(315deg, #c9a227 0%, #f0d060 45%, transparent 65%);
    border-radius: 0 0 16px 0;
    opacity: 0.8;
}

/* ══ MAIN CONTENT AREA ═══════════════════════ */
.main-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    padding: 20px 60px 0 20px;
}

/* ── LEFT SIDE — badges (FAST/SECURE/RELIABLE) ── */
.left-badges {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-55%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
}
.l-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10,30,80,0.72);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255,255,255,0.20);
    border-radius: 26px;
    padding: 8px 18px 8px 8px;
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    min-width: 130px;
}
.l-badge .badge-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #1fb96d;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    color: white;
    flex-shrink: 0;
}

/* ══ FLOATING LOGIN CARD ══════════════════════ */
.login-card {
    background: white;
    border-radius: 24px;
    padding: 36px 36px 28px;
    width: 370px;
    flex-shrink: 0;
    box-shadow:
        0 25px 60px rgba(0,0,0,0.30),
        0 0 0 1px rgba(255,255,255,0.5);
    position: relative;
    z-index: 20;
}

/* Logo */
.card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.card-logo img {
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
}

/* ADMIN PANEL title */
.admin-title {
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    color: #0d3a1e;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.admin-title span { color: #1a7a3c; }

/* Dots divider */
.title-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 24px;
}
.title-divider .dash {
    width: 22px; height: 3px;
    border-radius: 3px;
    background: #1fb96d;
}
.title-divider .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #1fb96d;
}

/* Input fields */
.input-wrap {
    position: relative;
    margin-bottom: 14px;
}
.input-wrap .in-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 16px;
    pointer-events: none;
}
.input-wrap .eye-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 16px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s;
}
.input-wrap .eye-icon:hover { color: #555; }

.login-input {
    width: 100%;
    height: 52px;
    border: 1.8px solid #e5e5e5;
    border-radius: 12px;
    padding: 0 46px;
    font-size: 14.5px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fafafa;
}
.login-input::placeholder { color: #bbb; font-weight: 500; }
.login-input:focus {
    border-color: #1fb96d;
    box-shadow: 0 0 0 3px rgba(31,185,109,0.13);
    background: white;
}

/* Remember + Forgot */
.rem-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 13.5px;
}
.rem-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}
.rem-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #1fb96d;
    cursor: pointer;
    border-radius: 4px;
}
.forgot-link {
    color: #1a7a3c;
    font-weight: 800;
    text-decoration: none;
    font-size: 13px;
}
.forgot-link:hover { color: #0d5a2a; text-decoration: underline; }

/* LOGIN BUTTON — Dark Green */
.login-btn {
    width: 100%;
    height: 54px;
    background: linear-gradient(90deg, #0d5a2a 0%, #1a7a3c 40%, #1fb96d 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 5px 20px rgba(26,122,60,0.40);
}
.login-btn:hover {
    background: linear-gradient(90deg, #0a4520 0%, #156030 40%, #18a85f 100%);
    box-shadow: 0 7px 25px rgba(26,122,60,0.50);
    transform: translateY(-2px);
}
.login-btn i { font-size: 18px; }

/* Or + Secure */
.or-row {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 12px;
}
.secure-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.secure-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    color: #999;
    background: #f8f8f8;
}
.secure-label {
    font-size: 12px;
    color: #999;
    font-weight: 700;
}

/* ══ BOTTOM BAR ═══════════════════════════════ */
.bottom-bar {
    position: relative;
    z-index: 10;
    background: linear-gradient(90deg, #071440 0%, #0a2e1e 50%, #071440 100%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px 40px;
    gap: 10px;
    flex-shrink: 0;
}
.bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}
.bar-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #1fb96d;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: white;
    flex-shrink: 0;
}
.bar-text .bar-lbl { font-size: 11px; opacity: 0.70; font-weight: 600; }
.bar-text .bar-val  { font-size: 14px; font-weight: 800; }
.bar-sep {
    width: 1px; height: 38px;
    background: rgba(255,255,255,0.15);
}

/* ══ BOTTOM FEATURE CHIPS ═════════════════════ */
/* Sitting above bottom bar, inside left side */
.feat-row {
    position: absolute;
    bottom: 62px;
    left: 0;
    right: 420px; /* avoid overlapping card */
    z-index: 15;
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 0 60px 0 80px;
}
.feat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: white;
    text-align: center;
}
.fc-icon {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    backdrop-filter: blur(8px);
    color: #7effa0;
}
.fc-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ══ DOTS PATTERN (top right bg accent) ═══════ */
.dots-pattern {
    position: absolute;
    top: 20px;
    right: 420px;
    width: 100px;
    height: 100px;
    z-index: 5;
    opacity: 0.25;
    background-image: radial-gradient(circle, white 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}

/* ══ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 1024px) {
    .main-content { padding: 20px 30px 0 20px; }
    .login-card { width: 340px; padding: 28px 26px 22px; }
    .feat-row { right: 380px; gap: 30px; }
}

@media (max-width: 768px) {
    html, body { overflow-y: auto; height: auto; }

    .login-page {
        height: auto;
        min-height: 100vh;
        flex-direction: column;
        overflow: visible;
    }

    /* BG covers only top part */
    .page-bg { height: 260px; position: absolute; top: 0; }

    .page-border { border-radius: 0; border-width: 6px; }
    .page-border::before,
    .page-border::after { display: none; }

    .main-content {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 20px 16px 0;
        min-height: 260px;
    }

    /* Badges — horizontal center */
    .left-badges {
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        min-width: 320px;
    }
    .l-badge { font-size: 11px; min-width: auto; padding: 5px 12px 5px 6px; }
    .l-badge .badge-icon { width: 24px; height: 24px; font-size: 10px; }

    /* Login card — full width */
    .login-card {
        width: 100%;
        max-width: 420px;
        margin-top: 140px;
        border-radius: 18px;
        padding: 24px 20px 20px;
        position: relative;
        z-index: 20;
    }

    .feat-row { display: none; }
    .dots-pattern { display: none; }

    /* Bottom bar — column */
    .bottom-bar {
        flex-direction: column;
        gap: 10px;
        padding: 14px 20px;
        align-items: flex-start;
    }
    .bar-sep { display: none; }
}

@media (max-width: 480px) {
    .login-card {
        margin-top: 120px;
        padding: 20px 16px 16px;
        border-radius: 14px;
    }
    .card-logo img { max-width: 120px; max-height: 75px; }
    .admin-title { font-size: 22px; }
    .login-input { height: 48px; font-size: 13.5px; }
    .login-btn { height: 48px; font-size: 15px; letter-spacing: 1.5px; }
    .left-badges { top: 20px; }
    .l-badge { font-size: 10px; }
}

@media (max-width: 360px) {
    .login-card { padding: 16px 12px; }
    .admin-title { font-size: 19px; }
    .login-input { height: 44px; font-size: 13px; }
    .login-btn { height: 44px; font-size: 13px; }
}
</style>
</head>
<body>

<div class="login-page">

    <!-- ── Full BG Image ── -->
    <div class="page-bg"></div>

    <!-- ── Dark navy border + gold corners ── -->
    <div class="page-border"></div>

    <!-- ── Dots accent ── -->
    <div class="dots-pattern"></div>

    <!-- ══ MAIN CONTENT ══════════════════════ -->
    <div class="main-content">

        <!-- FAST / SECURE / RELIABLE -->
        <div class="left-badges">
            <div class="l-badge">
                <div class="badge-icon"><i class="fas fa-shield-alt"></i></div>
                FAST
            </div>
            <div class="l-badge">
                <div class="badge-icon"><i class="fas fa-lock"></i></div>
                SECURE
            </div>
            <div class="l-badge">
                <div class="badge-icon"><i class="fas fa-bolt"></i></div>
                RELIABLE
            </div>
        </div>

        <!-- ══ FLOATING LOGIN CARD ════════════ -->
        <div class="login-card">

            <!-- Logo -->
            <div class="card-logo">
                <img src="../img/<?= htmlspecialchars($res_site[0]['logo']); ?>"
                     alt="<?= htmlspecialchars($res_site[0]['site_name']); ?>">
            </div>

            <!-- ADMIN PANEL -->
            <div class="admin-title">
                ADMIN <span>PANEL</span>
            </div>

            <!-- Divider -->
            <div class="title-divider">
                <div class="dash"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dash"></div>
            </div>

            <!-- FORM -->
            <div id="form_login">
            <form name="bz" id="bz" method="post"
                  action="login_check.php"
                  onsubmit="return false;">

                <input type="hidden" name="updte"  id="updte"  value="1">
                <input type="hidden" name="msg_id" id="msg_id" value="<?= $msg_id; ?>">

                <!-- Username -->
                <div class="input-wrap">
                    <span class="in-icon"><i class="fas fa-user"></i></span>
                    <input type="text"
                           class="login-input"
                           id="email" name="email"
                           placeholder="Username"
                           autocomplete="username"
                           required>
                </div>

                <!-- Password -->
                <div class="input-wrap">
                    <span class="in-icon"><i class="fas fa-lock"></i></span>
                    <input type="password"
                           class="login-input"
                           id="password" name="password"
                           placeholder="Password"
                           autocomplete="current-password"
                           required>
                    <button type="button" class="eye-icon" onclick="togglePass()">
                        <i class="fas fa-eye-slash" id="eyeIcon"></i>
                    </button>
                </div>

                <!-- Remember + Forgot -->
                <div class="rem-row">
                    <label>
                        <input type="checkbox" name="remember" id="remember">
                        Remember Me
                    </label>
                    <a href="#" class="forgot-link" onclick="forgot_password()">
                        Forgot Password?
                    </a>
                </div>

                <!-- LOGIN BUTTON -->
                <button type="submit"
                        class="login-btn"
                        id="login" name="login"
                        onclick="do_login()">
                    LOGIN <i class="fas fa-arrow-right"></i>
                </button>

            </form>
            </div>

            <!-- Or + Secure -->
            <div class="or-row">or login with</div>
            <div class="secure-wrap">
                <div class="secure-icon"><i class="fas fa-lock"></i></div>
                <div class="secure-label">Secure Access</div>
            </div>

            <!-- PHP Includes -->
            <?php include "html/forgot_password.php"; ?>
            <?php include "html/reset_password.php"; ?>
            <?php include "html/opt_verify.php"; ?>
            <div id="processing" style="display:none; width:100%; text-align:center;">
                <?php include "html/processing.php"; ?>
            </div>

        </div><!-- end login-card -->

    </div><!-- end main-content -->

    <!-- ══ FEATURE CHIPS (bottom left) ══════ -->
    <div class="feat-row">
        <div class="feat-chip">
            <div class="fc-icon"><i class="fas fa-shield-alt"></i></div>
            <div class="fc-label">सुरक्षित<br>लेन-देन</div>
        </div>
        <div class="feat-chip">
            <div class="fc-icon"><i class="fas fa-bolt"></i></div>
            <div class="fc-label">तेज़ और<br>आसान रिचार्ज</div>
        </div>
        <div class="feat-chip">
            <div class="fc-icon"><i class="fas fa-headset"></i></div>
            <div class="fc-label">24x7<br>सहायता</div>
        </div>
    </div>

    <!-- ══ BOTTOM BAR ═════════════════════════ -->
    <div class="bottom-bar">
        <div class="bar-item">
            <div class="bar-icon"><i class="fas fa-phone-alt"></i></div>
            <div class="bar-text">
                <div class="bar-lbl">Contact Us</div>
                <div class="bar-val">
                    +91 <?= htmlspecialchars($res_site[0]['phone'] ?? '12345 67890'); ?>
                </div>
            </div>
        </div>
        <div class="bar-sep"></div>
        <div class="bar-item">
            <div class="bar-icon"><i class="fas fa-envelope"></i></div>
            <div class="bar-text">
                <div class="bar-lbl">Email Us</div>
                <div class="bar-val">
                    <?= htmlspecialchars($res_site[0]['email'] ?? 'support@ajjkadhan.com'); ?>
                </div>
            </div>
        </div>
        <div class="bar-sep"></div>
        <div class="bar-item">
            <div class="bar-icon"><i class="fas fa-globe"></i></div>
            <div class="bar-text">
                <div class="bar-lbl">Website</div>
                <div class="bar-val">
                    <?= htmlspecialchars($res_site[0]['website'] ?? 'www.ajjkadhan.com'); ?>
                </div>
            </div>
        </div>
    </div>

</div><!-- end login-page -->

<!-- Scripts -->
<script src="../vendor/jquery/jquery.min.js"></script>
<script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="../js/sb-admin-2.min.js"></script>
<script src="./js/login.js"></script>

<script>
function togglePass() {
    var inp  = document.getElementById('password');
    var icon = document.getElementById('eyeIcon');
    if (inp.type === 'password') {
        inp.type = 'text';
        icon.classList.replace('fa-eye-slash','fa-eye');
    } else {
        inp.type = 'password';
        icon.classList.replace('fa-eye','fa-eye-slash');
    }
}
document.addEventListener('keydown', function(e){
    if (e.key === 'Enter') {
        var btn = document.getElementById('login');
        if (btn) btn.click();
    }
});
</script>

</body>
</html>
