@extends('layouts.app') <!-- Use your main layout -->

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class='col-12 my-2 d-flex justify-content-center'>
            <div class="spinner-border text-danger mx-2" role="status" style="width:1.8rem;height:1.8rem">
              <span class="visually-hidden">Loading...</span>
            </div>
            <h4 class='text-center text-danger'> Phone Pe Payment Processing... </h4>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title text-center mb-4 text-success"><u>Order Payment</u></h3>
                    <form id="paymentForm" onsubmit="displayProcessingText()" action="{{ route('phonepe.request') }}" method="POST">
                        @csrf
                        <div class='row'>
                            <div class="mb-3 col-md-12">
                                <label for="order_id" class="form-label">Order ID <span class='text-danger'>*</span></label>
                                <input type="text" class="form-control" id="order_id" name="order_id" value="{{ 'order_' . uniqid() }}" readonly>
                            </div>
                            <div class="mb-3 col-md-12">
                                <label for="order_amount" class="form-label">Order Amount(Rs) <span class='text-danger'>*</span></label>
                                <input type="text" class="form-control" value="100" id="order_amount" name="order_amount" required>
                            </div>

                            <div class="text-center">
                                <button id="submitButton" type="submit" class="btn btn-success">Make Payment</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function displayProcessingText() {
        document.getElementById('submitButton').innerText = 'Please Wait';
    }
</script>
@endsection