@extends('layouts.admin')

@section('title','Створити тімліда')
@section('page_title','Створити тімліда')

@section('page_actions')
    <a href="{{ route('admin.teamleads.index') }}" class="btn btn-light">
        ← До списку
    </a>
@endsection

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

@section('content')

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

        // ⚠️ ВАЖЛИВО: використовуємо old('cabinets') — як було раніше в контролері
        $oldCabinetIds = collect(old('cabinets', []))
            ->map(fn($id) => (int)$id)
            ->all();

        $cabinetsCount = $cabinets->count();
    @endphp

    <div class="tl-create-wrapper">

        <div class="admin-card tl-create-card">

            {{-- HERO / ШАПКА --}}
            <div class="tl-create-hero">
                <div class="tl-create-avatar-wrapper">
                    <div class="tl-create-avatar-ring"></div>
                    <div class="tl-create-avatar">
                        TL
                    </div>
                </div>

                <div class="tl-create-hero-text">
                    <div class="tl-create-hero-label">Новий тімлід</div>
                    <h3 class="tl-create-hero-title">Створення тімліда</h3>
                    <p class="tl-create-hero-subtitle">
                        Заповни основні дані тімліда та обери кабінети, за які він буде відповідати.
                    </p>

                    <div class="tl-create-hero-chips">
                        <span class="tl-create-chip">
                            <span class="tl-create-chip-dot dot-blue"></span>
                            Розподіл відповідальності
                        </span>
                        <span class="tl-create-chip">
                            <span class="tl-create-chip-dot dot-green"></span>
                            Впливає на рейтинги
                        </span>
                    </div>
                </div>
            </div>

            {{-- ФОРМА --}}
            <form method="POST"
                  action="{{ route('admin.teamleads.store') }}"
                  class="tl-create-form">
                @csrf

                <div class="tl-create-grid">

                    {{-- ЛІВА КОЛОНКА: ОСНОВНІ ДАНІ --}}
                    <div class="tl-create-column">

                        <div class="tl-section">
                            <div class="tl-section-header">
                                <div class="tl-section-title">
                                    Основні дані
                                </div>
                                <div class="tl-section-subtitle">
                                    Імʼя тімліда та email, на який він буде заходити в систему.
                                </div>
                            </div>

                            <div class="tl-form-group">
                                <label for="name">Імʼя тімліда</label>
                                <input id="name"
                                       type="text"
                                       name="name"
                                       class="tl-input"
                                       value="{{ old('name') }}"
                                       required>
                            </div>

                            <div class="tl-form-group">
                                <label for="email">Email для входу</label>
                                <input id="email"
                                       type="email"
                                       name="email"
                                       class="tl-input"
                                       value="{{ old('email') }}"
                                       required>
                                <div class="tl-field-hint">
                                    На цей email тімлід буде заходити в адмінку.
                                </div>
                            </div>
                        </div>

                        <div class="tl-section">
                            <div class="tl-section-header">
                                <div class="tl-section-title">
                                    Пароль
                                </div>
                                <div class="tl-section-subtitle">
                                    Задай стартовий пароль для тімліда.
                                </div>
                            </div>

                            <div class="tl-form-group">
                                <label for="password">Пароль</label>
                                <input id="password"
                                       type="password"
                                       name="password"
                                       class="tl-input"
                                       required>
                                <div class="tl-field-hint">
                                    Мінімум 8 символів. Збережи цей пароль, щоб передати тімліду.
                                </div>
                            </div>
                        </div>

                    </div>

                    {{-- ПРАВА КОЛОНКА: КАБІНЕТИ --}}
                    <div class="tl-create-column">

                        <div class="tl-section">
                            <div class="tl-section-header tl-section-header-row">
                                <div>
                                    <div class="tl-section-title">
                                        Кабінети тімліда
                                    </div>
                                    <div class="tl-section-subtitle">
                                        Можна обрати від одного до декількох кабінетів.
                                    </div>
                                </div>

                                <div class="tl-cabinets-count-badge">
                                    Кабінетів: <strong>{{ $cabinetsCount }}</strong>
                                </div>
                            </div>

                            @if($cabinetsCount)
                                <div class="tl-cabinets-grid">
                                    @foreach($cabinets as $cabinet)
                                        @php
                                            $isChecked = in_array((int)$cabinet->id, $oldCabinetIds, true);
                                        @endphp

                                        <label class="tl-cabinet-tile">
                                            {{-- ⚠️ ВАЖЛИВО: name="cabinets[]" — як було до редизайну --}}
                                            <input type="checkbox"
                                                   name="cabinets[]"
                                                   value="{{ $cabinet->id }}"
                                                {{ $isChecked ? 'checked' : '' }}>
                                            <div class="tl-cabinet-tile-inner">
                                                <div class="tl-cabinet-tile-header">
                                                    <div class="tl-cabinet-icon">
                                                        {{ mb_substr($cabinet->slug ?: $cabinet->name, 0, 2) }}
                                                    </div>
                                                    <div class="tl-cabinet-text">
                                                        <div class="tl-cabinet-name">
                                                            {{ $cabinet->name }}
                                                        </div>
                                                        @if(!empty($cabinet->slug))
                                                            <div class="tl-cabinet-slug">
                                                                {{ $cabinet->slug }}
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            @else
                                <div class="tl-field-hint">
                                    Поки що немає створених кабінетів. Спочатку створи хоча б один кабінет.
                                </div>
                            @endif
                        </div>

                    </div>

                </div>

                {{-- КНОПКИ --}}
                <div class="tl-create-actions">
                    <button class="btn btn-primary tl-btn-main">
                        💾 Зберегти тімліда
                    </button>

                    <a href="{{ route('admin.teamleads.index') }}"
                       class="btn btn-outline-secondary tl-btn-secondary">
                        Скасувати
                    </a>
                </div>

            </form>

        </div>

    </div>

@endsection