@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 text-left">
                        <div class="col-12 col-md-12" data-aos="fade-up" data-aos-duration="1000">
                            <div class="feature custom-feature p-5">
                                <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-4">{{ $transaction->order_id }}</p>
                                <span class="font-size-18 text-white Font-Manrope-Bold badge badge-pill type--uppercase" style="color: white !important; background-color: {{ GeneralHelper::getHexaCodeByStatus($transaction->status) }}; border-radius: 20px; padding: 5px 20px;">{{ $transaction->converted_status }}</span>

                                <p class="font-size-18 text-dark-grey Font-Manrope-Bold mb-4 mt-5">Total Payment</p>
                                <p class="font-size-48 text-dark-grey Font-Manrope-ExtraBold" style="margin-bottom: 60px;">{{ GeneralHelper::transformAmount($transaction->total) }}</p>

                                <div class="row m-0 my-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 mb-4">
                                    <div class="col-6 col-md-6">
                                        <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-1">Order Date</p>
                                        <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ GeneralHelper::convertDateFormat($transaction->transaction_date) }}</p>
                                    </div>
                                    <div class="col-6 col-md-6">
                                        <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-1">Payment Method</p>
                                        <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ $transaction->converted_payment_method }}</p>
                                    </div>
                                </div>

                                @if ($transaction->transaction_type != TransactionTypeEnum::getString(TransactionTypeEnum::MEMBERSHIP_ONLY))
                                    <div class="row mb-4">
                                        <div class="col-6 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-1">Date of Visit</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ Carbon::parse($transaction->booking_date)->format("d - M - Y") }}</p>
                                        </div>
                                        <div class="col-6 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-1">Time of Visit</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold mb-0">{{ $productVariant->name . ' ' . $startTimeAndEndTime}}</p>
                                        </div>
                                    </div>

                                    <div class="row mb-4">
                                        <div class="col-6 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-1">Ticket</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ $transaction->product->name }}</p>
                                        </div>
                                        <div class="col-6 col-md-6">
                                            <p class="font-size-14 text-dark-grey Font-Manrope-Regular mb-1">Location</p>
                                            <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ $transaction->location->name }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if (
                                    $transaction->payment_method == PaymentMethodEnum::getString(PaymentMethodEnum::BANK_TRANSFER) &&
                                    $transaction->status == TransactionStatusEnum::getString(TransactionStatusEnum::PENDING)
                                )
                                    <div class="row m-0 my-5">
                                        <div class="p-0" style="width: 28%">
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                                Order Receipt
                                            </p>
                                        </div>
                                        <div style="width: 72%; padding: 13px 0px 0px 15px;">
                                            <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                        </div>
                                    </div>

                                    <div class="row mt--2">
                                        <div class="col-12 col-md-12">
                                            <div class="row">
                                                <div class="col-md-1-half-5"></div>
                                                <div class="col-9 col-md-9 text-center">
                                                    <a class="btn custom-btn custom-btn-danger type--uppercase mb-5" href="{{ route("web.order.payment-confirmation.show", ["orderId" => $transaction->order_id]) }}">
                                                        <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                            <img src="{{ asset("web/assets/icons/upload-icon.png") }}" style="margin-top: -2px; margin-right: 10px; width: 20px; height: 20px" class="mb-1"/>
                                                            Upload Proof of Payment
                                                        </span>
                                                    </a>
                                                </div>
                                                <div class="col-md-1-half-5"></div>
                                            </div>
                                        </div>
                                    </div>
                                @elseif (
                                    $transaction->payment_method !== PaymentMethodEnum::getString(PaymentMethodEnum::BANK_TRANSFER) &&
                                    $transaction->status == TransactionStatusEnum::getString(TransactionStatusEnum::PENDING)
                                )
                                    <div class="row m-0 my-5">
                                        <div class="p-0" style="width: 28%">
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                                Continue Payment
                                            </p>
                                        </div>
                                        <div style="width: 72%; padding: 13px 0px 0px 15px;">
                                            <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                        </div>
                                    </div>

                                    <div class="row mt--2">
                                        <div class="col-12 col-md-12">
                                            <div class="row">
                                                <div class="col-md-1-half-5"></div>
                                                <div class="col-9 col-md-9 text-center">
                                                    <a class="btn custom-btn custom-btn-danger type--uppercase mb-5" href="{{ $transaction->xendit_invoice_url }}">
                                                        <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                            Continue Payment
                                                        </span>
                                                    </a>
                                                </div>
                                                <div class="col-md-1-half-5"></div>
                                            </div>
                                        </div>
                                    </div>
                                @elseif (
                                    $transaction->status == TransactionStatusEnum::getString(TransactionStatusEnum::APPROVED) &&
                                    $transaction->transaction_type !== TransactionTypeEnum::getString(TransactionTypeEnum::MEMBERSHIP_ONLY)
                                )
                                    <div class="row m-0 my-5">
                                        <div class="p-0" style="width: 28%">
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                                Booking
                                            </p>
                                        </div>
                                        <div style="width: 72%; padding: 13px 0px 0px 15px;">
                                            <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                        </div>
                                    </div>

                                    <div class="row mt--2">
                                        <div class="col-12 col-md-12">
                                            <div class="row">
                                                <div class="col-md-1-half-5"></div>
                                                <div class="col-9 col-md-9 text-center">
                                                    <a class="btn custom-btn custom-btn-danger type--uppercase mb-5" href="{{
                                                     route("web.reschedule.ticket-confirmation", [
                                                        "orderId" => $transaction->order_id
                                                     ]) }}">
                                                        <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                            See my Booking
                                                        </span>
                                                    </a>
                                                </div>
                                                <div class="col-md-1-half-5"></div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="row mx-0 my-5">
                                    <div class="p-0" style="width: 20%">
                                        <p class="font-size-18 text-dark-grey Font-Manrope-Bold">
                                            Product Detail
                                        </p>
                                    </div>
                                    <div style="width: 80%; padding: 13px 0px 0px 15px;">
                                        <p class="custom-dashed-line" style="padding-top: 2px;"></p>
                                    </div>
                                </div>
                                @foreach ($transaction->transactionDetails as $transactionDetail)
                                    <div class="custom-red-border-box background-white p-5 mt-5">

                                        <div class="row">
                                            <div class="col-6 col-md-6">
                                                <p class="font-size-16 text-dark-grey Font-Manrope-Regular">Name</p>
                                            </div>
                                            <div class="col-6 col-md-6 text-right">
                                                @if ($transactionDetail->product_type == ProductTypeEnum::getString(ProductTypeEnum::TICKET))
                                                    <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">Ticket</p>
                                                @else
                                                    <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $transactionDetail->product_name }}</p>
                                                @endif
                                            </div>
                                            <div class="col-12 col-md-12 mt-0">
                                                <hr class="my-3 dark-grey-border"/>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-6 col-md-6">
                                                <p class="font-size-16 text-dark-grey Font-Manrope-Regular">Price</p>
                                            </div>
                                            <div class="col-6 col-md-6 text-right">
                                                <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ GeneralHelper::transformAmount($transactionDetail->unit_price) }}</p>
                                            </div>
                                            <div class="col-12 col-md-12 mt-0">
                                                <hr class="my-3 dark-grey-border"/>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 col-md-6">
                                                <p class="font-size-16 text-dark-grey Font-Manrope-Regular">Quantity</p>
                                            </div>
                                            <div class="col-6 col-md-6 text-right">
                                                <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $transactionDetail->quantity }}</p>
                                            </div>
                                            <div class="col-12 col-md-12 mt-0">
                                                <hr class="my-3 dark-grey-border"/>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 col-md-6">
                                                <p class="font-size-16 text-dark-grey Font-Manrope-Bold">Sub Total</p>
                                            </div>
                                            <div class="col-6 col-md-6 text-right">
                                                <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold">{{ GeneralHelper::transformAmount($transactionDetail->sub_total) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection