@extends('layouts.admin')

@section('title', trans('admin.upgrade_requests_page_title'))
@section('header_title', trans('admin.upgrade_requests_header'))

@section('content')
<div class="space-y-6 text-xs" x-data="{ approveModal: null, rejectModal: null }">

    {{-- KPI Row --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 shadow-lg">
            <div class="text-slate-400 text-[11px] mb-1">{{ trans('admin.upgrade_req_total') }}</div>
            <div class="text-2xl font-black text-white">{{ number_format($totalCount) }}</div>
        </div>
        <div class="p-5 rounded-2xl bg-navy-900 border border-amber-500/30 shadow-lg">
            <div class="text-amber-400 text-[11px] mb-1">{{ trans('admin.upgrade_req_pending') }}</div>
            <div class="text-2xl font-black text-amber-400">{{ number_format($pendingCount) }}</div>
        </div>
        <div class="p-5 rounded-2xl bg-navy-900 border border-emerald-500/30 shadow-lg">
            <div class="text-emerald-400 text-[11px] mb-1">{{ trans('admin.upgrade_req_approved') }}</div>
            <div class="text-2xl font-black text-emerald-400">{{ number_format($approvedCount) }}</div>
        </div>
        <div class="p-5 rounded-2xl bg-navy-900 border border-rose-500/30 shadow-lg">
            <div class="text-rose-400 text-[11px] mb-1">{{ trans('admin.upgrade_req_rejected') }}</div>
            <div class="text-2xl font-black text-rose-400">{{ number_format($rejectedCount) }}</div>
        </div>
    </div>

    {{-- Filter Tabs + Search --}}
    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 space-y-4">
        <div class="flex flex-wrap items-center gap-3">
            @foreach([
                'all' => trans('admin.upgrade_req_filter_all'),
                'pending' => trans('admin.upgrade_req_filter_pending'),
                'approved' => trans('admin.upgrade_req_filter_approved'),
                'rejected' => trans('admin.upgrade_req_filter_rejected'),
            ] as $key => $label)
                <a href="{{ route('admin.upgrade_requests.index', array_merge(request()->except('status', 'page'), ['status' => $key])) }}"
                   class="px-4 py-1.5 rounded-full text-[11px] font-bold transition
                       {{ $status === $key ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-500/20' : 'bg-navy-950 border border-slate-700 text-slate-300 hover:text-white hover:border-emerald-500' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>
        <form method="GET" class="flex items-center gap-3">
            <input type="hidden" name="status" value="{{ $status }}">
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="{{ trans('admin.search_placeholder') }}"
                   class="flex-1 rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3.5 py-2.5 text-xs focus:border-emerald-500 focus:outline-none transition">
            <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold transition">
                <i class="fa-solid fa-magnifying-glass text-[10px]"></i>
                {{ trans('admin.search_btn') }}
            </button>
        </form>
    </div>

    {{-- Requests Table --}}
    <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-start">
                <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                    <tr>
                        <th class="p-4 text-start">{{ trans('admin.upgrade_req_company') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.upgrade_req_from_plan') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.upgrade_req_to_plan') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.upgrade_req_transfer') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.upgrade_req_notes') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.upgrade_req_date') }}</th>
                        <th class="p-4 text-start">{{ trans('admin.upgrade_req_status') }}</th>
                        <th class="p-4 text-center">{{ trans('admin.upgrade_req_actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-300">
                    @forelse($requests as $req)
                        <tr class="hover:bg-navy-950/40 transition">
                            <td class="p-4">
                                <a href="{{ route('admin.tenants.show', $req->tenant->uuid) }}"
                                   class="font-bold text-white hover:text-emerald-400 transition block">
                                    {{ $req->tenant->name }}
                                </a>
                                <span class="text-[10px] text-slate-400 code-font">{{ $req->tenant->email }}</span>
                            </td>
                            <td class="p-4">
                                <span class="px-2 py-0.5 rounded-full bg-slate-700/60 text-slate-300 text-[10px] font-bold uppercase">
                                    {{ $req->current_plan }}
                                </span>
                            </td>
                            <td class="p-4">
                                <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold uppercase">
                                    {{ $req->requested_plan }}
                                </span>
                                @if($req->requestedPlanDetails)
                                    <div class="text-[10px] text-slate-500 mt-1">
                                        {{ number_format((float) $req->amount, 2) }} {{ $req->currency }}
                                        / {{ $req->billing_interval?->label() }}
                                    </div>
                                @endif
                            </td>
                            <td class="p-4">
                                @if($req->hasReceipt())
                                    <a href="{{ route('admin.upgrade_requests.receipt', $req) }}"
                                       class="inline-flex items-center gap-1 text-emerald-400 hover:text-emerald-300 font-bold">
                                        <i class="fa-solid fa-paperclip"></i>
                                        {{ trans('admin.upgrade_req_view_receipt') }}
                                    </a>
                                @else
                                    <span class="text-slate-600">—</span>
                                @endif
                                @if($req->transfer_reference)
                                    <div class="text-[10px] text-slate-500 mt-1 code-font">{{ $req->transfer_reference }}</div>
                                @endif
                                @if($req->transferred_at)
                                    <div class="text-[10px] text-slate-500">{{ $req->transferred_at->format('Y-m-d') }}</div>
                                @endif
                            </td>
                            <td class="p-4 max-w-[200px]">
                                <span class="text-slate-400 line-clamp-2">{{ $req->client_notes ?: '—' }}</span>
                            </td>
                            <td class="p-4">
                                <div class="code-font text-slate-300">{{ $req->created_at->format('Y-m-d') }}</div>
                                <div class="text-[10px] text-slate-500">{{ $req->created_at->diffForHumans() }}</div>
                            </td>
                            <td class="p-4">
                                @if($req->status === 'pending')
                                    <span class="px-2 py-1 rounded-full bg-amber-500/10 text-amber-400 text-[10px] font-bold">{{ trans('admin.upgrade_req_pending') }}</span>
                                @elseif($req->status === 'approved')
                                    <span class="px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">{{ trans('admin.upgrade_req_approved') }}</span>
                                    @if($req->actioned_at)
                                        <div class="text-[10px] text-slate-500 mt-1">{{ $req->actioned_at->format('Y-m-d') }}</div>
                                    @endif
                                @elseif($req->status === 'rejected')
                                    <span class="px-2 py-1 rounded-full bg-rose-500/10 text-rose-400 text-[10px] font-bold">{{ trans('admin.upgrade_req_rejected') }}</span>
                                @else
                                    <span class="px-2 py-1 rounded-full bg-slate-700/40 text-slate-400 text-[10px] font-bold">{{ ucfirst($req->status) }}</span>
                                @endif
                            </td>
                            <td class="p-4 text-center">
                                @if($req->isPending())
                                    <div class="flex items-center justify-center gap-2">
                                        <button type="button"
                                                @click="approveModal = {{ $req->id }}"
                                                class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white text-[11px] font-bold transition">
                                            <i class="fa-solid fa-check text-[10px]"></i>
                                            {{ trans('admin.upgrade_req_approve_btn') }}
                                        </button>
                                        <button type="button"
                                                @click="rejectModal = {{ $req->id }}"
                                                class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-rose-600/20 hover:bg-rose-600 text-rose-300 hover:text-white text-[11px] font-bold transition">
                                            <i class="fa-solid fa-xmark text-[10px]"></i>
                                            {{ trans('admin.upgrade_req_reject_btn') }}
                                        </button>
                                    </div>
                                @elseif($req->admin_notes)
                                    <span class="text-slate-400 text-[10px] italic max-w-[160px] block mx-auto line-clamp-2">{{ $req->admin_notes }}</span>
                                @else
                                    <span class="text-slate-600">—</span>
                                @endif
                            </td>
                        </tr>

                        {{-- Approve Modal --}}
                        <template x-if="approveModal === {{ $req->id }}">
                            <tr>
                                <td colspan="7" class="p-0">
                                    <div class="fixed inset-0 z-50 flex items-center justify-center bg-navy-950/80 backdrop-blur-sm"
                                         @click.self="approveModal = null">
                                        <div class="bg-navy-900 border border-emerald-500/30 rounded-2xl shadow-2xl p-6 w-full max-w-lg mx-4">
                                            <div class="flex items-center justify-between mb-5">
                                                <h2 class="text-sm font-black text-white flex items-center gap-2">
                                                    <i class="fa-solid fa-check-circle text-emerald-400"></i>
                                                    {{ trans('admin.upgrade_req_approve_modal_title') }}
                                                </h2>
                                                <button @click="approveModal = null" class="text-slate-400 hover:text-white transition">
                                                    <i class="fa-solid fa-xmark"></i>
                                                </button>
                                            </div>
                                            <div class="mb-4 p-3 rounded-xl bg-emerald-500/5 border border-emerald-500/20 text-xs text-slate-300">
                                                <strong class="text-emerald-400">{{ $req->tenant->name }}</strong>
                                                — Upgrade: <span class="uppercase font-bold">{{ $req->current_plan }}</span> → <span class="uppercase font-bold text-emerald-400">{{ $req->requested_plan }}</span>
                                                ({{ $req->billing_interval?->label() }} / {{ number_format((float) $req->amount, 2) }} {{ $req->currency }})
                                            </div>
                                            <form method="POST" action="{{ route('admin.upgrade_requests.approve', $req->id) }}" class="space-y-4">
                                                @csrf
                                                <div>
                                                    <label class="block text-[11px] font-bold text-slate-300 mb-1.5">{{ trans('admin.current_plan_tier') }}</label>
                                                    <select name="plan" required
                                                            class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2.5 text-xs focus:border-emerald-500 focus:outline-none transition">
                                                        @foreach($plans as $plan)
                                                            <option value="{{ $plan->slug }}" {{ $req->requested_plan === $plan->slug ? 'selected' : '' }}>
                                                                {{ $plan->displayName() }} — {{ $plan->formattedPrice() }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-[11px] font-bold text-slate-300 mb-1.5">{{ trans('admin.upgrade_req_new_limit') }}</label>
                                                    <input type="number" name="monthly_invoice_limit"
                                                           value="{{ $req->requestedPlanDetails->monthly_invoice_limit ?? 200 }}"
                                                           required
                                                           class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2.5 text-xs focus:border-emerald-500 focus:outline-none transition">
                                                </div>
                                                <div class="grid grid-cols-2 gap-3">
                                                    <div>
                                                        <label class="block text-[11px] font-bold text-slate-300 mb-1.5">{{ trans('admin.upgrade_req_new_expiry') }}</label>
                                                        <input type="date" name="plan_expires_at"
                                                               value="{{ $req->tenant->plan_expires_at?->format('Y-m-d') }}"
                                                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2.5 text-xs focus:border-emerald-500 focus:outline-none transition">
                                                    </div>
                                                    <div>
                                                        <label class="block text-[11px] font-bold text-slate-300 mb-1.5">{{ trans('admin.upgrade_req_extend_days') }}</label>
                                                        <input type="number" name="extend_days" min="0" placeholder="e.g. 30"
                                                               class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2.5 text-xs focus:border-emerald-500 focus:outline-none transition">
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="block text-[11px] font-bold text-slate-300 mb-1.5">{{ trans('admin.upgrade_req_admin_notes') }}</label>
                                                    <textarea name="admin_notes" rows="2" placeholder="{{ trans('admin.upgrade_req_admin_notes') }}..."
                                                              class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2.5 text-xs focus:border-emerald-500 focus:outline-none transition resize-none"></textarea>
                                                </div>
                                                <div class="flex items-center justify-end gap-3 pt-2">
                                                    <button type="button" @click="approveModal = null"
                                                            class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold transition">
                                                        {{ trans('admin.cancel_btn') }}
                                                    </button>
                                                    <button type="submit"
                                                            class="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold transition shadow-lg shadow-emerald-500/20">
                                                        <i class="fa-solid fa-check me-1"></i>
                                                        {{ trans('admin.upgrade_req_approve_btn') }}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </template>

                        {{-- Reject Modal --}}
                        <template x-if="rejectModal === {{ $req->id }}">
                            <tr>
                                <td colspan="7" class="p-0">
                                    <div class="fixed inset-0 z-50 flex items-center justify-center bg-navy-950/80 backdrop-blur-sm"
                                         @click.self="rejectModal = null">
                                        <div class="bg-navy-900 border border-rose-500/30 rounded-2xl shadow-2xl p-6 w-full max-w-md mx-4">
                                            <div class="flex items-center justify-between mb-5">
                                                <h2 class="text-sm font-black text-white flex items-center gap-2">
                                                    <i class="fa-solid fa-xmark-circle text-rose-400"></i>
                                                    {{ trans('admin.upgrade_req_reject_modal_title') }}
                                                </h2>
                                                <button @click="rejectModal = null" class="text-slate-400 hover:text-white transition">
                                                    <i class="fa-solid fa-xmark"></i>
                                                </button>
                                            </div>
                                            <div class="mb-4 p-3 rounded-xl bg-rose-500/5 border border-rose-500/20 text-xs text-slate-300">
                                                <strong class="text-rose-400">{{ $req->tenant->name }}</strong>
                                                — Requested: <span class="uppercase font-bold">{{ $req->requested_plan }}</span>
                                            </div>
                                            <form method="POST" action="{{ route('admin.upgrade_requests.reject', $req->id) }}" class="space-y-4">
                                                @csrf
                                                <div>
                                                    <label class="block text-[11px] font-bold text-slate-300 mb-1.5">{{ trans('admin.upgrade_req_admin_notes') }}</label>
                                                    <textarea name="admin_notes" rows="3"
                                                              placeholder="{{ trans('admin.upgrade_req_admin_notes') }}..."
                                                              class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2.5 text-xs focus:border-rose-500 focus:outline-none transition resize-none"></textarea>
                                                </div>
                                                <div class="flex items-center justify-end gap-3 pt-2">
                                                    <button type="button" @click="rejectModal = null"
                                                            class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold transition">
                                                        {{ trans('admin.cancel_btn') }}
                                                    </button>
                                                    <button type="submit"
                                                            class="px-5 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold transition">
                                                        <i class="fa-solid fa-xmark me-1"></i>
                                                        {{ trans('admin.upgrade_req_reject_btn') }}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    @empty
                        <tr>
                            <td colspan="8" class="p-10 text-center text-slate-500">
                                <i class="fa-solid fa-inbox text-3xl mb-3 block text-slate-700"></i>
                                <div class="font-bold text-slate-400">{{ trans('admin.upgrade_req_no_requests') }}</div>
                                <div class="text-[11px] text-slate-600 mt-1">{{ trans('admin.upgrade_req_empty_sub') }}</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($requests->hasPages())
            <div class="p-4 border-t border-slate-800">
                {{ $requests->links() }}
            </div>
        @endif
    </div>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@endsection