@extends("web.layouts.master")

@section("content")
    <section class="space--sm background-light-grey">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-8">
                    <div class="row">
                        <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                            <p class="font-size-14 text-light-grey Font-Manrope-Light mb-2">Location / {{ $location->name }} / Find a ticket</p>
                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold pl-0 custom-second-section-title mb-5">Ticket Options</p>
                        </div>

                        @foreach ($products as $key => $product)
                            <div class="col-12 col-md-12 pb-4 custom-product-container" data-aos="fade-up" data-aos-duration="1000" data-product-id="{{ $product->id }}">
                                <div class="feature custom-feature">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h4 class="font-size-14 text-dark-grey Font-Manrope-SemiBold mb-2">
                                                <img src="{{ asset('web/assets/icons/second-ticket.png') }}" class="mr-2 mb-2"/>{{ $product->name }}
                                            </h4>

                                            @if ($product->ticket_type !== TicketTypeEnum::getString(TicketTypeEnum::PRIVATE_SESSION))
                                                @if (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::GUEST)))
                                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold text-uppercase mb-2">
                                                        {{ $product->converted_guest_price }}
                                                    </p>
                                                    <p class="font-size-14 text-red Font-Manrope-Light mb-2">
                                                        Member Price {{ $product->converted_member_price }}
                                                    </p>
                                                @elseif (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::MEMBER)))
                                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold text-uppercase mb-2">
                                                        {{ $product->converted_member_price }}
                                                    </p>
                                                @endif
                                            @else
                                                <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold text-uppercase mb-4">
                                                    {{ $product->converted_guest_price }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-md-12">
                                            <hr class="my-4" />
                                        </div>
                                        <div class="col-6 col-md-6">
                                        </div>
                                        <div class="col-12 col-md-6 text-right">
                                            @if ($product->ticket_type == TicketTypeEnum::getString(TicketTypeEnum::PRIVATE_SESSION))
                                                <a class="private-ticket-detail-btn mr-5" href="#">
                                                    <span class="btn__text font-size-16 Font-Manrope-SemiBold text-red red-underline">Detail</span>
                                                </a>
                                            @else
                                                <a class="regular-ticket-detail-btn mr-5" href="#">
                                                    <span class="btn__text font-size-16 Font-Manrope-SemiBold text-red red-underline">Detail</span>
                                                </a>
                                            @endif
                                            <a class="btn custom-wrap-content-extended-btn custom-btn-danger custom-buy-ticket-btn" href="#" data-product-id="{{ $product->id }}">
                                                <span class="btn__text font-size-16 Font-Manrope-SemiBold">
                                                    Buy
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="row custom-ticket-detail-content mt-3 d-none" data-product-id="{{ $product->id }}">
                                        <div class="col-12 col-md-12">
                                            <hr />
                                        </div>
                                        <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-7">
                                            <p class="font-size-14 Font-Manrope-SemiBold text-dark-grey mb-3">Date of Visit</p>
                                            @if ($product->day_type == TicketDayTypeEnum::getString(TicketDayTypeEnum::WEEKDAY))
                                                <div class="custom-datepicker weekday-datepicker custom-grey-border-box mb-2" style="padding: 0 8px 8px 8px;"></div>
                                            @elseif ($product->day_type == TicketDayTypeEnum::getString(TicketDayTypeEnum::WEEKEND))
                                                <div class="custom-datepicker weekend-datepicker custom-grey-border-box mb-2" style="padding: 0 8px 8px 8px;"></div>
                                            @endif
                                            <p class="font-size-12 Font-Manrope-Medium text-red mb-0" style="margin-bottom: -10px !important;">*Any changes for <span class="Font-Manrope-Bold">PURCHASED</span> tickets is subject</p>
                                            <p class="font-size-12 Font-Manrope-Medium text-red mb-5">to management approval and availability</p>
                                            <input type="hidden" class="custom-date-of-visit-input" data-product-id="{{ $product->id }}"/>
                                        </div>
                                        <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-5">
                                            <div class="form-group mb-5">
                                                <label class="font-size-14 Font-Manrope-SemiBold text-dark-grey mb-3">Time of Visit</label>
                                                <a href="#" class="choose-session-picker-btn" data-product-id="{{ $product->id }}">
                                                    <div class="custom-grey-border-round-box choose-visit-time-container" data-product-id="{{ $product->id }}">
                                                        <div class="row">
                                                            <div class="col-9 col-md-9 p-2 choose-visit-time-label-container" data-product-id="{{ $product->id }}">
                                                                <p class="font-size-18 text-light-grey Font-Manrope-Regular mb-0 font-weight-normal"  style="padding-left: 20px" >Choose Visit Time</p>
                                                            </div>
                                                            <div class="col-3 col-md-3 text-right p-1" >
                                                                <img src="{{ asset("web/assets/icons/chevron-bottom.png") }}" style="margin-right: 20px; margin-top: 6px;" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                                <input type="hidden" class="custom-time-of-visit-input" data-product-id="{{ $product->id }}"/>
                                            </div>
                                            <div class="form-group mb-5">
                                                <label class="font-size-14 Font-Manrope-SemiBold text-dark-grey mb-3">Additional Adult</label>
                                                <div class="custom-grey-border-round-box custom-adult-input-container">
                                                    <div class="row">
                                                        <div class="col-6 col-md-6 p-2">
                                                            @if (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::GUEST)))
                                                                <p class="font-size-16 Font-Manrope-SemiBold text-dark-grey ml-3">{{ $adultAddOn->converted_guest_price }}</p>
                                                            @elseif (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::MEMBER)))
                                                                <p class="font-size-16 Font-Manrope-SemiBold text-dark-grey ml-3">{{ $adultAddOn->converted_member_price }}</p>
                                                            @endif
                                                        </div>
                                                        <div class="col-6 col-md-6" style="padding-right: 22px;">
                                                            <div class="row">
                                                                <div class="col-md-4 col-4 p-0 text-center">
                                                                    <a class="btn custom-adult-increase-decrease-qty-btn custom-btn-danger q-btn mt-2" data-operator="-" data-add-on-id="{{ $adultAddOn->id }}"><i class="fa fa-minus"></i></a>
                                                                </div>
                                                                <div class="col-md-4 col-4 p-0 text-center">
                                                                    <input type="text" name="quantity" required value="0" style="height: 41px;" class="Font-Size-16 Font-Manrope-Semibold text-center custom-adult-input-quantity custom-grey-border-input p-0"/>
                                                                </div>
                                                                <div class="col-md-4 col-4 p-0 text-center">
                                                                    <a class="btn custom-adult-increase-decrease-qty-btn custom-btn-danger q-btn mt-2" data-operator="+" data-add-on-id="{{ $adultAddOn->id }}"><i class="fa fa-plus"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group mb-5">
                                                <label class="font-size-14 Font-Manrope-SemiBold text-dark-grey mb-3">1 Ticket include 1 Kid & 1 Adult</label>
                                                <div class="custom-red-border-round-box custom-ticket-input-container">
                                                    <div class="row">
                                                        <div class="col-6 col-md-6 p-2">
                                                            @if (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::GUEST)))
                                                                <p class="font-size-16 Font-Manrope-SemiBold text-dark-grey ml-3">{{ $product->converted_guest_price }}</p>
                                                            @elseif (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::MEMBER)))
                                                                <p class="font-size-16 Font-Manrope-SemiBold text-dark-grey ml-3">{{ $product->converted_member_price }}</p>
                                                            @endif
                                                        </div>
                                                        <div class="col-6 col-md-6" style="padding-right: 22px;">
                                                            <div class="row">
                                                                <div class="col-md-4 col-4 p-0 text-center">
                                                                    <a class="btn custom-ticket-increase-decrease-qty-btn custom-btn-danger q-btn mt-2" data-operator="-" data-product-id="{{ $product->id }}"><i class="fa fa-minus"></i></a>
                                                                </div>
                                                                <div class="col-md-4 col-4 p-0 text-center">
                                                                    <input type="text" name="quantity" required value="1" style="height: 41px;" class="Font-Size-16 Font-Manrope-Semibold text-center custom-ticket-input-quantity custom-red-border-input p-0"/>
                                                                </div>
                                                                <div class="col-md-4 col-4 p-0 text-center">
                                                                    <a class="btn custom-ticket-increase-decrease-qty-btn custom-btn-danger q-btn mt-2" data-operator="+" data-product-id="{{ $product->id }}"><i class="fa fa-plus"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-12">
                                            @if (count($addOns) > 0)
                                                <p class="font-size-18 text-dark-grey Font-Manrope-Bold pl-0 custom-second-section-title mb-4">Additional Product</p>
                                            @endif

                                            @foreach ($addOns as $addOn)
                                                <div class="form-group mb-3">
                                                    <div class="custom-add-on-container custom-grey-border-box">
                                                        <div class="row">
                                                            <div class="col-2 col-md-2 col-lg-1">
                                                                <label class="custom-checkbox-container my-3">
                                                                    <input type="checkbox" data-add-on-id="{{ $addOn->id }}">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                            </div>
                                                            <div class="col-4 col-md-4 col-lg-4 p-0">
                                                                @if (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::GUEST)))
                                                                    <p class="mb-1 text-dark-grey font-size-16 Font-Manrope-SemiBold">{{ $addOn->name }}</p>
                                                                    <p class="mb-1 text-dark-grey font-size-14 Font-Manrope-Regular custom-add-on-member-price">Member Price {{ $addOn->converted_member_price }} ( 1x ride )</p>
                                                                @elseif (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::MEMBER)))
                                                                    <p class="mb-1 text-dark-grey font-size-16 Font-Manrope-SemiBold mt-3">{{ $addOn->name }}</p>
                                                                @endif
                                                            </div>
                                                            <div class="col-6 col-md-6 col-lg-7 p-0">
                                                                <div class="row pr-3">
                                                                    <div class="col-md-12 text-right custom-add-on-guest-price-container">
                                                                        @if (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::GUEST)))
                                                                            <p class="my-3 text-dark-grey font-size-16 Font-Manrope-SemiBold ">( 1x ride ) {{ $addOn->converted_guest_price }}</p>
                                                                        @elseif (auth()->user()->hasRole(RoleEnum::getString(RoleEnum::MEMBER)))
                                                                            <p class="my-3 text-dark-grey font-size-16 Font-Manrope-SemiBold ">( 1x ride ) {{ $addOn->converted_member_price }}</p>
                                                                        @endif
                                                                    </div>
                                                                    <div class="col-md-6 custom-input-quantity-container d-none">
                                                                        <div class="row my-2">
                                                                            <div class="col-md-4 col-4 p-0 text-center">
                                                                                <a class="btn custom-additional-product-increase-decrease-qty-btn custom-btn-danger q-btn mt-2" data-operator="-" data-add-on-id="{{ $addOn->id }}"><i class="fa fa-minus"></i></a>
                                                                            </div>
                                                                            <div class="col-md-4 col-4 p-0 text-center">
                                                                                <input type="text" name="quantity" required value="1" style="height: 41px;" class="Font-Size-16 Font-Manrope-Semibold text-center custom-additional-product-input-quantity custom-red-border-input p-0"/>
                                                                            </div>
                                                                            <div class="col-md-4 col-4 p-0 text-center">
                                                                                <a class="btn custom-additional-product-increase-decrease-qty-btn custom-btn-danger q-btn mt-2" data-operator="+" data-add-on-id="{{ $addOn->id }}"><i class="fa fa-plus"></i></a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-4" data-aos="fade-up" data-aos-duration="1500">
                    @include("web.components.order-detail-card", [
                        "isTicketOptionsPage" => true
                    ])
                </div>

            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    @include("web.components.regular-ticket-detail-modal", [
        "modalIndex" => 0
    ])
    @include("web.components.private-ticket-detail-modal", [
        "modalIndex" => 1
    ])
    @include("web.components.choose-session-modal", [
        "modalIndex" => 2
    ])
    @include("web.components.checkout-options-modal", [
        "modalIndex" => 3
    ])
    @include("web.components.login-member-modal", [
        "modalIndex" => 4
    ])
    @include("web.components.cancelable-notification-modal", [
        "modalIndex" => 5
    ])
    @include("web.components.change-ticket-confirmation-modal", [
        "modalIndex" => 6
    ])
