@extends('layouts.admin')

@section('title','Статистика кабінетів')
@section('page_title','Статистика кабінетів')

@push('head')
    <link rel="stylesheet" href="{{ asset('css/admin/cabinet-stats.css') }}">
@endpush

@section('page_actions')
    <a href="{{ route('admin.cabinet-stats.report') }}" class="btn btn-outline-info">
        <i class="fas fa-chart-line mr-1"></i> Графік по кабінету
    </a>
@endsection

@section('content')

    @php
        /** @var \Illuminate\Pagination\LengthAwarePaginator $stats */
        $totalRows = $stats->total();
        $selectedCabinet = $cabinets->firstWhere('id', (int)$cabinetId);
        $selectedCabinetName = $selectedCabinet ? $selectedCabinet->name : 'Усі кабінети';
    @endphp

    {{-- ФІЛЬТРИ + КОРОТКИЙ ОГЛЯД --}}
    <div class="admin-card cabinet-stats-card p-3 mb-3">

        <div class="cabinet-stats-header">
            <div>
                <h5 class="mb-1 cabinet-stats-title">Фільтр статистики по кабінетах</h5>
                <p class="cabinet-stats-subtitle mb-0">
                    Обери кабінет та діапазон дат, щоб подивитись динаміку New / Young / Old та витрати.
                </p>
            </div>
        </div>

        <form method="GET" class="cabinet-stats-filter">

            {{-- Кабінет --}}
            <div class="cabinet-stats-filter-group">
                <label class="mb-1">Кабінет</label>
                <select name="cabinet_id"
                        class="form-control"
                        onchange="this.form.submit()">
                    <option value="0">Усі</option>
                    @foreach($cabinets as $c)
                        <option value="{{ $c->id }}" {{ (int)$cabinetId === (int)$c->id ? 'selected' : '' }}>
                            {{ $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Від --}}
            <div class="cabinet-stats-filter-group">
                <label class="mb-1">Від</label>
                <input type="date"
                       name="from"
                       value="{{ $from }}"
                       class="form-control">
            </div>

            {{-- До --}}
            <div class="cabinet-stats-filter-group">
                <label class="mb-1">До</label>
                <input type="date"
                       name="to"
                       value="{{ $to }}"
                       class="form-control">
            </div>

            {{-- Кнопки --}}
            <div class="cabinet-stats-filter-actions">
                <button class="btn btn-outline-secondary">
                    Фільтрувати
                </button>

                <a href="{{ route('admin.cabinet-stats.index') }}"
                   class="btn btn-link btn-sm cabinet-stats-reset">
                    Скинути
                </a>
            </div>

        </form>

        {{-- Короткий Summary --}}
        <div class="cabinet-stats-summary mt-2">
            <div class="cabinet-stats-chip">
                <span class="cabinet-stats-chip-label">Кабінет:</span>
                <span class="cabinet-stats-chip-value">{{ $selectedCabinetName }}</span>
            </div>

            <div class="cabinet-stats-chip">
                <span class="cabinet-stats-chip-label">Період:</span>
                <span class="cabinet-stats-chip-value">
                    {{ $from ?: '—' }} — {{ $to ?: '—' }}
                </span>
            </div>

            <div class="cabinet-stats-chip">
                <span class="cabinet-stats-chip-label">Рядків у вибірці:</span>
                <span class="cabinet-stats-chip-value">{{ $totalRows }}</span>
            </div>
        </div>
    </div>


    {{-- DESKTOP / TABLET: ТАБЛИЦЯ СТАТИСТИКИ --}}
    <div class="admin-card p-0 cabinet-stats-table-card">

        <div class="cabinet-stats-table-header d-flex justify-content-between align-items-center px-3 py-2">
            <div class="cabinet-stats-table-title">
                Результати
            </div>
            <div class="cabinet-stats-table-hint">
                Скроль вниз, щоб подивитись історію по днях.
            </div>
        </div>

        <div class="cabinet-stats-table-wrapper table-responsive">
            <table class="table table-sm mb-0 cabinet-stats-table">
                <thead>
                <tr>
                    <th style="min-width:170px;">Кабінет</th>
                    <th style="min-width:110px;">Дата</th>
                    <th class="text-right">New</th>
                    <th class="text-right">Young</th>
                    <th class="text-right">Old</th>
                    <th class="text-right">Spend Young</th>
                    <th class="text-right">Spend Old</th>
                </tr>
                </thead>
                <tbody>
                @forelse($stats as $s)
                    <tr>
                        <td>{{ $s->cabinet->name ?? '' }}</td>
                        <td>{{ $s->period_start->format('Y-m-d') }}</td>
                        <td class="text-right">{{ number_format((float)$s->new_connection,   2) }}</td>
                        <td class="text-right">{{ number_format((float)$s->young_connection, 2) }}</td>
                        <td class="text-right">{{ number_format((float)$s->old_connection,   2) }}</td>
                        <td class="text-right">{{ number_format((float)$s->spend_young,      2) }}</td>
                        <td class="text-right">{{ number_format((float)$s->spend_old,        2) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted p-4">
                            Поки що немає записів статистики за заданий період.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="cabinet-stats-pagination p-2">
            {{ $stats->links() }}
        </div>
    </div>

    {{-- MOBILE: КАРТКИ ПО ДНЯХ --}}
    <div class="cabinet-stats-mobile-list">
        @forelse($stats as $s)
            <div class="admin-card cabinet-stats-mobile-card">
                <div class="cabinet-stats-mobile-head">
                    <div class="cabinet-stats-mobile-head-left">
                        <div class="cabinet-stats-mobile-date-row">
                            <span class="cabinet-stats-mobile-date">
                                {{ $s->period_start->format('Y-m-d') }}
                            </span>
                            <span class="cabinet-stats-mobile-cab">
                                {{ $s->cabinet->name ?? '' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="cabinet-stats-mobile-body">
                    <div class="cabinet-stats-mobile-row">
                        <div class="cabinet-stats-mobile-label">New</div>
                        <div class="cabinet-stats-mobile-value">
                            {{ number_format((float)$s->new_connection, 2) }}
                        </div>
                    </div>
                    <div class="cabinet-stats-mobile-row">
                        <div class="cabinet-stats-mobile-label">Young</div>
                        <div class="cabinet-stats-mobile-value">
                            {{ number_format((float)$s->young_connection, 2) }}
                        </div>
                    </div>
                    <div class="cabinet-stats-mobile-row">
                        <div class="cabinet-stats-mobile-label">Old</div>
                        <div class="cabinet-stats-mobile-value">
                            {{ number_format((float)$s->old_connection, 2) }}
                        </div>
                    </div>
                    <div class="cabinet-stats-mobile-row">
                        <div class="cabinet-stats-mobile-label">Spend Y</div>
                        <div class="cabinet-stats-mobile-value">
                            {{ number_format((float)$s->spend_young, 2) }}
                        </div>
                    </div>
                    <div class="cabinet-stats-mobile-row">
                        <div class="cabinet-stats-mobile-label">Spend O</div>
                        <div class="cabinet-stats-mobile-value">
                            {{ number_format((float)$s->spend_old, 2) }}
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center text-muted p-3">
                Поки що немає записів статистики за заданий період.
            </div>
        @endforelse

        {{-- Пагінація під картками --}}
        <div class="cabinet-stats-pagination cabinet-stats-mobile-pagination p-2">
            {{ $stats->links() }}
        </div>
    </div>
@endsection