@extends('layout.app')
@section('content')
    <style>
        .aboutpgMain {
            padding-top: 300px; /* Adjust the padding to ensure the logo does not conflict with the section */
        }
    </style>

    {{--    <div class="preLoader black">--}}
    {{--        <img src="{{asset('images/logo.webp')}}" alt="img" class="filterLight">--}}
    {{--    </div>--}}
    {{--    <div class="preLoader white"></div>--}}

    {{--    <section class="innerBanner">--}}
    {{--        <img src="{{asset('images/inrbg.webp')}}" class="w-100" alt="img">--}}
    {{--        <div class="container">--}}
    {{--            <h2>Sporting Clay</h2>--}}
    {{--        </div>--}}
    {{--    </section>--}}
    <div id="app">


        <section class="aboutpgMain sportingclaypg">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <figure><img src="{{ optional($sporting->getMedia('sport_image')->first())->getUrl() }}"
                                     class="img-fluid" alt="img"></figure>
                    </div>
                    <div class="col-md-5">
                        <div class="sportingContent">
                            <span class="subtitle" data-aos="fade-up">{{$data->heading ?? ''}}</span>
                            <h2 class="heading" data-aos="fade-up">{{$data->title ?? ''}}</h2>
                            <p>{!!  $data->sport_description ?? ''!!} </p>
                            <div data-aos="fade-up">
                                <a href="{{ route('front.contact') }}" class="themeBtn blackbtn">Contact Us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <section class="sportngPackage">

            <div class="container">
                <div class="row justify-content-center">
                    <img class="memberchart" src="{{ asset('images/MembershipChart.png') }}" alt=0"">
                </div>
            </div>
        </section>

        <section class="sportngPackage">

            <div class="container">
                <h2 class="heading text-center mb-5">{{$data->packages_title ?? ''}}</h2>
                <div class="row justify-content-center">

                    @foreach($packages as $package)
                        <div class="col-md-4">
                            <div class="silverCard silverPckg">
                                <h3>{{$package->name}}:</h3>
                                <h4>${{$package->price}}</h4>
                                {{--                                <p>{!!  $package->description !!}</p>--}}
                                <div data-aos="fade-up">
                                    @if(Auth::check() && Auth::user()->roles->first()->name === 'user')
                                        <button type="button" class="themeBtn blackbtn click_ewaiver"
                                                data-toggle="modal"
                                                data-target="#ewaiverModal" data-package_id="{{ $package->id ?? '' }}">
                                            Join Now
                                        </button>
                                    @else
                                        <button type="button" class="themeBtn blackbtn click_pkg" data-toggle="modal"
                                                data-target="#ewaiverModal" data-package_id="{{ $package->id ?? '' }}">
                                            Join Now
                                        </button>
                                    @endif

                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- E-Waiver Form Modal -->
        <div id="ewaiverModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ewaiverModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ewaiverModalLabel">E-Waiver Form</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <a href="https://app.waiverelectronic.com/render/templateByRefId/639008cb705482f0c77ff9b6"
                           target="_blank" id="eWaiverLink">Click here to fill out the E-Waiver Form</a>
                        <p>
                            <label>
                                <input type="checkbox" id="checkoutCheckbox"/>
                                <span>I agree to proceed to checkout/payment</span>
                            </label>
                        </p>
                        {{--                        <p>Package ID: <span id="ewaiverPackageIdDisplay"></span></p>--}}
                        <input type="hidden" id="ewaiverPackageId" name="package_id">

                    </div>
                    @if(Auth::check() && Auth::user()->roles->first()->name === 'user')
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="newnextButton">Next</button>
                        </div>
                    @else
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" id="nextButton">Next</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>


        <!-- Your existing scripts here -->
        <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="paymentModalLabel">Payment Details</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {{--                    <form method="post" action="{{ route('front.subscribe.now') }}">--}}
                    {{--                        @csrf--}}
                    {{--                        <input type="hidden" id="paymentPackageId" name="package_id">--}}

                    {{--                        <div class="package_id"></div>--}}
                    {{--                        <div class="clover_plan_id"></div>--}}
                    {{--                        <i class="clover_plan_id" ></i>--}}
                    {{--                        <div class="modal-body">--}}
                    {{--                            <div class="row gx-3">--}}
                    {{--                                <div class="col-12">--}}
                    {{--                                    <div class="d-flex flex-column">--}}
                    {{--                                        <p class="text mb-1">Person Name</p>--}}
                    {{--                                        <input class="form-control mb-3" type="text" placeholder="Name"--}}
                    {{--                                               value="{{ old('name') }}" name="name" required>--}}
                    {{--                                        @error('name')--}}
                    {{--                                        <span class="text-danger">{{ old('name') ? '' : $message }}</span>--}}
                    {{--                                        @enderror--}}
                    {{--                                    </div>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-12">--}}
                    {{--                                    <div class="d-flex flex-column">--}}
                    {{--                                        <p class="text mb-1">Card Number</p>--}}
                    {{--                                        <input class="form-control mb-3" id="card_number" type="text"--}}
                    {{--                                               placeholder="12345678435678"   name="card_number" required>--}}
                    {{--                                        @error('card_number')--}}
                    {{--                                        <span class="text-danger">{{ old('card_number') ? '' : $message }}</span>--}}
                    {{--                                        @enderror--}}
                    {{--                                    </div>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-6">--}}
                    {{--                                    <div class="d-flex flex-column">--}}
                    {{--                                        <p class="text mb-1">Expiry</p>--}}
                    {{--                                        <input class="form-control mb-3" id="input_expiry" maxlength="7" type="text"--}}
                    {{--                                               placeholder="MM/YYYY" name="expiry_date" required>--}}
                    {{--                                        @error('expiry_date')--}}
                    {{--                                        <span class="text-danger">{{ old('expiry_date') ? '' : $message }}</span>--}}
                    {{--                                        @enderror--}}
                    {{--                                    </div>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-6">--}}
                    {{--                                    <div class="d-flex flex-column">--}}
                    {{--                                        <p class="text mb-1">CVV/CVC</p>--}}
                    {{--                                        <input class="form-control mb-3 pt-2" type="password" placeholder="****"--}}
                    {{--                                               name="cvv_number" required>--}}
                    {{--                                        @error('cvv_number')--}}
                    {{--                                        <span class="text-danger">{{ old('cvv_number') ? '' : $message }}</span>--}}
                    {{--                                        @enderror--}}
                    {{--                                    </div>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-12">--}}
                    {{--                                    <div class="btn btn-primary mb-3">--}}
                    {{--                                        <span class="ps-3"></span>--}}
                    {{--                                        <button type="submit" class="fas fa-arrow-right"></button>--}}
                    {{--                                    </div>--}}
                    {{--                                </div>--}}
                    {{--                                <div class="col-12">--}}
                    {{--                                    <button type="submit" class="btn btn-info btn-lg w-100">--}}
                    {{--                                        <span class="fas fa-arrow-right fa-2x btn-block"></span>--}}
                    {{--                                    </button>--}}
                    {{--                                </div>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}

                    {{--                    </form>--}}

                    <form method="post" class="m-3" action="{{ route('front.subscribe.now') }}">
                        @csrf
                        <input type="hidden" id="paymentPackageId" name="package_id">
                        <input type="hidden" id="fortis-token" name="token" value="">

                        <div class="package_id"></div>
                        <div class="clover_plan_id"></div>
                        <i class="clover_plan_id"></i>

                        <div id="payment">
                            <!-- Elements will create input elements here -->
                        </div>

                        <button type="submit" style="display: none" id="sporting-pay-btn" class="btn btn-info btn-lg w-100">
                            <span class="fas fa-arrow-right fa-2x btn-block" id="sporting-pay-btn-icon"></span>
                            <span id="sporting-pay-btn-loader" class="spinner-border spinner-border-sm" style="display: none;" role="status" aria-hidden="true"></span>
                        </button>


                    </form>


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

    <!-- new login form of sporting clay -->
    <div class="loginPopup--js loginPopup modal fade" id="newLoginModal" tabindex="-1" role="dialog"
         aria-labelledby="newLoginModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h4>Login</h4>
                    <form id="newLoginForm" action="{{route('user.login')}}" method="post" class="loginForm"
                          enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="newLoginPackageId" name="package_id">

                        <label for="">Email</label>
                        <input type="email" name="email">
                        @error('email')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                        <label for="">Password</label>
                        <input type="password" name="password">
                        @error('password')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                        <label for="remember" class="radio text-center">
                            <input type="checkbox" id="remember" name="remember">
                            Remember me
                        </label>
                        <button type="submit" class="themeBtn themeBtn--center">Log in</button>
                        <a href="{{route('user.forget.password')}}" class="forgetPasswor d-block">Forgot Password?</a>
                        <p>Don't have an account?</p>
                        <a href="#" class="signUp-btn" id="signUp" data-toggle="modal" data-target="#newSignupModal">Sign
                            up here</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- new register form of sporting clay -->

    <div class="loginPopup modal fade" id="newSignupModal" tabindex="-1" role="dialog"
         aria-labelledby="newSignupModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h4>Sign Up</h4>
                    <form id="newSignupForm" action="{{route('user.register')}}" method="post" class="loginForm"
                          enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="newSignupPackageId" name="package_id">

                        <div class="row">
                            <div class="col-lg-6">
                                <label for="">First Name</label>
                                <input type="text" name="f_name">
                                @error('f_name')
                                <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <label for="">Last Name</label>
                                <input type="text" name="l_name">
                                @error('l_name')
                                <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-12">
                                <label for="">Phone Number</label>
                                <input type="number" name="phone">
                                @error('phone')
                                <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-12">
                                <label for="">Email</label>
                                <input type="email" name="email">
                                @error('email')
                                <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-lg-12">
                                <label for="">Password</label>
                                <input type="password" name="password">
                                @error('password')
                                <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <button type="submit" class="themeBtn themeBtn--center">Sign Up</button>
                        <p>Already have an account?</p>
                        <a href="#" class="signIn-btn" data-toggle="modal" data-target="#newLoginModal">Login Now</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://js.sandbox.fortis.tech/commercejs-v1.0.0.min.js"></script>

    <script>

        $(document).ready(function () {
            var elements = new Commerce.elements('{{ $clientToken }}');

            elements.create({
                container: '#payment',
                theme: 'default',
                environment: 'sandbox',
            });

            elements.on('done', function (event) {
                console.log("result", event);
                if (event.data.id) {
                    const token = event.data.id;
                    $('#fortis-token').val(token);
                    $('#sporting-pay-btn').css('display', 'block');
                } else {
                    alert('Something went wrong');
                }
            });

            $('#sporting-pay-btn').on('click', function () {
                $('#sporting-pay-btn-icon').hide();

                $('#sporting-pay-btn-loader').show();
            });
        });


        document.addEventListener('DOMContentLoaded', () => {
            const eWaiverLink = document.getElementById('eWaiverLink');
            const checkoutCheckbox = document.getElementById('checkoutCheckbox');
            const nextButton = document.getElementById('nextButton');
            const newnextButton = document.getElementById('newnextButton');

            let linkClicked = false;

            // Handle link click
            eWaiverLink.addEventListener('click', () => {
                linkClicked = true;
                checkEnableButton();
            });

            // Handle checkbox change
            checkoutCheckbox.addEventListener('change', () => {
                checkEnableButton();
            });

            // Function to check if button should be enabled
            function checkEnableButton() {
                if (linkClicked && checkoutCheckbox.checked) {
                    nextButton.disabled = false;
                    newnextButton.disabled = false; // Enable newnextButton
                } else {
                    nextButton.disabled = true;
                    newnextButton.disabled = true; // Disable newnextButton
                }
            }
        });

    </script>
    <script>
        const signUp = document.getElementById('signUp');
        const loginPopup = document.querySelector(".loginPopup--js");

        signUp.addEventListener('click', () => {
            loginPopup.classList.add('d-none')
        })

        document.addEventListener('DOMContentLoaded', () => {
            const paymentModalClose = document.querySelector("#paymentModal .close");

            paymentModalClose.addEventListener('click', () => {
                const modalBackdrops = document.querySelectorAll(".modal-backdrop");
                modalBackdrops.forEach(backdrop => {
                    backdrop.remove();  // Remove the backdrop element
                });
            });
        });
    </script>
    <script>

        $(document).ready(function () {

            // Set package ID for Signup and Login modals
            $('.click_pkg, .click_ewaiver').on('click', function () {
                var packageId = $(this).data('package_id');
                console.log('Package ID:', packageId, this); // Debugging line

                // if ($(this).hasClass('click_ewaiver')) {
                $('#ewaiverPackageId').val(packageId);
                $('#ewaiverPackageIdDisplay').text(packageId); // Display package ID
                // }

                if ($(this).hasClass('click_pkg')) {
                    $('#newLoginPackageId').val(packageId);
                    $('#newSignupPackageId').val(packageId);
                }

                // Ensure that both modals get the correct package ID
                // $('#newLoginPackageId').val(packageId);
            });

            // Handle the next button in the E-Waiver form modal
            $('#nextButton').on('click', function () {
                if ($('#checkoutCheckbox').is(':checked')) {
                    $('#ewaiverModal').modal('hide');
                    $('#newLoginModal').modal('show');
                    $('#newLoginPackageId').val($('#ewaiverPackageId').val()); // Set package ID from E-Waiver to Login
                    $('#newSignupPackageId').val($('#ewaiverPackageId').val()); // Set package ID from E-Waiver to Signup
                } else {
                    alert('Please agree to proceed to checkout/payment.');
                }
            });

            $('#newnextButton').on('click', function () {
                if ($('#checkoutCheckbox').is(':checked')) {
                    $('#ewaiverModal').modal('hide');
                    $('#paymentModal').modal('show');
                    $('#paymentPackageId').val($('#ewaiverPackageId').val()); // Set package ID from E-Waiver to Payment
                } else {
                    alert('Please agree to proceed to checkout/payment.');
                }
            });

            // Handle signup form submission
            $('#newSignupForm').on('submit', function (event) {
                event.preventDefault();

                var formData = $(this).serialize();
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('#newSignupModal').modal('hide'); // Hide signup modal

                            if (response.package_id) {
                                $('#paymentModal').modal('show'); // Show payment modal
                                $('#paymentPackageId').val(response.package_id); // Set package ID in payment modal
                            } else {
                                window.location.href = response.redirect; // Redirect if no package ID
                            }
                        }
                    },
                    error: function (xhr) {
                        var errors = xhr.responseJSON.errors;
                        for (var field in errors) {
                            alert(errors[field][0]);
                        }
                    }
                });
            });

            // Handle login form submission
            $('#newLoginForm').on('submit', function (event) {
                event.preventDefault();

                var formData = $(this).serialize();
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('#newLoginModal').modal('hide'); // Hide login modal

                            if (response.package_id) {
                                $('#paymentModal').modal('show'); // Show payment modal
                                $('#paymentPackageId').val(response.package_id); // Set package ID in payment modal
                            } else {
                                window.location.href = response.redirect; // Redirect if no package ID
                            }
                        }
                    },
                    error: function (xhr) {
                        var errors = xhr.responseJSON.errors;
                        for (var field in errors) {
                            alert(errors[field][0]);
                        }
                    }
                });
            });
        });

    </script>

@endsection