@extends('layouts.master')

<!-- @section('title', __('Confirm your order')) -->

@push('styles')
<style>
    .separator-breadcrumb, .breadcrumb{
        display: none;
    }
</style>
<link href="{{ asset('frontend/styles/css/my-purchases.css') }}" rel="stylesheet">
@endpush

<!-- @section("page-heading-title") -->

@endsection

@section("content")
<div id="featured-services" class="featured-services main_section pt-5">
    <div class="container" data-aos="fade-up">
        <div class="mainbox-content" style="max-width:1005px;margin: 0 auto;">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center mb-2">
                <div class="card bg-cart">

                    <div class="card-body">
                    <h3 class="m-0 p-0 cart-title">{{ __('My Cart') }}</h3>
                        <div class="px-0">
                            <table id="bstable" class="table " data-icons="icons" data-icons-prefix="bi" table-for="my_purchases" data-ajax="ajaxRequestCart" data-side-pagination="server" data-pagination="true" data-total-field="count" data-data-field="items" data-loading-template="DataTaleLoadingTemplate">
                                <thead class="table-head-left">
                                <tr>
                                    <th data-field="counter">{{ __('#')}}</th>
                                    <th data-field="name" data-align="left">{{__('Name')}}</th>
                                    <th data-field="quantity">{{__('Quantity')}}</th>
                                    <th data-field="price">{{__('Total Price')}}</th>
                                    <th data-field="action">{{__('Action')}}</th>
                                </tr>
                                </thead>
                                <tbody class="table-head-left"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-12 col-md-12 col-lg-12 col-xl-12 text-center">
                <div class="row">
                    <div class="col-lg-3 col-12">
                    </div>
                    <div class="col-lg-9 col-12 row margin-0 summry-main h-100 ">
                        <div class="card-body p-4 main-title col-lg-6 col-12">
                        <h3 class="m-0 p-0 text-white">{{ __('Summary') }}</h3>
                            <table class="table text-white table-borderless">
                                <tr>
                                    <td><span class="card-title m-0 text-white">{{ __('Subtotal') }}</span></td>
                                    <td>:</td>
                                    <td><span class="currsymbol">€</span><span class="display-amount"></span></td>
                                </tr>
                                <tr>
                                    <td><span class="card-title m-0 text-white">{{ __('Total Tax') }}</span></td>
                                    <td>:</td>
                                    <td><span class="currsymbol">€</span><span class="display-total-tax"></span></td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="display-total-tax-details" style="padding: 0 0 0 0.75rem !important;"></td>
                                </tr>
                                <tr>
                                    <td><span class="card-title m-0 text-white">{{ __('Total') }}</span></td>
                                    <td>:</td>
                                    <td><span class="currsymbol">€</span><span class="display-total-amount"></span></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-lg-6 col-12">
                            <div class="d-flex justify-start align-items-end">
                                @if(isMyProfileCompleted())
                                    <button class="btn btn-primary w-80 mt-2 mb-1 me-1 purchaseNowButton">{!! renderIconHtml('purchase') !!}{{ __('Purchase Now')}}</button>
                                @else
                                    <a href="javascript:void(0);" class="btn btn-primary w-80 mt-2 mb-1 purchaseNowButton opacity-75" onclick="$(this).off('click');" disabled>
                                        {!! renderIconHtml('purchase') !!}{{ __('Purchase Now')}}
                                        <i class="bi bi-info-circle font-size-14" data-toggle="tooltip" data-placement="top" title="{{ __('Complete your profile to finalize your purchase.') }}"></i>
                                    </a>
                                @endif
                                <a href="{{route('member.shop.index')}}" class="btn btn-primary w-80 remmb-5 continue-shopping mb-1">{!! renderIconHtml('next') !!}{{ __('Continue Shopping') }}</a>
                            </div>
                            @if(isMyProfileCompleted())
                                @if(isset(Auth::user()->setting->access_visibility) && in_array('redeem_gift_code', Auth::user()->setting->access_visibility))
                                    @if((!empty(Auth::user()->setting->fa_setting) && in_array('redeem_gift_code', Auth::user()->setting->fa_setting)) || !empty(Auth::user()->setting->fa3_setting) && in_array('redeem_gift_code', Auth::user()->setting->fa3_setting))
                                        <button class="btn btn-primary w-100 mt-2 mb-1 purchaseNowButton purchaseAndRedeemNowButton" style="display: none">
                                            {!! renderIconHtml('purchase') !!}{{ __('Purchase & Redeem Now')}}
                                            <i class="bi bi-info-circle font-size-14" data-toggle="tooltip" data-placement="top" title="{{ __('Instantly purchases the product and automatically redeems the gift code.This Action cannot be undone.') }}"></i>
                                        </button>
                                    @else
                                        <button class="btn btn-primary w-100 mt-2 mb-1 purchaseNowButton purchaseAndRedeemNowButton opacity-75" data-disabled="true">
                                            {!! renderIconHtml('purchase') !!}{{ __('Purchase & Redeem Now')}}
                                            <i class="bi bi-info-circle font-size-14" data-toggle="tooltip" data-placement="top" title="{{ __('Enable redeem gift code 2FA authenticator to process') }}"></i>
                                        </button>
                                    @endif
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="2fa3faValidateFormModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="2fa3faValidateFormModalLabel" aria-hidden="true" data-email-otp-sent="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable checkout-popup" style="max-width: 400px">
        <div class="modal-content" style="max-width: 100% !important;">
            <div class="modal-body p-0">
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="purchaseNowModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="purchaseNowModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable checkout-popup">
        <div class="modal-content">
            <form class="p-0" action="{{ route('member.shop.placeOrder') }}" id="purchaseNowForm" method="POST" onkeydown="return event.key != 'Enter';">
                <div class="modal-body">
                    <div class="d-flex justify-between items-center">
                    <h5 class="modal-title" id="purchaseNowModalLabel">{{ __('Check Out') }}</h5>
                    <button type="button" class="btn-close text-black" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="row sufficientWallet">
                        <div class="col-12">
                            <h4 class="text-left modeltitle">{{ __('Total price') }} :</h4>
                            <p class="checkoutprice">€<span class="display-total-amount"></span></p>
                        </div>
                        <div class="col-12">
                            <div class="relative z-0 w-full mb-1 mt-1 group">
                                <label for="wallets" class="select-lbl">{{ __('Select Wallet Type')}}</label>
                                <select id="wallet_id" name="wallet_id" class="dropdown form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" aria-describedby="inputGroupPrependwllet">
                                </select>
                                <span class="custom-error text-danger wallet_id_error"></span>
                            </div>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primarym submitBtn mb-2">
                             {{ __('Purchase Now') }}
                            </button>
                        </div>
                    </div>

                    <div class="row insufficientWallet">
                        <div class="col-12">
                            <h3 class="mb-2"> {{ __('No common wallet found for this products.')}}</h3>
                            <div class="modal-footer p-0">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">{{ __('Close')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>



@endsection


@push('scripts')
<script>
    $(document).ready(function() {
        $('#wallet_id').select2({
            dropdownParent: $('#purchaseNowModal'), minimumResultsForSearch: Infinity
        });
    });
    </script>
<script>
    let readOnlyMode = "{{readOnlyMode()}}";
</script>
<script src="{{asset('frontend/js/page-js/confirm-order.js?v=1')}}"></script>
@endpush