@extends('layouts.manager')

@section('title','Графік по зміні')
@section('page_title','Графік по зміні')

@push('head')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

    <style>
        .filters-card {
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: radial-gradient(circle at top left, #e0f2fe 0, #ffffff 42%, #f8fafc 100%);
        }

        .filters-card label {
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 600;
            color: #64748b;
        }

        .kpi-card {
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 40%, #e5f0ff 100%);
            box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
        }

        .kpi-label {
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #64748b;
            font-weight: 600;
        }

        .kpi-value {
            font-size: 1.4rem;
            font-weight: 700;
            color: #0f172a;
        }

        .kpi-sub {
            font-size: .78rem;
            color: #94a3b8;
        }

        .chart-wrapper {
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: radial-gradient(circle at top, #eff6ff 0, #ffffff 45%, #f9fafb 100%);
            box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
        }

        .chart-header-title {
            font-weight: 600;
            color: #0f172a;
        }

        .chart-header-sub {
            font-size: .8rem;
            color: #6b7280;
        }

        .table-cabinets thead th {
            font-size: .78rem;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .table-cabinets tbody td {
            vertical-align: middle;
        }

        .badge-shift {
            text-transform: uppercase;
            font-size: .7rem;
            letter-spacing: .09em;
        }

        .cabinet-name {
            font-weight: 600;
            color: #0f172a;
        }

        .cabinet-operator {
            font-size: .8rem;
            color: #6b7280;
        }

        .row-gap-16 > [class^="col-"],
        .row-gap-16 > [class*=" col-"] {
            margin-bottom: 16px;
        }

        .progress-cabinet {
            height: .35rem;
            border-radius: 999px;
        }

        .progress-cabinet .progress-bar {
            border-radius: 999px;
        }

        .avg-toggle {
            font-size: .85rem;
            color: #475569;
            user-select: none;
        }

        @media (max-width: 767.98px) {
            .filters-card {
                padding: 1rem !important;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $daysCount = count($labels);

        $shiftLabel = [
            'day' => 'денна',
            'evening' => 'вечірня',
            'night' => 'нічна',
        ][$shift] ?? $shift;

        // режим: tg (коли обраний cabinet_id і ми показуємо по TG по всій базі)
        $mode = $mode ?? (($cabinetId ?? null) ? 'tg' : 'shift');

        // список кабінетів для таблиці:
        // ✅ у TG-режимі показуємо ті кабінети, де реально є записи (щоб не було плутанини)
        $tableCabinets = $cabinets;
        if ($mode === 'tg') {
            $ids = collect($cabinetTotals)->keys()->map(fn($id) => (int)$id)->all();
            $tableCabinets = $cabinets->filter(fn($c) => in_array((int)$c->id, $ids, true));
        }

        // totals для таблиці
        $totalAllCab = 0;
        $maxCabVal   = 0;
        foreach ($tableCabinets as $c) {
            $v = (float)($cabinetTotals[$c->id] ?? 0);
            $totalAllCab += $v;
            if ($v > $maxCabVal) $maxCabVal = $v;
        }

        // бейдж для "джерела TG" (кабінет, з якого ми взяли TG)
        $badgeCabName = null;
        $badgeOpName  = null;

        if (($cabinetId ?? null) && isset($selectedCabinet) && $selectedCabinet) {
            $badgeCabName = $selectedCabinet->name;
            $badgeOpName  = $selectedOperatorName ?: null;
        }

        // avgLine приходит из контроллера, но на всякий случай:
        $avgLine = $avgLine ?? [];
    @endphp

    {{-- Верхний блок: контекст --}}
    <div class="d-flex flex-column flex-md-row align-items-md-center mb-3">
        <div>
            <h4 class="mb-1">
                Графік зміни —
                <span class="text-primary text-uppercase">{{ $shiftLabel }}</span>
            </h4>

            <div class="text-muted small">
                Період:
                @if($from || $to)
                    <strong>{{ $from ?: '—' }}</strong> &nbsp;–&nbsp;
                    <strong>{{ $to ?: '—' }}</strong>
                @else
                    <span>не вибрано (усі дні)</span>
                @endif

                @if($daysCount)
                    · Днів у вибірці: <strong>{{ $daysCount }}</strong>
                @endif
            </div>

            @if($mode === 'tg' && !empty($selectedTgNorm))
                <div class="text-muted small mt-1">
                    <strong>Режим:</strong> по TG оператора (незалежно від кабінета/зміни в історії) ·
                    <strong>Фільтр TG:</strong> {{ '@'.$selectedTgNorm }}
                </div>
                <div class="text-muted small mt-1">
                    <strong>Увага:</strong> вибір “Кабінет + оператор” використовується лише щоб визначити TG.
                    Далі графік/таблиця будуються по всіх записах цього TG у базі.
                </div>
            @endif
        </div>

        <div class="ml-md-auto mt-2 mt-md-0 d-flex flex-wrap">
            <span class="badge badge-shift badge-primary mr-2 mb-1">
                Зміна: {{ $shiftLabel }}
            </span>

            @if($mode === 'tg' && ($cabinetId ?? null))
                <span class="badge badge-shift badge-info mr-2 mb-1">
                    TG взято з кабінета: {{ $badgeCabName ?: ('#'.$cabinetId) }}
                    @if($badgeOpName)
                        ({{ $badgeOpName }})
                    @endif
                </span>
                <span class="badge badge-shift badge-secondary mr-2 mb-1">
                    Дані: всі кабінети (де є записи TG)
                </span>
            @else
                <span class="badge badge-shift badge-secondary mr-2 mb-1">
                    Кабінети: всі
                </span>
            @endif
        </div>
    </div>

    {{-- Фільтри --}}
    <div class="admin-card filters-card p-3 mb-3">
        <form method="GET" action="{{ route('manager.reports.shift') }}" id="shiftFilterForm">
            <div class="form-row row-gap-16 align-items-end">
                <div class="col-md-3">
                    <label>Зміна</label>
                    <select name="shift" class="form-control" id="shiftSelect">
                        <option value="day" {{ $shift === 'day' ? 'selected' : '' }}>Денна</option>
                        <option value="evening" {{ $shift === 'evening' ? 'selected' : '' }}>Вечірня</option>
                        <option value="night" {{ $shift === 'night' ? 'selected' : '' }}>Нічна</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label>Кабінет + оператор</label>
                    <select name="cabinet_id" class="form-control" id="cabinetSelect">
                        <option value="">— всі кабінети —</option>

                        @foreach($cabinets as $c)
                            @php
                                $opName = match($shift) {
                                    'day'     => $c->day_operator,
                                    'evening' => $c->evening_operator,
                                    'night'   => $c->night_operator,
                                    default   => null,
                                };

                                $label = $c->name;
                                if ($opName) $label .= ' ('.$opName.')';
                            @endphp

                            <option value="{{ $c->id }}" {{ (string)$cabinetId === (string)$c->id ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label>З дати</label>
                    <input type="date" name="from" value="{{ $from }}" class="form-control">
                </div>

                <div class="col-md-2">
                    <label>По дату</label>
                    <input type="date" name="to" value="{{ $to }}" class="form-control">
                </div>

                <div class="col-md-1">
                    <div class="d-flex">
                        <button class="btn btn-secondary btn-block mr-1">
                            <i class="fas fa-filter mr-1"></i>Ок
                        </button>
                        <a href="{{ route('manager.reports.shift') }}"
                           class="btn btn-light"
                           title="Скинути фільтри">
                            <i class="fas fa-undo"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- KPI картки --}}
    @if($daysCount)
        <div class="row row-gap-16 mb-3">
            <div class="col-md-3 col-sm-6">
                <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">
                        @if($mode === 'tg' && !empty($selectedTgNorm))
                            Сума по TG (незалежно від кабінета/зміни в історії)
                        @else
                            Сумарний обʼєм по вибраній зміні
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6">
                <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">
                <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">
                <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="admin-card chart-wrapper mb-3">
        <div class="card-body" style="height:420px">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                    <div class="chart-header-title">
                        Динаміка по зміні ({{ $shiftLabel }})
                        @if($mode === 'tg' && !empty($selectedTgNorm))
                            — <span class="text-muted">TG {{ '@'.$selectedTgNorm }}</span>
                        @endif
                    </div>
                    <div class="chart-header-sub">
                        Показує суму за кожен день вибраного періоду.
                        @if($mode === 'tg' && !empty($selectedTgNorm))
                            (пересадки між кабінетами/змінами не дадуть 0 — рахуємо по TG у всій базі)
                        @endif
                        · <span class="text-muted">Друга лінія — “Середній оператор (по зміні)”</span>
                    </div>
                </div>

                {{-- ✅ Перемикач лінії середнього --}}
                <label class="avg-toggle mb-0">
                    <input type="checkbox" id="avgToggle" checked>
                    Показати середнє
                </label>
            </div>

            <canvas id="shiftChart" style="width:100%;height:100%"></canvas>
        </div>
    </div>

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

    {{-- Таблиця --}}
    <div class="admin-card mt-4 p-0">
        <div class="p-3 border-bottom d-flex align-items-center">
            <div>
                <strong>
                    @if($mode === 'tg' && !empty($selectedTgNorm))
                        Розподіл по кабінетах для TG {{ '@'.$selectedTgNorm }}
                    @else
                        Розподіл по кабінетах (зміна: {{ $shiftLabel }})
                    @endif
                </strong>
                <div class="small text-muted">
                    @if($mode === 'tg' && !empty($selectedTgNorm))
                        Показує, у яких кабінетах фактично є записи цього TG за період.
                    @else
                        Хто дає найбільший вклад у суму за вибраний період.
                    @endif
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 table-cabinets">
                <thead class="thead-light">
                <tr>
                    <th>Кабінет / оператор</th>
                    <th style="width:220px;">Частка від загальної суми</th>
                    <th class="text-right" style="width:160px;">Сума за період, $</th>
                </tr>
                </thead>
                <tbody>
                @forelse($tableCabinets as $c)
                    @php
                        $val = (float)($cabinetTotals[$c->id] ?? 0);

                        $opName = match($shift) {
                            'day'     => $c->day_operator,
                            'evening' => $c->evening_operator,
                            'night'   => $c->night_operator,
                            default   => null,
                        };

                        $isTop = $val > 0 && $val === $maxCabVal;
                        $percent = $totalAllCab > 0 ? ($val / $totalAllCab * 100) : 0;
                    @endphp

                    <tr @if($isTop) style="background:#ecfdf5;" @endif>
                        <td>
                            <div class="cabinet-name">
                                {{ $c->name }}
                                @if($isTop)
                                    <span class="badge badge-success ml-1">TOP</span>
                                @endif
                            </div>

                            @if($mode === 'tg' && !empty($selectedTgNorm))
                                <div class="cabinet-operator">
                                    Оператор:
                                    <strong>{{ $selectedOperatorName ?: '—' }}</strong>
                                    —
                                    <span class="text-muted">{{ '@'.$selectedTgNorm }}</span>
                                </div>
                            @elseif($opName)
                                <div class="cabinet-operator">
                                    Оператор: {{ $opName }}
                                </div>
                            @endif
                        </td>

                        <td>
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="small text-muted">Вклад:</span>
                                <span class="small font-weight-semibold">
                                    {{ number_format($percent, 1, '.', ' ') }}%
                                </span>
                            </div>
                            <div class="progress progress-cabinet">
                                <div class="progress-bar bg-success"
                                     role="progressbar"
                                     style="width: {{ $percent }}%;"
                                     aria-valuenow="{{ $percent }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100">
                                </div>
                            </div>
                        </td>

                        <td class="text-right font-weight-semibold">
                            {{ number_format($val, 2, '.', ' ') }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="text-center text-muted py-3">
                            Немає записів для вибраних фільтрів.
                        </td>
                    </tr>
                @endforelse
                </tbody>

                <tfoot class="font-weight-bold">
                <tr>
                    <td>Разом</td>
                    <td class="text-right">
                        {{ $totalAllCab > 0 ? '100%' : '0%' }}
                    </td>
                    <td class="text-right">
                        {{ number_format($totalAllCab, 2, '.', ' ') }}
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
@endsection

@push('body')
    <script>
        (function () {
            const form = document.getElementById('shiftFilterForm');
            if (!form) return;

            // авто-сабміт при зміні зміни / кабінету
            ['shiftSelect', 'cabinetSelect'].forEach(id => {
                const el = document.getElementById(id);
                if (!el) return;
                el.addEventListener('change', () => form.submit());
            });

            const labels = @json($labels);
            const data = @json($data);
            const avgData = @json($avgLine ?? []);

            if (!labels.length) return;

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

            const chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels,
                    datasets: [
                        {
                            label: 'Сума за день ($)',
                            data,
                            borderColor: '#2563eb',
                            backgroundColor: 'rgba(37,99,235,0.14)',
                            tension: 0.32,
                            fill: true,
                            borderWidth: 2,
                            pointRadius: 3.5,
                            pointHoverRadius: 6,
                        },
                        {
                            label: 'Середній оператор (по зміні)',
                            data: avgData,
                            borderColor: '#0f172a',
                            backgroundColor: 'rgba(15,23,42,0.06)',
                            tension: 0.25,
                            fill: false,
                            borderWidth: 2,
                            pointRadius: 0,
                            pointHoverRadius: 0,
                            borderDash: [6, 6],
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {mode: 'index', intersect: false},
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: v => v.toLocaleString('uk-UA')
                            }
                        }
                    },
                    plugins: {
                        legend: {display: false},
                        tooltip: {
                            callbacks: {
                                title(items) {
                                    return items.length ? items[0].label : ''
                                },
                                label(ctx) {
                                    const v = ctx.parsed.y ?? 0;
                                    return `${ctx.dataset.label}: $${v.toFixed(2)}`;
                                }
                            }
                        }
                    }
                }
            });

            // ✅ toggle avg line
            const toggle = document.getElementById('avgToggle');
            if (toggle) {
                toggle.addEventListener('change', () => {
                    const visible = !!toggle.checked;
                    // dataset index 1 = avg line
                    chart.setDatasetVisibility(1, visible);
                    chart.update();
                });
            }
        })();
    </script>
@endpush