{{-- this store lists all the books on the platform regardless of institution or instructor  --}}

@extends('snit.layouts.app')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="flex justify-end">
            <x-cart-icon />
        </div>
        <div class=" py-1 mb-1 mx-3 text-center">
            <span class="text-gray-100 text-3xl font-thin">Select Payment Method</span>
        </div>
        <div class="row mb-5 text-center">
            <span class="text-gray-200 text-sm">
                We support a number of payment systems for your convenience, <br>
                If you try paying through any of our payment methods and you experience any form of downtime,<br>
                you can always try another payment method <br> 👍</span>
        </div>
        <form class="row mb-5 pl-3" action="{{ route('guest.checkout.store') }}" method="POST" name="pay_selector">@csrf

            <div class="row">
                <section class="payment-gateway-section col-md-8 h-[50vh]">
                    @if (env('PGS_MODE') == 'TEST')
                    <div class="row">

                        <div class="col-md-6 col-lg-4 my-2">
                            <div
                                class="bg-white p-2 ease-in duration-100 border-4 rounded  hover:border-green-600 hover:border-solid">
                                <label class="block cursor-pointer" for="flutterwave">
                                    <div class=" text-center pt-0 pb-3 px-10 ">
                                        <img 
                                            src="data:image/png;base64,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"
                                            alt="" width="100" class="">

                                        {{-- <div class="mt-9 text-sm"> Pay With <strong>Flutterwave</strong></div> --}}
                                        <input class="payment_gateway_option cursor-pointer" type="radio"
                                            name="payment_gateway" value="flutterwave" id="flutterwave">
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-4 my-2">
                            <div
                                class="bg-white p-2 ease-in duration-100 border-4 rounded  hover:border-green-600 hover:border-solid">
                                <label class="block cursor-pointer" for="rexpay">
                                    <div class=" text-center pt-0 pb-3 px-10 ">
                                        <img src="data:image/jpeg;base64,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"
                                            alt="" width="100" class="">

                                        {{-- <div class="mt-9 text-sm"> Pay With <strong>Flutterwave</strong></div> --}}
                                        <input class="payment_gateway_option cursor-pointer" type="radio"
                                            name="payment_gateway" value="rexpay" id="rexpay">
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    @else
                        {{-- using rexpay as default payment gateway --}}
                        <div class="col-md-6 col-lg-3 my-2">
                            <div
                                class="bg-white rounded-full p-2 ease-in duration-100 border-4 h-[auto] hover:border-2  hover:border-green-600 hover:border-solid">
                                <label class="block cursor-pointer" for="rexpay">
                                    <div class=" text-center ">
                                        <div class="text-sm uppercase"> Pay </div>
                                        <input class="payment_gateway_option cursor-pointer" type="radio"
                                            name="payment_gateway" value="rexpay" id="rexpay">
                                    </div>
                                </label>
                            </div>
                        </div>
                    @endif
                </section>

                <section class="client-info-section col-md-4 bg-gray-700 p-3 rounded-lg">
                    <h3 class="text-center text-white capitalize">student information</h3>
                    <div class="text-center my-4">
                        <i class="bx bxs-user text-8xl text-white"></i> <br>
                    </div>
                    <span class="text-sm text-white">Name:
                        <span class="uppercase">{{ $theClient->getFullName() }}</span>
                    </span> <br>
                    <span class="text-sm text-white">Mat Number:
                        <span class="uppercase">{{ $theClient->mat_num }}</span>
                    </span> <br>
                    <span class="text-sm text-white">Department: 
                        <span  class="uppercase">{{ $theClient->getDepartment() }}</span>
                    </span>


                </section>

            </div>

        </form>
    </div>
    <!-- / Content -->
@endsection

@push('child-scripts')
    <script>
        let form = document.querySelector('[name="pay_selector"]');
        let paymentOptions = Array.from(document.querySelectorAll('.payment_gateway_option'));
        paymentOptions.forEach(paymentOption => {
            paymentOption.addEventListener('click', () => form.submit());
        });
        // document.querySelector('.payment_gateway_option').onclick =
    </script>
@endpush