@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%,#dcfce7 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,#dcfce7 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>
            <h4 class="mb-1">
                Тижневий звіт: <strong>{{ $operatorName }}</strong>
            </h4>
            <div class="text-muted small">
                {{ $cabinet->slug }} • {{ $cabinet->name }} • зміна: <strong>{{ strtoupper($shift) }}</strong>
            </div>
        </div>
        <div class="mt-2 mt-md-0">
            <a href="{{ route('admin.reports.show', [
                    'cabinet_id' => $cabinet->id,
                    'shift'      => $shift,
                    'from'       => $dateFrom,
                    'to'         => $dateTo
                ]) }}"
               class="btn btn-outline-info btn-sm">
                <i class="fa-solid 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" action="{{ route('admin.reports.weekly') }}">
                <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 (!empty($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">
                    Кожна точка — <strong>сума за тиждень</strong> (Пн–Нд). Підпис показує діапазон дат.
                </div>
            </div>
            <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); // понеділки тижнів (YYYY-MM-DD)
            const data   = @json($data);

            if (!labels.length) return;

            const prettyLabels = labels.map(d => {
                const dt = new Date(d + 'T00:00:00');
                const startY = dt.getFullYear();
                const startM = String(dt.getMonth()+1).padStart(2,'0');
                const startD = String(dt.getDate()).padStart(2,'0');

                const end = new Date(dt);
                end.setDate(end.getDate() + 6);
                const endY = end.getFullYear();
                const endM = String(end.getMonth()+1).padStart(2,'0');
                const endD = String(end.getDate()).padStart(2,'0');

                return `${startY}-${startM}-${startD} — ${endY}-${endM}-${endD}`;
            });

            const ctx = document.getElementById('weeklyChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: prettyLabels,
                    datasets: [{
                        label: 'Сума за тиждень',
                        data,
                        borderColor: '#16a34a',
                        backgroundColor: 'rgba(22,163,74,0.14)',
                        tension: 0.25,
                        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: {
                                title: (items) => items.length ? items[0].label : '',
                                label: (ctx) => ` Разом: $${ (ctx.parsed.y ?? 0).toFixed(2) }`
                            }
                        }
                    }
                }
            });
        })();
    </script>
@endpush