{{-- resources/views/business_owner/registration_fee/payment.blade.php --}}
@extends('business_owner.layouts.master')

@section('title', 'Registration Fee Payment')

@section('content')
    <div class="container" style="padding: 30px;">
        <div class="card" style="max-width: 600px; margin: 0 auto;">
            <div class="card-header">
                <h3>Business Owner Registration Fee</h3>
            </div>
            <div class="card-body">

                <div class="success_message" style="margin-bottom: 10px;"></div>
                @if (session('doneMessage'))
                    <div class="alert alert-success success_message">
                        {{ session('doneMessage') }}
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger error_message">
                        {{ session('error') }}
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                @if (session('warning'))
                    <div class="alert alert-warning">{{ session('warning') }}</div>
                @endif

                <p>Please complete your registration fee payment to access the business owner dashboard.</p>
                <p><strong>Fee Amount:</strong> {{ $currency_symbol }} {{ $register_fee }}</p>

                <form method="POST" action="{{ route('business_owner.registration_fee.pay') }}">
                    @csrf
                    <button type="submit" class="btn btn-primary">
                        Pay Now with Stripe
                    </button>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
    
            setTimeout(function () {
                $('.success_message').fadeOut('slow');
                $('.error_message').fadeOut('slow');
            }, 5000);
    
        });
    </script>
@endsection
@section('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function () {

        setTimeout(function () {
            let alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(el) {
                el.style.transition = "opacity 0.5s";
                el.style.opacity = "0";
                setTimeout(() => el.style.display = "none", 500);
            });
        }, 5000);

    });
</script>
@endsection