@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%,#dcfce7 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,#dcfce7 0,#ffffff 45%,#f9fafb 100%);
        }
    </style>
@endpush

@section('content')
    @php
        $shiftLabel = [
            'day' => 'денна',
            'evening' => 'вечірня',
            'night' => 'нічна',
        ][$shift] ?? $shift;
    @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.operatorChart', ['cabinet' => $cabinet->id, 'shift' => $shift]) }}"
               class="btn btn-outline-info btn-sm">
                <i class="fas fa-calendar-day mr-1"></i> Щоденний графік
            </a>
        </div>
    </div>

    {{-- Фільтр дат --}}
    <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.operatorWeekly', ['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;">
            <canvas id="weeklyChart" 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)
                        @php
                            $start = \Carbon\Carbon::parse($r->week_start);
                            $end   = $start->copy()->addDays(6);
                        @endphp
                        <tr>
                            <td>{{ $start->format('Y-m-d') }} — {{ $end->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);

            if (!labels.length) return;

            const prettyLabels = labels.map(d => {
                const dt = new Date(d + 'T00:00:00');
                const y  = dt.getFullYear();
                const m  = String(dt.getMonth()+1).padStart(2,'0');
                const dd = String(dt.getDate()).padStart(2,'0');
                return `${y}-${m}-${dd}`;
            });

            const ctx = document.getElementById('weeklyChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: prettyLabels,
                    datasets: [{
                        label: 'Сума за тиждень',
                        data,
                        borderColor: '#22c55e',
                        backgroundColor: 'rgba(34,197,94,0.18)',
                        tension: .3,
                        fill: true,
                        borderWidth: 2,
                        pointRadius: 3
                    }]
                },
                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: {
                                label: (ctx) => ` Разом: $${(ctx.parsed.y ?? 0).toFixed(2)}`
                            }
                        }
                    }
                }
            });
        })();
    </script>
@endpush