@extends("web.layouts.master")

@section("content")
    <section class="height-auto text-center background-light-grey">
        <div class="container pos-vertical-center">
            <div class="row">
                <div class="col-12 col-md-8 text-left">
                    <div class="row">
                        <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                            <div class="feature custom-feature p-0">
                                <div class="p-5">
                                    <div class="row m-0 mb-5">
                                        <div class="p-0" style="width: 20%">
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                                Location
                                            </p>
                                        </div>
                                        <div style="width: 80%; padding: 13px 0px 0px 15px;">
                                            <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-4 col-md-2">
                                            <img src="{{ asset('web/assets/secondary-logo.png') }}" width="112" height="112"/>
                                        </div>
                                        <div class="col-8 col-md-6">
                                            <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-1 type--uppercase">{{ $booking->location->name }}</p>
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-2">{{ $booking->location->address }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="p-5 background-pink">
                                    <div class="row m-0 mb-5">
                                        <div class="p-0" style="width: 17%">
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                                Order Detail
                                            </p>
                                        </div>
                                        <div style="width: 83%; padding: 13px 0px 0px 15px;">
                                            <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <p class="font-size-14 text-light-grey Font-Manrope-Light mb-1">Ticket</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $booking->product->name }}</p>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <p class="font-size-14 text-light-grey Font-Manrope-Light mb-1">Date of Visit</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ Carbon::parse($booking->booking_date)->format("d - M - Y") }}</p>
                                        </div>
                                        <div class="col-md-4 mt-0 mb-3">
                                            <p class="font-size-14 text-light-grey Font-Manrope-Light mb-1">Time of Visit</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold mb-0">{{ $booking->productVariant->name }}</p>
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-1">{{ $startTimeAndEndTime }}</p>
                                        </div>
                                    </div>

                                    <div class="custom-red-border-box background-white p-5 mt-5">
                                        @foreach ($booking->bookingDetails as $bookingDetail)
                                            <div class="row">
                                                <div class="col-6 col-md-6">
                                                    @if ($bookingDetail->product_type == ProductTypeEnum::getString(ProductTypeEnum::TICKET))
                                                        <p class="font-size-16 text-dark-grey Font-Manrope-Regular">{{ $bookingDetail->quantity . ' Ticket' }}</p>
                                                    @elseif ($bookingDetail->product_type == ProductTypeEnum::getString(ProductTypeEnum::MEMBERSHIP))
                                                        <p class="font-size-16 text-dark-grey Font-Manrope-Regular">Membership</p>
                                                    @elseif ($bookingDetail->product_type == ProductTypeEnum::getString(ProductTypeEnum::ADD_ON))
                                                        @if ($bookingDetail->product_name == "Adult")
                                                            <p class="font-size-16 text-dark-grey Font-Manrope-Regular">{{ $bookingDetail->quantity . ' ' . $bookingDetail->product_name }}</p>
                                                        @else
                                                            <p class="font-size-16 text-dark-grey Font-Manrope-Regular">{{ '( ' . $bookingDetail->quantity . 'x ride ) ' . $bookingDetail->product_name }}</p>
                                                        @endif
                                                    @endif
                                                </div>
                                                <div class="col-6 col-md-6 text-right">
                                                    <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ GeneralHelper::transformAmount($bookingDetail->unit_price * $bookingDetail->quantity) }}</p>
                                                </div>
                                                <div class="col-md-12 mt-0">
                                                    <hr class="my-3 dark-grey-border"/>
                                                </div>
                                            </div>
                                        @endforeach
                                        <div class="row">
                                            <div class="col-6 col-md-6">
                                                <p class="font-size-16 text-dark-grey Font-Manrope-Bold">Total</p>
                                            </div>
                                            <div class="col-6 col-md-6 text-right mt-0">
                                                <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold">{{ GeneralHelper::transformAmount($booking->transaction->total - $booking->transaction->unique_code) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-5">
                                    <div class="row m-0 mb-4">
                                        <div class="p-0" style="width: 27%">
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                                Parents Information
                                            </p>
                                        </div>
                                        <div style="width: 73%; padding: 13px 0px 0px 15px;">
                                            <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                        </div>
                                    </div>

                                    <div class="row mb-4">
                                        <div class="col-12 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-1">Title</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ ucwords($booking->bookingParentInformation->title) }}</p>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-1">Full Name</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ ucwords($booking->bookingParentInformation->name) }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-1">Email</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $booking->bookingParentInformation->email }}</p>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-1">Phone Number</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $booking->bookingParentInformation->phone_number }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="p-5 background-pink">
                                    <div class="row m-0 mb-4">
                                        <div class="p-0" style="width: 21%">
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                                Kid Information
                                            </p>
                                        </div>
                                        <div style="width: 79%; padding: 13px 0px 0px 15px;">
                                            <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                        </div>
                                    </div>

                                    @foreach ($booking->bookingParentInformation->bookingKidInformations as $kidInformation)
                                        <div class="row mb-5">
                                            <div class="col-12 col-md-6">
                                                <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-1">Full Name</p>
                                                <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ $kidInformation->name }}</p>
                                            </div>
                                            <div class="col-12 col-md-6">
                                                <p class="font-size-14 text-dark-grey Font-Manrope-Light mb-1">Age</p>
                                                <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ $kidInformation->age }} year</p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="row p-5">
                                    <div class="col-12 col-md-12 col-lg-12 text-center">
                                        <p class="font-size-22 text-dark-grey Font-Manrope-ExtraBold type--uppercase">Does the information above is eligible?</p>
                                    </div>
                                    <div class="col-12 col-md-12 col-lg-12 text-center">
                                        <a id="change-booking-status-btn" class="btn custom-wrap-content-btn custom-btn-danger collapsible mt--2" href="#">
                                            <span class="btn__text font-size-16 Font-Manrope-SemiBold">
                                                Yes, the information above is eligible.
                                            </span>
                                        </a>
                                    </div>
                                    <div class="col-12 col-md-12 col-lg-12 text-center">
                                        <a class="btn custom-wrap-content-btn custom-btn-secondary collapsible mt--1" href="{{ route("web.home") }}">
                                            <span class="btn__text font-size-16 Font-Manrope-SemiBold">
                                                No, the information above isn't eligible.
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </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-modal", [
        "modalIndex" => 2
    ])
@endsection

@push("stackJs")
    <script>
        $(document).ready(function () {
            var $changeBookingStatusBtn = $("#change-booking-status-btn");

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

                showModalWithLoadingIcon();
                $.ajax({
                    url: "{{ route("web.set-booking-status-as-attended") }}",
                    method: "POST",
                    data: {
                        booking_id: "{{ $booking->id }}"
                    },
                    success: function (res) {
                        hideModalWithLoadingIcon();

                        var goToHomeBtn = '</br><a id="change-booking-status-btn" class="btn custom-wrap-content-btn custom-btn-danger collapsible mt--1" href="{{ route("web.home") }}">\n' +
                            '                                            <span class="btn__text font-size-16 Font-Manrope-SemiBold">\n' +
                            '                                                Go to Home\n' +
                            '                                            </span>\n' +
                            '                                        </a>';


                        if (res.success) {
                            showModalNotification({
                                "message": "Attendation successfully." + goToHomeBtn ,
                            });
                        } else {
                            showCancelableModalNotification({
                                "message": res.message
                            });
                        }
                    },
                    error: function (res) {
                        hideModalWithLoadingIcon();

                        showCancelableModalNotification({
                            "message": "Failed to set status as Attended."
                        });
                    }
                });
            });
        });
    </script>
@endpush