@extends('page_layout')
@section('section')
    <div data-elementor-type="wp-post" data-elementor-id="1029" class="elementor elementor-1029"
        data-elementor-post-type="envato_tk_templates">
        <section
            class="elementor-section elementor-top-section elementor-element elementor-element-7af85c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default"
            data-id="7af85c9" data-element_type="section"
            data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
            <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b9658dd"
                    data-id="b9658dd" data-element_type="column">
                    <div class="elementor-widget-wrap elementor-element-populated">
                        <div class="elementor-element elementor-element-8ff69a9 elementor-widget elementor-widget-heading"
                            data-id="8ff69a9" data-element_type="widget" data-widget_type="heading.default">
                            <div class="elementor-widget-container">
                                <h2 class="elementor-heading-title elementor-size-default">Payment Page</h2>
                            </div>
                        </div>
                        <div class="elementor-element elementor-element-cbae4ff elementor-icon-list--layout-inline elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list"
                            data-id="cbae4ff" data-element_type="widget" data-widget_type="icon-list.default">
                            <div class="elementor-widget-container">
                                <ul class="elementor-icon-list-items elementor-inline-items">
                                    <li class="elementor-icon-list-item elementor-inline-item">
                                        <span class="elementor-icon-list-text">Home</span>
                                    </li>
                                    <li class="elementor-icon-list-item elementor-inline-item">
                                        <span class="elementor-icon-list-icon">
                                            <i aria-hidden="true" class=" arrow_triangle-right_alt2"></i> </span>
                                        <span class="elementor-icon-list-text">Payment Page</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="container" style="padding: 50px;">
            @if(session('success'))
                <div style="color:green">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div style="color:red">{{ session('error') }}</div>
            @endif
            <h2 class="text-center">Payment Page</h2>
            <div class="card p-4">
                <p>Total Amount: ₹{{ $totalAmount ?? '0.00' }}</p>
        
                {{-- Razorpay Checkout Button --}}
                <form action="{{ route('razorpay.payment.store') }}" method="POST">
                    @csrf
                    <script
                        src="https://checkout.razorpay.com/v1/checkout.js"
                        data-key="{{ env('RAZORPAY_KEY') }}"
                        data-amount="{{ $totalAmount * 100 }}" {{-- Convert to paisa --}}
                        data-currency="INR"
                        data-buttontext="Pay ₹{{ $totalAmount ?? '0.00' }} INR"
                        data-name="Laravel Razorpay"
                        data-description="Test transaction"
                        data-theme.color="#F37254">
                    </script>
                </form>
            </div>
        </div>
    </div>
@endsection