@extends('layouts.admin')

@section('title', 'Статистика кабінетів — графік')
@section('page_title', 'Статистика кабінетів — графік')

@push('head')
    <link rel="stylesheet" href="{{ asset('css/admin/cabinet-report.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
@endpush

@section('page_actions')
    <a href="{{ route('admin.cabinet-stats.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-list mr-1"></i> До списку
    </a>
@endsection

@section('content')

    @php
        $selectedCabinetName = $selectedCabinet?->name ?? '—';
        $selectedCabinetSlug = $selectedCabinet?->slug ?? '—';
        $hasData = count($labels) > 0;
    @endphp

    {{-- ШАПКА СТОРІНКИ / ОПИС --}}
    <div class="cabinet-report-header mb-3">
        <div class="cabinet-report-header-left">
            <h4 class="mb-1 cabinet-report-title">
                Графік статистики по кабінету
            </h4>
            <p class="cabinet-report-subtitle mb-0">
                Дивись динаміку New / Young / Old та витрати по обраному кабінету за заданий період.
            </p>
        </div>

        <div class="cabinet-report-chips">
            <div class="cabinet-report-chip">
                <span class="cabinet-report-chip-label">Slug:</span>
                <span class="cabinet-report-chip-value">{{ $selectedCabinetSlug }}</span>
            </div>
            <div class="cabinet-report-chip">
                <span class="cabinet-report-chip-label">Кабінет:</span>
                <span class="cabinet-report-chip-value">{{ $selectedCabinetName }}</span>
            </div>
        </div>
    </div>


    {{-- ФІЛЬТРИ --}}
    <div class="admin-card cabinet-report-filter-card p-3 mb-3">

        <form method="GET" class="cabinet-report-filter">

            <div class="cabinet-report-filter-group">
                <label class="mb-1">Кабінет</label>
                <select name="cabinet_id"
                        class="form-control"
                        onchange="this.form.submit()">
                    @foreach($cabinets as $c)
                        <option value="{{ $c->id }}" {{ (int)$cabinetId === (int)$c->id ? 'selected' : '' }}>
                            {{ $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="cabinet-report-filter-group">
                <label class="mb-1">З дати</label>
                <input type="date"
                       name="from"
                       value="{{ $from }}"
                       class="form-control">
            </div>

            <div class="cabinet-report-filter-group">
                <label class="mb-1">По дату</label>
                <input type="date"
                       name="to"
                       value="{{ $to }}"
                       class="form-control">
            </div>

            <div class="cabinet-report-filter-actions">
                <button class="btn btn-outline-secondary">
                    Фільтрувати
                </button>

                <a href="{{ route('admin.cabinet-stats.report') }}"
                   class="btn btn-link btn-sm cabinet-report-reset">
                    Скинути
                </a>
            </div>

        </form>

        <div class="cabinet-report-period mt-2">
            <div class="cabinet-report-chip">
                <span class="cabinet-report-chip-label">Період:</span>
                <span class="cabinet-report-chip-value">
                    {{ $from ?: '—' }} — {{ $to ?: '—' }}
                </span>
            </div>

            <div class="cabinet-report-chip">
                <span class="cabinet-report-chip-label">Кількість точок на графіку:</span>
                <span class="cabinet-report-chip-value">{{ count($labels) }}</span>
            </div>
        </div>
    </div>


    {{-- ГРАФІК --}}
    <div class="admin-card cabinet-report-chart-card mb-3">
        <div class="cabinet-report-chart-header px-3 pt-3">
            <div class="cabinet-report-chart-title">
                Динаміка по днях
            </div>
            <div class="cabinet-report-chart-hint">
                Проведи мишкою по графіку, щоб побачити значення за кожен день.
            </div>
        </div>

        <div class="cabinet-report-chart-body">
            <canvas id="statsChart"></canvas>
        </div>

        @unless($hasData)
            <div class="cabinet-report-empty text-center text-muted py-3">
                Немає даних для відображення графіка за обраний період.
            </div>
        @endunless
    </div>


    {{-- ТАБЛИЦЯ ПОКАЗНИКІВ --}}
    @if (count($rows))
        <div class="admin-card cabinet-report-table-card mt-3">

            <div class="cabinet-report-table-header d-flex justify-content-between align-items-center px-3 py-2">
                <div class="cabinet-report-table-title">
                    Показники за вибраний період
                </div>
                <div class="cabinet-report-table-hint">
                    Внизу показано середні значення по періоду.
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive cabinet-report-table-wrapper">
                    <table class="table table-sm mb-0 cabinet-report-table">
                        <thead>
                        <tr>
                            <th>Дата</th>
                            <th class="text-right">New</th>
                            <th class="text-right">Young</th>
                            <th class="text-right">Old</th>
                            <th class="text-right">Spend Young</th>
                            <th class="text-right">Spend Old</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($rows as $r)
                            <tr>
                                <td>{{ $r->period_start->format('Y-m-d') }}</td>
                                <td class="text-right">{{ number_format((float)$r->new_connection,   2) }}</td>
                                <td class="text-right">{{ number_format((float)$r->young_connection, 2) }}</td>
                                <td class="text-right">{{ number_format((float)$r->old_connection,   2) }}</td>
                                <td class="text-right">{{ number_format((float)$r->spend_young,      2) }}</td>
                                <td class="text-right">{{ number_format((float)$r->spend_old,        2) }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                        <tfoot class="font-weight-bold">
                        <tr>
                            <td>Середнє</td>
                            <td class="text-right">{{ number_format($avgNew, 2) }}</td>
                            <td class="text-right">{{ number_format($avgYoung, 2) }}</td>
                            <td class="text-right">{{ number_format($avgOld, 2) }}</td>
                            <td class="text-right">{{ number_format($avgSpendYoung, 2) }}</td>
                            <td class="text-right">{{ number_format($avgSpendOld, 2) }}</td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

        </div>
    @endif
@endsection

@push('body')
    <script>
        (() => {
            const labels          = @json($labels);
            const newData         = @json($newData);
            const youngData       = @json($youngData);
            const oldData         = @json($oldData);
            const spendYoungData  = @json($spendYoungData);
            const spendOldData    = @json($spendOldData);

            if (!labels.length) return;

            const ctx = document.getElementById('statsChart').getContext('2d');

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels,
                    datasets: [
                        {
                            label: 'New',
                            data: newData,
                            borderColor: '#0d6efd',
                            backgroundColor: 'rgba(13,110,253,0.08)',
                            tension: 0.25,
                            fill: false,
                            borderWidth: 2,
                            pointRadius: 3,
                            yAxisID: 'y',
                        },
                        {
                            label: 'Young',
                            data: youngData,
                            borderColor: '#20c997',
                            backgroundColor: 'rgba(32,201,151,0.08)',
                            tension: 0.25,
                            fill: false,
                            borderWidth: 2,
                            pointRadius: 3,
                            yAxisID: 'y',
                        },
                        {
                            label: 'Old',
                            data: oldData,
                            borderColor: '#6f42c1',
                            backgroundColor: 'rgba(111,66,193,0.08)',
                            tension: 0.25,
                            fill: false,
                            borderWidth: 2,
                            pointRadius: 3,
                            yAxisID: 'y',
                        },
                        {
                            label: 'Spend Young',
                            data: spendYoungData,
                            borderColor: '#fd7e14',
                            backgroundColor: 'rgba(253,126,20,0.10)',
                            tension: 0.25,
                            fill: true,
                            borderWidth: 2,
                            pointRadius: 3,
                            yAxisID: 'y1',
                        },
                        {
                            label: 'Spend Old',
                            data: spendOldData,
                            borderColor: '#dc3545',
                            backgroundColor: 'rgba(220,53,69,0.10)',
                            tension: 0.25,
                            fill: true,
                            borderWidth: 2,
                            pointRadius: 3,
                            yAxisID: 'y1',
                        },
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: { position: 'top' },
                        tooltip: {
                            callbacks: {
                                title(items) {
                                    return items?.[0]?.label ?? '';
                                },
                                label(ctx) {
                                    const val = ctx.parsed.y ?? 0;
                                    const name = ctx.dataset.label || '';
                                    return `${name}: ${(+val).toFixed(2)}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            ticks: { maxRotation: 0, autoSkipPadding: 10 },
                        },
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: 'Connections' },
                            ticks: { callback: v => v.toLocaleString('uk-UA') }
                        },
                        y1: {
                            beginAtZero: true,
                            position: 'right',
                            title: { display: true, text: 'Spend' },
                            grid: { drawOnChartArea: false },
                            ticks: { callback: v => Number(v).toLocaleString('uk-UA') }
                        }
                    }
                }
            });
        })();
    </script>
@endpush