@extends('layouts.admin')

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

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

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

@section('content')

    <div class="cabinet-form-page">
        <div class="admin-card cabinet-form-card">
            <div class="cabinet-form-inner">

                <div class="cabinet-form-header">
                    <div class="cabinet-form-header-left">
                        <div class="cabinet-form-label">Новий кабінет</div>
                        <h3 class="cabinet-form-title">Створення кабінету</h3>
                        <p class="cabinet-form-subtitle">
                            Вкажи slug, назву та операторів по змінах. Ці дані будуть використовуватися у звітах,
                            рейтингах та Datame-сторінках.
                        </p>
                    </div>
                </div>

                <form method="POST"
                      action="{{ route('admin.cabinets.store') }}"
                      class="cabinet-form-body">
                    @csrf

                    {{-- Основна інформація --}}
                    <div class="cabinet-form-section">
                        <div class="cabinet-form-section-header">
                            <div class="cabinet-form-section-title">Основна інформація</div>
                            <div class="cabinet-form-section-subtitle">
                                Slug повинен бути унікальним (TLOD1, TLOD32 і т.д.).
                            </div>
                        </div>

                        <div class="cabinet-form-grid">
                            <div class="cabinet-form-group">
                                <label>Slug (унікальний код, напр. TLOD33)</label>
                                <input type="text"
                                       name="slug"
                                       class="form-control"
                                       value="{{ old('slug') }}"
                                       required>
                            </div>

                            <div class="cabinet-form-group">
                                <label>Назва кабінету</label>
                                <input type="text"
                                       name="name"
                                       class="form-control"
                                       value="{{ old('name') }}"
                                       required>
                            </div>
                        </div>
                    </div>

                    {{-- Оператори по змінах --}}
                    <div class="cabinet-form-section">
                        <div class="cabinet-form-section-header">
                            <div class="cabinet-form-section-title">Оператори по змінах</div>
                            <div class="cabinet-form-section-subtitle">
                                Заповни, хто стоїть на дні, вечорі та ночі, щоб було зручно контролювати зміни.
                            </div>
                        </div>

                        <div class="cabinet-form-shifts">

                            {{-- Денна --}}
                            <div class="cabinet-shift-card">
                                <div class="cabinet-shift-header">
                                    <div class="cabinet-shift-title">Денна зміна</div>
                                    <div class="cabinet-shift-label">10:00 — 18:00</div>
                                </div>

                                <div class="cabinet-form-group">
                                    <label>Імʼя оператора</label>
                                    <input type="text"
                                           name="day_operator"
                                           class="form-control mb-2"
                                           value="{{ old('day_operator') }}"
                                           placeholder="Ім'я оператора (наприклад, Саняя)">
                                </div>

                                <div class="cabinet-form-group">
                                    <label>Telegram username</label>
                                    <input type="text"
                                           name="day_tg_username"
                                           class="form-control"
                                           value="{{ old('day_tg_username') }}"
                                           placeholder="Наприклад, @tw1nking1017">
                                </div>
                            </div>

                            {{-- Вечірня --}}
                            <div class="cabinet-shift-card">
                                <div class="cabinet-shift-header">
                                    <div class="cabinet-shift-title">Вечірня зміна</div>
                                    <div class="cabinet-shift-label">18:00 — 02:00</div>
                                </div>

                                <div class="cabinet-form-group">
                                    <label>Імʼя оператора</label>
                                    <input type="text"
                                           name="evening_operator"
                                           class="form-control mb-2"
                                           value="{{ old('evening_operator') }}"
                                           placeholder="Ім'я оператора (наприклад, Микола)">
                                </div>

                                <div class="cabinet-form-group">
                                    <label>Telegram username</label>
                                    <input type="text"
                                           name="evening_tg_username"
                                           class="form-control"
                                           value="{{ old('evening_tg_username') }}"
                                           placeholder="Наприклад, @Melaynee">
                                </div>
                            </div>

                            {{-- Нічна --}}
                            <div class="cabinet-shift-card">
                                <div class="cabinet-shift-header">
                                    <div class="cabinet-shift-title">Нічна зміна</div>
                                    <div class="cabinet-shift-label">02:00 — 10:00</div>
                                </div>

                                <div class="cabinet-form-group">
                                    <label>Імʼя оператора</label>
                                    <input type="text"
                                           name="night_operator"
                                           class="form-control mb-2"
                                           value="{{ old('night_operator') }}"
                                           placeholder="Ім'я оператора (наприклад, Тотс)">
                                </div>

                                <div class="cabinet-form-group">
                                    <label>Telegram username</label>
                                    <input type="text"
                                           name="night_tg_username"
                                           class="form-control"
                                           value="{{ old('night_tg_username') }}"
                                           placeholder="Наприклад, @horrrtey">
                                </div>
                            </div>

                        </div>
                    </div>

                    {{-- Кнопки --}}
                    <div class="cabinet-form-actions">
                        <button class="btn btn-primary">
                            💾 Зберегти
                        </button>
                        <a href="{{ route('admin.cabinets.index') }}" class="btn btn-outline-secondary">
                            Скасувати
                        </a>
                    </div>

                </form>
            </div>
        </div>
    </div>

@endsection