@extends('layouts.teamlead')

@section('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>
        .kpi-card {
            border-radius: 12px;
            border: 1px solid rgba(148,163,184,.35);
            background: linear-gradient(135deg,#ffffff 0,#f8fafc 40%,#e5f0ff 100%);
            box-shadow: 0 6px 20px rgba(15,23,42,.08);
        }
        .kpi-label {
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #64748b;
            font-weight: 600;
        }
        .kpi-value {
            font-size: 1.3rem;
            font-weight: 700;
            color: #0f172a;
        }
        .kpi-sub {
            font-size: .78rem;
            color: #94a3b8;
        }
        .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%);
        }
        .chart-header-sub {
            font-size: .8rem;
            color: #6b7280;
        }
        .score-pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            background: #eff6ff;
            font-size: .78rem;
            font-weight: 600;
            color: #1d4ed8;
        }
        .score-pill span.value {
            font-size: .95rem;
            margin-left: 4px;
        }
        .score-progress {
            height: .45rem;
            border-radius: 999px;
            background: #e5e7eb;
            overflow: hidden;
        }
        .score-progress-bar {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg,#22c55e,#4ade80);
        }
        .score-progress-bar.bad {
            background: linear-gradient(90deg,#f97316,#ef4444);
        }
        .score-progress-bar.mid {
            background: linear-gradient(90deg,#eab308,#22c55e);
        }
    </style>
@endpush

@section('content')
    @php
        $shiftLabel = [
            'day' => 'денна',
            'evening' => 'вечірня',
            'night' => 'нічна',
        ][$shift] ?? $shift;

        $score = $shiftScore ?? null;
        $scoreClass = 'good';
        if (!is_null($score)) {
            if ($score < 60) {
                $scoreClass = 'bad';
            } elseif ($score < 90) {
                $scoreClass = 'mid';
            } else {
                $scoreClass = 'good';
            }
        }
    @endphp

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

    {{-- Блок норми + рейтинг --}}
    @if(isset($shiftTarget) && $shiftTarget > 0)
        <div class="alert alert-light border mb-3">
            <div class="d-flex flex-column flex-md-row align-items-md-center">
                <div class="mb-2 mb-md-0 mr-md-4">
                    <div class="small text-muted text-uppercase" style="letter-spacing:.08em;">
                        Норма для цієї зміни
                    </div>
                    <div>
                        <strong>{{ number_format($shiftTarget, 2) }} $ / день</strong>
                    </div>
                    @if(!is_null($shiftCompletion))
                        <div class="small text-muted">
                            Середнє за період: <strong>{{ number_format($avg, 2) }} $</strong>
                            ({{ number_format($shiftCompletion, 1) }}% від норми)
                        </div>
                    @endif
                </div>

                @if(!is_null($shiftScore))
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div class="score-pill">
                                Рейтинг оператора:
                                <span class="value">{{ $shiftScore }} / 100</span>
                            </div>
                            <div class="small text-muted d-none d-md-block">
                                100 = рівно норма або вище
                            </div>
                        </div>
                        <div class="score-progress">
                            @php
                                $width = max(0, min(100, $shiftScore));
                            @endphp
                            <div class="score-progress-bar {{ $scoreClass === 'bad' ? 'bad' : ($scoreClass === 'mid' ? 'mid' : '') }}"
                                 style="width: {{ $width }}%;"></div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    @else
        <div class="alert alert-warning mb-3">
            Для цього місяця норма по зміні не задана в адмін-панелі. Налаштуй її у розділі
            <strong>“Норми на місяць”</strong>, щоб бачити рейтинг оператора.
        </div>
    @endif

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

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

    {{-- Графік --}}
    <div class="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="chart-header-sub">
                    Синя лінія — баланс у поточному кабінеті.<br>
                    Сіра лінія — баланси цього оператора на інших кабінетах у той самий період.<br>
                    Розмір точки = кількість записів цього дня.
                </div>
            </div>
            <canvas id="chart" style="width: 100%; height: 100%;"></canvas>
        </div>
    </div>

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

    {{-- Таблиця підсумків --}}
    @if (!empty($rows) && 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 dataCurrent  = @json($dataCurrent); // наш кабінет
            const dataOld      = @json($dataOld);     // інші кабінети
            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: dataCurrent,
                            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)),
                            hidden: false, // показуємо завжди
                        },
                        {
                            label: 'Старі кабінети',
                            data: dataOld,
                            borderColor: '#9ca3af',
                            backgroundColor: 'rgba(156,163,175,0.18)',
                            tension: .3,
                            fill: true,
                            borderWidth: 2,
                            pointRadius,
                            pointHoverRadius: pointRadius.map(r => Math.min(10, r + 2)),
                            hidden: true, // ❗ по замовченню приховано
                        },
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: { display: true },
                        tooltip: {
                            callbacks: {
                                title(items){
                                    return items.length ? items[0].label : '';
                                },
                                label(ctx){
                                    const v = ctx.parsed.y ?? 0;
                                    const label = ctx.dataset.label || 'Сума';
                                    return `${label}: $${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) {
                                        const amt = (+it.amount).toFixed(2);
                                        const cab = it.cabinet_id ? ` (cab #${it.cabinet_id})` : '';
                                        lines.push(`• ${it.time} — $${amt}${cab}`);
                                    }
                                    return lines;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: { callback: v => v.toLocaleString('uk-UA') }
                        }
                    }
                }
            });
        })();
    </script>
@endpush