@extends('layouts.admin')

@section('title', 'Page Sections')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="h3 mb-1 text-gray-800 fw-bold">Page Sections</h2>
        <p class="text-muted mb-0">Manage homepage section order and visibility</p>
    </div>
</div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

<div class="card shadow mb-4 border-0">
    <div class="card-header py-3 bg-white">
        <h6 class="m-0 font-weight-bold text-primary">Manage Homepage Sections</h6>
    </div>
        <div class="card-body">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Drag and drop</strong> to reorder sections. Use the toggle switches to show/hide sections on the homepage.
            </div>

            <div id="sortable-sections" class="list-group">
                @foreach($sections as $section)
                <div class="list-group-item d-flex align-items-center justify-content-between" data-id="{{ $section->id }}">
                    <div class="d-flex align-items-center flex-grow-1">
                        <i class="fas fa-grip-vertical text-muted me-3" style="cursor: grab;"></i>
                        <div class="flex-grow-1">
                            <h6 class="mb-1">{{ $section->section_name }}</h6>
                            <small class="text-muted">
                                <strong>Title:</strong> {{ $section->title ?? 'Not set' }} |
                                <strong>Key:</strong> {{ $section->section_key }}
                            </small>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <div class="form-check form-switch">
                            <input
                                class="form-check-input toggle-visibility"
                                type="checkbox"
                                data-id="{{ $section->id }}"
                                {{ $section->is_visible ? 'checked' : '' }}
                            >
                            <label class="form-check-label">
                                <span class="visibility-label">{{ $section->is_visible ? 'Visible' : 'Hidden' }}</span>
                            </label>
                        </div>
                        <a href="{{ route('admin.sections.edit', $section->id) }}" class="btn btn-sm btn-primary">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                    </div>
                </div>
                @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Sortable
    const sortableList = document.getElementById('sortable-sections');
    const sortable = new Sortable(sortableList, {
        animation: 150,
        handle: '.fa-grip-vertical',
        onEnd: function() {
            updateOrder();
        }
    });

    // Update order via AJAX
    function updateOrder() {
        const items = sortableList.querySelectorAll('.list-group-item');
        const sections = [];

        items.forEach((item, index) => {
            sections.push({
                id: item.dataset.id,
                order: index + 1
            });
        });

        fetch('{{ route('admin.sections.reorder') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ sections: sections })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('Order updated successfully!', 'success');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Failed to update order', 'error');
        });
    }

    // Toggle visibility
    document.querySelectorAll('.toggle-visibility').forEach(toggle => {
        toggle.addEventListener('change', function() {
            const sectionId = this.dataset.id;
            const label = this.closest('.form-check').querySelector('.visibility-label');

            fetch(`/admin/sections/${sectionId}/toggle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    label.textContent = data.is_visible ? 'Visible' : 'Hidden';
                    showToast(data.message, 'success');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                this.checked = !this.checked;
                showToast('Failed to update visibility', 'error');
            });
        });
    });

    // Toast notification helper
    function showToast(message, type) {
        // Using SweetAlert2 if available
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: type,
                title: message,
                showConfirmButton: false,
                timer: 3000
            });
        } else {
            alert(message);
        }
    }
});
</script>
@endpush
@endsection