@extends("web.layouts.master")

@section("content")
    <section class="space--sm background-light-grey">
        <div class="container">
            <form id="form-order-information" method="POST" action="{{ route("web.ticket.order-information.checkout-with-membership.store") }}">
                @csrf
                <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">
                                <div class="feature custom-feature">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold type--uppercase mb-1">Member Data - Parents</p>
                                    <hr class="red-border my-3 mb-5" />

                                    @include("web.components.general-information-form")

                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Address <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="text" name="parent_information[address]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your address"/>
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Password <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="password" name="parent_information[password]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your password"/>
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Confirm Password <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="password" name="parent_information[password_confirmation]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your confirm password"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                                <div class="feature custom-feature mt-4">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold type--uppercase mb-1">Member Data - Kids</p>
                                    <hr class="red-border my-3 mb-3" />

                                    <p class="font-size-18 text-red Font-Manrope-Bold mb-5">Data for E-member card</p>

                                    <div class="form-group">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Full Name <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="text" name="member_information[full_name]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your full name" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Date of Birth <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4 background-light-grey">
                                            <input type="text" name="member_information[date_of_birth]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="d - M - yyyy" readonly/>
                                        </div>
                                        <div class="custom-datepicker custom-grey-border-box mb-2" style="padding: 0 8px 8px 8px;"></div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                                <div class="feature custom-feature mt-4">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold type--uppercase mb-1">Kids Information</p>
                                    <hr class="red-border my-3 mb-5" />

                                    @foreach (range(1, collect($bookingHelper->getBookingItems())->first()["qty"]) as $key => $item)
                                        <div class="row mb-4">
                                            <div class="col-12 col-md-2" style="padding: 32px 20px;">
                                                <span class="font-size-24 Font-Manrope-ExtraBold custom-badge">{{ $key + 1 }}</span>
                                            </div>
                                            <div class="col-12 col-md-5">
                                                <div class="form-group">
                                                    <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Full Name <span class="text-red">*</span></label>
                                                    <div class="custom-big-input-container mb-4">
                                                        <input type="text" name="kid_informations[{{ $key }}][full_name]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your full name" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-5 mt-0">
                                                <div class="form-group">
                                                    <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Age <span class="text-red">*</span></label>
                                                    <div class="custom-big-input-container mb-4">
                                                        <input type="number" name="kid_informations[{{ $key }}][age]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your age" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                                <div class="feature custom-feature mt-4">
                                    <div class="row">
                                        <div class="col-12 col-md-6 py-3">
{{--                                            <a class="type--uppercase" href="{{ url()->previous() }}">--}}
{{--                                                <span class="btn__text font-size-18 text-dark-grey Font-Manrope-ExtraBold">--}}
{{--                                                    <img src="{{ asset("web/assets/icons/chevron-left.png") }}" style="margin-top: -3px; margin-right: 10px;"   class="mb-1"/>--}}
{{--                                                    Back--}}
{{--                                                </span>--}}
{{--                                            </a>--}}
                                        </div>
                                        <div class="col-12 col-md-6 text-right">
                                            <a id="checkout-btn" class="btn custom-btn custom-btn-danger type--uppercase" href="#">
                                                <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                    Checkout
                                                    <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>
                    <div class="col-12 col-md-12 col-lg-4" data-aos="fade-up" data-aos-duration="1500">
                        @include("web.components.order-detail-card")
                    </div>
                </div>
                <!--end of row-->
            </form>
        </div>
        <!--end of container-->
    </section>
    @include("web.components.modal-with-loading-icon", [
        "modalIndex" => 0
    ])
    @include("web.components.cancelable-notification-modal", [
        "modalIndex" => 1
    ])
    @include("web.components.notification-alert", [
        "modalIndex" => 2
    ])
@endsection

@push("stackJs")
    <script>
        $(document).ready(function () {
            var today = new Date();

            $('.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");

            $(".custom-datepicker").datepicker({
                format: 'yyyy-mm-dd',
                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", function (e) {
                $("input[name='member_information[date_of_birth]']").val(e.format("d - M - yyyy"));
            });

            $(".custom-datepicker").datepicker('update', '2000-' + today.getMonth() + '-' + today.getDay());

            var $checkoutBtn = $("#checkout-btn");
            var isBookingEmpty = {{ $bookingHelper->getCount() }} == 0 ? true : false;
            var $formOrderInformation = $("#form-order-information");

            $checkoutBtn.on("click", function (e) {
                e.preventDefault();
                if (isBookingEmpty) {
                    showAlertNotification({
                        "message": "Booking is empty."
                    });
                    return;
                }

                var serializeArray = $formOrderInformation.serializeArray();

                var data = {};
                for (var key in serializeArray) {
                    var obj = serializeArray[key];
                    data[obj.name] = obj.value;
                }

                showModalWithLoadingIcon();
                $.ajax({
                    url: "{{ route("web.ticket.order-information.checkout-with-membership.store") }}",
                    method: "POST",
                    data: data,
                    success: function (res) {
                        hideModalWithLoadingIcon();

                        if (res.success) {
                            window.location = res.redirect_url;
                        } else {
                            showCancelableModalNotification({
                                "message": res.message
                            });
                        }
                    },
                    error: function (res) {
                        hideModalWithLoadingIcon();

                        showCancelableModalNotification({
                            "message": "Failed to save Order Information."
                        });
                    }
                });
            });
        });
    </script>
@endpush