<x-layouts.dashboard title="Payments">
    <section class="grid">
        @forelse($methods as $method)
            <article class="card">
                <span class="badge status-approved">{{ $method->name }}</span>
                <h3>{{ $method->account_title ?: 'MGG Agency' }}</h3>
                <p class="price">{{ $method->account_number ?: 'Account details pending' }}</p>
                @if($method->bank_name)<p class="muted">{{ $method->bank_name }}</p>@endif
                @if($method->instructions)<p>{{ $method->instructions }}</p>@endif
                @if($method->qr_code)<p><a class="ghost small" href="{{ asset('storage/'.$method->qr_code) }}" target="_blank">View QR Code</a></p>@endif
            </article>
        @empty
            <div class="empty-state">No active payment method is available. Please contact support.</div>
        @endforelse
    </section>
    <form class="form-card" method="post" enctype="multipart/form-data" action="{{ route('client.payments.store') }}">
        @csrf
        <div class="form-grid">
            <div class="field">
                <label>Plan</label>
                <select name="plan_id" id="client-payment-plan">
                    <option value="" data-price="0">Select plan</option>
                    @foreach ($plans as $plan)
                        <option value="{{ $plan->id }}" data-price="{{ $plan->price }}">{{ $plan->name }} - {{ $plan->price > 0 ? number_format($plan->price) : 'Custom' }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field"><label>Amount</label><input id="client-payment-amount" name="amount" type="number" step="0.01" required></div>
            <div class="field">
                <label>Method</label>
                <select name="method" required>
                    @forelse ($methods as $method)
                        <option>{{ $method->name }}</option>
                    @empty
                        <option value="">No active payment methods</option>
                    @endforelse
                </select>
            </div>
            <div class="field"><label>Reference</label><input name="transaction_reference"></div>
            <div class="field full-field"><label>Payment Screenshot</label><input type="file" name="proof_path"></div>
        </div>
        <p><button class="btn">Submit Payment Proof</button></p>
    </form>
    <div class="table-card">@include('partials.payment-table', ['payments' => $payments])</div>
    <script>
        const planSelect = document.getElementById('client-payment-plan');
        const amountInput = document.getElementById('client-payment-amount');
        planSelect?.addEventListener('change', () => {
            const price = Number(planSelect.selectedOptions[0]?.dataset.price || 0);
            if (price > 0) amountInput.value = price;
        });
    </script>
</x-layouts.dashboard>
