@extends('layouts.admin')

@section('title', 'Tenant Billing — ' . $user->name)

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; }

    .tenant-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .tenant-card h2 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    .meta-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .meta-row .label {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
    }
    .meta-row .value {
        font-size: 1rem;
        font-weight: 600;
        margin-top: 0.25rem;
    }

    .usage-bar-wrap {
        background: var(--bg-primary);
        border-radius: var(--radius-sm);
        height: 8px;
        overflow: hidden;
        margin-top: 0.375rem;
    }
    .usage-bar {
        height: 100%;
        background: var(--accent);
    }
    .usage-bar.warn { background: var(--danger); }

    table.plain {
        width: 100%;
        border-collapse: collapse;
        margin-top: 0.5rem;
    }
    table.plain th, table.plain td {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border);
        text-align: left;
        font-size: 0.875rem;
    }
    table.plain th {
        color: var(--text-muted);
        font-weight: 500;
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    .form-inline {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    .form-inline select, .form-inline button {
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-size: 0.85rem;
    }
    .form-inline button {
        background: var(--accent);
        color: #fff;
        cursor: pointer;
        border-color: var(--accent);
    }
    .empty {
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.875rem;
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <a href="{{ route('admin.users.show', $user->id) }}" class="back-btn">&larr;</a>
    <h1>Tenant Billing — {{ $user->name }}</h1>
</div>

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

@forelse ($tenants as $tenant)
    @php
        $plan = $plans[$tenant->plan] ?? null;
        $u = $usage[$tenant->id] ?? ['products' => 0, 'staff' => 0, 'orders_total' => 0, 'max_products' => $tenant->max_products, 'max_staff' => $tenant->max_staff];
        $maxProducts = max(1, (int) ($u['max_products'] ?: 1));
        $maxStaff = max(1, (int) ($u['max_staff'] ?: 1));
        $productsPct = min(100, round(($u['products'] / $maxProducts) * 100));
        $staffPct = min(100, round(($u['staff'] / $maxStaff) * 100));
    @endphp

    <div class="tenant-card">
        <h2>{{ $tenant->name }} <small style="color:var(--text-muted); font-weight:400;">({{ $tenant->slug }})</small></h2>

        <div class="meta-row">
            <div>
                <div class="label">Current Plan</div>
                <div class="value">{{ $plan->name ?? ucfirst($tenant->plan ?? 'free') }}</div>
            </div>
            <div>
                <div class="label">Status</div>
                <div class="value">{{ ucfirst($tenant->status) }}</div>
            </div>
            <div>
                <div class="label">Monthly Price</div>
                <div class="value">{{ $plan ? '$' . number_format($plan->price_monthly, 2) : '—' }}</div>
            </div>
            <div>
                <div class="label">Subscription Ends</div>
                <div class="value">{{ $tenant->subscription_ends_at ? \Carbon\Carbon::parse($tenant->subscription_ends_at)->format('M d, Y') : '—' }}</div>
            </div>
        </div>

        <h3 style="font-size:0.9rem; margin:1rem 0 0.5rem;">Usage vs Limits</h3>
        <div>
            <div style="display:flex; justify-content:space-between; font-size:0.8rem;">
                <span>Products: {{ $u['products'] }} / {{ $u['max_products'] }}</span>
                <span>{{ $productsPct }}%</span>
            </div>
            <div class="usage-bar-wrap">
                <div class="usage-bar {{ $productsPct >= 90 ? 'warn' : '' }}" style="width: {{ $productsPct }}%"></div>
            </div>
        </div>
        <div style="margin-top:0.75rem;">
            <div style="display:flex; justify-content:space-between; font-size:0.8rem;">
                <span>Staff: {{ $u['staff'] }} / {{ $u['max_staff'] }}</span>
                <span>{{ $staffPct }}%</span>
            </div>
            <div class="usage-bar-wrap">
                <div class="usage-bar {{ $staffPct >= 90 ? 'warn' : '' }}" style="width: {{ $staffPct }}%"></div>
            </div>
        </div>
        <div style="margin-top:0.75rem; font-size:0.85rem; color:var(--text-secondary);">
            Total orders: <strong>{{ $u['orders_total'] }}</strong>
        </div>

        <h3 style="font-size:0.9rem; margin:1.25rem 0 0.5rem;">Grant Complimentary Plan</h3>
        <div style="background:#F9FAFB;border:1px solid #E5E7EB;border-radius:8px;padding:1rem;margin-bottom:0.5rem;">
            <p style="margin:0 0 0.75rem;font-size:0.82rem;color:#4B5563;">
                Instantly activate a plan at no charge — for manual payments, comped accounts, or one-off support.
                User will be emailed as "Complimentary" and the billing history will show it.
            </p>
            <button type="button"
                    onclick="document.getElementById('override-form-{{ $tenant->id }}').style.display='block';this.style.display='none';"
                    style="padding:0.55rem 1rem;background:#0C2E62;color:#fff;border:none;border-radius:6px;font-weight:600;font-size:0.85rem;cursor:pointer;">
                Override plan…
            </button>

            <form id="override-form-{{ $tenant->id }}"
                  method="POST"
                  action="{{ route('admin.users.tenant-billing.override', $user->id) }}"
                  style="display:none;margin-top:0.75rem;"
                  onsubmit="return confirmOverride(this, {{ json_encode($tenant->name) }});">
                @csrf
                <input type="hidden" name="tenant_id" value="{{ $tenant->id }}">

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.5rem;">
                    <label style="font-size:0.78rem;">
                        Plan<br>
                        <select name="plan_slug" required style="width:100%;padding:0.45rem;border:1px solid #D1D5DB;border-radius:6px;">
                            @foreach ($availablePlans as $p)
                                <option value="{{ $p->slug }}">{{ $p->name }} (${{ number_format($p->price_monthly, 2) }}/mo)</option>
                            @endforeach
                        </select>
                    </label>
                    <label style="font-size:0.78rem;">
                        Billing cycle<br>
                        <select name="billing_cycle" required style="width:100%;padding:0.45rem;border:1px solid #D1D5DB;border-radius:6px;">
                            <option value="monthly">Monthly</option>
                            <option value="yearly">Yearly</option>
                        </select>
                    </label>
                </div>

                <label style="font-size:0.78rem;display:block;margin-bottom:0.5rem;">
                    Note to user (optional)<br>
                    <input type="text" name="note" maxlength="500" placeholder="e.g. Manual payment received — invoice #PAY-1234"
                           style="width:100%;padding:0.45rem;border:1px solid #D1D5DB;border-radius:6px;">
                </label>

                <label style="font-size:0.78rem;display:block;margin-bottom:0.5rem;">
                    Type the business name <strong style="color:#991B1B;">{{ $tenant->name }}</strong> to confirm<br>
                    <input type="text" name="confirm_name" required
                           style="width:100%;padding:0.45rem;border:1px solid #D1D5DB;border-radius:6px;">
                </label>

                @error('confirm_name')<div style="color:#991B1B;font-size:0.78rem;margin-bottom:0.5rem;">{{ $message }}</div>@enderror

                <div style="display:flex;gap:0.5rem;">
                    <button type="submit" style="padding:0.55rem 1rem;background:#DC2626;color:#fff;border:none;border-radius:6px;font-weight:600;font-size:0.85rem;cursor:pointer;">
                        Grant Complimentary Plan
                    </button>
                    <button type="button"
                            onclick="this.form.style.display='none';this.form.previousElementSibling.style.display='inline-block';"
                            style="padding:0.55rem 1rem;background:#fff;color:#374151;border:1px solid #D1D5DB;border-radius:6px;font-weight:600;font-size:0.85rem;cursor:pointer;">
                        Cancel
                    </button>
                </div>
            </form>
        </div>

        <h3 style="font-size:0.9rem; margin:1.25rem 0 0.5rem;">Billing History</h3>
        @php $tenantInvoices = $invoicesByTenant[$tenant->id] ?? collect(); @endphp
        @if ($tenantInvoices->isEmpty())
            <p class="empty">No billing history on record.</p>
        @else
            <table class="plain">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Plan</th>
                        <th>Cycle</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Gateway</th>
                        <th>Reference</th>
                        <th>Invoice</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tenantInvoices as $inv)
                        @php $isComp = ($inv->gateway ?? '') === 'admin_override'; @endphp
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($inv->created_at)->format('M d, Y') }}</td>
                            <td>{{ optional($inv->plan)->name ?? '—' }}</td>
                            <td>{{ ucfirst($inv->billing_cycle ?? 'monthly') }}</td>
                            <td>
                                @if($isComp)
                                    <span style="color:#059669;">Complimentary</span>
                                @else
                                    ${{ number_format($inv->amount ?? 0, 2) }}
                                @endif
                            </td>
                            <td>{{ ucfirst($inv->status ?? 'unknown') }}</td>
                            <td>{{ $isComp ? 'Admin override' : ucfirst($inv->gateway ?? '—') }}</td>
                            <td style="font-family:monospace;font-size:0.72rem;">{{ $inv->reference ?? $inv->id }}</td>
                            <td>
                                @if(($inv->status ?? '') === 'completed')
                                    <a href="{{ route('inventory.subscription.invoice', $inv->id) }}" target="_blank"
                                       style="color:#0C2E62;text-decoration:none;font-weight:600;font-size:0.78rem;">
                                        PDF
                                    </a>
                                @else
                                    <span style="color:#9CA3AF;">—</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
@empty
    <div class="tenant-card">
        <p class="empty">This user has no inventory tenants.</p>
    </div>
@endforelse

<script>
    // Two-step confirm: form JS guards against misclicks, server-side guards
    // against typos with the "type the business name" validation.
    function confirmOverride(form, tenantName) {
        var typed = (form.querySelector('[name=confirm_name]').value || '').trim();
        if (typed.toLowerCase() !== tenantName.toLowerCase()) {
            alert('The typed business name does not match "' + tenantName + '". Override cancelled.');
            return false;
        }
        var plan  = form.querySelector('[name=plan_slug]').options[form.querySelector('[name=plan_slug]').selectedIndex].text;
        var cycle = form.querySelector('[name=billing_cycle]').value;
        return confirm(
            'GRANT COMPLIMENTARY PLAN\n\n' +
            'Plan: ' + plan + '\n' +
            'Cycle: ' + cycle + '\n' +
            'Business: ' + tenantName + '\n\n' +
            'The user will be emailed and billing history will show this as Complimentary.\n\n' +
            'Proceed?'
        );
    }
</script>
@endsection