@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 text-center">
                                    <p class="font-size-28 text-dark-grey Font-Manrope-Bold mb-0 text">Please continue the payment process</p>
                                    <p class="font-size-28 text-dark-grey Font-Manrope-Bold mb-1">before the time runs out</p>

                                    <div class="row mt-5">
                                        <div class="col-12 col-md-3">
                                            <div class="row">
                                                <div class="col-3 col-md-3 p-0">
                                                    <p id="hour" class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-1">00</p>
                                                    <p class="font-size-14 text-dark-grey Font-Manrope-Light">Hour</p>
                                                </div>
                                                <div class="col-1 col-md-1-half-5 p-0">
                                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-1">:</p>
                                                </div>
                                                <div class="col-3 col-md-3 p-0">
                                                    <p id="minute"  class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-1">00</p>
                                                    <p class="font-size-14 text-dark-grey Font-Manrope-Light">Minute</p>
                                                </div>
                                                <div class="col-1 col-md-1-half-5 p-0">
                                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-1">:</p>
                                                </div>
                                                <div class="col-3 col-md-3 p-0">
                                                    <p id="second" class="font-size-24 text-dark-grey Font-Manrope-ExtraBold mb-1">00</p>
                                                    <p class="font-size-14 text-dark-grey Font-Manrope-Light">Second</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="custom-dashed-line" style="padding-top: 2px;"></div>
                                <div class="background-light-red text-center p-5">
                                    <p class="font-size-18 text-dark-grey Font-Manrope-Bold mb-5">Total Payment</p>
                                    <p class="font-size-48 text-dark-grey Font-Manrope-ExtraBold mb-5">{{ GeneralHelper::transformAmount($transaction->total) }}</p>
                                    <p class="font-size-18 text-dark-grey Font-Manrope-Bold">Order ID : {{ $transaction->order_id }}</p>
                                </div>
                                <div class="custom-dashed-line"></div>

                                <div class="mt-4 p-5">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold text-center">Account Information</p>

                                    <hr />
                                    <div class="row">
                                        <div class="col-3 col-md-3">
                                            <img src="{{ asset("web/assets/icons/bank_bni.png") }}" style="width: 150px; height: 50px;"/>
                                        </div>
                                        <div class="col-5 col-md-5 p-3">
                                            <p class="font-size-16 text-dark-grey Font-Manrope-SemiBold">{{ $bankInformation->bank_name }} Bank Transfer</p>
                                        </div>
                                        <div class="col-4 col-md-4 text-right">
                                            <p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">Account Number</p>
                                            <p class="font-size-18 text-dark-grey Font-Manrope-Bold">{{ $bankInformation->bank_account_number }}</p>
                                        </div>
                                    </div>
                                    <hr />

                                    <p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">Name</p>
                                    <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $bankInformation->bank_account_name }}</p>

                                    <p class="font-size-16 text-dark-grey Font-Manrope-Regular mb-1">Branch</p>
                                    <p class="font-size-16 text-dark-grey Font-Manrope-ExtraBold">{{ $transaction->location->address }}</p>
                                </div>
                                <div class="p-5">
                                    @if ($transaction->payment_method == PaymentMethodEnum::getString(PaymentMethodEnum::BANK_TRANSFER) && $transaction->status == TransactionStatusEnum::getString(TransactionStatusEnum::PENDING))
                                        <div class="row">
                                            <div class="col-12 col-md-12">
                                                <div class="row">
                                                    <div class="col-1 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-1 col-md-1-half-5"></div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection

@push("stackJs")
    <script>
        $(document).ready(function () {
            var $hour = $("#hour");
            var $minute = $("#minute");
            var $second = $("#second");

            // Set the date we're counting down to
            var countDownDate = new Date("{{ Carbon::parse($transaction->due_date)->format("M d, Y H:i:s") }}").getTime();
            // Update the count down every 1 second
            var x = setInterval(function() {

                // Get today's date and time
                var now = new Date().getTime();

                // Find the distance between now and the count down date
                var distance = countDownDate - now;

                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                // Output the result in an element with id="demo"
                $hour.text(hours);
                $minute.text(minutes);
                $second.text(seconds);

                // If the count down is over, write some text
                if (distance < 0) {
                    clearInterval(x);
                }
            }, 1000);
        });

    </script>
@endpush