@php
    /** @var \Illuminate\Pagination\LengthAwarePaginator $milestones */
    $pageTitle = 'Marcos Históricos';
    $searchTerm = request('search', '');
@endphp

@extends('v2-cms::layouts.app', ['title' => $pageTitle])

@section('page-breadcrumbs')
    @include('v2-cms::partials.breadcrumb', ['items' => [
        ['label' => 'Institucional'],
        ['label' => 'História'],
    ]])
@endsection

@section('page-actions')
    <a href="{{ route('v2.historia.portal.index') }}" target="_blank" class="btn btn-outline-secondary btn-sm" title="Abrir página pública em nova aba">
        <i class="bi bi-box-arrow-up-right me-1"></i> Ver página
    </a>
    @include('v2-cms::partials.action-create', [
        'route' => route('v2.historia.cms.milestones.create'),
        'label' => 'Novo Marco'
    ])
@endsection

@section('content')

    <p class="text-muted mb-3">{{ $milestones->total() }} registro(s)</p>

    @component('v2-cms::partials.filter-card', [
        'searchPlaceholder' => 'Buscar por título ou período...',
        'searchValue'       => $searchTerm,
        'action'            => route('v2.historia.cms.milestones.index'),
    ])
    @endcomponent

    @if($milestones->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle" aria-label="Linhas do tempo">
                <thead class="table-light">
                    <tr>
                        <th scope="col" style="width: 60px;">Imagem</th>
                        <th scope="col">Período</th>
                        <th scope="col">Título</th>
                        <th scope="col" style="width: 130px;">Ordem</th>
                        <th scope="col" style="width: 190px;">Ações</th>
                    </tr>
                </thead>
                <tbody id="milestones-tbody">
                    @foreach($milestones as $milestone)
                        <tr data-id="{{ $milestone->id }}">
                            <td>
                                @if($milestone->image_id)
                                    <span class="text-muted"><i class="bi bi-image" style="font-size: 1.3rem;"></i></span>
                                @else
                                    <span class="text-muted"><i class="bi bi-file-image" style="font-size: 1.3rem;"></i></span>
                                @endif
                            </td>
                            <td><span class="badge bg-primary">{{ $milestone->period }}</span></td>
                            <td>
                                <a href="{{ route('v2.historia.cms.milestones.edit', ['id' => $milestone->id]) }}"
                                   class="text-decoration-none fw-medium">
                                    {{ $milestone->title }}
                                </a>
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <span class="fw-semibold milestone-order me-1">{{ $milestone->sort_order }}</span>
                                    <button type="button"
                                            class="btn btn-outline-secondary btn-sm btn-move-up px-2"
                                            title="Subir ordem"
                                            {{ $loop->first ? 'disabled' : '' }}>
                                        <i class="bi bi-chevron-up"></i>
                                    </button>
                                    <button type="button"
                                            class="btn btn-outline-secondary btn-sm btn-move-down px-2"
                                            title="Descer ordem"
                                            {{ $loop->last ? 'disabled' : '' }}>
                                        <i class="bi bi-chevron-down"></i>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex gap-1 align-items-center">
                                    <button type="button"
                                            class="btn btn-sm {{ $milestone->is_active ? 'btn-outline-success' : 'btn-outline-secondary' }} btn-toggle-active"
                                            data-id="{{ $milestone->id }}"
                                            data-active="{{ $milestone->is_active ? '1' : '0' }}"
                                            title="{{ $milestone->is_active ? 'Desativar' : 'Ativar' }}">
                                        <i class="bi {{ $milestone->is_active ? 'bi-toggle-on' : 'bi-toggle-off' }}"></i>
                                    </button>
                                    <a href="{{ route('v2.historia.cms.milestones.edit', ['id' => $milestone->id]) }}"
                                       class="btn btn-sm btn-outline-primary" title="Editar">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    @php $formId = 'destroy-milestone-' . $milestone->id; @endphp
                                    <form action="{{ route('v2.historia.cms.milestones.destroy', ['id' => $milestone->id]) }}"
                                          method="POST" class="d-inline" id="{{ $formId }}"
                                          onsubmit="return confirm('Tem certeza que deseja realizar esta ação?')">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                data-confirm-modal
                                                data-confirm-title="Arquivar Marco"
                                                data-confirm-body="Deseja arquivar &quot;{{ $milestone->title }}&quot;?"
                                                data-confirm-btn-text="Arquivar"
                                                data-confirm-btn-class="btn-danger"
                                                data-confirm-form-id="{{ $formId }}"
                                                title="Arquivar">
                                            <i class="bi bi-archive"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($milestones->hasPages())
            <div class="d-flex justify-content-center mt-4">
                {{ $milestones->appends(request()->except('page'))->links('v2-cms::partials.pagination') }}
            </div>
        @endif
    @else
        <div class="text-center py-5">
            <i class="bi bi-clock-history display-3 text-muted d-block mb-3"></i>
            <h2 class="h5 text-muted">Nenhum marco histórico encontrado</h2>
            @if(!empty($searchTerm))
                <p class="text-muted">Tente ajustar a busca.</p>
                <a href="{{ route('v2.historia.cms.milestones.index') }}" class="btn btn-outline-primary">
                    <i class="bi bi-x-circle"></i> Limpar Filtros
                </a>
            @else
                <p class="text-muted">Crie o primeiro marco histórico.</p>
            @endif
        </div>
    @endif

    @include('v2-cms::partials._confirm-modal')
@endsection

@push('js')
<script>
$(document).ready(function() {
    var reorderUrl = '{{ route('v2.historia.cms.milestones.reorder') }}';
    var csrfToken = '{{ csrf_token() }}';

    function buildToggleUrl(id) {
        return '{{ route('v2.historia.cms.milestones.toggle', ['id' => '__ID__']) }}'.replace('__ID__', id);
    }

    function updateOrder() {
        var ids = [];
        $('#milestones-tbody tr').each(function() {
            ids.push($(this).data('id'));
        });

        $.ajax({
            url: reorderUrl,
            method: 'POST',
            data: {
                _token: csrfToken,
                ids: ids
            },
            success: function() {
                location.reload();
            },
            error: function() {
                alert('Erro ao reordenar. Tente novamente.');
                location.reload();
            }
        });
    }

    $(document).on('click', '.btn-move-up', function() {
        var $row = $(this).closest('tr');
        var $prev = $row.prev('tr');
        if ($prev.length === 0) return;
        $prev.insertAfter($row);
        updateOrder();
    });

    $(document).on('click', '.btn-move-down', function() {
        var $row = $(this).closest('tr');
        var $next = $row.next('tr');
        if ($next.length === 0) return;
        $next.insertBefore($row);
        updateOrder();
    });

    $(document).on('click', '.btn-toggle-active', function() {
        var $btn = $(this);
        var id = $btn.data('id');

        $.ajax({
            url: buildToggleUrl(id),
            method: 'POST',
            data: {
                _token: csrfToken
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                }
            },
            error: function() {
                alert('Erro ao alterar status. Tente novamente.');
            }
        });
    });
});
</script>
@endpush