@extends('admin.layout.app')
@section('title', 'Website Analytics')

@php($n = fn($v) => number_format((int) $v))

@section('body')
<section class="section pt-3">
    <div class="container-fluid">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
            <div>
                <h3 class="fw-bold mb-1">Website & Admissions Analytics</h3>
                <p class="text-muted mb-0">Public website usage, admissions funnel, employer requests, and program demand.</p>
            </div>
            <a href="{{ route('front.home') }}" target="_blank" class="btn btn-outline-primary rounded-pill">
                <i class="fas fa-external-link-alt me-1"></i> Public website
            </a>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-md-6 col-xl-3">
                <div class="analytics-card p-4">
                    <span class="text-muted small text-uppercase fw-semibold">Visits today</span>
                    <h2 class="fw-bold mb-0">{{ $n($visitStats['today']) }}</h2>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="analytics-card p-4">
                    <span class="text-muted small text-uppercase fw-semibold">Visits 30 days</span>
                    <h2 class="fw-bold mb-0">{{ $n($visitStats['last_30_days']) }}</h2>
                    <small class="text-muted">{{ $n($visitStats['unique_30_days']) }} unique visitors</small>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="analytics-card p-4">
                    <span class="text-muted small text-uppercase fw-semibold">Admissions 30 days</span>
                    <h2 class="fw-bold mb-0">{{ $n($admissionStats['last_30_days']) }}</h2>
                    <small class="text-muted">{{ $n($admissionStats['pending']) }} pending review</small>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="analytics-card p-4">
                    <span class="text-muted small text-uppercase fw-semibold">Public leads 30 days</span>
                    <h2 class="fw-bold mb-0">{{ $n($leadStats['contacts_30_days'] + $leadStats['employer_requests_30_days']) }}</h2>
                    <small class="text-muted">{{ $n($leadStats['employer_requests_30_days']) }} employer requests</small>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-lg-8">
                <div class="analytics-card p-4 h-100">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h5 class="fw-bold mb-1">Traffic and admissions trend</h5>
                            <span class="text-muted small">Last 30 days</span>
                        </div>
                    </div>
                    <div id="website-analytics-line" style="min-height: 320px;"></div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="analytics-card p-4 h-100">
                    <h5 class="fw-bold mb-3">Admissions status</h5>
                    <div id="admissions-status-donut" style="min-height: 260px;"></div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-4">
                <div class="analytics-card p-4 h-100">
                    <h5 class="fw-bold mb-3">Popular public pages</h5>
                    @forelse($popularPages as $page)
                        <div class="d-flex justify-content-between gap-3 py-2 border-bottom">
                            <span class="text-truncate">{{ $page->path }}</span>
                            <strong>{{ $n($page->visits) }}</strong>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No visit data yet.</p>
                    @endforelse
                </div>
            </div>

            <div class="col-lg-4">
                <div class="analytics-card p-4 h-100">
                    <h5 class="fw-bold mb-3">Program demand</h5>
                    @forelse($programDemand as $row)
                        <div class="d-flex justify-content-between gap-3 py-2 border-bottom">
                            <span class="text-truncate">{{ $row->program?->name ?? 'Program #' . $row->program_id }}</span>
                            <strong>{{ $n($row->applications) }}</strong>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No admissions by program yet.</p>
                    @endforelse
                </div>
            </div>

            <div class="col-lg-4">
                <div class="analytics-card p-4 h-100">
                    <h5 class="fw-bold mb-3">Language usage</h5>
                    @forelse($localeBreakdown as $row)
                        <div class="d-flex justify-content-between gap-3 py-2 border-bottom">
                            <span>{{ strtoupper($row->locale ?: 'unknown') }}</span>
                            <strong>{{ $n($row->visits) }}</strong>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No language analytics yet.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="analytics-card p-4 mt-4">
            <h5 class="fw-bold mb-3">Recent admission applications</h5>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Register No</th>
                            <th>Applicant</th>
                            <th>Program</th>
                            <th>Faculty</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentApplications as $application)
                            <tr>
                                <td>{{ $application->register_no }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $application->name }}</div>
                                    <small class="text-muted">{{ $application->email }}</small>
                                </td>
                                <td>{{ $application->program?->name ?? '-' }}</td>
                                <td>{{ $application->faculty?->name ?? '-' }}</td>
                                <td><span class="badge bg-secondary rounded-pill">{{ ucfirst($application->status ?? 'pending') }}</span></td>
                                <td>{{ $application->created_at?->format('Y-m-d') }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center text-muted py-4">No recent applications.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<style>
    .analytics-card {
        background: #fff;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(2, 6, 23, .06);
    }
</style>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const lineEl = document.querySelector('#website-analytics-line');
        if (lineEl) {
            new ApexCharts(lineEl, {
                chart: { type: 'line', height: 320, toolbar: { show: false } },
                series: [
                    { name: 'Visits', data: @json($visitSeries) },
                    { name: 'Applications', data: @json($admissionSeries) }
                ],
                xaxis: { categories: @json($visitLabels), labels: { rotate: -45 } },
                stroke: { width: 3, curve: 'smooth' },
                colors: ['#0d6efd', '#20c997'],
                dataLabels: { enabled: false },
                grid: { borderColor: '#eef2f7' },
                legend: { position: 'top' }
            }).render();
        }

        const donutEl = document.querySelector('#admissions-status-donut');
        if (donutEl) {
            new ApexCharts(donutEl, {
                chart: { type: 'donut', height: 260 },
                series: [{{ (int) $admissionStats['pending'] }}, {{ (int) $admissionStats['approved'] }}, {{ (int) $admissionStats['rejected'] }}],
                labels: ['Pending', 'Approved', 'Rejected'],
                colors: ['#ffc107', '#198754', '#dc3545'],
                legend: { position: 'bottom' }
            }).render();
        }
    });
</script>
@endsection