@extends('layouts.admin')

@section('title', 'Графіки по кабінетах')
@section('page_title', 'Графіки по кабінетах')

@push('head')
    <style>
        .ar-shell {
            max-width: 1050px;
        }
        .ar-card-main {
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,.35);
            background: radial-gradient(circle at top left,#e0f2fe 0,#ffffff 42%,#f8fafc 100%);
            box-shadow: 0 10px 30px rgba(15,23,42,.08);
        }
        .ar-card-filters {
            border-radius: 14px;
            border: 1px solid rgba(148,163,184,.25);
            background: #ffffff;
        }
        .ar-label {
            font-size:.8rem;
            font-weight:600;
            text-transform:uppercase;
            letter-spacing:.06em;
            color:#64748b;
        }
        .ar-sub {
            font-size:.85rem;
            color:#6b7280;
        }
        .ar-badge-pill {
            display:inline-flex;
            align-items:center;
            border-radius:999px;
            padding:.15rem .6rem;
            font-size:.78rem;
            background:#e5f0ff;
            color:#1d4ed8;
            margin-right:.25rem;
            margin-bottom:.25rem;
        }
        .ar-badge-pill i {
            font-size:.7rem;
            margin-right:.2rem;
        }
        .ar-divider {
            height:1px;
            background:rgba(148,163,184,.35);
            margin:10px 0 16px;
        }
        .ar-form-inline-label {
            font-size:.76rem;
            color:#9ca3af;
        }
        .ar-no-cabinet {
            font-size:.85rem;
            color:#9ca3af;
        }
    </style>
@endpush

@section('content')
    <div class="ar-shell">

        {{-- Верхній блок — заголовок + коротко, що робимо --}}
        <div class="ar-card-main p-3 mb-3">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <div>
                    <h4 class="mb-1">Графіки по кабінетах / операторах</h4>
                    <div class="ar-sub">
                        Обери кабінет, зміну та період — і побачиш динаміку балансу для конкретного оператора.
                    </div>
                </div>
                @if(request('cabinet_id') && isset($selectedCabinet) && $selectedCabinet)
                    <div class="mt-3 mt-md-0 text-md-right">
                        <div class="ar-label mb-1">Поточний вибір</div>
                        <div>
                            <span class="ar-badge-pill">
                                <i class="fa-solid fa-door-open"></i>
                                {{ $selectedCabinet->slug }} — {{ $selectedCabinet->name }}
                            </span>
                            @if(request('from'))
                                <span class="ar-badge-pill">
                                    <i class="fa-solid fa-calendar-day"></i>
                                    з {{ request('from') }}
                                </span>
                            @endif
                            @if(request('to'))
                                <span class="ar-badge-pill">
                                    <i class="fa-solid fa-calendar-check"></i>
                                    по {{ request('to') }}
                                </span>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Крок 1: вибір кабінету --}}
        <div class="ar-card-filters p-3 mb-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="ar-label">Крок 1 — кабінет</div>
                @if(request('cabinet_id'))
                    <a href="{{ route('admin.reports.index') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fa-solid fa-rotate-left mr-1"></i>Скинути вибір
                    </a>
                @endif
            </div>

            <form method="GET" action="{{ route('admin.reports.index') }}" class="mb-0">
                <div class="form-row align-items-end">
                    <div class="col-md-6 mb-2">
                        <label class="ar-label">Кабінет</label>
                        <select name="cabinet_id"
                                class="form-control"
                                onchange="this.form.submit()">
                            <option value="">— оберіть кабінет —</option>
                            @foreach($cabinets as $c)
                                <option value="{{ $c->id }}"
                                    {{ request('cabinet_id') == $c->id ? 'selected' : '' }}>
                                    {{ $c->slug }} — {{ $c->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-2 text-right">
                        @if(!request('cabinet_id'))
                            <span class="ar-no-cabinet">
                                Обери кабінет, щоб стали доступні наступні фільтри.
                            </span>
                        @endif
                    </div>
                </div>
            </form>
        </div>

        {{-- Крок 2: зміна / оператор + період --}}
        @if(request('cabinet_id') && isset($selectedCabinet) && $selectedCabinet)
            @php($ops = $operators ?? [])
            @if(count($ops))
                <div class="ar-card-filters p-3">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2">
                        <div>
                            <div class="ar-label mb-1">Крок 2 — фільтри графіка</div>
                            <div class="ar-sub">
                                {{ $selectedCabinet->slug }} — {{ $selectedCabinet->name }}
                            </div>
                        </div>
                    </div>

                    <div class="ar-divider"></div>

                    <form method="GET" action="{{ route('admin.reports.show') }}" class="mb-0">
                        <input type="hidden" name="cabinet_id" value="{{ $selectedCabinet->id }}">
                        <div class="form-row align-items-end">
                            {{-- Зміна / оператор --}}
                            <div class="col-md-4 mb-3">
                                <label class="ar-label">Зміна / оператор</label>
                                <select name="shift" class="form-control" required>
                                    @foreach($ops as $op)
                                        <option value="{{ $op['value'] }}">{{ $op['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Діапазон дат --}}
                            <div class="col-md-3 mb-3">
                                <label class="ar-label">Період</label>
                                <div class="form-row">
                                    <div class="col-12 mb-1">
                                        <span class="ar-form-inline-label">З дати</span>
                                        <input type="date" name="from" class="form-control"
                                               value="{{ request('from') }}">
                                    </div>
                                    <div class="col-12">
                                        <span class="ar-form-inline-label">По дату</span>
                                        <input type="date" name="to" class="form-control"
                                               value="{{ request('to') }}">
                                    </div>
                                </div>
                            </div>

                            {{-- Кнопки дій --}}
                            <div class="col-md-5 mb-3">
                                <div class="d-flex flex-column flex-md-row justify-content-md-end">
                                    <button class="btn btn-primary mb-2 mb-md-0 mr-md-2">
                                        <i class="fa-solid fa-chart-line mr-1"></i>
                                        Показати щоденний графік
                                    </button>
                                    <a href="{{ route('admin.reports.weekly', [
                                                'cabinet_id' => $selectedCabinet->id,
                                                'shift'      => request('shift') ?? ($ops[0]['value'] ?? null),
                                                'from'       => request('from'),
                                                'to'         => request('to'),
                                            ]) }}"
                                       class="btn btn-outline-info">
                                        <i class="fa-solid fa-calendar-week mr-1"></i>
                                        Тижневий графік
                                    </a>
                                </div>
                                <div class="mt-2" style="font-size:.8rem;color:#9ca3af;">
                                    Якщо дати не вказані — будуть використані всі наявні записи для цієї зміни.
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            @else
                <div class="alert alert-warning mt-3">
                    Для вибраного кабінета не задано жодного оператора у змінах.
                </div>
            @endif
        @else
            <div class="text-muted mt-2">
                Оберіть кабінет, щоб перейти до вибору зміни / оператора та періоду.
            </div>
        @endif

    </div>
@endsection