@extends('fronted.layout.main')
@section('adcontent')
    <style>
        .basic {
            background-color: #9AF3F3;
        }

        .silver {
            background-color: #F0E7E7;
        }

        .gold {
            background-color: #Ffd700;
        }

        .platinum {
            background-color: #E5E4E2;
        }

        .premium {
            background-color: #FF1493;
        }

        .basic-title {
            border: 2px solid #1ee6e7;
            color: #1ee6e7;
        }

        .silver-title {
            border: 2px solid #6c757d;
            color: #6c757d;
        }

        .gold-title {
            border: 2px solid #ffc107;
            color: #ffc107;
        }

        .platinum-title {
            border: 2px solid red;
            color: black;
        }

        .premium-title {
            border: 2px solid red;
            color: black;
        }

        .featureList {
            height: 300px;
            overflow-y: auto;
        }

        .extra-small-text {
            font-size: 0.75rem;
        }

        .custom-blur-effect {
            transition: transform 0.3s ease-in-out;
            /* Smooth transition for the blur effect */
        }

        .custom-blur-effect:hover {
            transform: scale(1.01);
        }

        .discount-modal {
            position: absolute;
            bottom: -14px;
            min-width: 80px;
            text-align: center;
            padding: 3px;
            font-size: 0.8rem;
            right: 5%;
            clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)
        }

        .plan-title-modal {
            position: absolute;
            top: -15px;
            left: 5%;
            padding: 3px;
            border-radius: 5px;
            font-size: 0.9rem;
            background-color: #fff;
        }

        .card-mx-with {
            width: 100%;
        }

        .loading-container {
            margin-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .loading-spinner {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .hight-100vh {
            height: 100vh;
        }
    </style>
    <div class="container hight-100vh">
        <div class="loading-container">
            <div class="spinner-grow" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div class="container my-5 pb-3 bg-light shadow rounded" id="mainSubscriptionContainer">
            <div class="row justify-content-center">
                <div class="col-md-6 text-center">
                    <img src="{{ asset('assets/images/new_hostal_logo.jpg') }}" class="img-fluid w-25" alt="Centered Image">
                </div>
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <div class="mb-4">
                    <!-- <button type="button" id="subscription_Trail_Plan" class="btn btn-warning"></button> -->
                    <a href="{{ route('compare.plan') }}" class="btn btn-light">Compare</a>
                </div>
                <div class="planFilter mb-4">
                    <select class="form-control-sm" name="package_title" id="subscriptionDurationSelect">
                        <i class="fa-solid fa-chevron-circle-down"></i>
                    </select>
                    <select class="form-control-sm" id="subscriptionPlanSelect">
                        <i class="fa-solid fa-chevron-circle-down"></i>
                    </select>
                </div>
            </div>
            <div>
                <div id="subscriptionPlanContainer" class="row my-3 gap-1 g-0 justify-content-center"></div>
            </div>
        </div>
    </div>
    <script>
        function ChangeTotalAmount(value, TaxValue, totalamountInput = "") {
            var totalAmountOndicscount = $("#totalAmountOndicscount");
            var PlansTax = $("#PlansDiscounts").val();
            var TotalAmount = PlansTax * value;
            var TotalTaxAmount = (TotalAmount / 100) * TaxValue;
            $("#TotalPlansAmount").val((TotalAmount + TotalTaxAmount).toFixed(2));
            totalamountInput !== "" ? totalamountInput.val((TotalAmount + TotalTaxAmount).toFixed(2)) : "";
            totalAmountOndicscount.val((TotalAmount).toFixed(2));
        }
        $(document).ready(function() {
            $('.loading-spinner').show();
            $("#mainSubscriptionContainer").hide();
            subscribedPlanId = "";
            let currentSubscriptionDetails;

            function handleFeatureClick(feature) {
                const plansTypes = {
                    "S-mart Basic": "basic",
                    "S-mart Silver": "silver",
                    "S-mart Gold": "gold",
                    "S-mart Platinum": "platinum",
                    "S-mart Premium": "premium"
                };
                const planTitleBorderColor = {
                    "S-mart Basic": "basic-title",
                    "S-mart Silver": "silver-title",
                    "S-mart Gold": "gold-title",
                    "S-mart Platinum": "platinum-title",
                    "S-mart Premium": "premium-title"
                }
                row = $("#subscriptionPlanContainer");
                row.empty();
                feature.forEach(function(package) {
                    var cardFooterMessage;
                    let featureData = JSON.stringify(package);
                    let planTypeColor = plansTypes[package.PackageCategory];
                    var colDiv = $('<div>').addClass('col').css({
                        "max-width": "400px",
                        // "min-width": "410px",
                    });
                    var cardDiv = $(`<div data-details='${featureData}'>`).addClass(
                        'card position-relative addSubscriptionBtn h-100 custom-blur-effect card-mx-with'
                    );
                    var selectedPlanDiv = $('<div>').addClass(
                        "position-absolute extra-small-text p-1 rounded-top text-sm rounded-start-0 p-1 top-0 end-0 bg-success"
                    ).text('Selected');
                    var cardHeaderDiv = $("<div>").addClass(
                        `card-header rounded border-0 ${planTypeColor}  text-black position-relative`);
                    if (subscribedPlanId === package.packagecode) {
                        currentSubscriptionDetails = package;
                        cardHeaderDiv.append(selectedPlanDiv);
                        cardFooterMessage = package.selectedPlandMessage;
                    } else {
                        cardFooterMessage = package.plansFooterMessages[package.PackageCategory];
                    }
                    if (package.package_title === 'Trial') {
                        return;
                    }
                    if (subscribedPlanId != "") {
                        $("#subscription_Trail_Plan").hide();
                    }
                    let planTypeTitleClass = planTitleBorderColor[package.PackageCategory];
                    var discountedDiv = $("<div>").addClass('discount-modal bg-warning').text(package
                        .sub_discount);
                    var planTitelDiv = $('<div>').addClass(`plan-title-modal ${planTypeTitleClass}`).text(
                        package.planTitel);
                    var innerDiv1 = $('<div>').addClass(
                        'd-flex justify-content-between align-items-center mt-3');
                    var priceAmountDiv = $('<div>');

                    var planName = $(`<h5>`).addClass('text-start planName  fw-bold').text(package
                        .PackageCategory);
                    var planPrice = $('<h5>').addClass('text-end planPrice fw-bold m-0 p-0').html(
                        `<i class="fa-solid fa-indian-rupee-sign me-1"></i> ${package.subs_price} /<i class="fa-solid fa-bed fa-2xs"></i>`
                    );
                    var oldPriceSpan = $('<span>').addClass('text-decoration-line-through p-0 m-0').html(
                        `<i class="fa-solid fa-indian-rupee-sign me-1"></i>${package.subscription_price}/<i class="fa-solid fa-bed fa-2xs"></i>`
                    );
                    priceAmountDiv.append(planPrice, oldPriceSpan);
                    innerDiv1.append(planName, priceAmountDiv);
                    var innerDiv2 = $('<div>').addClass(
                        'd-flex gap-1 justify-content-start align-items-center');
                    var planYearSpan = $('<span>').addClass(
                        'p-1 border border-black rounded extra-small-text planYear fw-bold').text(
                        package.package_duration);
                    var planTypeSpan = $('<span>').addClass(
                        'p-1 border border-black rounded extra-small-text planType fw-bold').text(
                        package.package_title);
                    innerDiv2.append(planYearSpan, planTypeSpan);
                    var innerDiv3 = $('<div>').addClass('d-flex justify-content-center align-items-center');
                    cardHeaderDiv.append(innerDiv1, innerDiv2, innerDiv3, discountedDiv, planTitelDiv);
                    var cardBodyDiv = $('<div>').addClass('card-body');
                    var featuresDiv = $('<div>').addClass('features featureList');
                    var featureDivNexText = $('<h6 class="text-muted ms-2">').text("You'll get");
                    featuresDiv.append(featureDivNexText);
                    var ulFeaturesList = $('<ul>').addClass("list-group list-group-flush");
                    package.features.forEach(function(feature) {
                        var listItem = $('<li class="list-group-item m-0 p-1 text-muted">').css({
                            'font-size': "0.8rem",
                        }).text(feature);
                        var icons = $(
                            '<i class="ms-1 fa-solid fa-hand-pointer fa-lg" style="color: #FFD43B;">'
                        );
                        listItem.append(icons);
                        ulFeaturesList.append(listItem);
                    });
                    var cardFooter = $('<div>').addClass(`card-footer ${planTypeColor}`).css({
                        'line-height': "10px",
                    });


                    var messageBox = $('<span>').addClass('messagebox small').css({
                        "font-size": "0.6rem",
                        'padding': "0px",
                    }).text(cardFooterMessage);
                    cardFooter.append(messageBox);

                    featuresDiv.append(ulFeaturesList);
                    cardBodyDiv.append(featuresDiv);
                    cardDiv.append(cardHeaderDiv, cardBodyDiv, cardFooter);
                    colDiv.append(cardDiv);
                    row.append(colDiv);
                });
            }
            // Function to fetch subscription data
            function fetchSubscriptionData(duration, selectedPlan) {
                $.ajax({
                    type: 'GET',
                    url: "{{ route('getsubscriptiondata') }}",
                    data: {
                        "duration": duration,
                        "plan": selectedPlan
                    },
                    success: function(response) {
                        let trailPlanBtn = $("#subscription_Trail_Plan");
                        handleFeatureClick(response.plansDetails);
                        let trailPlanText = `Get ${response.trailPlanDetails.package_duration}  Trail`
                        $(trailPlanBtn).text(trailPlanText);
                        $(trailPlanBtn).data('trailplandetails', JSON.stringify(response
                            .trailPlanDetails));
                    }
                });
            }

            // get subscription id
            $.ajax({
                type: "get",
                url: "{{ route('get.active.plan.details') }}",
                success: function(response) {
                    if (response.status === true) {
                        subscribedPlanId = response.data.plan_id;
                        currentSubscriptionDetails = response.data;
                    }
                }
            });

            // get total current registration seats;

            $.ajax({
                type: "get",
                url: "{{ route('get.current.register.seats') }}",
                success: function(response) {
                    currentTotalSeats = response.totalSeats;
                    if (currentTotalSeats == 0) {
                        if (Swal.isVisible()) {
                            setTimeout(() => {
                                Swal.fire({
                                    icon: 'info',
                                    text: "You have not registered any seat yet. Please register a seat to proceed.",
                                    confirmButtonText: 'Ok',
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location.href =
                                            "{{ route('room_seat') }}";
                                    }
                                });
                            }, 3000);
                        } else {
                            // Directly trigger the SweetAlert if no other SweetAlert is visible
                            Swal.fire({
                                icon: 'info',
                                text: "You have not registered any seat yet. Please register a seat to proceed.",
                                confirmButtonText: 'Ok',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ route('room_seat') }}";
                                }
                            });
                        }

                    }

                },
                error: function(response) {
                    currentTotalSeats = 0;
                    Swal.fire({
                        'type': 'error',
                        'title': 'Oops...',
                        'text': 'Something went wrong!'
                    });
                }
            });

            // get the subscription plans details
            $.ajax({
                url: "{{ route('getSubscriptionDetails') }}",
                method: "get",
                success: function(response) {
                    var data = response;

                    function generateOptions(selectElement, dataArray) {
                        $.each(dataArray, function(index, value) {
                            selectElement.append($('<option>', {
                                value: value,
                                text: value
                            }));
                        });
                    }
                    var packagesSelect = $('#subscriptionPlanSelect');
                    generateOptions(packagesSelect, data.packages);

                    // Generate options for the package_duration select element
                    var packageDurationSelect = $('#subscriptionDurationSelect');
                    generateOptions(packageDurationSelect, data.package_duration);
                    // Fetch data on page load
                    let initialDuration = $("#subscriptionDurationSelect").val();
                    let initialPlan = $("#subscriptionPlanSelect").val();
                    fetchSubscriptionData(initialDuration, initialPlan);
                },
                error: function() {
                    console.log("error");
                }
            });

            // Handle change event for subscription duration select
            $("#subscriptionDurationSelect").change(function() {
                let duration = $(this).val();
                let selectedPlan = $("#subscriptionPlanSelect").val();
                fetchSubscriptionData(duration, selectedPlan);
            });

            // Handle change event for subscription plan select
            $("#subscriptionPlanSelect").change(function() {
                let duration = $("#subscriptionDurationSelect").val();
                let selectedPlan = $(this).val();
                fetchSubscriptionData(duration, selectedPlan);
            });

            $(document).on('click', '.addSubscriptionBtn', function() {
                const featureData = $(this).data('details');
                let wantToupgradeSeats = 0;
                let currentPlan = subscribedPlanId;
                let registerSeats = parseInt(currentTotalSeats);
                let selectePlanCode = featureData.packagecode;
                let data = {
                    "duration": featureData.package_duration,
                    "plan": featureData.package_title,
                    "planName": featureData.PackageCategory,
                }

                if (subscribedPlanId !== "") {
                    Swal.fire({
                        title: "Upgrade Options",
                        html: `
                <div style="border:1px solid black;padding:2px;">
                <h5>Your Plan Details</h5>
                <span style="font-size:0.8rem"><strong>Change To Plan</strong>: ${featureData.PackageCategory} : (${featureData.package_duration}) (${featureData.package_title})</span> <br/>
                <span style="font-size:0.8rem"><strong>Current Plan</strong>: ${currentSubscriptionDetails.PackageCategory} : (${currentSubscriptionDetails.package_duration}) (${currentSubscriptionDetails.package_title})</span> <br/>
                </div>
                `,
                        showCancelButton: true,
                        confirmButtonText: 'Upgrade Plan',
                        cancelButtonText: 'Add On Seat',
                        reverseButtons: true,
                        didOpen: function() {
                            if (subscribedPlanId === selectePlanCode) {
                                const confirmButton = Swal.getConfirmButton();
                                confirmButton.disabled = true;
                            }
                        },
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Create a form and submit it
                            let form = $('<form>', {
                                action: "{{ route('getSubscriptionAmout') }}",
                                method: 'post'
                            });

                            form.append($('<input>', {
                                type: 'hidden',
                                name: '_token',
                                value: '{{ csrf_token() }}'
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'planDetails',
                                value: JSON.stringify(data)
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'upgradePlan',
                                value: `upgrade (Plan)`
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'currentPlan',
                                value: currentPlan
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'registerSeats',
                                value: registerSeats
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'wantToupgradeSeats',
                                value: wantToupgradeSeats
                            }));

                            $('body').append(form);
                            form.submit();
                        } else if (result.dismiss === Swal.DismissReason.cancel) {
                            Swal.fire({
                                title: 'Add More Seats?',
                                input: 'number',
                                html: `<span>Current Seats: ${currentTotalSeats} </span><br>
                            <span id="updatedSeats"></span>
                        `,
                                inputAttributes: {
                                    min: 1,
                                    step: 1,
                                    placeholder: 'Enter number of seats'
                                },
                                showCancelButton: true,
                                confirmButtonText: 'Confirm Change',
                                didOpen: () => {
                                    const inputField = Swal.getInput();
                                    const updatedSeatsSpan = Swal.getContent()
                                        .querySelector('#updatedSeats');

                                    inputField.addEventListener('input', () => {
                                        const inputValue = inputField.value
                                            .trim();
                                        if (!inputValue || isNaN(inputValue) ||
                                            parseInt(inputValue) < 1) {
                                            updatedSeatsSpan.textContent = '';
                                        } else {
                                            const updatedSeats = parseInt(
                                                    inputValue) +
                                                currentTotalSeats;
                                            updatedSeatsSpan.textContent =
                                                `Updated Seats: ${updatedSeats}`;
                                        }
                                    });
                                },
                                inputValidator: (value) => {
                                    if (!value || parseInt(value) < 1) {
                                        return 'Please enter a valid number of seats!';
                                    }
                                }
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    let seats = result.value;

                                    // Create a form and submit it
                                    let form = $('<form>', {
                                        action: "{{ route('getSubscriptionAmout') }}",
                                        method: 'post'
                                    });

                                    form.append($('<input>', {
                                        type: 'hidden',
                                        name: '_token',
                                        value: '{{ csrf_token() }}'
                                    }));

                                    form.append($('<input>', {
                                        type: 'hidden',
                                        name: 'planDetails',
                                        value: JSON.stringify(data)
                                    }));

                                    form.append($('<input>', {
                                        type: 'hidden',
                                        name: 'upgradePlan',
                                        value: `upgrade (seat)`
                                    }));

                                    form.append($('<input>', {
                                        type: 'hidden',
                                        name: 'currentPlan',
                                        value: currentPlan
                                    }));

                                    form.append($('<input>', {
                                        type: 'hidden',
                                        name: 'registerSeats',
                                        value: registerSeats
                                    }));

                                    form.append($('<input>', {
                                        type: 'hidden',
                                        name: 'wantToupgradeSeats',
                                        value: seats
                                    }));
                                    $('body').append(form);
                                    form.submit();
                                }
                            });
                        }
                    });
                } else {
                    // Create a form and submit it
                    let form = $('<form>', {
                        action: "{{ route('getSubscriptionAmout') }}",
                        method: 'post'
                    });

                    form.append($('<input>', {
                        type: 'hidden',
                        name: '_token',
                        value: '{{ csrf_token() }}'
                    }));

                    form.append($('<input>', {
                        type: 'hidden',
                        name: 'planDetails',
                        value: JSON.stringify(data)
                    }));

                    form.append($('<input>', {
                        type: 'hidden',
                        name: 'upgradePlan',
                        value: 'New'
                    }));

                    form.append($('<input>', {
                        type: 'hidden',
                        name: 'currentPlan',
                        value: currentPlan
                    }));

                    form.append($('<input>', {
                        type: 'hidden',
                        name: 'registerSeats',
                        value: registerSeats
                    }));

                    form.append($('<input>', {
                        type: 'hidden',
                        name: 'wantToupgradeSeats',
                        value: wantToupgradeSeats
                    }));

                    $('body').append(form);
                    form.submit();
                }
            });

            setTimeout(function() {
                $(".loading-container").hide();
                $('#mainSubscriptionContainer').fadeIn();
            }, 2000);
        });
    </script>
@endsection