@extends('layouts.admin')

@section('title','Кабінети')
@section('page_title','Кабінети')

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

@section('page_actions')
    <a href="{{ route('admin.cabinets.create') }}" class="btn btn-primary">
        Створити кабінет
    </a>
@endsection

@section('content')

    @php
        /** @var \Illuminate\Support\Collection|\Illuminate\Database\Eloquent\Collection $cabinets */

        $totalCabinets = $cabinets->count();

        $withTeamleads = $cabinets->filter(fn($cab) => $cab->teamLeads && $cab->teamLeads->count())->count();

        $withDay   = $cabinets->whereNotNull('day_operator')->count();
        $withEven  = $cabinets->whereNotNull('evening_operator')->count();
        $withNight = $cabinets->whereNotNull('night_operator')->count();
    @endphp

    {{-- ШАПКА / SUMMARY --}}
    <div class="cabinet-index-header mb-3">
        <div class="cabinet-index-header-left">
            <h4 class="mb-1 cabinet-index-title">
                Кабінети
            </h4>
            <p class="cabinet-index-subtitle mb-0">
                Тут можна подивитись, хто веде кабінет і які оператори стоять на денній, вечірній та нічній зміні.
            </p>
        </div>

        <div class="cabinet-index-chips">
            <div class="cabinet-index-chip">
                <span class="cabinet-index-chip-label">Кабінетів:</span>
                <span class="cabinet-index-chip-value">{{ $totalCabinets }}</span>
            </div>
            <div class="cabinet-index-chip">
                <span class="cabinet-index-chip-label">З тімлідами:</span>
                <span class="cabinet-index-chip-value">{{ $withTeamleads }}</span>
            </div>
        </div>
    </div>


    {{-- КОРОТКІ МЕТРИКИ ПО ЗМІНАХ --}}
    <div class="admin-card cabinet-index-summary-card p-3 mb-3">
        <div class="cabinet-index-summary-grid">

            <div class="cabinet-index-summary-item">
                <div class="cabinet-index-summary-label">Денна зміна заповнена</div>
                <div class="cabinet-index-summary-value">{{ $withDay }} / {{ $totalCabinets }}</div>
            </div>

            <div class="cabinet-index-summary-item">
                <div class="cabinet-index-summary-label">Вечірня зміна заповнена</div>
                <div class="cabinet-index-summary-value">{{ $withEven }} / {{ $totalCabinets }}</div>
            </div>

            <div class="cabinet-index-summary-item">
                <div class="cabinet-index-summary-label">Нічна зміна заповнена</div>
                <div class="cabinet-index-summary-value">{{ $withNight }} / {{ $totalCabinets }}</div>
            </div>

        </div>
    </div>


    {{-- ТАБЛИЦЯ КАБІНЕТІВ (DESKTOP / TABLET) --}}
    <div class="admin-card p-0 cabinet-index-table-card">

        <div class="cabinet-index-table-header d-flex justify-content-between align-items-center px-3 py-2">
            <div class="cabinet-index-table-title">
                Список кабінетів
            </div>
            <div class="cabinet-index-table-hint">
                Наведи на тімліда, щоб побачити email.
            </div>
        </div>

        <div class="cabinet-index-table-wrapper table-responsive">
            <table class="table table-sm mb-0 cabinet-index-table">
                <thead>
                <tr>
                    <th>Назва</th>
                    <th>Тімлід</th>
                    <th>Денна</th>
                    <th>Вечірня</th>
                    <th>Нічна</th>
                    <th style="width:160px;">Дії</th>
                </tr>
                </thead>
                <tbody>
                @forelse($cabinets as $cab)
                    <tr>
                        {{-- Назва --}}
                        <td class="align-middle">
                            <div class="cabinet-index-name">
                                <span class="cabinet-index-name-main">{{ $cab->name }}</span>
                                @if(!empty($cab->slug))
                                    <span class="cabinet-index-name-slug">
                                        {{ $cab->slug }}
                                    </span>
                                @endif
                            </div>
                        </td>

                        {{-- Тімлід(и) --}}
                        <td class="align-middle cabinet-index-teamleads-cell">
                            @if($cab->teamLeads && $cab->teamLeads->count())
                                @foreach($cab->teamLeads as $lead)
                                    <span class="badge badge-primary cabinet-index-teamlead-badge"
                                          data-toggle="tooltip"
                                          data-placement="top"
                                          title="{{ $lead->email }}"
                                          style="cursor: help;">
                                        {{ $lead->name }}
                                    </span>
                                @endforeach
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        {{-- Денна --}}
                        <td class="align-middle cabinet-index-shift-cell">
                            @if($cab->day_operator)
                                <div class="cabinet-index-operator-name">{{ $cab->day_operator }}</div>
                                @if($cab->day_tg_username)
                                    <div class="cabinet-index-operator-tag">
                                        {{ $cab->day_tg_username }}
                                    </div>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        {{-- Вечірня --}}
                        <td class="align-middle cabinet-index-shift-cell">
                            @if($cab->evening_operator)
                                <div class="cabinet-index-operator-name">{{ $cab->evening_operator }}</div>
                                @if($cab->evening_tg_username)
                                    <div class="cabinet-index-operator-tag">
                                        {{ $cab->evening_tg_username }}
                                    </div>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        {{-- Нічна --}}
                        <td class="align-middle cabinet-index-shift-cell">
                            @if($cab->night_operator)
                                <div class="cabinet-index-operator-name">{{ $cab->night_operator }}</div>
                                @if($cab->night_tg_username)
                                    <div class="cabinet-index-operator-tag">
                                        {{ $cab->night_tg_username }}
                                    </div>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        {{-- Дії --}}
                        <td class="align-middle">
                            <div class="cabinet-index-actions">
                                <a href="{{ route('admin.cabinets.edit', $cab) }}"
                                   class="btn btn-sm btn-secondary">
                                    Редагувати
                                </a>
                                <form method="POST"
                                      action="{{ route('admin.cabinets.destroy', $cab) }}"
                                      class="d-inline-block"
                                      onsubmit="return confirm('Видалити?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger">
                                        Видалити
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted p-4">
                            Немає кабінетів.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- МОБІЛЬНИЙ ВИГЛЯД: КАРТКИ КАБІНЕТІВ --}}
    <div class="cabinet-index-mobile-list">
        @forelse($cabinets as $cab)
            <div class="admin-card cabinet-index-mobile-card">
                <div class="cabinet-index-mobile-head">
                    <div>
                        <div class="cabinet-index-mobile-name">
                            <span class="cabinet-index-name-main">{{ $cab->name }}</span>
                            @if(!empty($cab->slug))
                                <span class="cabinet-index-name-slug">
                                    {{ $cab->slug }}
                                </span>
                            @endif
                        </div>
                        @if($cab->teamLeads && $cab->teamLeads->count())
                            <div class="cabinet-index-mobile-teamleads">
                                @foreach($cab->teamLeads as $lead)
                                    <span class="badge badge-primary cabinet-index-teamlead-badge"
                                          data-toggle="tooltip"
                                          data-placement="top"
                                          title="{{ $lead->email }}">
                                        {{ $lead->name }}
                                    </span>
                                @endforeach
                            </div>
                        @else
                            <div class="cabinet-index-mobile-teamleads text-muted">
                                Тімлід не призначений
                            </div>
                        @endif
                    </div>

                    <div class="cabinet-index-mobile-head-actions">
                        <a href="{{ route('admin.cabinets.edit', $cab) }}"
                           class="btn btn-sm btn-outline-secondary">
                            Редагувати
                        </a>
                    </div>
                </div>

                <div class="cabinet-index-mobile-body">
                    <div class="cabinet-index-mobile-shift-row">
                        <div class="cabinet-index-mobile-shift-label">Денна</div>
                        <div class="cabinet-index-mobile-shift-value {{ $cab->day_operator ? 'has-operator' : 'no-operator' }}">
                            @if($cab->day_operator)
                                <div class="cabinet-index-operator-name">{{ $cab->day_operator }}</div>
                                @if($cab->day_tg_username)
                                    <div class="cabinet-index-operator-tag">{{ $cab->day_tg_username }}</div>
                                @endif
                            @else
                                <span class="text-muted">Немає оператора</span>
                            @endif
                        </div>
                    </div>

                    <div class="cabinet-index-mobile-shift-row">
                        <div class="cabinet-index-mobile-shift-label">Вечірня</div>
                        <div class="cabinet-index-mobile-shift-value {{ $cab->evening_operator ? 'has-operator' : 'no-operator' }}">
                            @if($cab->evening_operator)
                                <div class="cabinet-index-operator-name">{{ $cab->evening_operator }}</div>
                                @if($cab->evening_tg_username)
                                    <div class="cabinet-index-operator-tag">{{ $cab->evening_tg_username }}</div>
                                @endif
                            @else
                                <span class="text-muted">Немає оператора</span>
                            @endif
                        </div>
                    </div>

                    <div class="cabinet-index-mobile-shift-row">
                        <div class="cabinet-index-mobile-shift-label">Нічна</div>
                        <div class="cabinet-index-mobile-shift-value {{ $cab->night_operator ? 'has-operator' : 'no-operator' }}">
                            @if($cab->night_operator)
                                <div class="cabinet-index-operator-name">{{ $cab->night_operator }}</div>
                                @if($cab->night_tg_username)
                                    <div class="cabinet-index-operator-tag">{{ $cab->night_tg_username }}</div>
                                @endif
                            @else
                                <span class="text-muted">Немає оператора</span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="cabinet-index-mobile-footer">
                    <form method="POST"
                          action="{{ route('admin.cabinets.destroy', $cab) }}"
                          onsubmit="return confirm('Видалити?');">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-sm btn-outline-danger btn-block">
                            Видалити
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="text-center text-muted p-4">
                Немає кабінетів.
            </div>
        @endforelse
    </div>

@endsection

@push('body')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (window.$) {
                $('[data-toggle="tooltip"]').tooltip();
            }
        });
    </script>
@endpush