@extends('v2-cms::layouts.app', ['title' => 'Homepage — Seções'])

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1 class="h3 mb-0">
                <i class="bi bi-house-gear me-2"></i> Homepage — Seções
            </h1>
            <p class="text-muted mt-1 mb-0">
                Gerencie as seções da página inicial. Arraste para reordenar, clique em "Editar" para configurar cada seção.
            </p>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            @include('flash::message')
            @if($sections->isEmpty())
            <div class="text-center py-5">
                <i class="bi bi-layers fs-1 text-muted d-block mb-3"></i>
                <p class="text-muted">Nenhuma seção encontrada. Execute o seeder para criar as seções padrão.</p>
            </div>
            @else
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="sections-table" aria-label="Seções da homepage">
                    <thead>
                        <tr>
                            <th scope="col" style="width: 40px;"></th>
                            <th scope="col">Seção</th>
                            <th scope="col">Tipo</th>
                            <th scope="col">Fonte</th>
                            <th scope="col" style="width: 120px;">Ativo</th>
                            <th scope="col" style="width: 160px;">Ações</th>
                        </tr>
                    </thead>
                    <tbody id="sortable-sections">
                        @foreach($sections as $section)
                        <tr data-id="{{ $section->id }}">
                            <td class="handle text-center cursor-pointer">
                                <i class="bi bi-grip-vertical text-muted"></i>
                            </td>
                            <td>
                                <strong>{{ $section->section_key }}</strong>
                            </td>
                            <td>
                                <span class="badge bg-info">{{ $section->type }}</span>
                            </td>
                            <td>
                                @if($section->source_type === 'static')
                                    <span class="badge bg-secondary">Estático</span>
                                @else
                                    <span class="badge bg-success">{{ $section->source_type }}</span>
                                @endif
                            </td>
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input toggle-section" type="checkbox"
                                           data-id="{{ $section->id }}"
                                           {{ $section->is_active ? 'checked' : '' }}>
                                </div>
                            </td>
                            <td>
                                <a href="{{ route('v2.homepage.edit', $section->id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i> Editar
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .handle { cursor: grab; }
    .handle:active { cursor: grabbing; }
    .sortable-ghost { opacity: 0.4; }
    .sortable-chosen { background-color: #f8f9fa; }
</style>
@endpush

@push('scripts')
<script src="{{ asset('assets/vendor/sortablejs/Sortable.min.js') }}" defer></script>
<script>
(function() {
    // Sortable drag-and-drop reorder
    var el = document.getElementById('sortable-sections');
    if (el) {
        Sortable.create(el, {
            handle: '.handle',
            animation: 150,
            onEnd: function() {
                var order = [];
                document.querySelectorAll('#sortable-sections tr').forEach(function(tr) {
                    order.push(tr.dataset.id);
                });
                fetch('{{ route('v2.homepage.reorder') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ order: order })
                }).then(function(r) { return r.json(); }).then(function(data) {
                    if (data.success) {
                        // Optionally show a small indicator
                    }
                });
            }
        });
    }

    // Toggle active state
    document.querySelectorAll('.toggle-section').forEach(function(cb) {
        cb.addEventListener('change', function() {
            var id = this.dataset.id;
            fetch('{{ url('cms/homepage') }}/' + id + '/toggle', {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(function(r) { return r.json(); }).then(function(data) {
                if (!data.success) {
                    cb.checked = !cb.checked;
                }
            }).catch(function() {
                cb.checked = !cb.checked;
            });
        });
    });
})();
</script>
@endpush