@extends('layouts.admin')

@section('title','Баланси тімлідів')
@section('page_title','Баланси тімлідів')

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

@section('content')

    @php
        /** @var \Illuminate\Pagination\LengthAwarePaginator $balances */

        $totalRows = $balances->total();
    @endphp

    {{-- ШАПКА + КОРОТКИЙ ОПИС --}}
    <div class="balances-header mb-3">
        <div class="balances-header-left">
            <h4 class="balances-title mb-1">
                Баланси тімлідів
            </h4>
            <p class="balances-subtitle mb-0">
                Фільтруй зміни за тімлідом, кабінетом, зміною та діапазоном дат, щоб швидко подивитись,
                хто як відпрацював.
            </p>
        </div>

        <div class="balances-chips">
            <div class="balances-chip">
                <span class="balances-chip-label">Записів у вибірці:</span>
                <span class="balances-chip-value">{{ $totalRows }}</span>
            </div>
            <div class="balances-chip">
                <span class="balances-chip-label">Сума на сторінці:</span>
                <span class="balances-chip-value">
                    {{ number_format($pageSum, 2, '.', ' ') }} $
                </span>
            </div>
        </div>
    </div>


    {{-- ФІЛЬТРИ --}}
    <div class="admin-card balances-filter-card p-3 mb-3">
        <form method="GET" id="balancesFilterForm" class="balances-filter-form">

            {{-- Тімлід --}}
            <div class="balances-filter-group">
                <label class="mb-1">Тімлід</label>
                <select name="teamlead_id"
                        class="form-control"
                        id="teamleadSelect">
                    <option value="">— всі —</option>
                    @foreach($teamleads as $u)
                        <option value="{{ $u->id }}" {{ (string)$teamleadId === (string)$u->id ? 'selected' : '' }}>
                            {{ $u->name }} ({{ $u->email }})
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Кабінет --}}
            <div class="balances-filter-group">
                <label class="mb-1">Кабінет</label>
                <select name="cabinet_id"
                        class="form-control"
                        id="cabinetSelect">
                    <option value="">— всі —</option>
                    @foreach($cabinets as $c)
                        <option value="{{ $c->id }}" {{ (string)$cabinetId === (string)$c->id ? 'selected' : '' }}>
                            {{ $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Зміна --}}
            <div class="balances-filter-group balances-filter-group--narrow">
                <label class="mb-1">Зміна</label>
                <select name="shift"
                        class="form-control"
                        id="shiftSelect">
                    <option value="">— всі —</option>
                    <option value="day"     {{ $shift==='day' ? 'selected' : '' }}>денна</option>
                    <option value="evening" {{ $shift==='evening' ? 'selected' : '' }}>вечірня</option>
                    <option value="night"   {{ $shift==='night' ? 'selected' : '' }}>нічна</option>
                </select>
            </div>

            {{-- Діапазон дат --}}
            <div class="balances-filter-group balances-filter-group--date">
                <label class="mb-1">З дати</label>
                <input type="date"
                       name="from"
                       value="{{ $dateFrom }}"
                       class="form-control">
            </div>

            <div class="balances-filter-group balances-filter-group--date">
                <label class="mb-1">По дату</label>
                <input type="date"
                       name="to"
                       value="{{ $dateTo }}"
                       class="form-control">
            </div>

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

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


    {{-- СУМА НА СТОРІНЦІ --}}
    <div class="balances-summary-chip mb-3">
        <span class="balances-summary-label">Сума на цій сторінці:</span>
        <span class="balances-summary-value">
            {{ number_format($pageSum, 2, '.', ' ') }} $
        </span>
    </div>


    {{-- ТАБЛИЦЯ (DESKTOP/TABLET) --}}
    <div class="admin-card p-0 balances-table-card">
        <div class="balances-table-header d-flex justify-content-between align-items-center px-3 py-2">
            <div class="balances-table-title">
                Результати по змінах
            </div>
            <div class="balances-table-hint">
                На компʼютері — таблиця, на телефоні — компактні картки.
            </div>
        </div>

        <div class="table-responsive balances-table-wrapper">
            <table class="table table-sm mb-0 balances-table">
                <thead>
                <tr>
                    <th>Дата</th>
                    <th>Тімлід</th>
                    <th>Кабінет</th>
                    <th>Оператор</th>
                    <th>Зміна</th>
                    <th class="text-right">Сума</th>
                </tr>
                </thead>
                <tbody>
                @forelse($balances as $b)
                    <tr>
                        <td>{{ \Illuminate\Support\Carbon::parse($b->work_date)->format('Y-m-d') }}</td>
                        <td>
                            <div class="balances-tl-name">
                                {{ $b->user?->name }}
                            </div>
                            <div class="balances-tl-email">
                                {{ $b->user?->email }}
                            </div>
                        </td>
                        <td class="balances-cabinet-cell">
                            {{ $b->cabinet?->slug }}
                        </td>
                        <td>{{ $b->operator_name }}</td>
                        <td class="balances-shift-cell">
                            @if($b->shift === 'day')
                                <span class="balances-shift-pill balances-shift-day">денна</span>
                            @elseif($b->shift === 'evening')
                                <span class="balances-shift-pill balances-shift-evening">вечірня</span>
                            @elseif($b->shift === 'night')
                                <span class="balances-shift-pill balances-shift-night">нічна</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-right balances-amount-cell">
                            {{ number_format($b->amount, 2, '.', ' ') }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted p-4">
                            Даних немає за обраний фільтр.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        {{-- МОБІЛЬНИЙ СПИСОК (CARDS) --}}
        <div class="balances-mobile-list px-3 pt-2 pb-1">
            @forelse($balances as $b)
                @php
                    $dateFormatted = \Illuminate\Support\Carbon::parse($b->work_date)->format('Y-m-d');
                    $shiftLabel = '—';
                    $shiftClass = '';

                    if ($b->shift === 'day') {
                        $shiftLabel = 'денна';
                        $shiftClass = 'balances-shift-day';
                    } elseif ($b->shift === 'evening') {
                        $shiftLabel = 'вечірня';
                        $shiftClass = 'balances-shift-evening';
                    } elseif ($b->shift === 'night') {
                        $shiftLabel = 'нічна';
                        $shiftClass = 'balances-shift-night';
                    }
                @endphp

                <div class="balances-mobile-card admin-card">
                    <div class="balances-mobile-head">
                        <div class="balances-mobile-head-left">
                            <div class="balances-mobile-date-row">
                                <span class="balances-mobile-date">{{ $dateFormatted }}</span>
                                @if($shiftLabel !== '—')
                                    <span class="balances-shift-pill {{ $shiftClass }}">
                                        {{ $shiftLabel }}
                                    </span>
                                @endif
                            </div>
                            <div class="balances-mobile-cab">
                                {{ $b->cabinet?->slug ?? '—' }}
                            </div>
                        </div>
                        <div class="balances-mobile-amount">
                            {{ number_format($b->amount, 2, '.', ' ') }} $
                        </div>
                    </div>

                    <div class="balances-mobile-body">
                        <div class="balances-mobile-row">
                            <div class="balances-mobile-label">Тімлід</div>
                            <div class="balances-mobile-value">
                                <div class="balances-tl-name">
                                    {{ $b->user?->name ?? '—' }}
                                </div>
                                @if($b->user?->email)
                                    <div class="balances-tl-email">
                                        {{ $b->user->email }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="balances-mobile-row">
                            <div class="balances-mobile-label">Оператор</div>
                            <div class="balances-mobile-value">
                                {{ $b->operator_name ?? '—' }}
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted p-3">
                    Даних немає за обраний фільтр.
                </div>
            @endforelse
        </div>

        {{-- ПІДСУМОК + ПАГІНАЦІЯ --}}
        <div class="balances-pagination d-flex flex-column flex-md-row justify-content-between align-items-md-center mt-3 px-3 pb-3">
            <div class="text-muted small mb-2 mb-md-0">
                Показано {{ $balances->firstItem() }}–{{ $balances->lastItem() }} із {{ $balances->total() }} записів
            </div>
            {!! $balances->onEachSide(1)->links('pagination::bootstrap-4') !!}
        </div>
    </div>
@endsection

@push('head')
    <style>
        /* Фікс розміру SVG-іконок пагінації */
        svg.w-5.h-5 { width: 1em; height: 1em; }
    </style>
@endpush

@push('body')
    <script>
        (function () {
            const form           = document.getElementById('balancesFilterForm');
            const teamleadSelect = document.getElementById('teamleadSelect');
            const cabinetSelect  = document.getElementById('cabinetSelect');
            const shiftSelect    = document.getElementById('shiftSelect');

            if (!form) return;

            // автосабміт при зміні тімліда / кабінета / зміни
            if (teamleadSelect) {
                teamleadSelect.addEventListener('change', function () {
                    if (cabinetSelect) {
                        cabinetSelect.value = '';
                    }
                    form.submit();
                });
            }

            if (cabinetSelect) {
                cabinetSelect.addEventListener('change', function () {
                    form.submit();
                });
            }

            if (shiftSelect) {
                shiftSelect.addEventListener('change', function () {
                    form.submit();
                });
            }
        })();
    </script>
@endpush