@extends("web.layouts.master")

@section("content")
    <section class="space--sm background-light-grey">
        <div class="container switchable switchable--switch">
            <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">
                            <span class="font-size-36 text-dark-grey Font-Manrope-ExtraBold pl-0 custom-second-section-title">Pick a location</span>
                        </div>

                        @foreach ($locations as $key => $location)
                            <div class="col-12 col-md-12 pb-4" data-aos="fade-up" data-aos-duration="1000">
                                <div class="feature custom-feature">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h4 class="font-size-24 text-dark-grey Font-Manrope-ExtraBold text-uppercase">{{ $location->name }}</h4>
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Light ml-0">
                                                {{ $location->address }}
                                            </p>
                                        </div>
                                        <div class="col-md-6 text-right">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 text-right">
                                            <hr />
                                            <a class="btn custom-wrap-content-btn custom-btn-danger" href="{{ route("web.ticket.show", ["locationSlug" => $location->code]) }}">
                                                <span class="btn__text font-size-16 Font-Manrope-SemiBold">
                                                    Choose
                                                </span>
                                            </a>
                                        </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">
                    <div class="feature custom-feature">
                        <h4 class="font-size-24 text-dark-grey Font-Manrope-ExtraBold">Want to reschedule ?</h4>
                        <hr />
                        <ol class="ml-4 mr-4" style="list-style-type: inherit;">
                            <li><span class="font-size-14 text-dark-grey Font-Manrope-Light">Rescheduling can be done only a maximum of 1x. More than 1x is considered forfeited.</span></li>
                            <li><span class="font-size-14 text-dark-grey Font-Manrope-Light">Rescheduling can be done no later than H-1 according to the schedule that is still available.</span></li>
                            <li><span class="font-size-14 text-dark-grey Font-Manrope-Light">Reschedule cannot be moved to another branch.</span></li>
                            <li><span class="font-size-14 text-dark-grey Font-Manrope-Light">Tickets that have been purchased cannot be canceled (non-refundable).</span></li>
                        </ol>
                        <form id="form-find-ticket" method="POST">
                            <div class="custom-input-container mb-4">
                                <i class="fa fa-search custom-input-icon text-dark-grey"></i>
                                <input type="text" name="order_id" class="font-size-14 text-dark-grey Font-Manrope-Light custom-input-field form-control" placeholder="Input Order ID"  onkeydown="this.value = this.value.toUpperCase()"/>
                            </div>

                            <a id="find-ticket-btn" class="btn custom-fluid-btn custom-btn-danger" href="#">
                                <span class="btn__text font-size-16 Font-Manrope-SemiBold">
                                    Find Ticket
                                </span>
                            </a>
                        </form>
                        <p class="font-size-14 text-dark-grey Font-Manrope-Regular custom-horizontal-line-with-text my-3 mx-4">or</p>
                        <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>
            <!--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
    ])
@endsection

@push("stackJs")
    <script>
        $(document).ready(function () {
            var $findTicketBtn = $("#find-ticket-btn");
            var $formFindTicket = $("#form-find-ticket");
            var $orderIdInput = $("input[name='order_id']");

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

                if ($orderIdInput.val() === "" || $orderIdInput.val() === null) {
                    showCancelableModalNotification({
                        "message": "Please kindly fill the Order ID."
                    });
                } else {
                    var serializeArray = $formFindTicket.serializeArray();

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

                    showModalWithLoadingIcon();
                    $.ajax({
                        url: "{{ route("web.ticket.find") }}",
                        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 find ticket."
                            });
                        }
                    });
                }
            });
        });
    </script>
@endpush