@extends('layouts.app')

@section('title', 'Record Offline SaaS Payment')

@section('content')
<div class="max-w-xl mx-auto space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Record Offline SaaS Payment</h1>
            <p class="text-xs text-slate-500">Record cash, cheque, or bank transfer payments received from typing centers.</p>
        </div>
        <a href="{{ route('platform.billing.payments') }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs rounded-xl">Cancel</a>
    </div>

    <form action="{{ route('platform.billing.store_payment') }}" method="POST" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
        @csrf

        <div>
            <label class="block font-semibold mb-1">Select Tenant Company *</label>
            <select name="tenant_id" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                <option value="">-- Choose Tenant --</option>
                @foreach($tenants as $tenant)
                    <option value="{{ $tenant->id }}">{{ $tenant->company_name }} ({{ $tenant->email }})</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="block font-semibold mb-1">Apply to Invoice (Optional)</label>
            <select name="invoice_id" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                <option value="">-- Unapplied Payment --</option>
                @foreach($invoices as $inv)
                    <option value="{{ $inv->id }}">{{ $inv->invoice_number }} - {{ $inv->tenant->company_name }} (Balance: AED {{ number_format($inv->balance, 2) }})</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="block font-semibold mb-1">Amount Paid (AED) *</label>
            <input type="number" name="amount" required step="0.01" value="699.00" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-bold">
        </div>

        <div>
            <label class="block font-semibold mb-1">Payment Method *</label>
            <select name="payment_method" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                <option value="bank_transfer" selected>Bank Transfer (ENBD / ADCB)</option>
                <option value="cash">Cash Payment</option>
                <option value="card">Credit/Debit Card (POSIX)</option>
                <option value="manual_adjustment">Manual Adjustment</option>
            </select>
        </div>

        <div>
            <label class="block font-semibold mb-1">Transaction Reference / Cheque #</label>
            <input type="text" name="transaction_reference" placeholder="e.g. TRF-839201920 / CHQ-00123" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
        </div>

        <div>
            <label class="block font-semibold mb-1">Remarks / Internal Notes</label>
            <textarea name="remarks" rows="2" placeholder="Payment received via bank transfer for annual subscription renewal..." class="w-full p-3 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl"></textarea>
        </div>

        <div class="flex justify-end pt-4">
            <button type="submit" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl shadow-md">
                Record Payment & Update Invoice
            </button>
        </div>
    </form>
</div>
@endsection