<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Zaraat Dost | Login</title>
    <link rel="stylesheet" href="../../vendors/iconfonts/font-awesome/css/all.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" />
    <link rel="shortcut icon" href="../images/ic_logo_zd.png" />

    <style>
        /* General Styles */
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: url("/images/ZaratLoginPage.jpg"), url("/images/ZaratLoginPage1.jpg"), url("/images/ZaratLoginPage2.jpg"), url("/images/ZaratLoginPage3.jpg"), url("/images/ZaratLoginPage4.jpg"), url("/images/ZaratLoginPage5.jpg"), url("/images/ZaratLoginPage6.jpg"), url("/images/ZaratLoginPage7.jpg"), url("/images/ZaratLoginPage8.jpg"), url("/images/ZaratLoginPage9.jpg"), url("/images/ZaratLoginPage10.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            animation: bgChange 30s step-end infinite;
        }

        @keyframes bgChange {
            0%, 10% {
                background-image: url("/images/ZaratLoginPage.jpg");
            }
            /* Image 1: 0-3s */

            10%, 20% {
                background-image: url("/images/ZaratLoginPage1.jpg");
            }
            /* Image 2: 3-6s */

            20%, 30% {
                background-image: url("/images/ZaratLoginPage2.jpg");
            }
            /* Image 3 */

            30%, 40% {
                background-image: url("/images/ZaratLoginPage3.jpg");
            }
            /* Image 4 */

            40%, 50% {
                background-image: url("/images/ZaratLoginPage4.jpg");
            }
            /* Image 5 */

            50%, 60% {
                background-image: url("/images/ZaratLoginPage5.jpg");
            }
            /* Image 6 */

            60%, 70% {
                background-image: url("/images/ZaratLoginPage6.jpg");
            }
            /* Image 7 */

            70%, 80% {
                background-image: url("/images/ZaratLoginPage7.jpg");
            }
            /* Image 8 */

            80%, 90% {
                background-image: url("/images/ZaratLoginPage8.jpg");
            }
            /* Image 9 */

            90%, 100% {
                background-image: url("/images/ZaratLoginPage10.jpg");
            }
            /* Image 10: 27-30s full */
        }
        @keyframes gradientMove {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
        /* Login Card */
        .login-card {
            backdrop-filter: blur(12px);
            background: rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }

            .login-card h2 {
                text-align: center;
                font-weight: 600;
                margin-bottom: 0.5rem;
            }

            .login-card p {
                text-align: center;
                font-size: 0.9rem;
                margin-bottom: 2rem;
            }

        .form-group {
            margin-bottom: 1.2rem;
        }

            .form-group label {
                display: block;
                margin-bottom: 0.4rem;
                font-size: 0.9rem;
            }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            transition: background 0.3s ease;
        }

           


        .btn-submit {
            width: 100%;
            padding: 0.75rem;
            border: none;
            border-radius: 10px;
            background-color: #20c997;
            color: white;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

            .btn-submit:hover {
                background-color: #1ca882;
            }

        .text-links {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.85rem;
        }

            .text-links a {
                color: #20c997;
                text-decoration: none;
            }

                .text-links a:hover {
                    text-decoration: underline;
                }

        .powered-by {
            margin-top: 2rem;
            text-align: center;
            font-size: 0.75rem;
            color: black;
        }

            .powered-by img {
                height: 30px;
                vertical-align: middle;
            }

        .swal2-image, #swal2-title, .swal2-html-container, .swal2-content {
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }

        .swal2-container .swal2-popup {
            max-width: 30vw;
        }
    </style>
</head>

<body>
    <div class="login-card">

        <h2> <img src="images/ic_logo_pulse_rest.png" style="height:100px; width:auto; padding:5px;" alt="logo" /></h2>
        <p>Survey Dashboard</p>

        <form onsubmit="event.preventDefault(); performLogin();">
            <div class="form-group">
                <label for="cnic">CNIC</label>
                <input type="text" id="cnic" class="form-control" placeholder="Enter CNIC Without Dashes" required />
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control" placeholder="Enter Password" required />
            </div>

            <button type="submit" class="btn-submit">Sign In</button>
        </form>

        <div class="text-links">
            <p>Forgot password? <a href="#" onclick="">Reset</a></p>
            <p>Don’t have an account? <a href="#" onclick="">Register</a></p>
        </div>

        <div class="powered-by">
            Powered by
            <apan href="" target="_blank">
                Zaraat Dost
            </apan>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        window.addEventListener('load', function () {
            const userId = localStorage.getItem('userId');
            // 1. Try to notify backend (fire-and-forget – we don't wait or block on error)
            if (userId) {
                try {
                    const mode = "Web";
                    fetch(`/api/Account/logoutUser?userId=${userId}&Mode=${mode}`, {
                        method: 'POST'
                    });

                    localStorage.clear();
                    sessionStorage.clear();
                }
                catch (err) {
                    // Silently ignore – local state is already cleared
                    console.warn('Backend logout failed (non-critical):', err.message);
                }
            }

            
        });

    </script>
    <script>
        function performLogin() {
            
            Swal.fire({
                title: 'Loading...', // Title of the popup
                text: 'Please wait...', // Additional text
                imageUrl: '/images/ZaraatSpinner.gif', // Optional: Add a loading image/spinner
                imageWidth: 230, // Optional: Image width
                imageHeight: 170, // Optional: Image height
                allowOutsideClick: false, // Prevent closing by clicking outside
                showConfirmButton: false, // Hide the confirm button
            });
            const cnic = document.getElementById('cnic').value.trim();
            const password = document.getElementById('password').value.trim();
            const mode = 'Web';
            if (!cnic || !password) {
                return alertResponse("Please fill in both fields.");
            }
            fetch('/api/Account/loginUser', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ cnic, password, mode })
            })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => {
                            throw new Error(err.message || 'Login failed');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        alertResponse(data.error);
                    } else {
                        localStorage.setItem('accessToken', data.token);
                        localStorage.setItem('userName', data.name);
                        localStorage.setItem('userId', data.userId);
                        localStorage.setItem('vendorName', data.vendor.name);
                        localStorage.setItem('roleName', data.roleName);
                        localStorage.setItem('vendorLogo', data.vendor.logo);
                        localStorage.setItem('groupId', data.group);
                        localStorage.setItem('unitId', data.unit);
                        localStorage.setItem('unitArray', data.unitArray);
                        alertResponseSuccess("Login successful!").then(() => {
                            window.location.href = "index7.html";
                        });
                    }
                })
                .catch(error => alertResponse(error.message));
        }

        function alertResponse(message) {
            Swal.fire('Error', message, 'error');
        }
        function alertResponseSuccess(message) {
            return Swal.fire({
                icon: 'success',
                title: 'Success',
                text: message,
                timer: 300,                  // Auto close after 1.4 seconds
                timerProgressBar: true,       // Shows a nice progress bar
                showConfirmButton: false,     // Completely hides the OK button
                allowOutsideClick: false,
                allowEscapeKey: false
            });
        }

        // Enable Enter key to trigger login from any input field
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('cnic').addEventListener('keypress', e => {
                if (e.key === 'Enter') performLogin();
            });
            document.getElementById('password').addEventListener('keypress', e => {
                if (e.key === 'Enter') performLogin();
            });
        });
    </script>

</body>

</html>
