<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    {{-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> --}}


    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
        integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css"
        integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
        integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css"
        integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="{{ asset('resources/views/Admin/pages/subscriptions/subscription-style.css') }}" />


    <title>List Of Products</title>

</head>
<style>
    @media screen and (max-width: 767px) {
        .footer .d-flex img {
            width: 40px;
            margin-right: 10px;
        }

        .footer {
            align-items: center;
            background: #000;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            color: #fff;
        }

        .footer p {
            font-size: 13px;
        }

        .footer a {
            font-size: 12px;
            border: 1px solid #fff;
            padding: 3px 8px;
            border-radius: 20px;
        }

        body {
            /* height: 100vh; */
        }

        section.new-subs-main {
            min-height: 100vh;
        }
    }
</style>


<body>
    <section class="new-subs-main">
        <div class="container">
            <div class="col-md-12">
                @if (session('success'))
                    <div class="alert alert-success" id="alert-success">
                        {{ session('success') }}
                    </div>
                @endif

            </div>
            <div class="col-md-12">
                @if (session('error'))
                    <div class="alert alert-danger" id="alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

            </div>
            {{-- <h3 class="comm-head mt-3 d-flex gap-2" style="font-size: 20px;">
                <a href="#">
                    <img src="images/arrow-left.png" alt="">

                    <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/arrow-left.png') }}" />
                </a>
            </h3> --}}
            <div class="new-subs-img">
                <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/cheers-logo.png') }}"
                    alt="">
            </div>
            <p class="text-center mt-3 para-mid">Subscribe to Cheers to the Season to gain access to free drinks with your meal purchase at local restaurants.
            </p>
            <p class="text-center mt-3 grey-para">*Free drink stipulations vary by state in accordance with local
                liquor
                laws.</p>
            <div class="subscription-card">
                <h3 class="head">Subscription</h3>
                <div class="main-text">
                    <div>
                        <p class="comm-head">Monthly Plan</p>
                        <p class="grey-para">Billed Monthly</p>
                    </div>
                    <div>
                        <p class="price">${{ $productList->product_value }}</p>
                    </div>
                </div>
                <hr class="my-5" style="border-top: 2px dashed; color: #042857;">
                <div class="input-group d-flex align-items-center justify-content-between">
                    <div class="in-group">
                        <label class="comm-head" for="">Enter Referral Code</label>
                    </div>
                    <div class="apply-btn">


                        <button class="apply" type="button" onclick="applyReferralCode()">Apply</button>
                    </div>
                    <input type="text" class="form-control coupon-input mt-3"
                        name ="referral_code" id="referral_code" placeholder="Enter Referral Code" oninput="this.value = this.value.toUpperCase().replace(/\s/g, '')" maxlength="15">

                    <input type="hidden" class="form-control coupon-input mt-3" name ="iam_principal_xid"
                        id="iam_principal_xid" value="{{ $userData->id }}">


                </div>
                <div id="result-message" class="mt-3"></div>
                <div id="loader" style="display: none;">Loading...</div>

                <hr>
                {{-- <div class="main-text">
                    <div>
                        <p class="comm-head">Applied Discount</p>
                        <p class="grey-para">First Month free </p>
                    </div>

                    <div>
                        <p class="price">$2.99</p>
                    </div>
                </div>
                <hr> --}}
                <form id="subscribe" method="POST" action="{{ route('subscribe-to-plan') }}" autocomplete="off">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ $userData->id }}" />
                    <input type="hidden" name="subscription_product_xid" value="{{ $productList->id }}" />
                    <input type="hidden" name="referral_user_id" id="referral_user_id" />
                    <input type="hidden" name="referral_code_to_check" id="referral_code_to_check" />

                    <div class="main-text">
                        <div>
                            <p class="comm-head">Total Payment</p>
                        </div>

                        <div>
                            <p class="price">${{ $productList->product_value }}</p>
                        </div>
                    </div>
                    <button type="submit" class="subscribe-button w-75">SUBSCRIBE NOW</button>
                    <div id="loadingMessage" style="display: none;">Please wait...</div>
                </form>
                {{-- <button class="subscribe-button w-75" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">SUBSCRIBE NOW</button> --}}
                <p class="grey-para text-center mt-3" id="isCodeNotApplied" style="display: block;">

                    You will be charged ${{ $productList->product_value }} every month. Subscription will be renewed until cancelled.
                </p>
                {{-- <p class="grey-para text-center mt-2">Subscription will be renewed monthly until cancelled.</p> --}}
                <p class="grey-para text-center mt-3" id="isCodeApplied" style="display: none;">
                Your coupon code has been entered successfully.<br /> You will be charged ${{ $productList->product_value }} after your free trial period. Subscription will be renewed until cancelled.
            </p>
            </div>
        </div>
    </section>

    <section class="mt-3 mb-5">
        <h3 class="text-center head my-4">Program/Redemption Rules</h3>
        <div class="container">
            <div data-ui-tablist class="ui-accordion ui-accordion--outlined" data-ui-transition="collapse-fade">
                @foreach ($faqs as $faq)
                    <div class="ui-accordion-item">
                        <button data-ui-tablist-tab class="ui-accordion-header">{{ $faq->question }}</button>
                        <div data-ui-tablist-tabpanel {{ $loop->first ? '' : 'hidden' }}>
                            <div class="ui-accordion-body">
                                {{ $faq->answers }}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <footer>
        <div class="footer">
            <div class="d-flex">
                <img src="{{ asset('https://www.wdipl.com/public/img/black_logo.svg') }}" />
                <p>Enjoying the App?<br> Want to build your own?</p>
            </div>
            <a href="https://www.wdipl.com/contact-us" target="_blank">Contact WDI</a>
        </div>
    </footer>


    <!-- Modal start -->
    <div class="modal fade bottom-mod" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/x.svg') }}"
                            alt="">
                    </button>
                </div>
                <div class="modal-body mb-4">
                    <div class="mod-img d-flex align-items-center justify-content-center mb-3">
                        <img src="{{ asset('resources/views/Admin/pages/subscriptions/images/glass.png') }}"
                            alt="">
                    </div>
                    <p class="para-mid text-center">You have successfully subscribed. Cheers!</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal end -->


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>

    <script>
        document.getElementById('subscribe').addEventListener('submit', function() {
            // Show the loading message
            //   document.getElementById('loadingMessage').style.display = 'block';

            // Disable the submit button to prevent multiple submissions
            document.querySelector('.subscribe-button').disabled = true;

            // Optionally, change the button text to indicate loading
            document.querySelector('.subscribe-button').innerText = 'Please wait...';
        });
    </script>
    <script type="module">
        import {
            Tablist
        } from "https://cdn.jsdelivr.net/npm/jolty@0.6.2/dist/jolty.esm.min.js";
        document.addEventListener('DOMContentLoaded', () => {
            Tablist.initAll();
        });
    </script>

    <script>
        $(document).ready(function() {
            // Hide the alert after 3 seconds (3000 milliseconds)
            setTimeout(function() {
                $('#alert-success').fadeOut('slow');
            }, 3000);
            setTimeout(function() {
                $('#alert-danger').fadeOut('slow');
            }, 3000);
        });
    </script>
    <script>
        url_path = "{{ url('/') }}";
    </script>
    <script>
        function applyReferralCode() {
            var referralCode = document.getElementById('referral_code').value;
            console.log("referralCode", referralCode);
            var currentUserId = document.getElementById('iam_principal_xid').value;

            var loader = document.getElementById('loader');
            var resultMessage = document.getElementById('result-message');
            var referralUserIdToStore = document.getElementById('referral_user_id');
            var referralCodeToCheck = document.getElementById('referral_code_to_check');

                // Show the loader
            loader.style.display = 'block';

            resultMessage.innerHTML = '';
            let base_url = url_path;

            if (referralCode == null || referralCode == '') {

                toastr.error('Please enter Referral Code');
                setTimeout(function() {

                }, 100000)
                // alert('kindly apply referral code');
                loader.style.display = 'none';
                return false;
            }
            $.ajax({
                url: base_url + '/apply-referral-code',
                type: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token
                },
                data: JSON.stringify({
                    referral_code: referralCode,
                    current_iam_principal_xid: currentUserId
                }),
                processData: false,
                contentType: false,
                success: function(result) {
                    if (result.success) {
                        console.log("Result",result);
                        document.getElementById('isCodeNotApplied').style.display = 'none';
                        document.getElementById('isCodeApplied').style.display = 'block';

                        resultMessage.innerHTML =
                            '<span class="text-success">Successfully applied referral code!</span>';

                        referralUserIdToStore.value = result.referralUserId;

                        referralCodeToCheck.value = result.referral_code;
                        loader.style.display = 'none';
                    } else {
                        resultMessage.innerHTML = '<span class="text-danger">Invalid referral code.</span>';
                        loader.style.display = 'none';
                    }

                },
                error: function(xhr, status, error) {
                    toastr.error('Something went Wrong');
                    setTimeout(function() {
                        loader.style.display = 'none';
                    }, 4000)
                    // alert('something went wrong');

                    // toastr.error('Something went wrong');
                    // $('#update_location').attr('disabled', false);
                    // $('#update_location').text('Save');
                }
            });

            // AJAX request
            // fetch('/apply-referral-code', {
            //         method: 'POST',
            //         headers: {
            //             'Content-Type': 'application/json',
            //             'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include CSRF token
            //         },
            //         body: JSON.stringify({
            //             referral_code: referralCode
            //         })
            //     })
            //     .then(response => response.json())
            //     .then(data => {
            //         // Hide the loader
            //         loader.style.display = 'none';

            //         // Show the result message
            //         if (data.success) {
            //             resultMessage.innerHTML =
            //                 '<span class="text-success">Successfully applied referral code!</span>';
            //         } else {
            //             resultMessage.innerHTML = '<span class="text-danger">Invalid referral code.</span>';
            //         }
            //     })
            //     .catch(error => {
            //         loader.style.display = 'none';
            //         resultMessage.innerHTML = '<span class="text-danger">An error occurred. Please try again.</span>';
            //     });
        }
    </script>

</body>


</html>
