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

<?php $__env->startSection('main-content'); ?>
<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 IMAGE -->
                    <div class="modern-login-left"></div>

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

                        <h2 class="login-title">Create Account</h2>

                        <p class="login-subtitle">
                            Register to continue shopping
                        </p>

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

                        
                        <div id="register-form-section">

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

                                <div class="form-group">
                                    <input type="text" name="name"
                                        class="modern-input"
                                        placeholder="Your Name"
                                        required>
                                </div>

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

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

                                <div class="form-group">
                                    <input type="password" name="password_confirmation"
                                        class="modern-input"
                                        placeholder="Confirm Password"
                                        required>
                                </div>

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

                            </form>

                        </div>


                        

                        <div id="register-otp-section" style="display:none;">

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

                            <form id="register-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">
                                <button type="button"
                                    id="register-resend-btn"
                                    class="btn btn-link p-0"
                                    style="font-weight:600;">
                                    Resend OTP
                                </button>

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

                        </div>




                        <div class="text-center mt-3">
                            <a href="<?php echo e(route('login.form')); ?>">
                                Already have an account? Login
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .register-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;
    }

    @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>
    function startRegisterCountdown() {

        let seconds = 60;
        let countdown = document.getElementById("register-countdown-text");
        let resendBtn = document.getElementById("register-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('register-form')?.addEventListener('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);

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

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

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

                if (data.status === "otp_sent") {

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

                } else {
                    let errorBox = document.getElementById("register-error-message");
                    errorBox.style.display = "block";
                    errorBox.innerText = data.message;
                }

                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>
    document.getElementById('register-resend-btn')?.addEventListener('click', function() {

        fetch("<?php echo e(route('register.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");
                    startRegisterCountdown();
                } else if (data.status === "cooldown")

                {
                    startRegisterCountdown();
                } else {
                    let errorBox = document.getElementById("register-error-message");
                    errorBox.style.display = "block";
                    errorBox.innerText = data.message;
                }

            });

    });


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

        let formData = new FormData(this);

        fetch("<?php echo e(route('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 {
                    let errorBox = document.getElementById("register-error-message");
                    errorBox.style.display = "block";
                    errorBox.innerText = data.message;
                }

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



    document.querySelectorAll('#register-form .modern-input').forEach(input => {
        input.addEventListener('input', function() {
            let errorBox = document.getElementById("register-error-message");
            errorBox.style.display = "none";
            errorBox.innerText = "";
        });
    });
</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/register.blade.php ENDPATH**/ ?>