@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-as-member.store") }}">
                @csrf
                <div class="row">
                    <div class="col-12 col-md-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">Parents Information</p>
                                    <hr class="red-border my-3 mb-5" />

                                    <div class="row mb-4">
                                        <div class="col-12 col-md-3">
                                            <div class="form-group ">
                                                <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Title <span class="text-red">*</span></label>

                                                <div class="custom-big-input-container mb-4 background-light-grey">
                                                    <input type="text"  class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your full name" value="{{ ucwords($parentInformation["title"]) }}" readonly/>
                                                    <input type="hidden" name="parent_information[title]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your full name" value="{{ ucwords($parentInformation["title"]) }}" readonly/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-9">
                                            <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 background-light-grey">
                                                    <input type="text" name="parent_information[full_name]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your full name" value="{{ $parentInformation["full_name"] }}" readonly/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Email <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-1 background-light-grey">
                                            <input type="text" name="parent_information[email]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your email" value="{{ $parentInformation["email"] }}" readonly/>
                                        </div>
                                        <p class="font-size-16 text-grey Font-Manrope-SemiBold ml-3">E-ticket will be sent to this email</p>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Phone Number <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4 background-light-grey">
                                            <input type="number" name="parent_information[phone_number]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your phone number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="12" value="{{ $parentInformation["phone_number"] }}" readonly/>
                                        </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" value="{{ $kidInformations[$key]["full_name"] ?? null }}"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-5">
                                                <div class="form-group">
                                                    <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" value="{{ $kidInformations[$key]["age"] ?? null }}"/>
                                                        </div>
                                                    </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-md-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 $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-as-member.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