{{--
    Вьюха: Список значений раздела справочника
    Контроллер: Admin\ManualController::values()
    Переменные: $section (DictSection), $items (коллекция DictValue)
    Иерархический режим → admin/manuals/partials/_hierarchical_list (алфавит + аккордеон)
    Плоский режим       → таблица inline
--}}
@extends('admin.layout')

@section('title', $section->label)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="m-0">{{ $section->label }}</h1>
        <div>
            <a href="{{ route('admin.manuals.value.create', $section) }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> Добавить
            </a>
            <a href="{{ route('admin.manuals.index') }}" class="btn btn-default btn-sm ml-1">
                <i class="fas fa-arrow-left"></i> Назад
            </a>
        </div>
    </div>
@stop

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Главная</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.manuals.index') }}">Справочники</a></li>
    <li class="breadcrumb-item active">{{ $section->label }}</li>
@stop

@section('content')
    @if(session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ session('success') }}
        </div>
    @endif

    @if($section->is_hierarchical)
        @include('admin.manuals.partials._hierarchical_list')
    @else
        <div class="card">
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>#</th><th>Значение</th><th>Порядок</th><th style="width:100px">Действия</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($items as $item)
                            <tr>
                                <td class="text-muted">{{ $item->id }}</td>
                                <td>{{ $item->value }}</td>
                                <td>{{ $item->sort_order }}</td>
                                <td>
                                    <a href="{{ route('admin.manuals.value.edit', [$section, $item]) }}"
                                       class="btn btn-xs btn-info"><i class="fas fa-edit"></i></a>
                                    <form action="{{ route('admin.manuals.value.destroy', [$section, $item]) }}"
                                          method="POST" class="d-inline" onsubmit="return confirm('Удалить?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-xs btn-danger"><i class="fas fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    Значений нет.
                                    <a href="{{ route('admin.manuals.value.create', $section) }}">Добавить первое</a>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@stop

@if($section->is_hierarchical)

@push('css')
<style>
.alpha-nav-wrap {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.alpha-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.alpha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #495057;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}
.alpha-btn:hover { border-color: #007bff; color: #007bff; background: #f0f6ff; }
.alpha-btn.active {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-color: #0056b3;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,123,255,.4);
    transform: translateY(-1px);
}
.alpha-btn[data-letter=""] { padding: 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.alpha-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.make-card .card-header:hover { background: #f8f9fa; }
</style>
@endpush

@push('js')
<script>
(function () {
    var $cards   = $('.make-card');
    var $btns    = $('.alpha-btn');
    var $counter = $('#visible-count');
    var $noRes   = $('#no-results');

    // Аккордеон: при разворачивании одной марки схлопываем остальные видимые
    $(document).on('expanded.lte.cardwidget', '.make-card', function () {
        var $opened = $(this);
        $cards.filter(':visible').each(function () {
            if (!$(this).is($opened) && !$(this).hasClass('collapsed-card')) {
                $(this).find('[data-card-widget="collapse"]').trigger('click');
            }
        });
    });

    // Алфавитный фильтр
    $btns.on('click', function () {
        var letter = $(this).data('letter');
        $btns.removeClass('active');
        $(this).addClass('active');

        // Схлопываем все открытые (без анимации)
        $cards.each(function () {
            if (!$(this).hasClass('collapsed-card')) {
                $(this).addClass('collapsed-card');
                $(this).find('.btn-tool i').removeClass('fa-minus').addClass('fa-plus');
                $(this).find('.card-body').hide();
            }
        });

        // Фильтруем по букве
        var visible = 0;
        $cards.each(function () {
            var show = !letter || $(this).data('letter') === letter;
            $(this).toggle(show);
            if (show) visible++;
        });

        $counter.text(visible);
        $noRes.toggle(visible === 0);
    });
})();
</script>
@endpush

@endif