@extends('layouts.admin')
@section('title', 'Tenant Onboarding')

@push('styles')
<style>
    .ob-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
    .ob-header h1 { font-size:1.5rem; font-weight:700; margin:0; }
    .ob-header p { color:var(--text-secondary,#6b7280); font-size:0.88rem; margin-top:0.25rem; }
    .ob-stat { background:linear-gradient(180deg, rgba(255,176,32,0.07), var(--bg-card)); border:1px solid rgba(255,176,32,0.3); border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
    .ob-stat .num { font-size:2rem; font-weight:800; color:#FFB020; }
    .ob-stat .lbl { color:var(--text-secondary,#6b7280); font-size:0.85rem; margin-top:0.25rem; }
    .ob-filters { display:flex; gap:0.5rem; align-items:end; padding:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; margin-bottom:1rem; }
    .ob-filters label { display:block; font-size:0.75rem; color:var(--text-secondary,#6b7280); margin-bottom:0.25rem; }
    .ob-filters input { padding:0.5rem 0.7rem; border:1px solid var(--border); border-radius:6px; background:var(--bg-secondary); color:var(--text-primary); font-size:0.85rem; width:90px; }
    .ob-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
    .ob-table th { padding:0.7rem 1rem; text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-secondary,#6b7280); background:var(--bg-secondary); font-weight:600; }
    .ob-table td { padding:0.85rem 1rem; border-top:1px solid var(--border); font-size:0.85rem; vertical-align:top; }
    .ob-step { display:inline-flex; align-items:center; gap:0.4rem; padding:3px 9px; border-radius:999px; font-size:0.72rem; font-weight:600; margin-right:0.25rem; margin-bottom:0.2rem; }
    .ob-step.done { background:rgba(0,212,170,0.14); color:#00D4AA; }
    .ob-step.todo { background:rgba(156,163,175,0.14); color:#9CA3AF; }
    .ob-progress { height:5px; background:rgba(255,255,255,0.07); border-radius:999px; overflow:hidden; margin-top:0.4rem; max-width:160px; }
    .ob-progress-bar { height:100%; background:var(--accent,#10BFFF); transition:width 0.25s; }
    .ob-progress-bar.full { background:#00D4AA; }
    .ob-progress-bar.warn { background:#FFB020; }
    .ob-progress-bar.bad { background:#FF4757; }
    .ob-empty { padding:3rem; text-align:center; color:var(--text-muted,#9CA3AF); }
    .ob-empty i { font-size:2.5rem; opacity:0.4; display:block; margin-bottom:0.5rem; }
    .ob-btn { padding:0.4rem 0.85rem; font-size:0.78rem; border:1px solid var(--border); border-radius:6px; color:var(--text-primary); text-decoration:none; background:var(--bg-secondary); }
</style>
@endpush

@section('content')
<div class="ob-header">
    <div>
        <h1><i class="fas fa-seedling"></i> Tenant Onboarding</h1>
        <p>Tenants who signed up between {{ $maxDays }} and {{ $minDays }} day(s) ago and haven't completed all setup milestones. Reach out before they cool off.</p>
    </div>
</div>

@if($stuckCount > 0)
    <div class="ob-stat">
        <div class="num">{{ $stuckCount }}</div>
        <div class="lbl">tenant{{ $stuckCount === 1 ? '' : 's' }} stuck below 100% in this window</div>
    </div>
@endif

<form method="GET" class="ob-filters">
    <div>
        <label>Min days old</label>
        <input type="number" name="min_days" min="0" value="{{ $minDays }}">
    </div>
    <div>
        <label>Max days old</label>
        <input type="number" name="max_days" min="1" value="{{ $maxDays }}">
    </div>
    <button class="ob-btn" style="background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;">Apply</button>
</form>

@if($rows->isEmpty())
    <div class="ob-empty">
        <i class="fas fa-mug-hot"></i>
        <div>No tenants in this signup window. Try widening the range.</div>
    </div>
@else
<table class="ob-table">
    <thead>
        <tr>
            <th>Tenant</th>
            <th>Owner</th>
            <th>Signed up</th>
            <th>Plan</th>
            <th>Milestones</th>
            <th>Progress</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach($rows as $r)
            <tr>
                <td>
                    <strong>{{ $r->tenant->name }}</strong>
                    <div style="color:var(--text-muted,#9CA3AF);font-size:0.72rem;">{{ $r->tenant->slug }}</div>
                </td>
                <td>
                    {{ optional($r->tenant->user)->name ?? '—' }}
                    <div style="color:var(--text-muted,#9CA3AF);font-size:0.72rem;">{{ optional($r->tenant->user)->email }}</div>
                </td>
                <td>
                    {{ $r->tenant->created_at->format('M d') }}
                    <div style="color:var(--text-muted,#9CA3AF);font-size:0.72rem;">{{ $r->days_old }}d ago</div>
                </td>
                <td><span style="font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;">{{ ucfirst($r->tenant->plan ?? 'free') }}</span></td>
                <td>
                    <span class="ob-step {{ $r->has_products ? 'done' : 'todo' }}">
                        <i class="fas fa-{{ $r->has_products ? 'check' : 'circle' }}"></i> Products
                    </span>
                    <span class="ob-step {{ $r->has_forms ? 'done' : 'todo' }}">
                        <i class="fas fa-{{ $r->has_forms ? 'check' : 'circle' }}"></i> Form
                    </span>
                    <span class="ob-step {{ $r->has_orders ? 'done' : 'todo' }}">
                        <i class="fas fa-{{ $r->has_orders ? 'check' : 'circle' }}"></i> Order
                    </span>
                    <span class="ob-step {{ $r->has_paid ? 'done' : 'todo' }}">
                        <i class="fas fa-{{ $r->has_paid ? 'check' : 'circle' }}"></i> Paid
                    </span>
                </td>
                <td>
                    <strong>{{ $r->completed }}/4</strong>
                    @php
                        $pct = $r->score * 100;
                        $cls = $pct === 100.0 ? 'full' : ($pct >= 50 ? 'warn' : 'bad');
                    @endphp
                    <div class="ob-progress"><div class="ob-progress-bar {{ $cls }}" style="width:{{ $pct }}%;"></div></div>
                </td>
                <td>
                    <a href="{{ route('admin.inventory.tenants.show', $r->tenant->id) }}" class="ob-btn">Open</a>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
@endif
@endsection