@extends('layouts.admin')

@section('title', 'Графік: ' . $operatorName . ' (' . strtoupper($shift) . ')')
@section('page_title', 'Графік: ' . $operatorName . ' (' . strtoupper($shift) . ')')

@push('head')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <style>
        .ar-kpi-card{
            border-radius:12px;
            border:1px solid rgba(148,163,184,.35);
            background:linear-gradient(135deg,#ffffff 0,#f8fafc 35%,#e5f0ff 100%);
            box-shadow:0 6px 20px rgba(15,23,42,.08);
            height:100%;
        }
        .ar-kpi-title{
            font-size:.8rem;
            text-transform:uppercase;
            letter-spacing:.08em;
            color:#64748b;
            font-weight:600;
        }
        .ar-kpi-value{
            font-size:1.3rem;
            font-weight:700;
            color:#0f172a;
        }
        .ar-kpi-sub{
            font-size:.78rem;
            color:#94a3b8;
        }
        .ar-chart-wrapper{
            border-radius:14px;
            border:1px solid rgba(148,163,184,.35);
            background:radial-gradient(circle at top,#eff6ff 0,#ffffff 45%,#f9fafb 100%);
        }
        .ar-chart-sub{
            font-size:.8rem;
            color:#6b7280;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-3">
        <div>
            <h5 class="mb-1">
                Динаміка балансу: <strong>{{ $operatorName }}</strong>
            </h5>
            <div class="text-muted small">
                {{ $cabinet->slug }} • {{ $cabinet->name }} • зміна: <strong>{{ strtoupper($shift) }}</strong>
            </div>
        </div>
        <div class="mt-2 mt-md-0">
            <a class="btn btn-outline-info btn-sm"
               href="{{ route('admin.reports.weekly', [
                    'cabinet_id'=>$cabinet->id,
                    'shift'=>$shift,
                    'from'=>$dateFrom,
                    'to'=>$dateTo
                ]) }}">
                <i class="fa-solid fa-calendar-week mr-1"></i> Тижневий графік
            </a>
        </div>
    </div>

    {{-- Фільтр дат --}}
    <div class="card mb-3">
        <div class="card-body py-3">
            <form method="GET" class="mb-0" action="{{ route('admin.reports.show') }}">
                <input type="hidden" name="cabinet_id" value="{{ $cabinet->id }}">
                <input type="hidden" name="shift" value="{{ $shift }}">
                <div class="form-row align-items-end">
                    <div class="col-md-3 mb-2">
                        <label>З дати</label>
                        <input type="date" name="from" value="{{ $dateFrom }}" class="form-control">
                    </div>
                    <div class="col-md-3 mb-2">
                        <label>По дату</label>
                        <input type="date" name="to" value="{{ $dateTo }}" class="form-control">
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-secondary btn-block">
                            <i class="fa-solid fa-filter mr-1"></i>Фільтрувати
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ route('admin.reports.index', ['cabinet_id'=>$cabinet->id]) }}"
                           class="btn btn-light btn-block">
                            <i class="fa-solid fa-arrow-left mr-1"></i>Змінити кабінет / зміну
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- KPI картки --}}
    @if(count($labels))
        <div class="row mb-3">
            <div class="col-md-3 col-sm-6 mb-2">
                <div class="ar-kpi-card p-3 h-100">
                    <div class="ar-kpi-title mb-1">Разом</div>
                    <div class="ar-kpi-value mb-1">{{ number_format($sum, 2) }} $</div>
                    <div class="ar-kpi-sub">Сума за обраний період</div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-2">
                <div class="ar-kpi-card p-3 h-100">
                    <div class="ar-kpi-title mb-1">Середнє за день</div>
                    <div class="ar-kpi-value mb-1">{{ number_format($avg, 2) }} $</div>
                    <div class="ar-kpi-sub">Середній результат одного дня</div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-2">
                <div class="ar-kpi-card p-3 h-100">
                    <div class="ar-kpi-title mb-1">Максимум</div>
                    <div class="ar-kpi-value mb-1">{{ number_format($max, 2) }} $</div>
                    <div class="ar-kpi-sub">Найкращий день</div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 mb-2">
                <div class="ar-kpi-card p-3 h-100">
                    <div class="ar-kpi-title mb-1">Мінімум</div>
                    <div class="ar-kpi-value mb-1">{{ number_format($min, 2) }} $</div>
                    <div class="ar-kpi-sub">Найслабший день</div>
                </div>
            </div>
        </div>
    @endif

    {{-- Графік --}}
    <div class="ar-chart-wrapper mb-3">
        <div class="card-body" style="height:420px">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="ar-chart-sub">
                    Лінія показує суму за кожен день. Розмір точки = кількість записів цього дня.
                </div>
            </div>
            <canvas id="chart" style="width:100%;height:100%"></canvas>
        </div>
    </div>

    @if (!count($labels))
        <div class="alert alert-info mt-3">Немає даних для відображення графіка.</div>
    @endif

    {{-- Таблиця підсумків --}}
    @if (count($rows))
        <div class="card mt-3">
            <div class="card-header"><strong>Підсумки по днях</strong></div>
            <div class="card-body p-0">
                <table class="table table-sm table-bordered mb-0">
                    <thead class="thead-light">
                    <tr><th>Дата</th><th>Сума ($)</th></tr>
                    </thead>
                    <tbody>
                    @foreach($rows as $r)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($r->work_date)->format('Y-m-d') }}</td>
                            <td>{{ number_format($r->total, 2) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                    <tfoot class="font-weight-bold">
                    <tr><td>Разом</td><td>{{ number_format($sum, 2) }}</td></tr>
                    <tr><td>Середнє</td><td>{{ number_format($avg, 2) }}</td></tr>
                    <tr><td>Макс.</td><td>{{ number_format($max, 2) }}</td></tr>
                    <tr><td>Мін.</td><td>{{ number_format($min, 2) }}</td></tr>
                    </tfoot>
                </table>
            </div>
        </div>
    @endif
@endsection

@push('body')
    <script>
        (() => {
            const labels       = @json($labels);
            const data         = @json($data);
            const entriesByDay = @json($entriesByDay ?? []);
            const countsByDay  = @json($countsByDay ?? []);

            if (!labels.length) return;

            const pointRadius = labels.map(d => {
                const n = countsByDay[d] ?? 0;
                return Math.min(8, 3 + Math.max(0, n - 1));
            });

            const ctx = document.getElementById('chart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels,
                    datasets: [{
                        label: 'Баланс за день',
                        data,
                        borderColor: '#2563eb',
                        backgroundColor: 'rgba(37,99,235,0.14)',
                        tension: .3,
                        fill: true,
                        borderWidth: 2,
                        pointRadius,
                        pointHoverRadius: pointRadius.map(r => Math.min(10, r + 2)),
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title(items){ return items.length ? items[0].label : '' },
                                label(ctx){
                                    const v = ctx.parsed.y ?? 0;
                                    return `Разом за день: $${v.toFixed(2)}`;
                                },
                                afterBody(ctxItems){
                                    if (!ctxItems.length) return;
                                    const day  = ctxItems[0].label;
                                    const list = entriesByDay[day] || [];
                                    if (!list.length) return;
                                    const lines = ['Записи:'];
                                    for (const it of list) {
                                        lines.push(`• ${it.time} — $${(+it.amount).toFixed(2)}`);
                                    }
                                    return lines;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: { callback: v => v.toLocaleString('uk-UA') }
                        }
                    }
                }
            });
        })();
    </script>
@endpush