@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            {{-- Page Title --}}
            <div class="container-fluid">
                <div class="page-title">
                    <div class="row align-items-center">
                        <div class="col-sm-6 ps-0">
                            <h3>
                                <i class="fas fa-chart-pie mr-2"></i>
                                Platform Dashboard
                            </h3>
                            <p class="text-muted mb-0" style="font-size:13px">
                                Overview across all tenants
                            </p>
                        </div>
                        <div class="col-sm-6 pe-0 text-right">
                            <ol class="bc">
                                <li><a href="/platform/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Dashboard</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">

                {{-- Period Tabs --}}
                <div class="d-flex flex-wrap mb-3" style="gap:8px">
                    @foreach(['weekly' => 'Weekly', 'monthly' => 'Monthly', 'yearly' => 'Yearly'] as $key => $label)
                        <a href="{{ request()->fullUrlWithQuery(['period' => $key]) }}"
                           style="
                            display:inline-flex;align-items:center;gap:6px;
                            padding:7px 18px;border-radius:20px;font-size:13px;font-weight:600;
                            text-decoration:none;
                            border:2px solid {{ $period === $key ? 'transparent' : '#dee2e6' }};
                            background:{{ $period === $key ? '#f39c12' : '#fff' }};
                            color:{{ $period === $key ? '#fff' : '#6c757d' }};">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>

                {{-- Stat Cards Row 1 --}}
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <div style="background:#fff;border-left:4px solid #4f46e5;border-radius:10px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,0.06);display:flex;justify-content:space-between;align-items:center">
                            <div>
                                <div style="font-size:12px;color:#a0aec0;font-weight:700;letter-spacing:0.5px;text-transform:uppercase">Total Tenants</div>
                                <div style="font-size:26px;font-weight:800;color:#2d3748;margin-top:4px">{{ $total_tenants }}</div>
                            </div>
                            <div style="width:46px;height:46px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center">
                                <i class="fas fa-building" style="color:#4f46e5;font-size:18px"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div style="background:#fff;border-left:4px solid #f0ad4e;border-radius:10px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,0.06);display:flex;justify-content:space-between;align-items:center">
                            <div>
                                <div style="font-size:12px;color:#a0aec0;font-weight:700;letter-spacing:0.5px;text-transform:uppercase">Pending Approval</div>
                                <div style="font-size:26px;font-weight:800;color:#2d3748;margin-top:4px">{{ $pending_tenants }}</div>
                            </div>
                            <div style="width:46px;height:46px;border-radius:50%;background:#fff3cd;display:flex;align-items:center;justify-content:center">
                                <i class="fas fa-clock" style="color:#f0ad4e;font-size:18px"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div style="background:#fff;border-left:4px solid #28a745;border-radius:10px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,0.06);display:flex;justify-content:space-between;align-items:center">
                            <div>
                                <div style="font-size:12px;color:#a0aec0;font-weight:700;letter-spacing:0.5px;text-transform:uppercase">Active Tenants</div>
                                <div style="font-size:26px;font-weight:800;color:#2d3748;margin-top:4px">{{ $active_tenants }}</div>
                            </div>
                            <div style="width:46px;height:46px;border-radius:50%;background:#d4edda;display:flex;align-items:center;justify-content:center">
                                <i class="fas fa-check-circle" style="color:#28a745;font-size:18px"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div style="background:#fff;border-left:4px solid #dc3545;border-radius:10px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,0.06);display:flex;justify-content:space-between;align-items:center">
                            <div>
                                <div style="font-size:12px;color:#a0aec0;font-weight:700;letter-spacing:0.5px;text-transform:uppercase">Suspended</div>
                                <div style="font-size:26px;font-weight:800;color:#2d3748;margin-top:4px">{{ $suspended_tenants }}</div>
                            </div>
                            <div style="width:46px;height:46px;border-radius:50%;background:#f8d7da;display:flex;align-items:center;justify-content:center">
                                <i class="fas fa-ban" style="color:#dc3545;font-size:18px"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Stat Cards Row 2 — Revenue --}}
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <div style="background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;padding:20px;color:#fff;box-shadow:0 4px 14px rgba(102,126,234,0.3)">
                            <div style="font-size:12px;opacity:0.85;font-weight:700;letter-spacing:0.5px;text-transform:uppercase">Total Revenue</div>
                            <div style="font-size:28px;font-weight:800;margin-top:6px">₹{{ number_format($total_revenue, 2) }}</div>
                            <div style="font-size:12px;opacity:0.85;margin-top:4px">All-time subscription revenue</div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <div style="background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.06)">
                            <div style="font-size:12px;color:#a0aec0;font-weight:700;letter-spacing:0.5px;text-transform:uppercase">This Month</div>
                            <div style="font-size:24px;font-weight:800;color:#16a34a;margin-top:6px">₹{{ number_format($revenue_this_month, 2) }}</div>
                            <div style="font-size:12px;color:#a0aec0;margin-top:4px">{{ $tenants_this_month }} new tenant(s) signed up</div>
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <div style="background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.06)">
                            <div style="font-size:12px;color:#a0aec0;font-weight:700;letter-spacing:0.5px;text-transform:uppercase">This Year</div>
                            <div style="font-size:24px;font-weight:800;color:#4f46e5;margin-top:6px">₹{{ number_format($revenue_this_year, 2) }}</div>
                            <div style="font-size:12px;color:#a0aec0;margin-top:4px">{{ $tenants_this_week }} new this week</div>
                        </div>
                    </div>
                </div>

                {{-- Charts Row --}}
                <div class="row">
                    <div class="col-lg-8 mb-3">
                        <div style="background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.06);border-top:3px solid #4f46e5">
                            <h6 style="font-weight:700;color:#2d3748;margin-bottom:16px">
                                <i class="fas fa-chart-line mr-2" style="color:#4f46e5"></i>
                                Tenant Signups &amp; Revenue
                            </h6>
                            <canvas id="platformTrendChart" height="90"></canvas>
                        </div>
                    </div>

                    <div class="col-lg-4 mb-3">
                        <div style="background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.06);border-top:3px solid #f39c12">
                            <h6 style="font-weight:700;color:#2d3748;margin-bottom:16px">
                                <i class="fas fa-chart-pie mr-2" style="color:#f39c12"></i>
                                Tenant Status
                            </h6>
                            <canvas id="statusPieChart" height="200"></canvas>
                        </div>
                    </div>
                </div>

                {{-- Tables Row --}}
                <div class="row">

                    {{-- Recent Tenants --}}
                    <div class="col-lg-7 mb-3">
                        <div style="background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.06);overflow:hidden">
                            <div style="padding:16px 20px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center">
                                <h6 style="font-weight:700;color:#2d3748;margin:0">
                                    <i class="fas fa-building mr-2" style="color:#4f46e5"></i>
                                    Recently Registered
                                </h6>
                                <a href="/platform/tenants" style="font-size:12px;color:#4f46e5;font-weight:600;text-decoration:none">
                                    View All <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                            <div class="table-responsive">
                                <table class="table mb-0" style="font-size:13px">
                                    <thead>
                                        <tr style="background:#f8f9fa">
                                            <th style="padding:10px 16px;font-weight:700;color:#718096">Company</th>
                                            <th style="padding:10px 16px;font-weight:700;color:#718096">Plan</th>
                                            <th style="padding:10px 16px;font-weight:700;color:#718096">Status</th>
                                            <th style="padding:10px 16px;font-weight:700;color:#718096">Registered</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($recent_tenants as $tenant)
                                            <tr style="border-bottom:1px solid #f5f5f5">
                                                <td style="padding:10px 16px">
                                                    <strong style="color:#2d3748">{{ $tenant->name }}</strong><br>
                                                    <small style="color:#a0aec0">{{ $tenant->slug }}.{{ config('app.domain') }}</small>
                                                </td>
                                                <td style="padding:10px 16px">{{ $tenant->plan?->name ?? '—' }}</td>
                                                <td style="padding:10px 16px">
                                                    @php
                                                        $badge = match($tenant->status) {
                                                            'pending'   => ['#fff3cd','#856404'],
                                                            'approved'  => ['#d1ecf1','#0c5460'],
                                                            'active'    => ['#d4edda','#155724'],
                                                            'rejected'  => ['#f8d7da','#721c24'],
                                                            'suspended' => ['#e2e3e5','#383d41'],
                                                            default     => ['#e9ecef','#6c757d'],
                                                        };
                                                    @endphp
                                                    <span style="background:{{ $badge[0] }};color:{{ $badge[1] }};padding:3px 10px;border-radius:14px;font-size:11px;font-weight:700">
                                                        {{ ucfirst($tenant->status) }}
                                                    </span>
                                                </td>
                                                <td style="padding:10px 16px;color:#718096">{{ $tenant->created_at->format('d M Y') }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" style="text-align:center;padding:30px;color:#a0aec0">No tenants yet.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- Expiring Soon --}}
                    <div class="col-lg-5 mb-3">
                        <div style="background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.06);overflow:hidden">
                            <div style="padding:16px 20px;border-bottom:1px solid #f0f0f0">
                                <h6 style="font-weight:700;color:#2d3748;margin:0">
                                    <i class="fas fa-hourglass-half mr-2" style="color:#dc3545"></i>
                                    Expiring Within 7 Days
                                </h6>
                            </div>
                            <div style="padding:8px 0">
                                @forelse($expiring_soon as $sub)
                                    <div style="padding:10px 20px;border-bottom:1px solid #f5f5f5;display:flex;justify-content:space-between;align-items:center">
                                        <div>
                                            <strong style="font-size:13px;color:#2d3748">{{ $sub->tenant?->name ?? '—' }}</strong><br>
                                            <small style="color:#a0aec0">{{ $sub->plan?->name }} · {{ ucfirst($sub->billing_cycle) }}</small>
                                        </div>
                                        <span style="background:#fff3cd;color:#856404;padding:3px 10px;border-radius:14px;font-size:11px;font-weight:700;white-space:nowrap">
                                            {{ $sub->expires_at->diffForHumans() }}
                                        </span>
                                    </div>
                                @empty
                                    <div style="text-align:center;padding:30px;color:#a0aec0;font-size:13px">
                                        <i class="fas fa-check-circle" style="font-size:24px;display:block;margin-bottom:8px;opacity:0.4"></i>
                                        No subscriptions expiring soon.
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.umd.min.js"></script>
<script>
    // ── Trend Chart: signups + revenue ──────────────────────────
    new Chart(document.getElementById('platformTrendChart'), {
        type: 'bar',
        data: {
            labels: @json($chart_labels),
            datasets: [
                {
                    type: 'line',
                    label: 'Revenue (₹)',
                    data: @json($chart_revenue),
                    borderColor: '#4f46e5',
                    backgroundColor: 'rgba(79,70,229,0.08)',
                    yAxisID: 'y1',
                    tension: 0.3,
                    fill: true,
                },
                {
                    type: 'bar',
                    label: 'New Tenants',
                    data: @json($chart_tenants),
                    backgroundColor: '#f39c12',
                    yAxisID: 'y',
                    borderRadius: 6,
                }
            ]
        },
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            scales: {
                y:  { position: 'left',  title: { display: true, text: 'Tenants' }, ticks: { precision: 0 } },
                y1: { position: 'right', title: { display: true, text: 'Revenue (₹)' }, grid: { drawOnChartArea: false } },
            }
        }
    });

    // ── Status Pie Chart ─────────────────────────────────────────
    new Chart(document.getElementById('statusPieChart'), {
        type: 'doughnut',
        data: {
            labels: ['Pending', 'Active', 'Rejected', 'Suspended'],
            datasets: [{
                data: @json($pie_data),
                backgroundColor: ['#f0ad4e', '#28a745', '#dc3545', '#6c757d'],
                borderWidth: 0,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } }
        }
    });
</script>

@include('Partials.footer')