@extends('website.layouts.app')

@section('content')
    <main>
        <!-- --------------------- BANNER ~ STARTS ------------- -->
        <section class="sub-banner d-block d-md-block">
        </section>
        <!-- --------------------- BANNER ~ ENDS ------------- -->


        <!-- --------------------- FORM AREA ~ STARTS ------------- -->
        <section class="cme-details loading-bg pb-lg-5 pb-5">
            <div class="container">
                <div class="custom-form mt-5 p-lg-5 p-3 py-lg-5 py-4">
                    <form id="payment-form" action="{{ env('CYBERSOURCE_API_URL') }}" method="post">
                        @foreach ($params as $name => $value)
                            <input type="hidden" name="{{ $name }}" value="{{ $value }}">
                        @endforeach
                        <input type="submit" id="submit" name="submit" value="Submit" style="display: none;"/>
                        {{-- <button type="submit" style="display: none;" id="submitButton">Proceed to Payment</button> --}}

                        <div class="spinner-container" id="spinnerContainer">
                            <div class="spinner-text">Please do not refresh the page. Redirecting to payment page</div>
                            <div class="spinner"></div>
                        </div>
                    </form>

                </div>
            </div>
        </section>
        <!-- --------------------- FORM AREA ~ ENDS ------------- -->


    </main>

   @endsection
   @section('scripts')
    <script>
        $(document).ready(function() {
            $('#submit').trigger('click');
        });
    </script>
@endsection