@extends("web.layouts.master")

@section("content")
    <section class="space--sm switchable siwtchable--switch background-light-grey">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-4" data-aos="fade-up" data-aos-duration="1500">
                    <div class="feature custom-feature">
                        <h4 class="font-size-24 text-dark-grey Font-Manrope-ExtraBold">Previous Schedule</h4>
                        <hr />
                        <p class="font-size-14 text-light-grey Font-Manrope-Light mb-1">Date of Visit</p>
                        <p class="font-size-14 text-dark-grey Font-Manrope-SemiBold">{{ Carbon::parse($transaction->booking->booking_date)->format("d - M - Y") }}</p>

                        <p class="font-size-14 text-light-grey Font-Manrope-Light mb-1">Time of Visit</p>
                        <p class="font-size-14 text-dark-grey Font-Manrope-SemiBold mb-0">{{ $startTimeAndEndTime }}</p>
                        <hr />

                        <a class="btn custom-contact-us-btn" target="_blank" href="https://api.whatsapp.com/send?phone={{$siteInformation->contact_no}}&text=Hello,%20I%20have%20a%20question%20about">
                            <i class="fa fa-whatsapp text-green-whatsapp font-size-18 pr-2"></i>
                            <span class="btn__text font-size-16 Font-Manrope-SemiBold text-green-whatsapp">
                                Contact Us
                            </span>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-md-8" data-aos="fade-up" data-aos-duration="1000">
                    <div class="feature custom-feature">
                        <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold">New Schedule</p>

                        <div class="custom-reschedule-container custom-red-border-box" data-product-id="{{ $product->id }}">
                            <div class="row">
                                <div class="col-12 col-md-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
                                    <input type="hidden" class="custom-date-of-visit-input" data-product-id="{{ $product->id }}"/>
                                </div>
                                <div class="col-12 col-md-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-new-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>
                                    <a id="reschedule-btn" class="btn custom-big-fluid-btn custom-btn-danger type--uppercase" href="#">
                                        <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                            Reschedule
                                            <img src="{{ asset("web/assets/icons/chevron-right.png") }}" style="margin-top: -3px; margin-right: 10px;"   class="mb-1"/>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    @include("web.components.reschedule-confirmation-modal", [
        "modalIndex" => 0
    ])
    @include("web.components.choose-new-session-modal", [
        "modalIndex" => 1
    ])
    @include("web.components.cancelable-notification-modal", [
        "modalIndex" => 2
    ])
    @include("web.components.modal-with-loading-icon", [
        "modalIndex" => 3
    ])
@endsection

@push("stackJs")
    <script>
        var selectedProductId = {{ $product->id }};

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

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

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

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

        function clearTimeOfVisit() {
            $("#time-visit-value").text("-");
            $(".custom-time-of-visit-input").val("");

            var $customRescheduleContainer = $(".custom-reschedule-container[data-product-id='" + selectedProductId +  "']");
            $customRescheduleContainer.find(".choose-visit-time-container")
                .addClass("custom-grey-border-round-box")
                .removeClass("custom-red-border-round-box");
            $customRescheduleContainer.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>');
        }

        $(document).ready(function () {
            var $rescheduleBtn = $("#reschedule-btn");

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

                $.ajax({
                    url: "{{ route("web.reschedule.validate-reschedule-request-before-submit") }}",
                    method: "POST",
                    data: {
                        order_id: "{{ $transaction->order_id }}"
                    },
                    success: function (res) {
                        if (res.success) {
                            if (validateDateAndTimeOfVisit($(".custom-date-of-visit-input[data-product-id='" + res.product_id + "']"))) {
                                showRescheduleConfirmationModal();
                            } else {
                                showCancelableModalNotification({
                                    message: "Date of Visit & Time of Visit is required."
                                });
                            }
                        } else {
                            showCancelableModalNotification({
                                message: res.message
                            });
                        }
                    },
                    error: function (err) {
                        showCancelableModalNotification({
                            message: "Failed to reschedule"
                        });
                    }
                });

            });

            var today = new Date();

            function onChangeDate(e) {
                var $customDateOfVisitInput = $(this).parents('.custom-reschedule-container').find(".custom-date-of-visit-input");
                $.ajax({
                    url: "{{ route("web.reschedule.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 $chooseNewSessionPickerBtn = $('.choose-new-session-picker-btn');

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

                var $customRescheduleContainer = $(".custom-reschedule-container[data-product-id='" + $(this).data("product-id") +  "']");
                var $customDateOfVisitInput = $customRescheduleContainer.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.reschedule.get-sessions-by-product-id") }}",
                        method: "POST",
                        data: {
                            product_id: $this.data("product-id"),
                        },
                        success: function (res) {
                            if (res.success) {
                                var $triggerChooseSessionModalNotificationBtn = $("#trigger-choose-new-session-modal-notification-btn");
                                var $chooseSessionOptionContainer = $("#choose-new-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-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-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-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.reschedule.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 $customRescheduleContainer = $(".custom-reschedule-container[data-product-id='" + $this.data("product-id") +  "']");
                                                $customRescheduleContainer.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
                            });
                        }
                    });
                }
            });

            if ("{{ $product->day_type }}" === "{{ TicketDayTypeEnum::getString(TicketDayTypeEnum::WEEKDAY) }}") {
                $(".custom-datepicker").datepicker({
                    format: 'yyyy-mm-dd',
                    datesDisabled: {!! json_encode($disabledDates) !!},
                    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 ("{{ $product->day_type }}" === "{{ TicketDayTypeEnum::getString(TicketDayTypeEnum::WEEKEND) }}") {
                $(".custom-datepicker").datepicker({
                    format: 'yyyy-mm-dd',
                    datesDisabled: {!! json_encode($disabledDates) !!},
                    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);
            }

            $('.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");
        });
    </script>
@endpush