@php
$locale = app()->getLocale() == 'en' ? '_en' : '';
@endphp
@extends('shared.front')
@section('content')
    <div class="container payment">
        <h2 class="page-title">{{ __('messages.checkout.payment') }}</h2>
        <div class="payment__content">
            <!-- payment col left -->
            <div class="payment__col-left">
                <div style="padding: 25px 30px; background: #FFFFFF; border-radius: 4px; margin-bottom: 15px;">
                    <p style="margin-bottom: 15px"><strong>{{ __('messages.payment.receiver_information') }}</strong></p>
                    <div class="payment__info-block">
                        <label>{{ __('messages.payment.fullname') }}:</label>
                        <span><strong>{{ $order->fullname }}</strong></span>
                    </div>
                    <div class="payment__info-block">
                        <label>{{ __('messages.payment.phone_number') }}:</label>
                        <span><strong>{{ $order->phone }}</strong></span>
                    </div>
                    <div class="payment__info-block">
                        <label>{{ __('messages.payment.address') }}:</label>
                        <span><strong>{{ $order->address }}</strong></span>
                    </div>
                </div>

                <div class="row"
                     style="padding: 25px 30px; background: #FFF9E2; border-radius: 4px; margin: 0 0 15px 0;">
                    <div class="col-md-8 col-xs-12">
                        <p style="font-size: 16px; color: #FF8C00; text-transform: uppercase;">
                            <strong>{{ __('messages.payment.bank_transfer') }}</strong>
                        </p>
                        <p style="margin-bottom: 15px;margin-top: 5px;font-style: italic;font-size: 13px;">
                            {!! __('messages.payment.bank_transfer_description') !!}
                          {{ __('messages.payment.account_number') }}: <strong>{{ $van_account_number }}</strong><br>
                        </p>
                    </div>
                    <div class="col-md-4 col-xs-12 d-flex align-items-center">
                        <img width="250"
                             src="data:image/png;base64,{{ $qrData }}"
                             alt="qrcode"/>
                    </div>
                </div>

                <div class="payment__note">
                    <h4>{{ __('messages.cart.note') }}</h4>
                    <b>{{ __('messages.product_detail.hcm') }}</b>
                    <p>
                        {{ __('messages.product_detail.hcm_time') }}
                        <br>
                        {{ __('messages.product_detail.hcm_area') }}
                    </p>
                    <b>{{ __('messages.product_detail.hn') }}</b>
                    <p>
                        {{ __('messages.product_detail.hn_time') }}
                        <br>
                        {{ __('messages.product_detail.hn_area') }}
                    </p>
                </div>
            </div>
            <!-- payment col right -->
            <div class="payment__col-right payment__sidebar">
                <div class="payment__total">
                    <ul class="related-products">
                        @foreach ($products as $product)
                            <li data-product-id="{{$product->productId}}">
                                <img src="{{ $product->image ?? '' }}" alt="">

                                <div class="product-info">
                                    <a href="#">
                                        {{ $product->{'title'.$locale} }}
                                    </a>

                                    <div class="quantity-price d-flex justify-content-between">
                                        <span class="quantity">x{{$product->quanlity}}</span>
                                        <span class="price">{{ number_format($product->price, 0, '.', '.') }}  vnđ</span>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    <ul>
                        <li class="payment-repair">
                            {{ __('messages.cart.sub_total') }}
                            <b><span class="payment__total-temp-value">
                                    {{ number_format($order->subtotal, 0, '.', '.') }}
                                </span> VNĐ</b>
                        </li>
                        <li class="payment-repair">
                            {{ __('messages.cart.shipping_fee') }}
                            <b><span class="payment__total-temp-value">
                                    {{ number_format($order->shipping_fee, 0, '.', '.') }}
                                </span> VNĐ</b>
                        </li>
                        <li class="payment-repair">
                            {{ __('messages.cart.shipping_fee_discount') }}
                            <b><span class="payment__total-temp-value">
                                    {{ number_format($order->shipping_discount, 0, '.', '.') }}
                                </span> VNĐ</b>
                        </li>
                    </ul>
                    <div class="total">
                        {{ __('messages.cart.total_bill') }}
                        <b class="payment__total-final">
                            <span class="payment__total-value">{{ number_format($order->totalprice, 0, '.','.') }}</span>
                            VNĐ <span
                                    class="payment__total-vat">{{ __('messages.cart.include_vat') }}</span></b>
                    </div>
                </div>

                <div class="text-right">
                    <a href="{{ action('HomeController@index') }}" class="common-link">{{ __('messages.thankyou.back_to_homepage') }}</a>
                </div>
            </div>
        </div>
    </div>
@endsection