@extends('layouts.kaiadmin.master')

@section('template_title')
Acceso Información Pública
@endsection

@section('content')
<div class="container-fluid px-4 mt-4">

    {{-- Encabezado --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold mb-0">Acceso a la Información Pública</h3>
            <small class="text-muted">
                Gestión de documentos e información disponible al ciudadano
            </small>
        </div>

        <button class="btn btn-primary" id="createItemButton">
            <i class="fas fa-plus me-1"></i> Nuevo Item
        </button>
    </div>

    {{-- Lista de Items --}}
    <div class="row">
        @forelse($items as $item)
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-4">
                <div class="card item-card h-100 shadow-sm">

                    <div class="card-header d-flex justify-content-between align-items-start">
                        <h6 class="fw-semibold mb-0 text-truncate" title="{{ $item['title'] }}">
                            {{ $item['title'] }}
                        </h6>

                        <div class="dropdown">
                            <button class="btn btn-sm btn-light" data-bs-toggle="dropdown">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{{ route('accesoinformacion.show', $item['id']) }}">
                                        <i class="fas fa-eye me-2 text-primary"></i> Ver
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0)" onclick="editItem({{ $item['id'] }})">
                                        <i class="fas fa-edit me-2 text-warning"></i> Editar
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item text-danger delete-item-btn" data-id="{{ $item['id'] }}">
                                        <i class="fas fa-trash me-2"></i> Eliminar
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="card-body">
                        <p class="card-text text-muted small">
                            {{ Str::limit($item['description'], 120) }}
                        </p>
                    </div>

                    <div class="card-footer bg-white border-top small text-muted d-flex justify-content-between align-items-center">
                        <span>
                            <i class="fas fa-calendar-alt me-1"></i>
                            {{ \Carbon\Carbon::parse($item['created_at'])->format('d/m/Y') }}
                        </span>

                        <a href="{{ route('accesoinformacion.show', $item['id']) }}" class="btn btn-outline-primary btn-sm">
                            Ver
                        </a>
                    </div>

                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info text-center py-4">
                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                    <p class="mb-2">No hay información publicada aún.</p>
                    <a href="#" id="createFirstItem" class="fw-bold">
                        Crear el primer item
                    </a>
                </div>
            </div>
        @endforelse
    </div>

</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

{{-- Alertas --}}
@if(session('success'))
<script>
Swal.fire({
    icon: 'success',
    title: 'Operación exitosa',
    text: @json(session('success')),
});
</script>
@endif

@if(session('error'))
<script>
Swal.fire({
    icon: 'error',
    title: 'Error',
    text: @json(session('error')),
});
</script>
@endif

<script>
// Abrir modal crear
document.getElementById('createItemButton').addEventListener('click', showCreateModal);
document.getElementById('createFirstItem')?.addEventListener('click', showCreateModal);

function showCreateModal() {
    Swal.fire({
        title: 'Nuevo Item',
        html: `
            <form id="createItemForm" action="{{ route('accesoinformacion.store') }}" method="POST">
                @csrf
                <div class="mb-3 text-start">
                    <label class="form-label">Título</label>
                    <input type="text" name="title" id="title" class="form-control" required>
                </div>
                <div class="mb-3 text-start">
                    <label class="form-label">Descripción</label>
                    <textarea name="description" id="description" class="form-control" rows="3" required></textarea>
                </div>
            </form>
        `,
        confirmButtonText: 'Guardar',
        showCancelButton: true,
        cancelButtonText: 'Cancelar',
        focusConfirm: false,
        preConfirm: () => {
            const title = document.getElementById('title').value.trim();
            const desc = document.getElementById('description').value.trim();

            if (!title || !desc) {
                Swal.showValidationMessage('Todos los campos son obligatorios');
                return false;
            }

            document.getElementById('createItemForm').submit();
        }
    });
}

// Editar
function editItem(id) {
    const url = "{{ route('accesoinformacion.edit', ':id') }}".replace(':id', id);
    window.location.href = url;
}

// Eliminar
document.querySelectorAll('.delete-item-btn').forEach(btn => {
    btn.addEventListener('click', function () {
        const id = this.dataset.id;

        Swal.fire({
            title: '¿Eliminar item?',
            text: 'Se eliminará también toda la documentación asociada.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Eliminar',
            cancelButtonText: 'Cancelar'
        }).then(result => {
            if (result.isConfirmed) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('accesoinformacion.destroy', ':id') }}".replace(':id', id);

                form.innerHTML = `
                    @csrf
                    <input type="hidden" name="_method" value="DELETE">
                `;

                document.body.appendChild(form);
                form.submit();
            }
        });
    });
});
</script>
@endsection

@section('css')
<style>
.item-card {
    transition: all 0.2s ease-in-out;
    border: 1px solid #e3e6f0;
}

.item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.dropdown-menu {
    font-size: 0.875rem;
}
</style>
@endsection