@if (auth()->check() && !auth()->user()->is_subscribe)
    <script>
        // Function to show the newsletter modal
        function showNewsletterModal() {
            var modal = document.getElementById("newsletterModal");
            var overlay = document.getElementById("modalOverlay");

            modal.style.display = "block";
            overlay.style.display = "block";

            var closeButton = document.querySelector(".modal-header .close");

            closeButton.addEventListener("click", function () {
                // Show SweetAlert popup when the close button is clicked
                Swal.fire({
                    title: "<span style='font-weight: bold;color: #f8f9fa;'>Are you already subscribed?</span>",
                    html: "<span style='color: #f8f9fa;'>If you are already subscribed, you can stop seeing this popup.</span>", 
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d4af37", // Gold color for "Already Subscribed"
                    cancelButtonColor: "#d33", // Red color for "Later"
                    confirmButtonText: "<b>Already Subscribed</b>",
                    cancelButtonText: "<b>Later</b>",
                    background: "#333", // Dark background
                    color: "#fff", // White text color
                    customClass: {
                        container: 'dark-theme', // Custom class for dark theme
                        confirmButton: 'confirm-button',
                        cancelButton: 'cancel-button'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Store a value in a cookie to hide the modal for the next 1 month
                        let now = new Date();
                        let expirationDate = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000); // 1 month from now
                        let expires = "expires=" + expirationDate.toUTCString();
                        document.cookie = "newsletterSubscribed=true; " + expires + "; path=/";
                        modal.style.display = "none";
                        overlay.style.display = "none";
                    } else {
                        // Store a value in a cookie to hide the modal for the next 10 minutes
                        let now = new Date();
                        let expirationDate = new Date(now.getTime() + 10 * 60 * 1000); // 10 minutes from now
                        let expires = "expires=" + expirationDate.toUTCString();
                        document.cookie = "newsletterSubscribedLater=true; " + expires + "; path=/";
                        modal.style.display = "none";
                        overlay.style.display = "none";
                    }
                });
            });
        }

        // Function to check for the presence of a cookie
        function getCookie(name) {
            let value = `; ${document.cookie}`;
            let parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }

        // Show newsletter modal on page load if not subscribed
        window.onload = function () {
            if (!getCookie('newsletterSubscribed') && !getCookie('newsletterSubscribedLater')) {
                showNewsletterModal();
            }
        };

        // Show newsletter modal every 10 minutes if not subscribed and not "Later"
        setInterval(function () {
            if (!getCookie('newsletterSubscribed') && !getCookie('newsletterSubscribedLater')) {
                showNewsletterModal();
            }
        }, 10 * 60 * 1000); // 10 minutes in milliseconds
    </script>
@endif



@if (session('success_message'))
    <script>
        // Script to show success message using SweetAlert
        Swal.fire({
            icon: 'success',
            title: '{{ session('success_message') }}',
            showConfirmButton: false,
            timer: 4000,
            timerProgressBar: true,
            background: '#333', // Dark background
            color: '#f8f9fa', // Light text color
            html: '<div style="font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; color: #f8f9fa;">Welcome. You have now officially joined the circle.</div>',
            footer: '<span style="color: #28a745;">Thank you for subscribing.</span>', // Green text for footer
            customClass: {
                container: 'dark-theme', // Custom class for dark theme
                title: 'success-title',
                htmlContainer: 'success-html',
                footer: 'success-footer'
            }
        });
    </script>
@endif
<style>
    .success-title {
        color: #f8f9fa !important;
    }

    .success-html {
        color: #f8f9fa !important;
    }

    .success-footer {
        color: #28a745 !important; /* Green color for footer */
    }
    /* Dark theme for SweetAlert */
    .swal2-container.dark-theme {
        background: #69626238 !important;
        color: #fff !important;
    }

    .swal2-confirm.btn {
        background: linear-gradient(90deg, #d4af37, #e9c68d) !important;
        border: none !important;
        color: #fff !important;
        font-weight: bold;
    }

    .swal2-cancel.btn {
        background: linear-gradient(90deg, #d33, #b22222) !important;
        border: none !important;
        color: #fff !important;
        font-weight: bold;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        display: none;
    }

    .modal {
        position: fixed;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1050;
        display: none;
        background-color: #5b5b5e00;
        color: #fff;
        border-radius: 5px;
    }

    .modal-header {
        background-color: #444;
        border-bottom: 1px solid #555;
    }

    .modal-title {
        font-size: 24px;
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .modal-body {
        background-color: #333;
    }

    .form-input {
        background-color: #444;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .form-check-input {
        background-color: #444;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .form-check-label {
        color: #aaa;
    }

    .btn-dark {
        background-color: #343a40;
        color: #ffffff;
        transition: background-color 0.3s, color 0.3s;
        overflow: hidden;
        position: relative;
    }

    .btn-dark::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, #e9c68d, transparent);
        transition: left 0.3s; /* Adjust transition duration here */
    }

    .btn-dark:hover::before {
        left: 100%;
    }

    .btn-dark:hover {
        color: #000000;
    }

    .text-light-muted {
        color: rgba(255, 255, 255, 0.7);
    }

    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }

    .offer-text {
        font-family: 'Roboto', sans-serif;
        background: linear-gradient(to right, #ffd700, #cbbaba);
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;
        animation: blink 1.5s infinite;
        text-align: center;
        margin-bottom: 15px;
    }
</style>

<div class="overlay" id="modalOverlay">
    <div class="modal" id="newsletterModal">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header bg-dark">
                    <h5 class="modal-title text-center" id="newsletterModalLabel">
                        S<span style="color: rgb(148, 147, 143)">u</span>bscribe <u style="text-shadow: 0 0 3px rgb(148, 147, 143);">to</u> Our <span style="color: rgb(148, 147, 143)">Ne</span>wsletter
                    </h5>
                    <button type="button" class="close text-light" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center" style="margin-top: -15px">
                        <img src="{{ asset('/images/odell/bread winner/New logo/BWC_Logo_Gold.webp') }}"
                             alt="AI Logo" height="100px" width="75px" loading="lazy">
                    </div>
                    <div class="offer-text"> Subscribe our newsletter Get 10% off! Stay updated with our deals.</div>
<form action="{{ route('subscribe') }}" method="POST">
    @csrf
    <div class="form-group">
        <input type="email" name="email" id="email" class="form-control form-input" placeholder="Enter your email address" required>
    </div>
    <div class="form-check">
         @error('email')
                            <div class="text-danger" style="font-size: 0.8em; margin-top: 5px;">{{ $message }}</div>
                            @enderror
        <input class="form-check-input" type="checkbox" name="consentCheck" id="consentCheck" value="1" required>
        <label class="form-check-label text-light-muted" for="consentCheck">
            I agree to receive emails and offers.
        </label>
    </div>
    <div class="text-center">
        <button type="submit" class="btn btn-dark btn-block">Subscribe Now</button>
    </div>
</form>
                                       
<small class="form-text text-light-muted" style="text-align: justify; font-size:10px;">
    By entering your email and submitting the form, you consent to receive marketing emails from Bread Winners Circle at the email provided. Get exclusive offers, discounts, and coupons directly to your inbox! Join the circle to stay updated and enjoy special member-only benefits. You can unsubscribe at any time using the link provided in our emails.
</small>


                    <small class="text-light-muted" style="font-size: 10px; position: absolute; right: 0; bottom: 0;">@Bwcclothing&nbsp;</small>
                </div>
            </div>
        </div>
    </div>
</div>