

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ورود</title>

    <link rel="stylesheet" href="/content/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/content/auth/auth.css?v=5" />
    <link href="/content/vendors/bower_components/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="auth-wrapper">
        


<!-- Sidebar -->
<div class="auth-sidebar">
    <img src="/home/logo" alt="لوگو" class="brand-logo">

    <h2>
        ورود به پنل<br>
        <span>سلام! سی‌آرام</span>
    </h2>

    <p>
        همه ابزارهای فروش، مدیریت مشتریان و اتوماسیون کسب‌وکار
        در یک فضای ساده و قدرتمند.
    </p>
</div>

<!-- Content -->
<div class="auth-content">
    <div class="form-container max-with-500">

        <h1 class="login-title">خوش آمدید 👋</h1>
        <p class="login-subtitle">برای ورود، اطلاعات خود را وارد کنید.</p>

        <form onsubmit="return false">
            <input name="__RequestVerificationToken" type="hidden" value="SOntBR4yoTxIkTek3HBEhQaIHr23fHtK3e_rfKfLEnpJATdZI1l7UvGWeJqpSdRyehPZB_Wp9bbCDdGjxreld5UTR0potRyBILxaR6cUXTs1" />

            <!-- Mobile -->
            <div class="form-group" id="group-mobile">
                <label class="form-label">شماره موبایل</label>
                <input type="tel"
                       id="mobile"
                       class="form-control text-center"
                       placeholder="09120000000"
                       maxlength="11"
                       style="direction:ltr;">
                <div class="invalid-feedback">شماره موبایل معتبر نیست</div>
            </div>

            <!-- Password -->
            <div class="form-group" id="group-password">
                <label class="form-label">رمز عبور</label>
                <div class="password-wrapper">
                    <input type="password"
                           id="password"
                           class="form-control text-center"
                           placeholder="••••••••">
                    <span class="glyphicon glyphicon-eye-open toggle-password"
                          onclick="togglePassword()"></span>
                </div>
                <div class="invalid-feedback">رمز عبور وارد نشده</div>
            </div>

            <button class="btn btn-login" id="loginBtn" onclick="login()">
                ورود به حساب
            </button>

            <div class="auth-links">
                <a href="/auth/signup">ثبت‌نام</a> | <a href="/auth/forget">بازیابی رمز‌عبور</a>
            </div>

        </form>
    </div>
</div>


<script>
    /* ===============================
       Utilities
    ================================ */

    function showError(id) {
        document.getElementById('group-' + id).classList.add('has-error');
    }

    function clearError(id) {
        document.getElementById('group-' + id).classList.remove('has-error');
    }

    document.querySelectorAll('input').forEach(i => {
        i.addEventListener('input', () => {
            const g = i.closest('.form-group');
            if (g) g.classList.remove('has-error');
        });
    });

    /* ===============================
       Password Toggle
    ================================ */

    function togglePassword() {
        const input = document.getElementById('password');
        const icon = document.querySelector('.toggle-password');

        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('glyphicon-eye-open', 'glyphicon-eye-close');
        } else {
            input.type = 'password';
            icon.classList.replace('glyphicon-eye-close', 'glyphicon-eye-open');
        }
    }

    /* ===============================
       Debounce
    ================================ */

    let loginTimeout;
    function debounceLogin(fn, delay = 600) {
        clearTimeout(loginTimeout);
        loginTimeout = setTimeout(fn, delay);
    }

    /* ===============================
       Login (CSRF + Loading + Errors)
    ================================ */

    async function login() {

        debounceLogin(async () => {

            const mobile = document.getElementById('mobile').value.trim();
            const password = document.getElementById('password').value;

            clearError('mobile');
            clearError('password');

            if (!/^09\d{9}$/.test(mobile)) {
                showError('mobile');
                return;
            }

            if (password.length < 6) {
                showError('password');
                return;
            }

            const btn = document.getElementById('loginBtn');
            btn.innerHTML = 'در حال ورود...';
            btn.disabled = true;

            try {
                const res = await fetch('/auth/signin', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams({
                        __RequestVerificationToken:
                            document.querySelector(
                                'input[name="__RequestVerificationToken"]'
                            ).value,

                        Username: mobile,
                        Password: password
                    })
                });


                if (res.redirected) {
                    window.location = res.url;
                    return;
                }

                showToast('نام کاربری یا رمز عبور اشتباه است', 'error');
                btn.innerHTML = 'ورود به حساب';
                btn.disabled = false;

            } catch {

                showToast('خطا در ارتباط با سرور', 'error');
                btn.innerHTML = 'ورود به حساب';
                btn.disabled = false;

            }

        });

    }

    /* Enter submit */
    document.addEventListener('keypress', e => {
        if (e.key === 'Enter') {
            e.preventDefault();
            login();
        }
    });
</script>


        <!-- Toast -->
        <div id="toast"
             style="margin-top: calc(100vh - 200px);
            min-width:240px;
            z-index:9999;
            background:#2d3748;
            color:#fff;
            padding:14px 18px;
            border-radius:12px;
            display:none;
            font-size:14px;
            box-shadow:0 10px 25px rgba(0,0,0,.15);">
        </div>
    </div>

    <div id="pageLoader" class="page-loader">

        <div class="loader-box">

            <div class="loader-spinner"></div>

            <div class="loader-title">
                در حال ورود...
            </div>

            <div class="loader-subtitle">
                لطفاً چند لحظه صبر کنید
            </div>

        </div>

    </div>

    <script src="/content/dist/js/sweetalert2@11.js"></script>

    <script>
        function showPageLoader() {

            const loader = document.getElementById("pageLoader")

            loader.classList.add("active")

        }

        function showToast(message, type = 'info') {

            const toast = document.getElementById('toast');

            toast.innerText = message;

            toast.style.background =
                type === 'error'
                    ? '#ef4444'
                    : type === 'success'
                        ? '#10b981'
                        : '#2d3748';

            toast.classList.add('show');

            setTimeout(() => {
                toast.classList.remove('show');
            }, 3500);
        }

    </script>
</body>
</html>
