@extends('layouts.app')

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="content-wrapper" style="min-height: 274px; margin-left: 0px;">

    <!--end::Page title-->
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            <link rel="stylesheet" href="/assets/custom/css/pcs.css">
            <main>
                <div data-container="spa" id="spa">
                    <div>
                        <div class="checkout section section--small section--dark">
                            <div class="checkout-content section-container">
                                <div class="checkout-inner">
                                    <div class="checkout-card checkout-card--roundedEdges">
                                        <div data-tracking-section="main-funnel-header">
                                            <div>
                                                <div class="checkout-header checkout-header--motorVehicle">
                                                    <div class="checkout-header-logo-container">
                                                        <div class="checkout-fees-item checkout-fees--highlight"><span class="checkout-fees-label">Total</span><span class="checkout-fees-value">${{$transaction->price}}</span></div>
                                                    </div>
                                                    <div class="checkout-item">
                                                        <div class="checkout-item-content">
                                                            <h3 class="checkout-item-header"><span class="checkout-item-header-name">{{$transaction->title}}</span><span class="checkout-item-header-price">${{$transaction->price}}</span></h3>
                                                            <div class="checkout-item-body">
                                                                <div class="checkout-item-body-content">
                                                                    <div class="checkout-item-body-desc"><span class="checkout-item-body-label">VIN:</span><span class="checkout-item-body-desc-suffix">{{$transaction->vin}}</span></div>
                                                                    <div class="checkout-item-body-desc"><span class="checkout-item-body-label">Odometer:</span><span class="checkout-item-body-desc-suffix">{{$transaction->odometer}}</span></div>
                                                                </div>
                                                                <div class="checkout-item-body-fees">
                                                                    <div class="checkout-fees-item"><span class="checkout-fees-label">Escrow Fee</span><span class="checkout-fees-value">${{$transaction->escrow_fee}}</span></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div data-tracking-section="main-funnel-progress">
                                            <div class="checkout-progress">
                                                <div class="checkout-progress-step" role="presentation" data-tracking-name="checkout-payment-section">
                                                    <div class="checkout-progress-step-iconHolder is-active">
                                                        <div class="checkout-progress-step-icon">1</div>
                                                    </div>
                                                    <div class="checkout-progress-step-title is-active">PAYMENT</div>
                                                </div>
                                                <div class="checkout-progress-bar" style="left: 69px; width: 219.45px;"><span class="checkout-progress-bar-loader" style="width: 0%;"></span></div>
                                                <div class="checkout-progress-step-activeLabel" style="left: 293px; opacity: 1;"></div>
                                                <div class="checkout-progress-step" role="presentation" data-tracking-name="checkout-customer-details-section">
                                                    <div class="checkout-progress-step-iconHolder is-active">
                                                        <div class="checkout-progress-step-icon">2</div>
                                                    </div>
                                                    <div class="checkout-progress-step-title is-active">ESCROW</div>
                                                </div>
                                                <div class="checkout-progress-bar" style="left: 348.45px; width: 219.45px;"><span class="checkout-progress-bar-loader" style="width: 0%;"></span></div>
                                                <div class="checkout-progress-step" role="presentation" data-tracking-name="checkout-confirmation-section">
                                                    <div class="checkout-progress-step-iconHolder">
                                                        <div class="checkout-progress-step-icon">3</div>
                                                    </div>
                                                    <div class="checkout-progress-step-title">CONFIRM</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="checkout-step-enter-done">
                                            <div class="checkout-page" data-tracking-section="main-funnel-step-payment">
                                                <form name="checkout-payment-method-selection-form" data-tracking-subsection="payment-method-selection" action="{{route('transaction.payment-proof', $transaction)}}" method="GET">
                                                    <h3 class="checkout-page-header" style="text-align: center; align-self: center; margin: auto;"> Please submit the payment for your transaction using the following information. </h3>
                                                    <div>
                                                        <p>
                                                        </p>
                                                        <div class="checkout-paymentOption checkout-paymentOption--single">
                                                            <div class="checkout-paymentOption-text" style="text-align: center; margin: auto;">
                                                                <span class="checkout-paymentOption-text-title" style="text-align: center; margin: auto; font-size: 28px;">Wire Transfer Instructions</span>
                                                                <p class="checkout-paymentOption-text-detail bank-details" style="font-weight: normal; text-align: center; margin: auto;">
                                                                    Funding Amount: ${{$transaction->price}}<br>
                                                                    Bank Name: {{$transaction->bank->name}}<br>
                                                                    Account Holder: {{$transaction->bank->account_holder}}<br>
                                                                    Account Holder's Address: {{$transaction->bank->holder_address}}<br>
                                                                    Account Number: {{$transaction->bank->number}}<br>
                                                                    ABA Routing Number: {{$transaction->bank->routing_number}}<br>
                                                                    Special Instructions/Other Comments: <strong style="font-weight: 700">Transaction ID: {{$transaction->id}}</strong><br>
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <p></p>
                                                        <label class="checkout-paymentOption">
                                                            <div class="checkout-paymentOption-text">
                                                                <p class="checkout-paymentOption-text-detail" style="font-weight: normal !important; text-align: center; margin: auto;">For your convenience, you can download the instructions as a PDF document by using the button bellow.<br>
                                                                    <br> Your funds will not be released to the Seller under any circumstances. We will hold and secure your funds until you will confirm to us that you have inspected and agreed to keep the item received, only by then we will release the funds to the Seller and the transaction is successfully completed. Or, if it will be the case, Glezz Auto Logistics will refund the payment to the Buyer. </p>
                                                            </div>
                                                        </label>
                                                    </div>
                                                    <div class="checkout-page-form-actions">

                                                        <div class="row w-100">
                                                            <div class="col-12 d-flex justify-content-center">
                                                                <button type="submit" class="checkout-card-btn btn btn--secondary sc-bdVaJa hQYtNk" data-e2e-target="checkout-form-action" data-tracking-name="continue-wire" style="margin:0!important;">Download Wire Instructions</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <script>
                                                        jQuery(document).ready(function() {

                                                            jQuery(".checkout-card-btn").on('click tap', function() {
                                                                var valFileDownloadPath = 'https://tracker.glezzautolog.com/storage/invoices/' + '{{$transaction->id}}' + '.pdf';

                                                                window.open(valFileDownloadPath, '_blank');
                                                               
                                                            });
                                                        });

                                                    </script>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>

        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>

@endsection