@extends('layouts.app')
@section('title', 'Dashboard')

@section('breadcrumb')
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
    <h1 class="page-title"><i class="bi bi-speedometer2 me-2"></i>Dashboard</h1>
    <span class="text-muted small">{{ now()->format('d M Y, h:i A') }}</span>
</div>

<!-- Stat Cards -->
<div class="row g-4 mb-4">
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small">Customers</div>
                    <div class="fs-3 fw-bold text-primary">{{ number_format($stats['total_customers']) }}</div>
                </div>
                <div class="stat-icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-people-fill"></i></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small">Active</div>
                    <div class="fs-3 fw-bold text-success">{{ number_format($stats['active_licenses']) }}</div>
                </div>
                <div class="stat-icon bg-success bg-opacity-10 text-success"><i class="bi bi-check-circle-fill"></i></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small">Expired</div>
                    <div class="fs-3 fw-bold text-danger">{{ number_format($stats['expired_licenses']) }}</div>
                </div>
                <div class="stat-icon bg-danger bg-opacity-10 text-danger"><i class="bi bi-x-circle-fill"></i></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small">Suspended</div>
                    <div class="fs-3 fw-bold text-warning">{{ number_format($stats['suspended_licenses']) }}</div>
                </div>
                <div class="stat-icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-pause-circle-fill"></i></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small">Trial</div>
                    <div class="fs-3 fw-bold text-info">{{ number_format($stats['trial_licenses']) }}</div>
                </div>
                <div class="stat-icon bg-info bg-opacity-10 text-info"><i class="bi bi-clock-fill"></i></div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-2">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small">Lifetime</div>
                    <div class="fs-3 fw-bold text-secondary">{{ number_format($stats['lifetime_licenses']) }}</div>
                </div>
                <div class="stat-icon bg-secondary bg-opacity-10 text-secondary"><i class="bi bi-infinity"></i></div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row g-4 mb-4">
    <div class="col-md-8">
        <div class="card table-card p-4">
            <h6 class="fw-bold mb-3"><i class="bi bi-bar-chart-fill me-2 text-primary"></i>Monthly License Sales (Last 12 Months)</h6>
            <canvas id="monthlySalesChart" height="100"></canvas>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card table-card p-4">
            <h6 class="fw-bold mb-3"><i class="bi bi-pie-chart-fill me-2 text-info"></i>License Status Distribution</h6>
            <canvas id="statusChart" height="200"></canvas>
            <div class="d-flex justify-content-center flex-wrap gap-2 mt-3">
                <span class="badge badge-active px-2">Active: {{ $stats['active_licenses'] }}</span>
                <span class="badge badge-expired px-2">Expired: {{ $stats['expired_licenses'] }}</span>
                <span class="badge badge-suspended px-2">Suspended: {{ $stats['suspended_licenses'] }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Expiry Trend -->
<div class="row g-4 mb-4">
    <div class="col-md-6">
        <div class="card table-card p-4">
            <h6 class="fw-bold mb-3"><i class="bi bi-graph-up me-2 text-warning"></i>Expiry Trend (Next 6 Months)</h6>
            <canvas id="expiryChart" height="130"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card table-card p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-bold mb-0"><i class="bi bi-calendar-exclamation me-2 text-danger"></i>Upcoming Renewals</h6>
                <a href="{{ route('reports.renewal-due') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            @forelse($upcomingRenewals as $license)
            <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                <div>
                    <div class="fw-medium small">{{ $license->license_key }}</div>
                    <div class="text-muted" style="font-size:0.75rem">{{ $license->customer?->company_name }}</div>
                </div>
                <div class="text-end">
                    <div class="small fw-bold {{ $license->days_until_expiry <= 7 ? 'text-danger' : 'text-warning' }}">
                        {{ $license->days_until_expiry }}d left
                    </div>
                    <div style="font-size:0.7rem" class="text-muted">{{ $license->expiry_date?->format('d M Y') }}</div>
                </div>
            </div>
            @empty
            <p class="text-muted small mb-0">No upcoming renewals in the next 30 days.</p>
            @endforelse
        </div>
    </div>
</div>

<!-- Recent Activity -->
<div class="card table-card p-4">
    <h6 class="fw-bold mb-3"><i class="bi bi-activity me-2 text-success"></i>Recent Activity</h6>
    <div class="table-responsive">
        <table class="table table-sm table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th>License</th>
                    <th>Customer</th>
                    <th>Action</th>
                    <th>By</th>
                    <th>When</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentActivities as $log)
                <tr>
                    <td class="small fw-medium">{{ $log->license?->license_key }}</td>
                    <td class="small">{{ $log->license?->customer?->company_name }}</td>
                    <td>
                        <span class="badge rounded-pill
                            {{ match($log->action) {
                                'validated' => 'bg-success',
                                'created'   => 'bg-primary',
                                'renewed'   => 'bg-info',
                                'expired'   => 'bg-danger',
                                'suspended' => 'bg-warning text-dark',
                                'revoked'   => 'bg-dark',
                                default     => 'bg-secondary',
                            } }}">
                            {{ ucfirst($log->action) }}
                        </span>
                    </td>
                    <td class="small">{{ $log->created_by }}</td>
                    <td class="small text-muted">{{ $log->created_at?->diffForHumans() }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
const monthlyData = @json($monthlyData);
const expiryData  = @json($expiryTrend);

new Chart(document.getElementById('monthlySalesChart'), {
    type: 'bar',
    data: {
        labels: monthlyData.map(d => d.month),
        datasets: [{
            label: 'Licenses Created',
            data: monthlyData.map(d => d.count),
            backgroundColor: 'rgba(78,115,223,0.7)',
            borderColor: '#4e73df',
            borderWidth: 1,
            borderRadius: 6,
        }]
    },
    options: {
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
    }
});

new Chart(document.getElementById('statusChart'), {
    type: 'doughnut',
    data: {
        labels: ['Active', 'Expired', 'Suspended'],
        datasets: [{
            data: [{{ $stats['active_licenses'] }}, {{ $stats['expired_licenses'] }}, {{ $stats['suspended_licenses'] }}],
            backgroundColor: ['#28a745','#dc3545','#ffc107'],
            borderWidth: 2,
        }]
    },
    options: { plugins: { legend: { display: false } }, cutout: '70%' }
});

new Chart(document.getElementById('expiryChart'), {
    type: 'line',
    data: {
        labels: expiryData.map(d => d.month),
        datasets: [{
            label: 'Expiring Licenses',
            data: expiryData.map(d => d.count),
            borderColor: '#f6c23e',
            backgroundColor: 'rgba(246,194,62,0.15)',
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#f6c23e',
        }]
    },
    options: {
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
    }
});
</script>
@endpush