@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="m-0">Dashboard</h1>
        <small class="text-muted">Pilot 2 — Field Visit Data</small>
    </div>
@endsection

@section('content')

{{-- ── Stat cards ─────────────────────────────────────────────────────────── --}}
<div class="row">
    <div class="col-lg col-md-4 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-clipboard-list"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total Submissions</span>
                <span class="info-box-number">{{ number_format($stats['total_submissions']) }}</span>
            </div>
        </div>
    </div>
    <div class="col-lg col-md-4 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-calendar-day"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Today</span>
                <span class="info-box-number">{{ number_format($stats['today_submissions']) }}</span>
            </div>
        </div>
    </div>
    <div class="col-lg col-md-4 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-store"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total Shops</span>
                <span class="info-box-number">{{ number_format($stats['total_shops']) }}</span>
                <span class="progress-description text-sm text-warning">
                    {{ $stats['field_added_shops'] }} added from field
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg col-md-4 col-sm-6 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-primary elevation-1"><i class="fas fa-wpforms"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Active Forms</span>
                <span class="info-box-number">{{ $stats['active_forms'] }}</span>
            </div>
        </div>
    </div>
</div>

{{-- ── Charts row ──────────────────────────────────────────────────────────── --}}
<div class="row">

    {{-- Submissions per day (line) --}}
    <div class="col-lg-8 col-12">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-line mr-1"></i> Submissions — Last 30 Days</h3>
            </div>
            <div class="card-body">
                <canvas id="chartPerDay" height="110"></canvas>
            </div>
        </div>
    </div>

    {{-- Submissions by form (doughnut) --}}
    <div class="col-lg-4 col-12">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-pie mr-1"></i> By Form</h3>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <canvas id="chartByForm" height="180" style="max-height:230px;"></canvas>
            </div>
        </div>
    </div>

</div>

<div class="row">

    {{-- Submissions by enumerator (bar) --}}
    <div class="col-lg-5 col-12">
        <div class="card card-outline card-success">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-users mr-1"></i> By Enumerator</h3>
            </div>
            <div class="card-body">
                <canvas id="chartByEnumerator" height="160"></canvas>
            </div>
        </div>
    </div>

    {{-- Recent submissions --}}
    <div class="col-lg-7 col-12">
        <div class="card card-outline card-info">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-history mr-1"></i> Recent Submissions</h3>
                <div class="card-tools">
                    <a href="{{ url('admin/submissions') }}" class="btn btn-sm btn-default">View all</a>
                </div>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>#</th>
                            <th>Form</th>
                            <th>By</th>
                            <th>Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recent as $sub)
                        @php
                            $formColor = $forms->firstWhere('slug', $sub->form_slug)?->color ?? 'secondary';
                            $badgeMap = ['indigo' => 'primary', 'violet' => 'info', 'emerald' => 'success', 'amber' => 'warning'];
                            $badge = $badgeMap[$formColor] ?? 'secondary';
                            $formTitle = $forms->firstWhere('slug', $sub->form_slug)?->title ?? $sub->form_slug;
                            $shortTitle = \Illuminate\Support\Str::before($formTitle, ' (');
                        @endphp
                        <tr>
                            <td>{{ $sub->id }}</td>
                            <td><span class="badge badge-{{ $badge }}">{{ $shortTitle }}</span></td>
                            <td>{{ $sub->submitted_by ?: '—' }}</td>
                            <td class="text-nowrap">{{ $sub->created_at->format('M d, H:i') }}</td>
                            <td>
                                <a href="{{ url('admin/submissions/' . $sub->id) }}" class="btn btn-xs btn-default">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-muted py-3">No submissions yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
(function () {
    'use strict';

    // ── Submissions per day ────────────────────────────────────────────────────
    const dayLabels = {!! json_encode($days->keys()) !!};
    const dayData   = {!! json_encode($days->values()) !!};

    new Chart(document.getElementById('chartPerDay'), {
        type: 'line',
        data: {
            labels: dayLabels,
            datasets: [{
                label: 'Submissions',
                data: dayData,
                fill: true,
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59,130,246,0.1)',
                tension: 0.3,
                pointRadius: 3,
            }]
        },
        options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
    });

    // ── By form (doughnut) ─────────────────────────────────────────────────────
    new Chart(document.getElementById('chartByForm'), {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($doughnutLabels) !!},
            datasets: [{
                data: {!! json_encode($doughnutData) !!},
                backgroundColor: {!! json_encode($doughnutColors) !!},
                borderWidth: 2,
            }]
        },
        options: { plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } }, cutout: '60%' }
    });

    // ── By enumerator (bar) ────────────────────────────────────────────────────
    const enumLabels = {!! json_encode($byEnumerator->keys()) !!};
    const enumData   = {!! json_encode($byEnumerator->values()) !!};

    new Chart(document.getElementById('chartByEnumerator'), {
        type: 'bar',
        data: {
            labels: enumLabels,
            datasets: [{
                label: 'Submissions',
                data: enumData,
                backgroundColor: '#10b981',
                borderRadius: 4,
            }]
        },
        options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
    });
})();
</script>
@endsection