<?php $__env->startSection('title','E-Shop || Login Page'); ?>

<?php $__env->startSection('main-content'); ?>
<!-- Breadcrumbs -->
<div class="breadcrumbs">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="bread-inner">
                    <ul class="bread-list">
                        <li><a href="<?php echo e(route('home')); ?>">Home<i class="ti-arrow-right"></i></a></li>
                        <li class="active"><a href="javascript:void(0);">Login</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Breadcrumbs -->

<!-- Shop Login -->
<section class="shop login section" style="background:#f4f4f4; padding:60px 0;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-12">
                <div class="modern-login-wrapper">

                    <!-- LEFT SIDE IMAGE -->
                    <div class="modern-login-left"></div>

                    <!-- RIGHT SIDE FORM -->
                    <div class="modern-login-right">

                        <h2 class="login-title">Welcome Back!</h2>


                        
                        <?php if(session('error')): ?>
                        <div class="login-error-box text-center">
                            <?php echo e(session('error')); ?>

                        </div>
                        <?php endif; ?>

                        <!-- Login Error Message -->
                        <div id="login-error-message" class="login-error-box" style="display:none;"></div>

                        <p class="login-subtitle"></p>

                        
                        <div id="login-form-section"
                            <?php if(session('login_otp_user_id')): ?> style="display:none;" <?php endif; ?>>

                            <form id="login-form">
                                <?php echo csrf_field(); ?>


                                <div class="form-group">
                                    <input type="email" name="email"
                                        class="modern-input"
                                        placeholder="Enter your email"
                                        required>
                                </div>

                                <div class="form-group">
                                    <input type="password" name="password"
                                        class="modern-input"
                                        placeholder="Enter your password"
                                        required>
                                </div>

                                <button class="modern-btn" type="submit" id="login-btn">
                                    <span id="login-text">Login</span>
                                    <span id="login-loader" style="display:none;">
                                        <i class="fa fa-spinner fa-spin"></i> Processing...
                                    </span>
                                </button>

                            </form>
                        </div>


                        
                        <div id="otp-form-section"
                            <?php if(!session('login_otp_user_id')): ?> style="display:none;" <?php endif; ?>>

                            <h4 class="mb-3">Enter OTP</h4>
                            <p class="text-muted">
                                We sent a 6-digit verification code to your email.
                            </p>

                            
                            <form id="verify-otp-form">

                                <?php echo csrf_field(); ?>

                                <input type="text"
                                    name="otp"
                                    class="modern-input"
                                    placeholder="Enter 6-digit OTP"
                                    maxlength="6"
                                    required>

                                <button type="submit" class="modern-btn">
                                    Verify OTP
                                </button>
                            </form>

                            
                            <div class="text-center mt-3">


                                <?php echo csrf_field(); ?>
                                <button type="button"
                                    id="resend-btn"
                                    class="btn btn-link p-0"
                                    style="font-weight:600;">
                                    Resend OTP
                                </button>


                                <p id="countdown-text" class="text-muted mt-2"></p>

                            </div>

                            
                            <div class="text-center mt-2">
                                <a href="<?php echo e(route('login.cancel')); ?>"
                                    style="color:red; font-weight:600;">
                                    Cancel Login
                                </a>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<!--/ End Login -->
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .login-error-box {
        background: #ffe5e5;
        color: #d8000c;
        padding: 10px 15px;
        border-radius: 10px;
        margin-bottom: 15px;
        font-size: 14px;
        border: 1px solid #ffb3b3;
    }


    .modern-login-wrapper {
        display: flex;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    }

    .modern-login-left {
        width: 50%;
        background-image: url('<?php echo e(asset("frontend/img/polo_banner.jpeg")); ?>');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 500px;
    }


    .modern-login-right {
        width: 50%;
        padding: 50px;
    }

    .login-title {
        font-size: 28px;
        font-weight: 700;
    }

    .login-subtitle {
        color: #888;
        margin-bottom: 25px;
    }

    .modern-input {
        width: 100%;
        height: 50px;
        border-radius: 12px;
        border: 1px solid #ddd;
        padding: 10px 15px;
        margin-bottom: 15px;
    }

    .modern-input:focus {
        border-color: #f07c37;
        outline: none;
    }

    .modern-btn {
        width: 100%;
        height: 50px;
        border-radius: 12px;
        border: none;
        background: #f07c37;
        color: #fff;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .modern-btn:hover {
        background: #e66f2a;
    }

    .modern-facebook-btn {
        display: block;
        width: 100%;
        text-align: center;
        background: #1877f2;
        color: white;
        padding: 12px;
        border-radius: 12px;
        margin-top: 10px;
    }

    .modern-facebook-btn:hover {
        background: #0d65d9;
        color: white;
    }

    @media (max-width: 768px) {
        .modern-login-wrapper {
            flex-direction: column;
        }

        .modern-login-left,
        .modern-login-right {
            width: 100%;
        }

        .modern-login-left {
            display: none;
        }
    }
