{{--
    Partial: правая колонка page-edit — конструктор страницы (page builder)
    Переменные из родителя: $page, $sections, $availableBlocks
--}}
<div class="card card-primary card-outline">
    <div class="card-header d-flex align-items-center">
        <h3 class="card-title"><i class="fas fa-layer-group mr-1"></i> Конструктор страницы</h3>
        <div class="card-tools">
            <button id="btn-save-order" class="btn btn-sm btn-primary" disabled>
                <i class="fas fa-save"></i> Сохранить порядок
            </button>
        </div>
    </div>

    <div class="card-body p-0">
        @if($sections->isEmpty())
            <div class="text-center text-muted p-5" id="empty-hint">
                <i class="fas fa-layer-group fa-2x mb-2 d-block"></i>
                Страница пуста. Добавьте блоки или текстовые области с помощью кнопок ниже.
            </div>
        @endif

        {{-- Список секций — перетаскиваемый --}}
        <ul id="sortable-sections" class="list-group list-group-flush" style="min-height:10px;">
            @foreach($sections as $section)
                <li class="list-group-item p-0 border-bottom" data-id="{{ $section->id }}">
                    <div class="d-flex align-items-stretch">

                        {{-- Хэндл перетаскивания --}}
                        <div class="drag-handle d-flex align-items-center px-3 text-muted"
                             style="cursor:grab; background:#f8f9fa; border-right:1px solid #dee2e6;">
                            <i class="fas fa-grip-vertical"></i>
                        </div>

                        <div class="flex-grow-1 p-3">
                            @if($section->type === 'block')
                                {{-- Блочная секция --}}
                                <div class="d-flex align-items-center">
                                    <span class="badge badge-primary mr-2">Блок</span>
                                    @if($section->block)
                                        <strong>{{ $section->block->title }}</strong>
                                        <small class="text-muted ml-2"><code>{{ $section->block->name }}</code></small>
                                    @else
                                        <span class="text-danger">Блок удалён</span>
                                    @endif
                                </div>
                            @else
                                {{-- Текстовая секция --}}
                                <div>
                                    <span class="badge badge-secondary mb-2">Текстовая область</span>
                                    <textarea class="content-editor form-control"
                                              data-section-id="{{ $section->id }}"
                                              data-save-url="{{ route('admin.pages.sections.update', [$page, $section]) }}"
                                              style="display:none;">{{ $section->content }}</textarea>
                                    <div class="summernote-wrapper">
                                        <div class="summernote-editor" id="editor-{{ $section->id }}">
                                            {!! $section->content !!}
                                        </div>
                                    </div>
                                    <div class="mt-2 d-flex align-items-center">
                                        <button type="button"
                                                class="btn btn-xs btn-success btn-save-content mr-2"
                                                data-section-id="{{ $section->id }}">
                                            <i class="fas fa-save"></i> Сохранить текст
                                        </button>
                                        <span class="save-status text-success small" id="status-{{ $section->id }}" style="display:none;">
                                            <i class="fas fa-check"></i> Сохранено
                                        </span>
                                    </div>
                                </div>
                            @endif
                        </div>

                        {{-- Кнопки действий --}}
                        <div class="d-flex flex-column justify-content-center px-3"
                             style="border-left:1px solid #dee2e6;">
                            @if($section->type === 'block' && $section->block)
                                <a href="{{ route('admin.blocks.edit', $section->block_id) }}"
                                   class="btn btn-xs btn-outline-secondary mb-1"
                                   title="Редактировать блок">
                                    <i class="fas fa-edit"></i>
                                </a>
                            @endif
                            <form method="POST"
                                  action="{{ route('admin.pages.sections.destroy', [$page, $section]) }}"
                                  onsubmit="return confirm('Удалить эту секцию?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-xs btn-outline-danger"
                                        title="Удалить секцию">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>

                    </div>
                </li>
            @endforeach
        </ul>
    </div>

    {{-- Панель добавления секций --}}
    <div class="card-footer p-0">
        <div class="p-3 border-bottom bg-light">
            <small class="text-muted text-uppercase font-weight-bold" style="letter-spacing:.05em;">
                <i class="fas fa-plus-circle mr-1"></i> Добавить секцию на страницу
            </small>
        </div>
        <div class="row no-gutters">

            {{-- Карточка 1: Текстовая область --}}
            <div class="col-md-6 border-right">
                <div class="p-3">
                    <div class="d-flex align-items-start mb-2">
                        <span class="mr-3" style="font-size:24px; line-height:1; color:#6c757d;">
                            <i class="fas fa-align-left"></i>
                        </span>
                        <div>
                            <div class="font-weight-bold">Текстовая область</div>
                            <small class="text-muted">Произвольный HTML-текст — заголовки, абзацы, списки. Редактируется через встроенный редактор.</small>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('admin.pages.sections.add-content', $page) }}">
                        @csrf
                        <button type="submit" class="btn btn-block btn-outline-secondary btn-sm">
                            <i class="fas fa-plus"></i> Добавить текстовую область
                        </button>
                    </form>
                </div>
            </div>

            {{-- Карточка 2: Готовый блок --}}
            <div class="col-md-6">
                <div class="p-3">
                    <div class="d-flex align-items-start mb-2">
                        <span class="mr-3" style="font-size:24px; line-height:1; color:#007bff;">
                            <i class="fas fa-layer-group"></i>
                        </span>
                        <div>
                            <div class="font-weight-bold">Готовый блок</div>
                            <small class="text-muted">Переиспользуемый блок из библиотеки — например «Почему мы», баннер, CTA. Редактируется централизованно.</small>
                        </div>
                    </div>
                    @if($availableBlocks->isNotEmpty())
                        <form method="POST" action="{{ route('admin.pages.sections.attach-block', $page) }}">
                            @csrf
                            <div class="input-group input-group-sm">
                                <select name="block_id" class="form-control" required>
                                    <option value="">— выбрать из библиотеки —</option>
                                    @foreach($availableBlocks as $block)
                                        <option value="{{ $block->id }}">{{ $block->title }}</option>
                                    @endforeach
                                </select>
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-outline-primary">
                                        <i class="fas fa-plus"></i> Добавить
                                    </button>
                                </div>
                            </div>
                        </form>
                    @else
                        <div class="text-muted small mb-2">
                            <i class="fas fa-check-circle text-success"></i> Все активные блоки уже на странице
                        </div>
                    @endif
                    <a href="{{ route('admin.blocks.create') }}" class="btn btn-sm btn-link p-0 mt-1 text-muted">
                        <i class="fas fa-plus-square"></i> Создать новый блок в библиотеке
                    </a>
                </div>
            </div>

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