@extends('layouts.kaiadmin.master')

@section('content')
<br>
<div class="card">
    <div class="card-header">
        <h1 class="card-title">Transparencia Presupuestaria</h1>
        <div class="card-tools">
            <button type="button" class="btn btn-primary" id="createItemButton">
                <i class="fas fa-plus"></i> Crear nuevo item
            </button>
        </div>
    </div>

    <div class="card-body">
        <!-- Mostrar mensajes de éxito con SweetAlert -->
        @if(session('success'))
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: '{{ session('success') }}',
                        showConfirmButton: true,
                        confirmButtonText: 'Aceptar',
                    });
                });
            </script>
        @endif

        @if(session('error'))
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: '{{ session('error') }}',
                        showConfirmButton: true,
                        confirmButtonText: 'Aceptar',
                    });
                });
            </script>
        @endif

        <!-- Lista de Items -->
        <div class="row">
            @forelse($items as $item)
                <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                    <div class="card item-card shadow-sm">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">{{ $item['title'] }}</h5>
                            <!-- Botones de acción -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="editItem({{ $item['id'] }})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger delete-item-btn" data-id="{{ $item['id'] }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="card-text">{{ Str::limit($item['description'], 100) }}</p>
                            <small class="text-muted">
                                Creado: {{ \Carbon\Carbon::parse($item['created_at'])->format('d/m/Y H:i') }}
                            </small>
                        </div>
                        <div class="card-footer">
                            <a href="{{ route('transparenciapresupuestaria.show', $item['id']) }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-eye"></i> Ver detalles
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-info text-center">
                        <i class="fas fa-info-circle"></i>
                        No hay items creados aún. <a href="#" id="createFirstItem">Crear el primer item</a>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</div>

<script>
// Modal para crear item
document.getElementById('createItemButton').addEventListener('click', showCreateModal);
document.getElementById('createFirstItem')?.addEventListener('click', showCreateModal);

function showCreateModal() {
    Swal.fire({
        title: 'Crear Nuevo Item',
        html: `
            <form id="createItemForm" action="{{ route('transparenciapresupuestaria.store') }}" method="POST">
                @csrf
                <div class="form-group mb-3">
                    <label for="title" class="form-label">Título</label>
                    <input type="text" class="form-control" id="title" name="title" 
                           placeholder="Ingrese el título del item" required maxlength="255">
                </div>
                <div class="form-group mb-3">
                    <label for="description" class="form-label">Descripción</label>
                    <textarea class="form-control" id="description" name="description" 
                              rows="3" placeholder="Ingrese la descripción del item" 
                              required maxlength="500"></textarea>
                </div>
            </form>
        `,
        width: '600px',
        confirmButtonText: 'Crear Item',
        showCancelButton: true,
        cancelButtonText: 'Cancelar',
        focusConfirm: false,
        preConfirm: () => {
            const title = document.getElementById('title').value;
            const description = document.getElementById('description').value;
            
            if (!title.trim()) {
                Swal.showValidationMessage('El título es requerido');
                return false;
            }
            
            if (!description.trim()) {
                Swal.showValidationMessage('La descripción es requerida');
                return false;
            }
            
            document.getElementById('createItemForm').submit();
        }
    });
}

// Función para editar item
function editItem(id) {
    window.location.href = "{{ route('transparenciapresupuestaria.edit', '') }}/" + id;
}

// Event listener para eliminar items
document.addEventListener('DOMContentLoaded', function() {
    const deleteButtons = document.querySelectorAll('.delete-item-btn');
    
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const itemId = this.getAttribute('data-id');
            
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción eliminará el item y todos sus archivos asociados. ¡No podrás revertir esto!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Crear y enviar formulario de eliminación
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = "{{ route('transparenciapresupuestaria.destroy', '') }}/" + itemId;
                    
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    
                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'DELETE';
                    
                    form.appendChild(csrfToken);
                    form.appendChild(methodField);
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });
});
</script>

<style>
.item-card {
    transition: transform 0.2s ease-in-out;
    border: 1px solid #dee2e6;
}

.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.item-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.btn-group .btn {
    border-radius: 0.25rem;
    margin-left: 2px;
}

.alert a {
    font-weight: bold;
    text-decoration: none;
}

.alert a:hover {
    text-decoration: underline;
}
</style>
@endsection

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