</style>
<?php $__env->stopPush(); ?>


<?php $__env->startPush('scripts'); ?>
<script>
    document.getElementById('login-form')?.addEventListener('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);

        let btn = document.getElementById("login-btn");
        let text = document.getElementById("login-text");
        let loader = document.getElementById("login-loader");

        // Show loader
        btn.disabled = true;
        text.style.display = "none";
        loader.style.display = "inline";

        fetch("<?php echo e(route('login.submit')); ?>", {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': "<?php echo e(csrf_token()); ?>"
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {

                let errorBox = document.getElementById("login-error-message");

                // ✅ ADMIN LOGIN SUCCESS
                if (data.status === "success") {
                    window.location.href = data.redirect;
                    return;
                }

                // ✅ USER OTP FLOW
                if (data.status === "otp_sent") {

                    errorBox.style.display = "none";
                    errorBox.innerText = "";

                    document.getElementById('login-form-section').style.display = 'none';
                    document.getElementById('otp-form-section').style.display = 'block';
                    startCountdown();

                } else {
                    errorBox.style.display = "block";
                    errorBox.innerText = data.message ?? "Something went wrong";
                }

                btn.disabled = false;
                text.style.display = "inline";
                loader.style.display = "none";

            })
            .catch(err => {
                console.error(err);

                btn.disabled = false;
                text.style.display = "inline";
                loader.style.display = "none";
            });

    });
</script>
<?php $__env->stopPush(); ?>


<?php $__env->startPush('scripts'); ?>
<script>
    function startCountdown() {

        let seconds = 60;
        let countdown = document.getElementById("countdown-text");
        let resendBtn = document.getElementById("resend-btn");

        resendBtn.disabled = true;
        resendBtn.style.opacity = 0.5;

        let interval = setInterval(function() {
            seconds--;
            countdown.innerText = "You can resend OTP in " + seconds + " seconds";

            if (seconds <= 0) {
                clearInterval(interval);
                countdown.innerText = "";
                resendBtn.disabled = false;
                resendBtn.style.opacity = 1;
            }
        }, 1000);
    }


    document.getElementById('verify-otp-form')?.addEventListener('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);

        fetch("<?php echo e(route('login.otp.verify')); ?>", {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': "<?php echo e(csrf_token()); ?>"
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {

                if (data.status === "success") {
                    window.location.href = data.redirect;
                } else {
                    alert(data.message);
                }

            })
            .catch(err => console.error(err));
    });



    document.getElementById('resend-btn')?.addEventListener('click', function() {

        fetch("<?php echo e(route('login.otp.resend')); ?>", {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': "<?php echo e(csrf_token()); ?>",
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {

                if (data.status === "resent") {
                    alert("New OTP sent");
                    startCountdown();
                } else {
                    alert(data.message);
                }

            });

    });
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('frontend.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/ecommerce_website/resources/views/frontend/pages/login.blade.php ENDPATH**/ ?>