@extends('admin.layout')

@section('title', 'Week in a Glance — Sections')
@section('page_heading', 'Week in a Glance — Sections')

@section('content')
<div class="row mb-3">
    <div class="col">
        <a href="{{ route('admin.week-sections.create') }}" class="btn btn-primary">
            <i data-feather="plus-circle" style="width:15px;height:15px;"></i> Add Section
        </a>
        <a href="{{ route('site.games.week') }}" target="_blank" class="btn btn-outline-secondary ms-2">
            <i data-feather="eye" style="width:15px;height:15px;"></i> View Page
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        @if(session('status'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('status') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($sections->isEmpty())
            <p class="text-muted">No sections yet. <a href="{{ route('admin.week-sections.create') }}">Add the first one.</a></p>
        @else
            <p class="text-muted small mb-3">
                <i data-feather="move" style="width:13px;height:13px;"></i>
                Drag rows to reorder how sections appear on the page.
            </p>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th style="width:30px;"></th>
                            <th>#</th>
                            <th>Title</th>
                            <th>Photos</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="section-table-body">
                        @foreach($sections as $section)
                            <tr data-id="{{ $section->id }}" style="cursor:grab;">
                                <td>
                                    <i data-feather="menu" class="drag-row-handle" style="width:16px;height:16px;color:#adb5bd;"></i>
                                </td>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $section->title ?: '(Untitled)' }}</td>
                                <td>
                                    <span class="badge bg-secondary">{{ $section->images()->count() }}</span>
                                </td>
                                <td class="text-end">
                                    <a href="{{ route('admin.week-sections.edit', $section) }}"
                                       class="btn btn-sm btn-outline-primary me-1">
                                        <i data-feather="edit-2" style="width:13px;height:13px;"></i> Edit
                                    </a>
                                    <button type="button"
                                            class="btn btn-sm btn-outline-danger btn-delete-row"
                                            data-url="{{ route('admin.week-sections.destroy', $section) }}"
                                            data-label="section &ldquo;{{ $section->title ?: 'Untitled' }}&rdquo;">
                                        <i data-feather="trash-2" style="width:13px;height:13px;"></i> Delete
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
(function ($) {
    var REORDER_URL = '{{ route('admin.week-sections.reorder') }}';

    // Row delete
    $(document).on('click', '.btn-delete-row', function () {
        var url   = $(this).data('url');
        var label = $(this).data('label') || 'this section';
        var $row  = $(this).closest('tr');
        confirmDelete(url, $row, label);
    });

    // Row drag-to-reorder using SortableJS
    if (typeof Sortable !== 'undefined') {
        var el = document.getElementById('section-table-body');
        if (el) {
            Sortable.create(el, {
                animation: 150,
                handle: '.drag-row-handle',
                onEnd: function () {
                    var items = [];
                    $('#section-table-body tr[data-id]').each(function (i) {
                        items.push({ id: parseInt($(this).data('id')), sort_order: i });
                    });
                    $.ajax({
                        url:  REORDER_URL,
                        type: 'POST',
                        data: JSON.stringify({ items: items }),
                        contentType: 'application/json',
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: function () { showToast('Order saved.', 'success'); },
                        error:   function () { showToast('Could not save order.', 'error'); },
                    });
                },
            });
        }
    }
})(jQuery);
</script>
@endpush