@extends('layouts.admin')

@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;
        }

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

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

        $totalAllCab = 0;
        $maxCabVal   = 0;
        foreach ($cabinets as $c) {
            $v = (float)($cabinetTotals[$c->id] ?? 0);
            $totalAllCab += $v;
            if ($v > $maxCabVal) $maxCabVal = $v;
        }
    @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>
        </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($cabinetId)
                @php
                    $cabSelected = $cabinets->firstWhere('id', $cabinetId);
                    $opNameSel = null;
                    if ($cabSelected) {
                        $opNameSel = match($shift) {
                            'day'     => $cabSelected->day_operator,
                            'evening' => $cabSelected->evening_operator,
                            'night'   => $cabSelected->night_operator,
                            default   => null,
                        };
                    }
                @endphp
                @if(isset($cabSelected))
                    <span class="badge badge-shift badge-info mr-2 mb-1">
                        Кабінет: {{ $cabSelected->name }}@if($opNameSel) ({{ $opNameSel }}) @endif
                    </span>
                @endif
            @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('admin.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 . ($opName ? ' ('.$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('admin.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">Сумарний обʼєм по вибраній зміні</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 }})
                    </div>
                    <div class="chart-header-sub">
                        Показує суму за кожен день вибраного періоду.
                    </div>
                </div>
            </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>Розподіл по кабінетах (зміна: {{ $shiftLabel }})</strong>
                <div class="small text-muted">
                    Хто дає найбільший вклад у суму за вибраний період.
                </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>
                @foreach($cabinets 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($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>
                @endforeach
                </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);

            if (!labels.length) return;

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

            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,
                    }]
                },
                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 `Разом за зміну: $${v.toFixed(2)}`;
                                }
                            }
                        }
                    }
                }
            });
        })();
    </script>
@endpush