@extends('fronted.layout.main')
@section('adcontent')
<style>
    .cart-table {
        width: 100%;
        border-collapse: collapse;
    }

    .cart-total {
        font-weight: bold;
    }

    .gst-note {
        font-size: 0.9em;
        color: #6c757d;
    }

    .cart-table tbody {
        font-size: 0.8rem;
        font-weight: 500;
    }

    .form-check-input:checked {
        background-color: orange;
        border: none;
    }

    .form-check-input:focus {
        border: 0;
        box-shadow: none;
    }

    .addOnviewMoreBtn {
        cursor: pointer;
    }
</style>
<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 border border-3 border-top-0 border-bottom-0 border-start-0 border-black">
                <div class="cart-total">
                    <div class="container">
                        <div class="table-responsive dataTable">
                            <table class="cart-table table table-bordered border-dark align-middle">
                                <thead class="text-warning text-capitalize">
                                    <tr class="">
                                        <th colspan="2">cart Total</th>
                                        <th>Price (INR)</th>
                                    </tr>
                                </thead>
                                <tbody id="cartTotalBody">
                                    <tr>
                                        <td id="cartTotalBodyRowSpan" rowspan="1">1</td>
                                        <td class="text-uppercase">
                                            {{ $subscriptionDetails['PlanName'] }}- {{ $subscriptionDetails['PlanType'] }} {{$subscriptionDetails['PlanDuration']}} PLAN
                                        </td>
                                        <td>
                                            <i class="fa-solid fa-indian-rupee-sign"></i>
                                            @if(!empty($subscriptionDetails['calculationData']))
                                            {{ $subscriptionDetails['calculationData']['payAbleAmountForUpgrade'] ?? ($subscriptionDetails['totalSeat'] * $subscriptionDetails['subs_price'] ) }}
                                            @else
                                            {{ ($subscriptionDetails['totalSeat'] * $subscriptionDetails['subs_price'] ) }}
                                            @endif
                                        </td>
                                    </tr>
                                    @if($subscriptionDetails['calculationData']['status'] && $subscriptionDetails['calculationData']['cartAmount'] !== 0)
                                    <tr class="cart-amount">
                                        <td colspan="2" class="text-center">Wallet Amount</td>
                                        <td>
                                            <i class="fa-solid fa-indian-rupee-sign"></i>
                                            <span id="remaningCartAmount">
                                                {{ $subscriptionDetails['calculationData']['cartAmount'] }}</span>
                                            </span>
                                        </td>
                                    </tr>
                                    @endif

                                    <tr class="cart-total">
                                        <td colspan="2" class="text-center">Total</td>
                                        <td>
                                            <i class="fa-solid fa-indian-rupee-sign"></i>
                                            <span id="cartTotal">
                                                @if(!empty($subscriptionDetails['calculationData']))
                                                {{ $subscriptionDetails['calculationData']['payAbleAmountForUpgrade'] ?? ($subscriptionDetails['totalSeat'] * $subscriptionDetails['subs_price'] ) }}
                                                @else
                                                {{ ($subscriptionDetails['totalSeat'] * $subscriptionDetails['subs_price'] ) }}
                                                @endif
                                            </span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="2" class="gst-note text-center align-items-center">GST CHARGE APPLICABLE ON CHECKOUT</td>
                                        <td> </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="add-Ons">
                    <div class="cart-total">
                        <div class="container mt-2">
                            <div class="table-responsive dataTable">
                                <table class="cart-table table table-bordered border-dark align-middle">
                                    <thead class="text-warning text-capitalize">
                                        <tr class="">
                                            <th colspan="3">Add Ons</th>
                                        </tr>
                                    </thead>
                                    <tbody id="addOnPlanDetailsSection">
                                        <!-- addOnItems -->
                                        @php
                                        $addOnItemList = [];
                                        @endphp
                                        @if(!empty($alreadyHaveAddOnItems))
                                        @php
                                        $addOnList = $alreadyHaveAddOnItems->add_ons;
                                        @endphp
                                        @foreach ($addOnList as $addOnitem)
                                        @if(!in_array($addOnitem,$addOnItemList))
                                        @php
                                        $addOnItemList[] = $addOnitem['addonName'];
                                        @endphp
                                        @endif
                                        @endforeach
                                        @endif
                                        @forelse($addOnItems as $item)
                                        <tr>
                                            <td>
                                                <div class="p-2 bg-white">
                                                    {{$item->plan_duration}} <i class="fa-solid fa-indian-rupee-sign me-2"></i>{{$item->item_amount}}
                                                </div>
                                            </td>
                                            <td>{{$item->item_name}} <sub class="text-warning addOnviewMoreBtn" data-details="{{$item->features}}">view more</sub></td>
                                            <td>
                                                @if(in_array($item->item_name,$addOnItemList))
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" data-addonid="{{$item->id}}" data-addon="{{$item->item_name}}" data-price="{{$item->item_amount}}" data-selectedPlanDuration="{{$item->plan_duration}}" disabled checked value="1">
                                                </div>
                                                @else
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input add-on-checkbox" type="checkbox" data-addonid="{{$item->id}}" data-addon="{{$item->item_name}}" data-price="{{$item->item_amount}}" data-selectedPlanDuration="{{$item->plan_duration}}" value="1">
                                                </div>
                                                @endif
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td class="text-center" colspan="3">No addOn Item Found</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="container bg-white shadow-sm p-2 rounded border border-2 border-black">
                    <div class="choose">
                        <center>
                            <img src="{{asset('assets/images/new_hostal_logo.jpg')}}" class="img-responsive" style="width:20%">
                        </center>
                    </div>
                    <h5 class="text-center">Plan Breakup</h5>
                    <div class="marquee-container">
                        <div class="marquee-content" id="marqueeText">
                            <p> Note:- Please ensure, your total no. of seats. Otherwise, You will not able to add new register more then you given no. of seats.</p>
                        </div>
                    </div>
                    <form id="PlansForm" action="">
                        <input type="hidden" name="product" id="ProductId">
                        <input type="hidden" name="CustomerId" value="{{session('liseneceNo')}}" id="CustomerId">
                        <div class="row my-2">
                            <div class="col-lg-6 mb-2">
                                <label class="form-label" for="TotalNoSeats">Total Seats</label>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <div class="input-group">
                                    <input class="form-control" type="number" name="TotalNoSeats" id="TotalNoSeats" placeholder="No. of seats" value="{{$subscriptionDetails['totalSeat']}}" readonly required>
                                    <span class="input-group-text"> <i class="fa-solid fa-bed"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <label class="form-label" for="PlansDesc"><span class="me-1" id="PlanName">({{ $subscriptionDetails['PlanName'] }})</span><span class="me-1" id="PlanMonth">({{$subscriptionDetails['PlanDuration']}})</span> <span class="" id="PlanTypes">({{$subscriptionDetails['PlanType']}})</span></label>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <div class="input-group">
                                    <input class="form-control" type="number" value="{{$subscriptionDetails['subscription_price']}}" name="PlansDesc" id="PlansDesc" readonly>
                                    <span class="input-group-text fw-normal"><i class="fa-solid fa-indian-rupee-sign"></i><span class="backslash"></span><i class="fa-solid fa-bed"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <label for="PlansDiscounts" class="form-label"><span class="me-1">After Discount On Plan</span><span id="DiscountText">{{$subscriptionDetails['sub_discount']}}%</span></label>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <div class="input-group">
                                    <input class="form-control" type="number" name="PlansDiscounts" value="{{$subscriptionDetails['subs_price']}}" id="PlansDiscounts" readonly>
                                    <span class="input-group-text fw-normal"><i class="fa-solid fa-indian-rupee-sign"></i><span class="backslash"></span><i class="fa-solid fa-bed"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <label class="form-label" for="totalAmountOndicscount">Total plan Amount</label>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <div class="input-group">
                                    <input class="form-control" type="number" step="0.010" name="totalAmountOndicscount" value="{{$subscriptionDetails['calculationData']['totalUpgradeAmount'] ?? ($subscriptionDetails['totalSeat'] * $subscriptionDetails['subs_price'] )}}" id="totalAmountOndicscount" readonly>
                                    <span class="input-group-text"><i class="fa-solid fa-indian-rupee-sign"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <label for="paidAmount" class="form-label">Privious Plan Remaning</label>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <div class="input-group">
                                    <input type="number" step="0.01" name="PaidAmount" value="{{$subscriptionDetails['calculationData']['remaningUpgradedAmount'] ?? 0}}" step="0.010" class="form-control" id="paidAmount" readonly>
                                    <span class="input-group-text"><i class="fa-solid fa-indian-rupee-sign"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <label for="TotalPlansAmount" class="form-label" id="totalPaybleAmountLabel">Total amount</label>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <div class="input-group">
                                    <input class="form-control" step="0.010" type="number" id="TotalPlansAmount" value="{{$subscriptionDetails['calculationData']['payAbleAmountForUpgrade'] ?? ($subscriptionDetails['totalSeat'] * $subscriptionDetails['subs_price'] )}}" name="TotalPlansAmount" readonly>
                                    <span class="input-group-text"><i class="fa-solid fa-indian-rupee-sign"></i></span>
                                </div>
                            </div>
                            @if($subscriptionDetails['calculationData']['status'] && $subscriptionDetails['calculationData']['cartAmount'] !== 0)
                            <div class="col-lg-6 mb-2">
                                <label for="TotalPlansAmount" class="form-label" id="totalPaybleAmountLabel">You Will Get <button class="btn text-warning btn-sm p-0 m-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Your previous paid amount is more than the selected plan amount so your remaining amount will be credited to your wallet as per our refund policy. you can use this amount in your next purchase or use it to purchase add-ons. For more details please contact us"><i class="fa-solid fa-circle-info fa-sm"></i></button> </label>
                            </div>
                            <div class="col-lg-6 mb-2">
                                <div class="input-group">
                                    <input class="form-control" step="0.010" type="number" id="cartAmount" value="{{$subscriptionDetails['calculationData']['cartAmount']}}" name="cartAmount" readonly>
                                    <span class="input-group-text"><i class="fa-solid fa-indian-rupee-sign"></i></span>
                                </div>
                            </div>
                            @endif
                        </div>
                    </form>
                </div>
                <div class="d-flex justify-content-center align-items-center mt-3">
                    <button id="procedeToCheckOutButton" class="btn btn-warning" type="button">Proceed to checkout <i class="fa-solid fa-arrow-right"></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addOnViewMoreDetailShowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addOnViewMoreDetailShowModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addOnViewMoreDetailShowModalLabel">Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul id="featureDetailsShowList">

                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="openTrailPlanInfoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="openTrailPlanInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="openTrailPlanInfoModalLabel">Trail Plans Info</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    15 days free trail available do you want to continue with trial. After 15 days you have pay your selected plan payment.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" id="activetrialPlan">Continue with free trail</button>
                    <button type="button" class="btn btn-warning" id="skipFreeTralPlan">Continue without free trail</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        const cartTotalBody = $('#cartTotalBody');
        const cartTotalElement = $('#cartTotal');
        const remaningCartAmount = $("#remaningCartAmount");
        let cartTotalBodyRowSpan = $("#cartTotalBodyRowSpan");
        const addOnPlanDetailsSection = $("#addOnPlanDetailsSection");
        let subscriptionDetailData = JSON.stringify({!!json_encode($subscriptionDetails) !!});
        let subscriptionDetailDataObj = JSON.parse(subscriptionDetailData);
        let rowSpanValue = 1;
        let selectedAddOns = [];

        let total = parseFloat(cartTotalElement.text());
        let cartAmount = parseFloat(remaningCartAmount.text());
        let AddOnItemTotalAmount = 0;

        function verifyAddOnItem(addOnItemId) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: '{{route("verify.item")}}',
                    type: 'POST',
                    data: {
                        '_token': "{{csrf_token()}}",
                        'addOnItemId': addOnItemId
                    },
                    dataType: 'json',
                    success: function(response) {
                        // Check the response and resolve accordingly
                        if (response.status) {
                            resolve(response.data); // Pass the data from the response
                        } else {
                            reject(response.message || 'Failed to verify add-on item');
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle AJAX errors
                        reject(`AJAX Error: ${status} - ${error}`);
                    }
                });
            });
        }


        $('.add-on-checkbox').on('change', async function() {
            const addOnItemId = $(this).data('addonid');

            try {
                const data = await verifyAddOnItem(addOnItemId);
                const addOn = data.item_name;
                const price = parseFloat(data.item_amount);
                const selectedPlanDuration = data.plan_duration;

                if ($(this).is(':checked')) {
                    // Add item to cart
                    addAddOnToCart(addOn, price);
                    cartAmount -= price;
                    total += price;
                    AddOnItemTotalAmount += price;
                    rowSpanValue++;
                    selectedAddOns.push({
                        id: addOnItemId,
                        addonName: addOn,
                        price: price,
                        duration: selectedPlanDuration,
                    });
                } else {
                    // Remove item from cart
                    removeAddOnFromCart(addOn);
                    cartAmount += price;
                    total -= price;
                    AddOnItemTotalAmount -= price;
                    rowSpanValue--;
                    selectedAddOns = selectedAddOns.filter(item => item.addonName !== addOn);
                }

                // Update cart details
                cartTotalBodyRowSpan.attr('rowspan', rowSpanValue);
                cartTotalElement.text(total.toFixed(2));
                remaningCartAmount.text(cartAmount.toFixed(2));
            } catch (error) {
                console.error('Error verifying add-on item:', error);
                alert('Failed to verify the add-on item. Please try again.');
                $(this).prop('checked', false); // Revert the checkbox
            }
        });


        function addAddOnToCart(addOn, price) {
            const row = `
            <tr class="add-on-row" data-addon="${addOn}">
                <td>+${addOn}</td>
                <td><i class="fa-solid fa-indian-rupee-sign"></i>${price}</td>
            </tr>
             `;
            if (cartTotalBody.find('.cart-amount').length) {
                // The element exists
                cartTotalBody.find('.cart-amount').before(row);
            } else {
                // The element does not exist
                cartTotalBody.find('.cart-total').before(row);
            }
        }

        function removeAddOnFromCart(addOn) {
            cartTotalBody.find(`.add-on-row[data-addon="${addOn}"]`).remove();
        }

        $('#procedeToCheckOutButton').on('click', function() {
            let remaningCartAmount = $("#remaningCartAmount").text();

            if (remaningCartAmount) {
                remaningCartAmount = parseFloat(remaningCartAmount);
                if (isNaN(remaningCartAmount)) {
                    remaningCartAmount = 0;
                } else {
                    remaningCartAmount = remaningCartAmount.toFixed(2);
                }
            } else {
                remaningCartAmount = 0;
            }
            let totalAddOnItemAmount = parseFloat(AddOnItemTotalAmount).toFixed(2);

            let form = $('<form>', {
                action: "{{ route('subscription.checkout') }}",
                method: 'post'
            });

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

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

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


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

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

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

        $(".addOnviewMoreBtn").on('click', function() {
            const features = $(this).data('details');
            const parsedFeatures = (typeof features === 'string' && features) ? JSON.parse(features) : features;

            $("#addOnViewMoreDetailShowModal").on('show.bs.modal', function() {
                let list = $("#featureDetailsShowList");
                list.empty();
                $.each(parsedFeatures, function(indexInArray, feature) {
                    let li = $("<li>").text(feature.name);
                    list.append(li);
                });
            }).modal("show");
        });

        if (subscriptionDetailDataObj.openTrailPlanInfo) {
            $("#openTrailPlanInfoModal").modal('show');
        }

        function addTrilPlanDetailsRow(text) {
            let row = $("<tr>");
            let firstTd = $('<td colspan="2" class="text-center">').text(text);
            let secondTd = $("<td>");
            let rupIcon = $("<i>").addClass('fa-solid fa-indian-rupee-sign');
            let trialPlanAmount = $('<span id="trailPlanAmount">').text(1);
            secondTd.append(rupIcon, trialPlanAmount);
            row.append(firstTd, secondTd);
            cartTotalBody.find('.cart-total').before(row);
            var firstTdInCartTotalRow = $('#cartTotalBody .cart-total').find('td:first-child');
            firstTdInCartTotalRow.text('Total(You have To pay after free trail)');

        }

        $("#activetrialPlan").on('click', function() {
            $("#openTrailPlanInfoModal").modal('hide');
            $(".add-Ons").find('input.add-on-checkbox').prop('checked', true).trigger('change');
            let trailPlanDays = subscriptionDetailDataObj.trailPlanInfo;
            setTimeout(function() {
                addTrilPlanDetailsRow(`Total amount for ${trailPlanDays} trail`);
            }, 500);
        });

        $("#skipFreeTralPlan").on('click', function() {
            $("#openTrailPlanInfoModal").modal('hide');
            subscriptionDetailDataObj.openTrailPlanInfo = false
            subscriptionDetailData = JSON.stringify(subscriptionDetailDataObj);
        });

    });
</script>

@endsection