@extends('admin.layout')
@section('title', 'Manage Tenants')
@section('content')

<div style="display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap">
    <form method="GET" style="display:flex;gap:8px;flex:1;flex-wrap:wrap">
        <input type="text" name="search" class="input" placeholder="Search..." value="{{ request('search') }}" style="max-width:250px">
        <select name="status" class="input" style="max-width:160px;width:auto">
            <option value="">All</option>
            <option value="trial" {{ request('status')=='trial'?'selected':'' }}>Trial</option>
            <option value="active" {{ request('status')=='active'?'selected':'' }}>Active</option>
            <option value="past_due" {{ request('status')=='past_due'?'selected':'' }}>Past Due</option>
            <option value="cancelled" {{ request('status')=='cancelled'?'selected':'' }}>Cancelled</option>
        </select>
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        <a href="{{ route('admin.tenants') }}" class="btn btn-secondary btn-sm">Reset</a>
    </form>
</div>

<div class="table-card">
    <div class="table-header"><h3 style="font-size:14px;font-weight:600">Tenants ({{ $tenants->total() }})</h3></div>
    <table>
        <thead><tr><th>Name</th><th>Plan</th><th>Status</th><th>Users</th><th>Expires</th><th>Active</th><th>Edit</th></tr></thead>
        <tbody>
            @foreach($tenants as $t)
            <tr>
                <td style="font-weight:600">{{ $t->name }}</td>
                <td>{{ $t->plan->name ?? '—' }}</td>
                <td><span class="badge badge-{{ $t->subscription_status === 'active' ? 'success' : ($t->subscription_status === 'trial' ? 'info' : ($t->subscription_status === 'past_due' ? 'danger' : 'warning')) }}">{{ ucfirst($t->subscription_status) }}</span></td>
                <td>{{ $t->users->count() }}</td>
                <td style="font-size:11px">{{ $t->subscription_ends_at ? \Carbon\Carbon::parse($t->subscription_ends_at)->format('M d, Y') : '—' }}</td>
                <td>
                    <form method="POST" action="/admin/tenants/{{ $t->id }}/toggle" style="display:inline">
                        @csrf
                        <button type="submit" class="btn btn-sm {{ $t->is_active ? 'btn-success' : 'btn-danger' }}">{{ $t->is_active ? 'Yes' : 'No' }}</button>
                    </form>
                </td>
                <td><button onclick="openTenantModal({{ $t->id }}, {{ $t->plan_id ?? 0 }}, '{{ $t->subscription_status }}', '{{ $t->subscription_ends_at }}', '{{ $t->trial_ends_at }}')" class="btn btn-secondary btn-sm">Edit</button></td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div style="padding:10px 14px;border-top:1px solid var(--border)">{{ $tenants->links() }}</div>
</div>

<div id="tenantModal" class="modal-overlay" style="display:none">
    <div class="modal" style="max-width:420px">
        <div class="modal-header"><h3 style="font-size:15px;font-weight:600">Edit Tenant</h3><button onclick="closeTenantModal()" style="background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-muted)">&times;</button></div>
        <form method="POST" id="tenantForm" class="modal-body">
            @csrf
            <div><label class="stat-card-label" style="margin-bottom:3px">Plan</label><select name="plan_id" id="tPlan" class="input">@foreach($plans as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach</select></div>
            <div><label class="stat-card-label" style="margin-bottom:3px">Status</label><select name="subscription_status" id="tStatus" class="input"><option value="trial">Trial</option><option value="active">Active</option><option value="past_due">Past Due</option><option value="cancelled">Cancelled</option></select></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
                <div><label class="stat-card-label" style="margin-bottom:3px">Trial Ends</label><input type="date" name="trial_ends_at" id="tTrial" class="input"></div>
                <div><label class="stat-card-label" style="margin-bottom:3px">Sub Ends</label><input type="date" name="subscription_ends_at" id="tEnds" class="input"></div>
            </div>
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text-primary)"><input type="checkbox" name="is_active" id="tActive" value="1" style="width:15px;height:15px;accent-color:var(--brand)"> Tenant Active</label>
            <div class="modal-footer" style="padding:0;border:none;margin-top:4px"><button type="button" onclick="closeTenantModal()" class="btn btn-secondary">Cancel</button><button type="submit" class="btn btn-primary">Save</button></div>
        </form>
    </div>
</div>

<script>
function openTenantModal(id, planId, status, endsAt, trialEnds) {
    document.getElementById('tenantForm').action = '/admin/tenants/' + id;
    document.getElementById('tPlan').value = planId || '';
    document.getElementById('tStatus').value = status || 'trial';
    document.getElementById('tEnds').value = endsAt ? endsAt.substring(0,10) : '';
    document.getElementById('tTrial').value = trialEnds ? trialEnds.substring(0,10) : '';
    document.getElementById('tActive').checked = true;
    document.getElementById('tenantModal').style.display = 'flex';
}
function closeTenantModal() { document.getElementById('tenantModal').style.display = 'none'; }
</script>
@endsection