{{-- Loader Call--}}
<div class="overlay d-none" id="inside-loader">
    <div class="overlay__inner">
        <div class='pac-man'></div>
        <div class="overlay__content d-none"><span class="spinner"></span></div>
    </div>
</div>
{{--Loader End--}}
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="wrapper login-page">
            <div class="container">
                <div class="order-steps-section">
                    <div class="steps-box-outer">
                        <div class="steps-box active">
                            <div class="steps-box-inner">
                                <div class="section-title">
                                    <h4 class="modal-title">{{__trans('sign_in_to_your_account')}}</h4>
                                </div>
                                <div class="login-tabs">
                                    <ul>
                                        <li>
                                            <a href="#"  data-tab="register-tab">{{ __trans('new_customer') }}</a>
                                        </li>
                                        <li class="active">
                                            <a href="#"  data-tab="login-tab">{{ __trans('returning_customer') }}</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="tab-content">
                                    <!-- Registration Form -->
                                    <div id="register-tab" class="tab-pane">
                                        <form id="registerForm" action="{{route('frontend.customer.authorise.postRegisterDetails')}}" method="POST">
                                            @csrf
                                            <div class="steps-box-form-inner">
                                                <div class="form-group">
                                                    <label>Name</label>
                                                    <input type="text" class="form-control" name="name">
                                                </div>
                                                <div class="form-group">
                                                    <label>Email Address</label>
                                                    <input type="text" class="form-control" name="email">
                                                </div>
                                                <div class="form-group">
                                                    <label>Password</label>
                                                    <input id="password-register-field" type="password" class="form-control" name="password">
                                                    <span toggle="#password-register-field" class="fa fa-fw fa-eye-slash field-icongk toggle-password-register"></span>
                                                </div>
                                                <div class="login-terms">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox" value="1" name="refund_policy" id="term-n-condition">
                                                                    <label class="form-check-label" for="term-n-condition">I agree to receive discount coupons, exclusive offers, and the latest news by email, SMS, phone, and other electronic</label>
                                                                </div>
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox" value="1" name="term_n_condition" id="privacy-policy">
                                                                    <label class="form-check-label" for="privacy-policy">I agree to the <a href="#">Terms & Conditions</a> and <a href="#">Privacy Policy</a></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="steps-box-bottom-btn-outer">
                                                <button class="btn btn-main w-100" id="registerButton">{{__trans('create_Account_&_Sign_In')}}</button>
                                            </div>
                                        </form>
                                    </div>

                                    <!-- Login Form -->
                                    <div id="login-tab" class="tab-pane active">
                                        <form  id="loginForm" action="{{route('frontend.customer.authorise.postLoginDetails')}}" method="POST">
                                            @csrf
                                            <div class="steps-box-form-inner">
                                                <div class="form-group">
                                                    <label>Email Address</label>
                                                    <input type="text" class="form-control" name="email">
                                                </div>
                                                <div class="form-group">
                                                    <label>Password</label>
                                                    <input id="password-login-field" type="password" class="form-control" name="password">
                                                    <span toggle="#password-login-field" class="fa fa-fw fa-eye-slash field-icongk toggle-password-login"></span>
                                                </div>
                                                <div class="login-forget">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1">
                                                                    <label class="form-check-label" for="flexCheckDefault1">Remember me</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group text-md-end">
                                                                <label><a href="{{ route('frontend.forgot-password-modal') }}" class="btn">Forgot Password?</a></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="steps-box-bottom-btn-outer">
                                            <button class="btn btn-main w-100" id="loginButton">Login</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('.login-tabs a').click(function (e) {
            e.preventDefault();
            var tabId = $(this).data('tab');
            $('.tab-pane').hide();
            $('#' + tabId).show();
            $('.login-tabs li').removeClass('active');
            $(this).closest('li').addClass('active');
        });
    });
</script>
<script>
        document.getElementById('loginButton').addEventListener('click', function(event) {
        event.preventDefault();
        var form = document.getElementById('loginForm');
        var formData = new FormData(form);
        fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
            .then(response => {
            if (!response.ok) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Details Mismacthed'
                });
        }
            return response.json();
        })
        .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Logged In!',
                text: data.message,
                onClose: function() {
            }
            });
            runCallBackFunction();
    } else {
        Swal.fire({
        icon: 'error',
        title: 'Oops...',
        text: data.message
    });
    }
    })
        .catch(error => {
        console.error('There was an error!', error);
    });
    });
</script>
<script>
    document.getElementById('registerButton').addEventListener('click', function(event) {
        event.preventDefault();
        var form = document.getElementById('registerForm');
        var formData = new FormData(form);
        $('#inside-loader').toggleClass('d-none');
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
            .then(response => {
                if (!response.ok) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Details Mismacthed'
                    });
                }
                $('#inside-loader').toggleClass('d-none');
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Commented things 09-08*2024
                    // document.body.style.pointerEvents = 'none';
                    // $('#exampleModalCenter').modal("show");
                    runCallBackFunction();
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: data.message
                    });
                }
                $('#inside-loader').addClass('d-none');
            })
            .catch(error => {
                console.error('There was an error!', error);
            });
    });
</script>
<script>
    $(".toggle-password-login").click(function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $($(this).attr("toggle"));
        if (input.attr("type") == "password") {
          input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
    $(".toggle-password-register").click(function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $($(this).attr("toggle"));
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
</script>