@extends('layouts.app')

@section('title', 'Payments')
@section('heading', 'Payments Overview')

@section('content')
@php
    $field = 'mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20';
@endphp
<div class="w-full">
    <x-superadmin.page-header
        eyebrow="Billing"
        title="Payments"
        subtitle="Record offline payments or collect via Razorpay, optionally applying a plan and extending the licence."
    />

    <div class="mb-6 grid gap-3 sm:grid-cols-3">
        <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white px-4 py-3 pl-5 shadow-sm">
            <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-emerald-500" aria-hidden="true"></span>
            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">This month</p>
            <p class="mt-1 text-xl font-bold text-slate-900">{{ config('app.currency_symbol', '₹') }}{{ number_format($totalSubscriptionThisMonth ?? 0, 0) }}</p>
        </div>
        <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white px-4 py-3 pl-5 shadow-sm">
            <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-teal-600" aria-hidden="true"></span>
            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">Total collected</p>
            <p class="mt-1 text-xl font-bold text-slate-900">{{ config('app.currency_symbol', '₹') }}{{ number_format($totalSubscriptionAll ?? 0, 0) }}</p>
        </div>
        <div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white px-4 py-3 pl-5 shadow-sm">
            <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-sky-500" aria-hidden="true"></span>
            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">Records</p>
            <p class="mt-1 text-xl font-bold text-slate-900">{{ $subscriptionPayments->total ?? 0 }}</p>
        </div>
    </div>

    <section class="mb-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
        <h3 class="text-sm font-semibold text-slate-900">Record offline payment</h3>
        <form method="post" action="{{ route('superadmin.payments.offline') }}" class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @csrf
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Company</label>
                <select name="company_id" required class="{{ $field }} js-select2">
                    @foreach($companies as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Amount (INR)</label>
                <input type="number" step="0.01" min="0.01" name="amount" required class="{{ $field }}">
            </div>
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Paid date</label>
                <input type="date" name="paid_at" value="{{ date('Y-m-d') }}" class="{{ $field }}">
            </div>
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Apply plan</label>
                <select name="subscription_plan_id" class="{{ $field }} js-select2">
                    <option value="">— Optional —</option>
                    @foreach($plans ?? [] as $plan)
                        <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Notes</label>
                <input type="text" name="notes" placeholder="Optional" class="{{ $field }}">
            </div>
            <div class="flex flex-wrap items-center gap-4 sm:col-span-2 lg:col-span-3">
                <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                    <input type="checkbox" name="apply_plan" value="1" class="rounded border-slate-300 text-primary focus:ring-primary"> Apply plan
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                    <input type="checkbox" name="extend_licence" value="1" class="rounded border-slate-300 text-primary focus:ring-primary"> Extend licence +1 year
                </label>
                <button type="submit" class="ml-auto inline-flex rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:opacity-95">Save offline payment</button>
            </div>
        </form>
    </section>

    @if(!empty($razorpayKeyId))
    <section class="mb-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
        <h3 class="text-sm font-semibold text-slate-900">Collect via Razorpay</h3>
        <form id="razorpay-form" class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @csrf
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Company</label>
                <select id="rz-company" required class="{{ $field }} js-select2">
                    @foreach($companies as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Amount (INR)</label>
                <input type="number" step="0.01" min="0.01" id="rz-amount" required class="{{ $field }}">
            </div>
            <div>
                <label class="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">Plan</label>
                <select id="rz-plan" class="{{ $field }} js-select2">
                    <option value="">— Optional —</option>
                    @foreach($plans ?? [] as $plan)
                        <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-wrap items-center gap-4 sm:col-span-2 lg:col-span-3">
                <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                    <input type="checkbox" id="rz-apply-plan" value="1" class="rounded border-slate-300 text-primary focus:ring-primary"> Apply plan
                </label>
                <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                    <input type="checkbox" id="rz-extend" value="1" class="rounded border-slate-300 text-primary focus:ring-primary"> Extend licence +1 year
                </label>
                <button type="submit" id="rz-btn" class="ml-auto inline-flex rounded-xl px-4 py-2.5 text-sm font-semibold text-white shadow-sm" style="background-color: var(--color-secondary)">Pay via Razorpay</button>
            </div>
        </form>
    </section>
    @else
    <div class="mb-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
        Set Razorpay credentials in <a href="{{ route('superadmin.payment-settings.index') }}" class="font-semibold underline">Payment settings</a> or <code class="rounded bg-white/70 px-1">RAZORPAY_KEY_ID</code> / <code class="rounded bg-white/70 px-1">RAZORPAY_KEY_SECRET</code> in .env.
    </div>
    @endif

    <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <div class="border-b border-slate-100 px-5 py-4">
            <h3 class="text-sm font-semibold text-slate-900">Subscription payments</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100 text-sm">
                <thead class="bg-slate-50/80 text-left">
                    <tr>
                        <th class="px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-slate-400">Company</th>
                        <th class="px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-slate-400">Amount</th>
                        <th class="px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-slate-400">Method</th>
                        <th class="px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-slate-400">Status</th>
                        <th class="px-4 py-3 text-[11px] font-semibold uppercase tracking-wide text-slate-400">Paid at</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($subscriptionPayments as $sp)
                        <tr class="hover:bg-slate-50/80">
                            <td class="whitespace-nowrap px-4 py-3.5 font-semibold text-slate-900">{{ $sp->company?->name ?? '—' }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 font-semibold text-slate-900">{{ config('app.currency_symbol', '₹') }}{{ number_format($sp->amount, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-slate-600">{{ ucfirst($sp->payment_method) }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5">
                                @if($sp->status === 'completed')
                                    <span class="inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-emerald-700 ring-1 ring-inset ring-emerald-200">Completed</span>
                                @elseif($sp->status === 'failed')
                                    <span class="inline-flex rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700 ring-1 ring-inset ring-red-200">Failed</span>
                                @else
                                    <span class="inline-flex rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-800 ring-1 ring-inset ring-amber-200">{{ ucfirst($sp->status) }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-slate-600">{{ $sp->paid_at ? $sp->paid_at->format('d M Y H:i') : '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-12 text-center text-slate-500">No subscription payments yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($subscriptionPayments->hasPages())
            <div class="border-t border-slate-100 px-4 py-3">{{ $subscriptionPayments->withQueryString()->links() }}</div>
        @endif
    </section>
</div>

@if(!empty($razorpayKeyId))
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
    document.getElementById('razorpay-form')?.addEventListener('submit', function(e) {
        e.preventDefault();
        var btn = document.getElementById('rz-btn');
        btn.disabled = true;
        var companyId = document.getElementById('rz-company').value;
        var amount = document.getElementById('rz-amount').value;
        fetch('{{ route("superadmin.payments.razorpay.order") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({
                company_id: companyId,
                amount: amount,
                subscription_plan_id: document.getElementById('rz-plan')?.value || null,
                apply_plan: document.getElementById('rz-apply-plan')?.checked ? 1 : 0,
                extend_licence: document.getElementById('rz-extend')?.checked ? 1 : 0,
                _token: '{{ csrf_token() }}'
            })
        }).then(function(r) { return r.json(); }).then(function(data) {
            if (data.message && !data.order_id) {
                alert(data.message);
                btn.disabled = false;
                return;
            }
            var options = {
                key: data.key,
                amount: data.amount,
                currency: data.currency,
                order_id: data.order_id,
                name: '{{ config("app.name") }}',
                description: 'Subscription payment',
                handler: function(response) {
                    var form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ route("superadmin.payments.razorpay.verify") }}';
                    form.innerHTML = '<input type="hidden" name="_token" value="{{ csrf_token() }}"><input type="hidden" name="razorpay_order_id" value="' + response.razorpay_order_id + '"><input type="hidden" name="razorpay_payment_id" value="' + response.razorpay_payment_id + '"><input type="hidden" name="razorpay_signature" value="' + response.razorpay_signature + '">';
                    document.body.appendChild(form);
                    form.submit();
                }
            };
            var rzp = new Razorpay(options);
            rzp.on('payment.failed', function() { btn.disabled = false; });
            rzp.open();
        }).catch(function() { btn.disabled = false; });
    });
</script>
@endif
@endsection