@extends('layouts.teamlead')

@section('title', 'Звіти')

@push('head')
    <style>
        .reports-card {
            max-width: 780px;
            border-radius: 14px;
            border: 1px solid rgba(148,163,184,.35);
            background: radial-gradient(circle at top left,#e0f2fe 0,#ffffff 42%,#f8fafc 100%);
        }
        .reports-card label {
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 600;
            color: #64748b;
        }
        .reports-hint {
            font-size: .78rem;
            color: #9ca3af;
        }
        .mode-toggle .btn {
            min-width: 140px;
        }
    </style>
@endpush

@section('content')
    <h3 class="mb-3">Звіти по балансу</h3>

    <p class="text-muted mb-3" style="max-width:780px;">
        Обери кабінет, зміну та тип графіка — і одразу перейдеш до потрібної аналітики по оператору.
    </p>

    <form method="POST"
          action="{{ route('teamlead.reports.redirect') }}"
          class="reports-card p-3">
        @csrf

        <div class="form-row">
            <div class="form-group col-md-6">
                <label>Кабінет</label>
                <select name="cabinet_id" class="form-control" required>
                    @foreach($cabinets as $cab)
                        <option value="{{ $cab->id }}"
                            {{ (int)old('cabinet_id', $defaultCabinetId) === (int)$cab->id ? 'selected' : '' }}>
                            {{ $cab->slug }} — {{ $cab->name }}
                        </option>
                    @endforeach
                </select>
                <small class="reports-hint">
                    Обирай той кабінет, за який хочеш подивитись статистику.
                </small>
                @error('cabinet_id')
                <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group col-md-6">
                <label>Зміна</label>
                <select name="shift" class="form-control" required>
                    <option value="day"     {{ old('shift','day') === 'day' ? 'selected' : '' }}>Денна</option>
                    <option value="evening" {{ old('shift') === 'evening' ? 'selected' : '' }}>Вечірня</option>
                    <option value="night"   {{ old('shift') === 'night' ? 'selected' : '' }}>Нічна</option>
                </select>
                <small class="reports-hint">
                    Вибери зміну, за яку хочеш подивитись баланс.
                </small>
                @error('shift')
                <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="form-group mt-2">
            <label>Тип графіка</label>
            <div class="btn-group btn-group-toggle d-flex mode-toggle" data-toggle="buttons">
                <label class="btn btn-outline-primary {{ old('mode','daily') === 'daily' ? 'active' : '' }}">
                    <input type="radio" name="mode" value="daily"
                           autocomplete="off"
                        {{ old('mode','daily') === 'daily' ? 'checked' : '' }}>
                    По днях
                </label>
                <label class="btn btn-outline-secondary {{ old('mode') === 'weekly' ? 'active' : '' }}">
                    <input type="radio" name="mode" value="weekly"
                           autocomplete="off"
                        {{ old('mode') === 'weekly' ? 'checked' : '' }}>
                    По тижнях
                </label>
            </div>
            <small class="reports-hint d-block mt-1">
                Щоденний — детально по кожному дню. Тижневий — зведення по тижнях.
            </small>
            @error('mode')
            <div class="text-danger small mt-1">{{ $message }}</div>
            @enderror
        </div>

        <div class="mt-3 d-flex justify-content-end">
            <button class="btn btn-primary">
                <i class="fas fa-chart-line mr-1"></i> Перейти до графіка
            </button>
        </div>
    </form>
@endsection