<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailoring ERP — Login</title>
    <link rel="icon" href="data:,">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

    <style>
        :root { --pr: #7c3aed; --pr-d: #6d28d9; }
        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

        body {
            min-height: 100vh;
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #0f172a;
            display: flex;
            align-items: stretch;
        }

        /* ── LEFT ── */
        .ll {
            width: 55%;
            background: linear-gradient(135deg, #1a1040 0%, #2d1b69 50%, #1a1040 100%);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 60px 50px;
            position: relative; overflow: hidden;
        }
        .ll::before {
            content:''; position:absolute;
            width:500px; height:500px;
            background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, transparent 70%);
            top:-100px; left:-100px;
        }
        .ll::after {
            content:''; position:absolute;
            width:400px; height:400px;
            background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
            bottom:-80px; right:-80px;
        }

        .brand {
            display:flex; align-items:center; gap:16px;
            margin-bottom:50px; z-index:1;
        }
        .brand-ic {
            width:60px; height:60px;
            background: var(--pr);
            border-radius:16px;
            display:flex; align-items:center; justify-content:center;
            font-size:26px; color:#fff;
            box-shadow: 0 8px 24px rgba(124,58,237,0.5);
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}
        }
        .brand-txt h2 { font-size:24px; font-weight:800; color:#fff; margin:0; }
        .brand-txt p  { font-size:13px; color:#9d93c8; margin:0; }

        .illus { z-index:1; text-align:center; max-width:400px; }
        .illus .bi { font-size:90px; color:rgba(124,58,237,0.45); display:block; margin-bottom:28px; animation: float 4s ease-in-out infinite; }
        .illus h3  { font-size:27px; font-weight:700; color:#fff; margin-bottom:14px; line-height:1.3; }
        .illus p   { font-size:14.5px; color:#9d93c8; line-height:1.7; }

        .pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; justify-content:center; }
        .pills span {
            background: rgba(124,58,237,0.18);
            border: 1px solid rgba(124,58,237,0.35);
            color: #c4b8f0;
            padding: 6px 14px; border-radius:30px;
            font-size:12px; font-weight:600;
        }

        /* ── RIGHT ── */
        .lr {
            width: 45%;
            background: #fff;
            display:flex; align-items:center; justify-content:center;
            padding: 50px 60px;
        }
        .lb { width:100%; max-width:400px; }

        .lb h3 { font-size:28px; font-weight:800; color:#0f172a; margin-bottom:6px; }
        .lb .sub { font-size:14px; color:#64748b; margin-bottom:32px; }

        /* Error box */
        .err-box {
            background: #fef2f2;
            border: 1.5px solid #fecaca;
            border-radius: 10px;
            padding: 12px 16px;
            margin-bottom: 20px;
            font-size: 13px;
            color: #dc2626;
            display: flex; align-items: center; gap: 8px;
        }

        .fg { margin-bottom:18px; }
        .fg label { font-size:13px; font-weight:700; color:#374151; display:block; margin-bottom:7px; }

        .iw { position:relative; }
        .iw .ii {
            position:absolute; left:14px; top:50%;
            transform:translateY(-50%); color:#94a3b8; font-size:15px;
        }
        .iw input {
            width:100%; padding:13px 14px 13px 42px;
            border: 1.5px solid #e2e8f0;
            border-radius:10px; font-size:14px; color:#0f172a;
            background:#f8fafc; outline:none;
            transition: border-color .2s, box-shadow .2s, background .2s;
        }
        .iw input:focus {
            border-color: var(--pr);
            background:#fff;
            box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
        }
        .iw .tp {
            position:absolute; right:14px; top:50%;
            transform:translateY(-50%); color:#94a3b8;
            cursor:pointer; font-size:15px;
            background:none; border:none; padding:0;
            transition: color .2s;
        }
        .iw .tp:hover { color: var(--pr); }

        .btn-login {
            width:100%; padding:14px;
            background: var(--pr);
            color:#fff; border:none;
            border-radius:10px; font-size:15px;
            font-weight:700; cursor:pointer;
            transition: all .22s;
            margin-top:6px;
            box-shadow: 0 4px 14px rgba(124,58,237,0.35);
            display:flex; align-items:center; justify-content:center; gap:8px;
        }
        .btn-login:hover {
            background: var(--pr-d);
            transform: translateY(-1px);
            box-shadow: 0 8px 22px rgba(124,58,237,0.45);
        }
        .btn-login:active { transform:none; }

        /* Loading state */
        .btn-login .spinner { display:none; }
        .btn-login.loading .spinner { display:inline-block; }
        .btn-login.loading .btn-txt { display:none; }

        .lf { text-align:center; margin-top:28px; font-size:16px; color:#94a3b8; }

        @media (max-width:768px) {
            body { flex-direction:column; overflow:auto; }
            .ll { width:100%; padding:40px 24px; }
            .lr { width:100%; padding:40px 24px; }
            .illus .bi { font-size:60px; }
        }
    </style>
</head>
<body>

<!-- LEFT -->
<div class="ll">
    <div class="brand">
        <div class="brand-ic"><i class="fa-solid fa-scissors"></i></div>
        <div class="brand-txt">
            <h2>Tailoring ERP</h2>
            <p>Billing &amp; Inventory Management</p>
        </div>
    </div>
    <div class="illus">
        <i class="fa-solid fa-shirt bi"></i>
        <h3>Manage Your Tailoring Business Smarter</h3>
        <p>Complete solution for orders, measurements, billing, inventory &amp; reports — all in one place.</p>
        <div class="pills">
            <span><i class="fa-solid fa-check me-1"></i>Customer Management</span>
            <span><i class="fa-solid fa-check me-1"></i>Tailoring Orders</span>
            <span><i class="fa-solid fa-check me-1"></i>Stock &amp; Inventory</span>
            <span><i class="fa-solid fa-check me-1"></i>Sales Reports</span>
            <span><i class="fa-solid fa-check me-1"></i>GST Billing</span>
        </div>
    </div>
</div>

<!-- RIGHT -->
<div class="lr">
    <div class="lb">
        <h3>Welcome Back 👋</h3>
        <p class="sub">Sign in to your Tailoring ERP dashboard</p>

        <?php if(!empty($error_msg)): ?>
        <div class="err-box">
            <i class="fa-solid fa-circle-exclamation"></i>
            <?= htmlspecialchars($error_msg) ?>
        </div>
        <?php endif; ?>

        <form id="loginForm" autocomplete="off">

            <div class="fg">
                <label>Username</label>
                <div class="iw">
                    <i class="fa-solid fa-user ii"></i>
                    <input type="text" name="username" placeholder="Enter your username"
                           value="<?= isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>"
                           required autocomplete="off">
                </div>
            </div>

            <div class="fg">
                <label>Password</label>
                <div class="iw">
                    <i class="fa-solid fa-lock ii"></i>
                    <input type="password" name="password" id="pwd"
                           placeholder="Enter your password" required>
                    <button type="button" class="tp" onclick="togglePwd()">
                        <i class="fa-solid fa-eye" id="pwd-ic"></i>
                    </button>
                </div>
            </div>

            <button type="submit" class="btn-login" id="loginBtn">
                <span class="btn-txt">
                    <i class="fa-solid fa-right-to-bracket"></i> Sign In
                </span>
                <span class="spinner">
                    <i class="fa-solid fa-circle-notch fa-spin"></i> Signing in...
                </span>
            </button>

        </form>

        <div class="lf">Design &amp; Develop by <span style="color:#e91e8c;font-weight:700;">Com</span><span style="color:#00bcd4;font-weight:700;">transe</span> Technology Pvt.Ltd.</div>
    </div>
</div>

<?php
$login_url    = base_url('index.php/Auth/login_validation');
$dashboard_url = base_url('index.php/dashboard');
?>
<script>
var LOGIN_URL    = '<?= $login_url ?>';
var DASHBOARD_URL = '<?= $dashboard_url ?>';

function togglePwd() {
    var p = document.getElementById('pwd');
    var i = document.getElementById('pwd-ic');
    if (p.type === 'password') {
        p.type = 'text';
        i.className = 'fa-solid fa-eye-slash';
    } else {
        p.type = 'password';
        i.className = 'fa-solid fa-eye';
    }
}

document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var btn = document.getElementById('loginBtn');
    btn.classList.add('loading');
    btn.disabled = true;

    var username = document.querySelector('input[name="username"]').value;
    var password = document.querySelector('input[name="password"]').value;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', LOGIN_URL, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    xhr.onload = function() {
        var response = xhr.responseText.trim();
        if (response === '1') {
            window.location.href = DASHBOARD_URL;
        } else {
            btn.classList.remove('loading');
            btn.disabled = false;
            var errBox = document.querySelector('.err-box');
            if (!errBox) {
                errBox = document.createElement('div');
                errBox.className = 'err-box';
                document.getElementById('loginForm').insertAdjacentElement('beforebegin', errBox);
            }
            errBox.innerHTML = '<i class="fa-solid fa-circle-exclamation"></i> Username किंवा Password चुकीचे आहे.';
            errBox.style.display = 'flex';
        }
    };

    xhr.onerror = function() {
        btn.classList.remove('loading');
        btn.disabled = false;
        alert('Network error. Please try again.');
    };

    xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});
</script>
</body>
</html>