@extends('layouts.admin')

@section('title', $tenant->business_name ?? 'Business Details')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .page-header-left {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .page-header .back-btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        transition: all var(--transition);
        text-decoration: none;
    }

    .page-header .back-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; }

    .detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .card-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .card-title i { color: var(--accent); }

    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.875rem;
    }

    .detail-row:last-child { border-bottom: none; }
    .detail-label { color: var(--text-muted); }
    .detail-value { font-weight: 500; }

    .badge-status {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.625rem;
        border-radius: 50px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .badge-active { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }
    .badge-suspended { background: rgba(255, 71, 87, 0.15); color: #ff4757; }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-item {
        background: var(--bg-primary);
        border-radius: var(--radius-md);
        padding: 1rem;
        text-align: center;
    }

    .stat-value { font-size: 1.25rem; font-weight: 700; }
    .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

    @media (max-width: 768px) { .detail-grid { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div class="page-header-left">
            <a href="{{ route('admin.inventory.tenants') }}" class="back-btn"><i class="fas fa-arrow-left"></i></a>
            <h1>{{ $tenant->business_name ?? $tenant->name }}</h1>
        </div>
        <form method="POST" action="{{ route('admin.inventory.tenants.toggle-suspend', $tenant->id) }}">
            @csrf @method('PATCH')
            <button type="submit" class="btn {{ ($tenant->status ?? 'active') === 'active' ? 'btn-danger' : 'btn-success' }}">
                <i class="fas {{ ($tenant->status ?? 'active') === 'active' ? 'fa-ban' : 'fa-check' }}"></i>
                {{ ($tenant->status ?? 'active') === 'active' ? 'Suspend' : 'Reactivate' }}
            </button>
        </form>
    </div>

    <div class="detail-grid">
        <div>
            <div class="card">
                <h3 class="card-title"><i class="fas fa-building"></i> Business Details</h3>
                <div class="detail-row">
                    <span class="detail-label">Name</span>
                    <span class="detail-value">{{ $tenant->name }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Business Name</span>
                    <span class="detail-value">{{ $tenant->business_name }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Email</span>
                    <span class="detail-value">{{ $tenant->business_email ?? '—' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Phone</span>
                    <span class="detail-value">{{ $tenant->business_phone ?? '—' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Slug</span>
                    <span class="detail-value" style="font-family: monospace; color: var(--accent);">/{{ $tenant->slug }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Status</span>
                    <span class="detail-value"><span class="badge-status badge-{{ $tenant->status ?? 'active' }}">{{ ucfirst($tenant->status ?? 'active') }}</span></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Created</span>
                    <span class="detail-value">{{ $tenant->created_at?->format('M d, Y') ?? '—' }}</span>
                </div>
            </div>

            <div class="card">
                <h3 class="card-title"><i class="fas fa-user"></i> Owner</h3>
                @if($tenant->user)
                    <div class="detail-row">
                        <span class="detail-label">Name</span>
                        <span class="detail-value"><a href="{{ route('admin.users.show', $tenant->user->id) }}" style="color: var(--accent);">{{ $tenant->user->name }}</a></span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Email</span>
                        <span class="detail-value">{{ $tenant->user->email }}</span>
                    </div>
                @else
                    <p style="color: var(--text-muted); font-size: 0.85rem;">No owner linked.</p>
                @endif
            </div>
        </div>

        <div>
            <div class="card">
                <h3 class="card-title"><i class="fas fa-chart-bar"></i> Usage</h3>
                <div class="stats-grid">
                    <div class="stat-item">
                        {{-- $usage is computed by InventoryAdminController::showTenant
                             via $tenant->products()->count() — i.e. the live count
                             from the products table. $tenant->products_count would
                             only exist if the controller called withCount() (it
                             doesn't), which was why every tenant page showed 0. --}}
                        <div class="stat-value">{{ $usage['products'] ?? 0 }}</div>
                        <div class="stat-label">Products</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $tenant->max_products ?? 50 }}</div>
                        <div class="stat-label">Max Products</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $usage['staff'] ?? 0 }}</div>
                        <div class="stat-label">Staff</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $tenant->max_staff ?? 3 }}</div>
                        <div class="stat-label">Max Staff</div>
                    </div>
                </div>

                {{-- Secondary row: orders this month + total customers, so the
                     admin gets a quick read of activity without leaving the page. --}}
                <div class="stats-grid" style="margin-top: 0.75rem;">
                    <div class="stat-item">
                        <div class="stat-value">{{ $usage['orders_month'] ?? 0 }}</div>
                        <div class="stat-label">Orders This Month</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ $usage['customers'] ?? 0 }}</div>
                        <div class="stat-label">Customers</div>
                    </div>
                </div>
            </div>

            <div class="card">
                <h3 class="card-title"><i class="fas fa-credit-card"></i> Plan &amp; Billing</h3>
                <div class="detail-row">
                    <span class="detail-label">Current Plan</span>
                    <span class="detail-value">{{ ($currentPlan->name ?? null) ? $currentPlan->name : ucfirst($tenant->plan ?? 'free') }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Status</span>
                    <span class="detail-value">{{ ucfirst($tenant->status ?? '—') }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Renews / expires</span>
                    <span class="detail-value">{{ $tenant->subscription_ends_at ? \Carbon\Carbon::parse($tenant->subscription_ends_at)->format('M d, Y') : '—' }}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Usage</span>
                    <span class="detail-value" style="font-size:0.82rem;color:var(--text-secondary,#6b7280);">
                        {{ $usage['products'] ?? 0 }} / {{ $tenant->max_products ?? 0 }} products &middot;
                        {{ $usage['staff'] ?? 0 }} / {{ $tenant->max_staff ?? 0 }} staff &middot;
                        {{ $usage['orders_month'] ?? 0 }} orders this month
                    </span>
                </div>
            </div>

            {{-- Complimentary plan override (super-admin only) --}}
            @if(auth()->user() && auth()->user()->role === 'super_admin')
            <div class="card" style="border:1px solid rgba(220,38,38,0.2);">
                <h3 class="card-title"><i class="fas fa-gift" style="color:#DC2626;"></i> Grant Complimentary Plan</h3>
                <p style="font-size:0.82rem;color:var(--text-secondary,#6b7280);margin:0 0 0.85rem;">
                    Instantly activates a plan at no charge — for manual payments, comped accounts, or one-off support.
                    The tenant owner is emailed (PDF invoice attached) and the billing history below shows the grant as <em>Complimentary</em>.
                </p>
                <button type="button" class="btn btn-primary"
                        onclick="document.getElementById('override-form').style.display='block';this.style.display='none';">
                    Override plan…
                </button>

                <form id="override-form"
                      method="POST"
                      action="{{ route('admin.inventory.tenants.override', $tenant->id) }}"
                      style="display:none;margin-top:0.85rem;"
                      onsubmit="return confirmOverride(this, {{ json_encode($tenant->name ?? $tenant->business_name ?? '') }});">
                    @csrf

                    @if ($errors->any())
                        <div style="background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.3);color:#991B1B;padding:0.5rem 0.75rem;border-radius:6px;margin-bottom:0.75rem;font-size:0.85rem;">
                            @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
                        </div>
                    @endif

                    <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.5rem;border:1px solid var(--border,#D1D5DB);border-radius:6px;background:var(--bg-card);color:var(--text-primary);">
                                @foreach ($availablePlans as $p)
                                    <option value="{{ $p->slug }}">{{ $p->name }} (₦{{ number_format($p->price_monthly, 0) }}/mo)</option>
                                @endforeach
                            </select>
                        </label>
                        <label style="font-size:0.78rem;">
                            Billing cycle<br>
                            <select name="billing_cycle" required style="width:100%;padding:0.5rem;border:1px solid var(--border,#D1D5DB);border-radius:6px;background:var(--bg-card);color:var(--text-primary);">
                                <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 tenant (optional)<br>
                        <input type="text" name="note" maxlength="500" placeholder="e.g. Manual payment received — ref #PAY-1234"
                               style="width:100%;padding:0.5rem;border:1px solid var(--border,#D1D5DB);border-radius:6px;background:var(--bg-card);color:var(--text-primary);">
                    </label>

                    <label style="font-size:0.78rem;display:block;margin-bottom:0.5rem;">
                        Type <strong style="color:#991B1B;">{{ $tenant->name ?? $tenant->business_name }}</strong> to confirm<br>
                        <input type="text" name="confirm_name" required autocomplete="off"
                               style="width:100%;padding:0.5rem;border:1px solid var(--border,#D1D5DB);border-radius:6px;background:var(--bg-card);color:var(--text-primary);">
                    </label>

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

            <div class="card">
                <h3 class="card-title"><i class="fas fa-receipt"></i> Billing History</h3>
                @if($invoices->isEmpty())
                    <p style="color:var(--text-muted,#9CA3AF);font-size:0.88rem;">No billing history yet.</p>
                @else
                    <div style="overflow-x:auto;">
                        <table style="width:100%;border-collapse:collapse;font-size:0.85rem;">
                            <thead>
                                <tr style="border-bottom:1px solid var(--border,#E5E7EB);text-align:left;">
                                    <th style="padding:0.5rem 0.65rem;">Date</th>
                                    <th style="padding:0.5rem 0.65rem;">Plan</th>
                                    <th style="padding:0.5rem 0.65rem;">Cycle</th>
                                    <th style="padding:0.5rem 0.65rem;">Amount</th>
                                    <th style="padding:0.5rem 0.65rem;">Status</th>
                                    <th style="padding:0.5rem 0.65rem;">Source</th>
                                    <th style="padding:0.5rem 0.65rem;">Reference</th>
                                    <th style="padding:0.5rem 0.65rem;">Invoice</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($invoices as $inv)
                                    @php $isComp = ($inv->gateway ?? '') === 'admin_override'; @endphp
                                    <tr style="border-bottom:1px solid rgba(229,231,235,0.4);">
                                        <td style="padding:0.55rem 0.65rem;white-space:nowrap;">{{ \Carbon\Carbon::parse($inv->created_at)->format('M d, Y') }}</td>
                                        <td style="padding:0.55rem 0.65rem;">{{ optional($inv->plan)->name ?? '—' }}</td>
                                        <td style="padding:0.55rem 0.65rem;">{{ ucfirst($inv->billing_cycle ?? 'monthly') }}</td>
                                        <td style="padding:0.55rem 0.65rem;">
                                            @if($isComp)
                                                <span style="color:#059669;font-weight:600;">Complimentary</span>
                                            @else
                                                ₦{{ number_format((float) $inv->amount, 2) }}
                                            @endif
                                        </td>
                                        <td style="padding:0.55rem 0.65rem;">{{ ucfirst($inv->status ?? '—') }}</td>
                                        <td style="padding:0.55rem 0.65rem;">{{ $isComp ? 'Admin override' : ucfirst($inv->gateway ?? '—') }}</td>
                                        <td style="padding:0.55rem 0.65rem;font-family:monospace;font-size:0.72rem;">{{ $inv->reference }}</td>
                                        <td style="padding:0.55rem 0.65rem;">
                                            @if(($inv->status ?? '') === 'completed')
                                                <a href="{{ route('inventory.subscription.invoice', $inv->id) }}" target="_blank"
                                                   style="color:var(--accent,#10BFFF);text-decoration:none;font-weight:600;font-size:0.8rem;">
                                                    PDF
                                                </a>
                                            @else
                                                <span style="color:var(--text-muted,#9CA3AF);">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <script>
        // Two-stage check via TensealModal: first the name-typed guard, then
        // the real confirm dialog. The form is resubmitted via `submit()` on
        // success because TensealModal needs its own flow (it can't block a
        // native submit). `data-ts-confirmed="1"` stops the handler from
        // intercepting the second pass.
        function confirmOverride(form, tenantName) {
            if (form.dataset.tsConfirmed === '1') return true;

            var typed = (form.querySelector('[name=confirm_name]').value || '').trim();
            if (typed.toLowerCase() !== (tenantName || '').toLowerCase()) {
                TensealModal.notice({
                    type: 'warning',
                    title: 'Name does not match',
                    message: 'Type the business name exactly as shown (' + tenantName + ') to confirm.',
                });
                return false;
            }

            var planSel = form.querySelector('[name=plan_slug]');
            var plan    = planSel.options[planSel.selectedIndex].text;
            var cycle   = form.querySelector('[name=billing_cycle]').value;

            TensealModal.confirm({
                type: 'warning',
                title: 'Grant complimentary plan?',
                message: 'Business: ' + tenantName + '\nPlan: ' + plan + '\nCycle: ' + cycle + '\n\nThe tenant owner will be emailed with a PDF invoice and the billing history will show this as Complimentary.',
                confirmText: 'Yes, grant plan',
                cancelText: 'Cancel',
                onConfirm: function() {
                    form.dataset.tsConfirmed = '1';
                    form.submit();
                },
            });
            return false;
        }
    </script>
@endsection