@endsection

@push("stackJs")
    <script type="text/javascript">
        function setFieldToDefaultValueHandler($field, $default) {
            if ($default === undefined)
                $default = null;
            return $field.val() == "" ? $default : $field.val();
        }

        function validateDateAndTimeOfVisit($this) {
            var $customDateOfVisitInput = $this.parents('.custom-ticket-detail-content').find(".custom-date-of-visit-input");
            var $customTimeOfVisitInput = $this.parents('.custom-ticket-detail-content').find(".custom-time-of-visit-input");

            if (
                $customDateOfVisitInput.val() == '' ||
                $customDateOfVisitInput.val() == null ||
                $customTimeOfVisitInput.val() == '' ||
                $customTimeOfVisitInput.val() == null
            ) {
                return false;
            }
            return true;
        }

        function updateOrder(type, productIdOrAddOnId, quantity, successCallback, errorCallback) {
            var data = {};

            if (type === "{{ ProductTypeEnum::getString(ProductTypeEnum::TICKET) }}") {
                data = {
                    type: type,
                    product_id: productIdOrAddOnId,
                    quantity: quantity
                };
            } else if (type === "{{ ProductTypeEnum::getString(ProductTypeEnum::ADD_ON) }}") {
                data = {
                    type: type,
                    add_on_id: productIdOrAddOnId,
                    quantity: quantity
                };
            }

            $.ajax({
                url: "{{ route("web.ticket.update-order") }}",
                method: "POST",
                data: data,
                success: function (res) {
                    successCallback();
                },
                error: function (err) {
                    errorCallback();
                }
            });
        }

        var selectedProductId = null;
        var isFirstTime = true;

        function resetState() {
            if (! isFirstTime) {
                clearDateToVisit();
                clearTimeOfVisit();

                var $customProductContainer = $(".custom-product-container[data-product-id='" + selectedProductId +  "']");

                var $customAdultInputQuantity = $customProductContainer.find(".custom-adult-input-quantity");
                if ($customAdultInputQuantity.val() > 0) {
                    $customAdultInputQuantity.val(0);
                    $customProductContainer.find(".custom-adult-increase-decrease-qty-btn[data-operator='-']").trigger("click");
                }

                var $customTicketInputQuantity = $customProductContainer.find(".custom-ticket-input-quantity");
                if ($customTicketInputQuantity.val() > 1) {
                    $customTicketInputQuantity.val(1);
                    $customProductContainer.find(".custom-ticket-increase-decrease-qty-btn[data-operator='-']").trigger("click");
                }

                var $customAdditionalProductInputQuantity = $customProductContainer.find(".custom-additional-product-input-quantity");

                if ($customAdditionalProductInputQuantity.val() > 1) {
                    $customAdditionalProductInputQuantity.val(1);
                    $customProductContainer.find(".custom-additional-product-increase-decrease-qty-btn[data-operator='-']").trigger("click");
                }

                var $customAdditionalProductCheckbox = $customProductContainer.find("input[type='checkbox']:checked");

                if ($customAdditionalProductCheckbox.length > 0) {
                    $customAdditionalProductCheckbox.prop("checked", false);
                    $customAdditionalProductCheckbox.trigger("change");
                }

                $customProductContainer.find(".custom-date-of-visit-input").val("");
                $customProductContainer.find(".custom-time-of-visit-input").val("");
            } else {
                isFirstTime = false;
            }
        }

        function clearDateToVisit() {
            $("#date-to-visit-value").text("-");
            var $customProductContainer = $(".custom-product-container[data-product-id='" + selectedProductId +  "']");

            var $customDatePicker = $customProductContainer.find(".custom-datepicker");
            $customDatePicker.datepicker('update', '');
        }

        function clearTimeOfVisit() {
            $("#time-visit-value").text("-");

            var $customProductContainer = $(".custom-product-container[data-product-id='" + selectedProductId +  "']");
            $customProductContainer.find(".choose-visit-time-container")
                .addClass("custom-grey-border-round-box")
                .removeClass("custom-red-border-round-box");
            $customProductContainer.find(".choose-visit-time-label-container")
                .html('<p class="font-size-18 text-light-grey Font-Manrope-Regular mb-0 font-weight-normal" style="padding-left: 20px" >Choose Visit Time</p>');
        }

        function updateOrderDetailCard() {
            $.ajax({
                url: "{{ route("web.ticket.get-order-detail") }}",
                method: "GET",
                success: function (res) {

                    if (res.success) {
                        var $orderText = $("#order-text");
                        var $orderDetailCardContainer = $("#order-detail-card-container");
                        var $orderTotal = $("#order-total");

                        $orderText.text("Order ( " + Object.keys(res.data).length + " )");

                        $orderDetailCardContainer.empty();

                        for (var i = 0; i < Object.keys(res.data).length; i++) {
                            var key = Object.keys(res.data)[i];
                            var bookingItem = res.data[key];

                            $orderDetailCardContainer.append(
                                '<div class="row m-0 mb-3">' +
                                    '<div class="col-8 col-sm-8 col-md-8 p-0">' +
                                        '<p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">' + bookingItem.name + ' ( ' + bookingItem.qty + ' )</p>' +
                                    '</div>' +
                                    '<div class="col-4 col-sm-4 col-md-4 p-0 text-right">' +
                                        '<p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold mb-1">' + bookingItem.price + '</p>' +
                                    '</div>' +
                                '</div>'
                            );
                        }

                        $orderTotal.text(res.total);
                    } else {
                        showCancelableModalNotification({
                            message: res.message
                        });
                    }
                },
                error: function (err) {
                    showCancelableModalNotification({
                        message: err.message
                    });
                }
            });
        }

        $(document).ready(function () {
            var today = new Date();

            function onChangeDate(e) {
                var $customDateOfVisitInput = $(this).parents('.custom-ticket-detail-content').find(".custom-date-of-visit-input");
                $.ajax({
                    url: "{{ route("web.ticket.set-date-of-visit") }}",
                    method: "POST",
                    data: {
                        product_id: $customDateOfVisitInput.data("product-id"),
                        date_to_visit: e.format("yyyy-mm-dd")
                    },
                    success: function (res) {
                        if (res.success) {
                            clearTimeOfVisit();

                            $("#date-to-visit-value").text(e.format("dd - M - yyyy"));
                            $customDateOfVisitInput.val(e.format("yyyy-mm-dd"));
                        } else {
                            showCancelableModalNotification({
                                message: res.message
                            });
                        }
                    },
                    error: function (err) {
                        showCancelableModalNotification({
                            message: err.message
                        });
                    }
                });
            }

            var $chooseSessionPickerBtn = $('.choose-session-picker-btn');

            $chooseSessionPickerBtn.on("click", function (e) {
                e.preventDefault();

                var $customProductContainer = $(".custom-product-container[data-product-id='" + $(this).data("product-id") +  "']");
                var $customDateOfVisitInput = $customProductContainer.find(".custom-date-of-visit-input");

                if ($customDateOfVisitInput.val() == '' || $customDateOfVisitInput.val() == null) {
                    showCancelableModalNotification({
                        message: "Date of Visit is required."
                    });
                } else {
                    var $this = $(this);

                    $.ajax({
                        url: "{{ route("web.ticket.get-sessions-by-product-id") }}",
                        method: "POST",
                        data: {
                            product_id: $this.data("product-id"),
                        },
                        success: function (res) {
                            if (res.success) {
                                var $triggerChooseSessionModalNotificationBtn = $("#trigger-choose-session-modal-notification-btn");
                                var $chooseSessionOptionContainer = $("#choose-session-option-container");

                                $chooseSessionOptionContainer.empty();

                                for (var i = 0; i < Object.keys(res.data).length; i++) {
                                    var key = Object.keys(res.data)[i];
                                    var session = res.data[key];

                                    var availableSessionOption = '<a href="#" class="custom-session-option-container font-weight-normal" data-product-id="' + $this.data("product-id") + '" data-product-variant-id="' + session.id + '">' +
                                        '<div class="row custom-session-option py-3">' +
                                        '    <div class="col-9 col-md-9" style="padding-left: 15px; padding-right: 15px;">' +
                                        '        <p class="font-size-14 text-dark-grey Font-Manrope-regular mb-0">' + session.name + ' <span class="font-size-14 text-dark-grey Font-Manrope-SemiBold">( ' + session.start_time + ' - ' + session.end_time + ' WIB ) </span></p>' +
                                        '    </div>' +
                                        '    <div class="col-3 col-md-3 text-right" style="padding-left: 15px; padding-right: 15px;">' +
                                        '        <p class="font-size-14 text-green">Available</p>' +
                                        '    </div>' +
                                        '</div>' +
                                        '<div class="row">' +
                                        '    <div class="col-12 col-md-12" style="padding-left: 15px; padding-right: 15px;">' +
                                        '        <hr class="my-0"/>' +
                                        '    </div>' +
                                        '</div>' +
                                    '</a>';

                                    var fullSessionOption = '<div class="row py-3">' +
                                        '    <div class="col-9 col-md-9" style="padding-left: 15px; padding-right: 15px;">' +
                                        '        <p class="font-size-14 text-dark-grey Font-Manrope-regular mb-0">' + session.name + ' <span class="font-size-14 text-dark-grey Font-Manrope-SemiBold">( ' + session.start_time + ' - ' + session.end_time + ' WIB ) </span></p>' +
                                        '    </div>' +
                                        '    <div class="col-3 col-md-3 text-right" style="padding-left: 15px; padding-right: 15px;">' +
                                        '        <p class="font-size-14 text-red">Full</p>' +
                                        '    </div>' +
                                        '</div>' +
                                        '<div class="row">' +
                                        '    <div class="col-12 col-md-12" style="padding-left: 15px; padding-right: 15px;">' +
                                        '        <hr class="my-0"/>' +
                                        '    </div>' +
                                        '</div>';

                                    $chooseSessionOptionContainer.append(session.is_available ? availableSessionOption : fullSessionOption);
                                }

                                $(".custom-session-option-container").on("click", function (e) {
                                    e.preventDefault();

                                    var $this = $(this);
                                    $.ajax({
                                        url: "{{ route("web.ticket.set-time-of-visit") }}",
                                        method: "POST",
                                        data: {
                                            product_id: $(this).data("product-id"),
                                            product_variant_id: $(this).data("product-variant-id")
                                        },
                                        success: function (res) {
                                            if (res.success) {
                                                $(".choose-visit-time-container[data-product-id='" + $this.data("product-id") + "']").removeClass("custom-grey-border-round-box").addClass("custom-red-border-round-box");
                                                $(".choose-visit-time-label-container[data-product-id='" + $this.data("product-id") + "']")
                                                    .html('<p class="font-size-18 text-dark-grey Font-Manrope-SemiBold mb-0 font-weight-normal" style="padding-left: 20px">' + res.productVariant.name + ' <span class="font-size-18 text-dark-grey Font-Manrope-Bold">( ' + res.productVariant.start_time + ' - ' + res.productVariant.end_time + ' WIB ) </span></p>');

                                                $("#time-visit-value").html(res.time_of_visit);

                                                var $customProductContainer = $(".custom-product-container[data-product-id='" + $this.data("product-id") +  "']");
                                                $customProductContainer.find(".custom-time-of-visit-input").val(res.productVariant.id);
                                                $(".modal-close").trigger("click");
                                            } else {
                                                showCancelableModalNotification({
                                                    message: res.message
                                                });
                                            }
                                        },
                                        error: function (err) {
                                            showCancelableModalNotification({
                                                message: err.message
                                            });
                                        }
                                    });
                                });

                                $triggerChooseSessionModalNotificationBtn.trigger("click");
                            } else {
                                showCancelableModalNotification({
                                    message: res.message
                                });
                            }
                        },
                        error: function (err) {
                            showCancelableModalNotification({
                                message: err.message
                            });
                        }
                    });
                }
            });

            $('.custom-datepicker .datepicker .dow:nth-child(1)').text("Sun");
            $('.custom-datepicker .datepicker .dow:nth-child(2)').text("Mon");
            $('.custom-datepicker .datepicker .dow:nth-child(3)').text("Tue");
            $('.custom-datepicker .datepicker .dow:nth-child(4)').text("Wed");
            $('.custom-datepicker .datepicker .dow:nth-child(5)').text("Thu");
            $('.custom-datepicker .datepicker .dow:nth-child(6)').text("Fri");
            $('.custom-datepicker .datepicker .dow:nth-child(7)').text("Sat");

            var $customAdultIncreaseDecreaseQtyBtn = $('.custom-adult-increase-decrease-qty-btn');
            $customAdultIncreaseDecreaseQtyBtn.on('click', function(e) {
                e.preventDefault();

                if (validateDateAndTimeOfVisit($(this))) {
                    var $customAdultInputContainer = $(this).parents('.custom-adult-input-container');
                    var $customAdultInputQuantity = $customAdultInputContainer.find('.custom-adult-input-quantity');

                    var oldVal = setFieldToDefaultValueHandler($customAdultInputQuantity, 1);
                    var newVal = 0;
                    if ($(this).data('operator') === "+") {
                        newVal = parseInt(oldVal) + 1;
                    } else if ($(this).data('operator') === "-") {
                        newVal = parseInt(oldVal) - 1;
                    }

                    var finalQty = newVal > 0 ? newVal : 0;
                    updateOrder(
                        "{{ ProductTypeEnum::getString(ProductTypeEnum::ADD_ON) }}",
                        $(this).data("add-on-id"),
                        finalQty,
                        function () {
                            $customAdultInputQuantity.val(finalQty);

                            if (finalQty > 0) {
                                $customAdultInputContainer.removeClass('custom-grey-border-round-box').addClass('custom-red-border-round-box');
                                $customAdultInputQuantity.removeClass('custom-grey-border-input').addClass('custom-red-border-input');
                            } else {
                                $customAdultInputContainer.addClass('custom-grey-border-round-box').removeClass('custom-red-border-round-box');
                                $customAdultInputQuantity.addClass('custom-grey-border-input').removeClass('custom-red-border-input');
                            }

                            updateOrderDetailCard();
                        },
                        function () {
                            showCancelableModalNotification({
                                message: "Oops, something when wrongs."
                            });
                        }
                    );
                } else {
                    showCancelableModalNotification({
                        message: "Date of Visit & Time of Visit should be picked first."
                    });
                }
            });

            var $customTicketIncreaseDecreaseQtyBtn = $('.custom-ticket-increase-decrease-qty-btn');
            $customTicketIncreaseDecreaseQtyBtn.on('click', function(e) {
                e.preventDefault();

                if (validateDateAndTimeOfVisit($(this))) {
                    var $customTicketInputContainer = $(this).parents('.custom-ticket-input-container');
                    var $customTicketInputQuantity = $customTicketInputContainer.find('.custom-ticket-input-quantity');

                    var oldVal = setFieldToDefaultValueHandler($customTicketInputQuantity, 1);
                    var newVal = 0;
                    if ($(this).data('operator') === "+") {
                        newVal = parseInt(oldVal) + 1;
                    } else if ($(this).data('operator') === "-") {
                        newVal = parseInt(oldVal) - 1;
                    }

                    var finalQty = newVal >= 1 ? newVal : 1;
                    updateOrder(
                        "{{ ProductTypeEnum::getString(ProductTypeEnum::TICKET) }}",
                        $(this).data("product-id"),
                        finalQty,
                        function () {
                            $customTicketInputQuantity.val(finalQty);

                            updateOrderDetailCard();
                        },
                        function () {
                            showCancelableModalNotification({
                                message: "Oops, something when wrongs."
                            });
                        }
                    );
                } else {
                    showCancelableModalNotification({
                        message: "Date of Visit & Time of Visit should be picked first."
                    });
                }
            });

            var $customAdditionalProductIncreaseDecreaseQtyBtn = $('.custom-additional-product-increase-decrease-qty-btn');
            $customAdditionalProductIncreaseDecreaseQtyBtn.on('click', function(e) {
                e.preventDefault();

                if (validateDateAndTimeOfVisit($(this))) {
                    var $customInputQuantityContainer = $(this).parents('.custom-input-quantity-container');
                    var $customAdditionalProductInputQuantity = $customInputQuantityContainer.find('.custom-additional-product-input-quantity');

                    var oldVal = setFieldToDefaultValueHandler($customAdditionalProductInputQuantity, 1);
                    var newVal = 0;
                    if ($(this).data('operator') === "+") {
                        newVal = parseInt(oldVal) + 1;
                    } else if ($(this).data('operator') === "-") {
                        newVal = parseInt(oldVal) - 1;
                    }

                    var finalQty = newVal >= 1 ? newVal : 1;
                    updateOrder(
                        "{{ ProductTypeEnum::getString(ProductTypeEnum::ADD_ON) }}",
                        $(this).data("add-on-id"),
                        finalQty,
                        function () {
                            $customAdditionalProductInputQuantity.val(finalQty);

                            updateOrderDetailCard();
                        },
                        function () {
                            showCancelableModalNotification({
                                message: "Oops, something when wrongs."
                            });
                        }
                    );
                } else {
                    showCancelableModalNotification({
                        message: "Date of Visit & Time of Visit should be picked first."
                    });
                }
            });

            function buyTicketHandler($this) {
                $('.custom-buy-ticket-btn').removeClass('d-none');
                $this.toggleClass("d-none");
                $('.regular-ticket-detail-btn').addClass('mr-5').removeClass('mr-3');
                $('.private-ticket-detail-btn').addClass('mr-5').removeClass('mr-3');

                var $parent = $this.parents(".custom-feature");

                $('.custom-ticket-detail-content').addClass("d-none");
                $parent.find('.regular-ticket-detail-btn').removeClass('mr-5').addClass('mr-3');
                $parent.find('.private-ticket-detail-btn').removeClass('mr-5').addClass('mr-3');

                $.ajax({
                    url: "{{ route("web.ticket.buy-product") }}",
                    method: "POST",
                    data: {
                        product_id: $this.data("product-id")
                    },
                    success: function (res) {
                        if (res.success) {
                            if (res.product.day_type === "{{ TicketDayTypeEnum::getString(TicketDayTypeEnum::WEEKDAY) }}") {
                                $parent.find(".custom-datepicker").datepicker({
                                    format: 'yyyy-mm-dd',
                                    datesDisabled: res.disabled_dates,
                                    daysOfWeekDisabled: "0,6",
                                    startDate: today,
                                    endDate: new Date(today.getFullYear(), today.getMonth() + 2, 0),
                                    templates: {
                                        leftArrow: "<img src='{{ asset("web/assets/icons/calendar-dark-grey-chevron-left.png") }}' style='margin-bottom: 10px;'/>",
                                        rightArrow: "<img src='{{ asset("web/assets/icons/calendar-dark-grey-chevron-right.png") }}' style='margin-bottom: 10px;'/>"
                                    },
                                }).on("changeDate", onChangeDate);
                            } else if (res.product.day_type === "{{ TicketDayTypeEnum::getString(TicketDayTypeEnum::WEEKEND) }}") {
                                $parent.find(".custom-datepicker").datepicker({
                                    format: 'yyyy-mm-dd',
                                    datesDisabled: res.disabled_dates,
                                    daysOfWeekDisabled: "1,2,3,4,5",
                                    startDate: today,
                                    endDate: new Date(today.getFullYear(), today.getMonth() + 2, 0),
                                    templates: {
                                        leftArrow: "<img src='{{ asset("web/assets/icons/calendar-dark-grey-chevron-left.png") }}' style='margin-bottom: 10px;'/>",
                                        rightArrow: "<img src='{{ asset("web/assets/icons/calendar-dark-grey-chevron-right.png") }}' style='margin-bottom: 10px;'/>"
                                    },
                                }).on("changeDate", onChangeDate);
                            }

                            $parent.find('.custom-ticket-detail-content').toggleClass("d-none");

                            updateOrderDetailCard();
                        } else {
                            showCancelableModalNotification({
                                message: "Oops, something when wrongs."
                            });
                        }
                    },
                    error: function (err) {
                        showCancelableModalNotification({
                            message: err.message
                        });
                    }
                });
            }

            var buyBtnClickedCount = 0;
            var tempSelectedProductId = null;

            $('.custom-buy-ticket-btn').on("click", function(e) {
                e.preventDefault();
                buyBtnClickedCount++;

                if (buyBtnClickedCount > 1) {
                    tempSelectedProductId = $(this).data("product-id");

                    showChangeTicketConfirmationModal();
                } else {
                    resetState();

                    selectedProductId = $(this).data("product-id");

                    buyTicketHandler($(this));
                }
            });

            $("#change-ticket-yes-btn").on("click", function (e) {
                e.preventDefault();

                resetState();

                selectedProductId = tempSelectedProductId;

                buyTicketHandler($(".custom-buy-ticket-btn[data-product-id='" + selectedProductId + "']"));
                $(".modal-close").trigger("click");
            });

            $("#change-ticket-no-btn").on("click", function (e) {
                e.preventDefault();

                $(".modal-close").trigger("click");
            });

            $("input[type=checkbox]").on("change", function (e) {
                e.preventDefault();

                if (validateDateAndTimeOfVisit($(this))) {
                    var $parent = $(this).parents(".custom-add-on-container");
                    if ($(this).is(':checked')) {
                        var finalQty = 1;
                        updateOrder(
                            "{{ ProductTypeEnum::getString(ProductTypeEnum::ADD_ON) }}",
                            $(this).data("add-on-id"),
                            finalQty,
                            function () {
                                $parent.removeClass("custom-grey-border-box");
                                $parent.addClass("custom-red-border-box");
                                $parent.find('.custom-input-quantity-container').removeClass("d-none");
                                $parent.find('.custom-add-on-member-price').addClass("text-red").removeClass("text-dark-grey");
                                $parent.find('.custom-add-on-guest-price-container').addClass("col-md-6").removeClass("col-md-12");

                                updateOrderDetailCard();
                            },
                            function () {
                                showCancelableModalNotification({
                                    message: "Oops, something when wrongs."
                                });
                            }
                        );
                    } else {
                        var finalQty = 0;
                        updateOrder(
                            "{{ ProductTypeEnum::getString(ProductTypeEnum::ADD_ON) }}",
                            $(this).data("add-on-id"),
                            finalQty,
                            function () {
                                $parent.addClass("custom-grey-border-box");
                                $parent.removeClass("custom-red-border-box");
                                $parent.find('.custom-input-quantity-container').addClass("d-none");
                                $parent.find('.custom-add-on-member-price').removeClass("text-red").addClass("text-dark-grey");
                                $parent.find('.custom-add-on-guest-price-container').addClass("col-md-12").removeClass("col-md-6");

                                updateOrderDetailCard();
                            },
                            function () {
                                showCancelableModalNotification({
                                    message: "Oops, something when wrongs."
                                });
                            }
                        );
                    }
                } else {
                    $(this).prop("checked", false);
                    showCancelableModalNotification({
                        message: "Date of Visit & Time of Visit should be picked first."
                    });
                }
            });

            var $regularTicketDetailBtn = $(".regular-ticket-detail-btn");
            var $privateTicketDetailBtn = $(".private-ticket-detail-btn");
            var $orderBtn = $('#order-btn');

            $regularTicketDetailBtn.on("click", function (e) {
                e.preventDefault();

                showRegularTicketDetailModal();
            });

            $privateTicketDetailBtn.on("click", function (e) {
                e.preventDefault();

                showPrivateTicketDetailModal();
            });

            $orderBtn.on("click", function (e) {
                e.preventDefault();

                $.ajax({
                    url: "{{ route("web.ticket.validate-order-before-checkout") }}",
                    method: "GET",
                    success: function (res) {
                        if (res.success) {
                            if (validateDateAndTimeOfVisit($(".custom-date-of-visit-input[data-product-id='" + res.product_id + "']"))) {
                                if ("{{ auth()->user()->hasRole(RoleEnum::getString(RoleEnum::GUEST)) }}") {
                                    showCheckoutOptionsModal();
                                } else {
                                    window.location = "{{ route("web.ticket.order-information.checkout-as-member") }}"
                                }
                            } else {
                                showCancelableModalNotification({
                                    message: "Make sure the Ticket, Date of Visit & the Time of Visit is already picked, to continue checkout."
                                });
                            }
                        } else {
                            showCancelableModalNotification({
                                message: res.message
                            });
                        }
                    },
                    error: function (err) {
                        showCancelableModalNotification({
                            message: "Failed to checkout"
                        });
                    }
                });
            });
        });
    </script>
@endpush