<form method="POST" action="{{ route('ch-admin.appearance.homepage.update') }}" id="homepage-form">
    @csrf

    <p class="c-grey-600 mB-20">
        Drag sections to reorder them. Toggle the switch to show or hide each section on the homepage.
    </p>

    <div id="sections-list">
        @foreach($sections as $i => $section)
        <div class="bgc-white bd bdrs-3 p-15 mB-10 d-flex ai-c" data-slug="{{ $section['slug'] }}" style="cursor: grab; gap: 12px;">

            {{-- Hidden inputs carry order + slug --}}
            <input type="hidden" name="sections[{{ $i }}][slug]"       value="{{ $section['slug'] }}">
            <input type="hidden" name="sections[{{ $i }}][sort_order]" value="{{ $i + 1 }}" class="js-sort-order">

            {{-- Drag handle --}}
            <span class="ti-menu c-grey-600 sortable-handle" style="cursor: grab; font-size: 18px;"></span>

            {{-- Icon --}}
            <span class="ti-{{ $section['icon'] === 'hero' ? 'home' : ($section['icon'] === 'inventory_2' ? 'package' : 'bookmark') }} c-blue-500" style="font-size: 20px;"></span>

            {{-- Label --}}
            <div class="flex-grow">
                <strong class="c-grey-900">{{ $section['label'] }}</strong>
                @if(isset($section['config']['count']))
                <div class="d-flex ai-c mT-5" style="gap: 8px;">
                    <label class="c-grey-600" style="font-size: 12px; white-space: nowrap;" for="count_{{ $section['slug'] }}">Items shown:</label>
                    <input
                        type="number"
                        id="count_{{ $section['slug'] }}"
                        name="sections[{{ $i }}][config][count]"
                        value="{{ $section['config']['count'] }}"
                        min="1" max="24"
                        class="form-control form-control-sm"
                        style="width: 70px;">
                </div>
                @endif
            </div>

            {{-- Visibility toggle --}}
            <div class="d-flex ai-c" style="gap: 8px;">
                <label class="c-grey-600" style="font-size: 12px;">Visible</label>
                <div class="form-check form-switch mb-0">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        name="sections[{{ $i }}][is_visible]"
                        id="visible_{{ $section['slug'] }}"
                        value="1"
                        {{ $section['is_visible'] ? 'checked' : '' }}>
                </div>
            </div>

        </div>
        @endforeach
    </div>

    <div class="mT-20">
        <button type="submit" class="btn btn-primary">Save Homepage</button>
    </div>
</form>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
(function () {
    var list = document.getElementById('sections-list');

    Sortable.create(list, {
        handle: '.sortable-handle',
        animation: 150,
        onEnd: function () {
            // Re-index names and sort_order inputs after drag
            var items = list.querySelectorAll('[data-slug]');
            items.forEach(function (item, i) {
                item.querySelectorAll('input[name]').forEach(function (input) {
                    input.name = input.name.replace(/sections\[\d+\]/, 'sections[' + i + ']');
                });
                var orderInput = item.querySelector('.js-sort-order');
                if (orderInput) orderInput.value = i + 1;
            });
        }
    });
}());
</script>
