@extends('front.layouts.app')
@section('title','Login-Mark Tippets')
@section('content')

    <style>
        /* Style the form */
        #regForm {
            background-color: #ffffff;
            margin: 100px auto;
            padding: 40px;
            width: 70%;
            min-width: 300px;
        }

        /* Style the input fields */
        input, select {
            padding: 10px;
            width: 100%;
            font-size: 17px;
            font-family: Raleway;
            border: 1px solid #aaaaaa;
        }

        /* Mark input boxes that gets an error on validation: */
        input.invalid {
            background-color: #ffdddd;
        }

        /* Hide all steps by default: */
        .tab {
            display: none;
        }

        /* Make circles that indicate the steps of the form: */
        .step {
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbbbbb;
            border: none;
            border-radius: 50%;
            display: inline-block;
            opacity: 0.5;
        }

        /* Mark the active step: */
        .step.active {
            opacity: 1;
        }

        /* Mark the steps that are finished and valid: */
        .step.finish {
            background-color: #04AA6D;
        }

        /* Preloader Styles */
        .preloader {
            display: none; /* Hidden by default */
            position: fixed; /* Sit on top of the page content */
            z-index: 999; /* Specify a stack order in case you're using a different order for other elements */
            left: 0;
            top: 0;
            width: 100%; /* Full width (cover the whole page) */
            height: 100%; /* Full height (cover the whole page) */
            overflow: hidden; /* Hide scrollbars */
            background-color: rgba(255, 255, 255, 0.8); /* White background with some transparency */
        }

        .preloader .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }

        }

        .disabled-btn {
            pointer-events: none; /* Prevent clicking */
            opacity: 0.6; /* Make the button appear disabled */
        }
    </style>
    <div class="preloader">
        <div class="spinner"></div>
    </div>
    <!-- Pagetitle -->
    <section class="banner pagetitle bannerSlider">
        <div class="bannerImg" data-background="{{asset('images/banner.jpg')}}">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7">
                        <div class="bannerImg__content">
                            <h1>Sign Up</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="contact">
        <div class="container">
            <div class="row align-items-center flex-row-reverse">
                <div class="col-md-6">
                    <figure class="contact__img w-100" data-aos="zoom-in">
                        <img src="{{ asset('images/contact1.jpg') }}" alt="image" class="img-fluid w-100 h-100">
                    </figure>
                </div>
                <div class="col-md-6">
                    <form id="regForm" class="contact__form" data-aos="fade-up" method="post">
                        @csrf
                        <h2 class="heading">SIGN UP</h2>
                        <h3 class="subHeading">Enter Your Signup Details</h3>

                        <div class="tab">
                            <div class="row">
                                <div class="col-12">
                                    <div class="inputField">
                                        <label>Your Name</label>
                                        <input type="text" name="first_name" placeholder="First name...">
                                    </div>
                                    @error('first_name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <div class="inputField">
                                        <label>Your Email</label>
                                        <input type="email" name="email" placeholder="E-mail...">
                                    </div>
                                    @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <div class="inputField">
                                        <label>Your Phone Number</label>
                                        <input type="tel" name="phone_number" placeholder="Phone...">
                                    </div>
                                    @error('phone_number')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <div class="inputField">
                                        <label>Password</label>
                                        <input type="password" id="password" name="password" placeholder="Password...">
                                    </div>
                                    @error('password')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="tab">
                            <div class="row">
                                <div class="col-12">
                                    <div class="inputField">
                                        <label>Referrer Code (Optional)</label>
                                        <input type="text" name="referrer_code">
                                    </div>
                                    @error('referrer_code')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <div class="inputField">
                                        <label>Card Details</label>
                                        <div id="card-element"><!-- A Stripe Element will be inserted here. --></div>
                                    </div>
                                    <div id="card-errors" role="alert"></div>
                                </div>
                                <div class="col-12 mt-3">
                                    <p>To complete your registration, you must subscribe to our lifetime membership
                                        plan.</p>
                                    <p>The membership fee is $20.</p>
                                </div>
                            </div>
                        </div>

                        <div style="overflow:auto;">
                            <div class="d-flex flex-column align-items-center">
                                <button type="button" id="prevBtn" class="themeBtn themeBtn--secondary mt-3 w-100"
                                        onclick="nextPrev(-1)">Previous
                                </button>
                                <button type="button" id="nextBtn" class="themeBtn w-100 mt-3" onclick="nextPrev(1)">
                                    Next
                                </button>
                                <button type="submit" id="submitBtn" class="themeBtn w-100 mt-3" style="display: none">
                                    Submit
                                </button>
                            </div>
                        </div>

                        <!-- Circles which indicates the steps of the form: -->
                        <div style="text-align:center;margin-top:40px;">
                            <span class="step"></span>
                            <span class="step"></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('script')
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        var currentTab = 0;
        showTab(currentTab);

        function showTab(n) {
            var x = document.getElementsByClassName("tab");
            x[n].style.display = "block";
            if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
            } else {
                document.getElementById("prevBtn").style.display = "inline";
            }
            if (n == (x.length - 1)) {
                document.getElementById("submitBtn").style.display = "block";
                document.getElementById("nextBtn").style.display = "none";
            } else {
                document.getElementById("nextBtn").innerHTML = "Next";
            }
            fixStepIndicator(n);
            validatePassword();
        }

        function nextPrev(n) {
            var x = document.getElementsByClassName("tab");
            if (n == 1 && !validateForm()) return false;
            x[currentTab].style.display = "none";
            currentTab = currentTab + n;
            if (currentTab >= x.length) {
                document.getElementById("regForm").submit();
                return false;
            }
            showTab(currentTab);
        }

        function validateForm() {
            var x, y, i, valid = true;
            x = document.getElementsByClassName("tab");
            y = x[currentTab].getElementsByTagName("input");
            for (i = 0; i < y.length; i++) {
                if (y[i].value == "" && y[i].name != "referrer_code") {
                    y[i].className += " invalid";
                    valid = false;
                } else {
                    y[i].classList.remove("invalid");
                }
            }
            if (valid) {
                document.getElementsByClassName("step")[currentTab].className += " finish";
            }
            return valid;
        }

        function fixStepIndicator(n) {
            var i, x = document.getElementsByClassName("step");
            for (i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            x[n].className += " active";
        }

        function validatePassword() {
            var password = document.getElementById('password').value;
            var nextBtn = document.getElementById('nextBtn');
            if (password.length < 8) {
                nextBtn.classList.add('disabled-btn');
            } else {
                nextBtn.classList.remove('disabled-btn');
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            const stripe = Stripe('pk_test_0rY5rGJ7GN1xEhCB40mAcWjg');
            const elements = stripe.elements();
            const card = elements.create('card');
            card.mount('#card-element');

            const form = document.getElementById('regForm');
            form.addEventListener('submit', async function (event) {
                event.preventDefault();

                document.querySelector('.preloader').style.display = 'block';

                const {token, error} = await stripe.createToken(card);

                if (error) {
                    document.getElementById('card-errors').textContent = error.message;
                    document.querySelector('.preloader').style.display = 'none';
                } else {
                    const formData = new FormData(form);
                    formData.append('stripeToken', token.id);

                    fetch('{{ route('user.register') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: formData,
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.error) {
                                document.getElementById('card-errors').textContent = data.error;
                            } else if (data.code == 403) {
                                toastr.error('Given referral code is invalid!')
                            } else {
                                window.location.href = data.redirect_url;
                            }
                        })
                        .catch(error => {
                            document.getElementById('card-errors').textContent = 'An error occurred. Please try again.';
                        })
                        .finally(() => {
                            document.querySelector('.preloader').style.display = 'none';
                        });
                }
            });

            document.getElementById('password').addEventListener('input', validatePassword);
        });
    </script>



@endsection