@extends('layouts.app')
@vite(['resources/css/app.css', 'resources/js/app.js'])

@section('content')
<div style="clear:both;">&nbsp;</div>
<legend align="center"><h1>Mostrar Columnas de Opinión</h1></legend>
<div id="mensaje" style="display: none;"></div>
<div style="clear:both;">&nbsp;</div>

<table width="90%" align="center" cellspacing="0" cellpadding="9" border="1">
    <thead>
        <tr>
            <th><a href="#" class="boton_titulo">ID</a></th>
            <th>Fecha</th>
            <th><a href="#" class="boton_titulo">Título</a></th>
            <th><a href="#" class="boton_titulo">Autor</a></th>
            <th>Contenido</th>
            <th>Imagen</th>
            <th>Editar</th>
            <th>Borrar</th>
        </tr>
    </thead>
    <tbody>
        @foreach($columnas as $columna)
            <tr>
                <td>{{ $columna->id_colum }}</td>
                <td>{{ $columna->Fecha_colum }}</td>
                <td>{{ $columna->Titulo_colum }}</td>
                <td>{{ $columna->Autor_colum }}</td>
                <td><textarea cols="50" rows="10" readonly="readonly">{{ $columna->Contenido_colum }}</textarea></td>
                <td>
                    <img src="{{ asset('imagenes-columna/' . $columna->Imagen_colum) }}" height="50" alt="Imagen">
                </td>
                <td>
                    <a href="{{ route('columna.edit', $columna->id_colum) }}" class="boton">Editar</a>
                </td>
                <td>
                    <div class="delete boton" id="delete-{{ $columna->id_colum }}" onclick="borrarColumna({{ $columna->id_colum }})">Borrar</div>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

<script>
    // Función para borrar la columna
    function borrarColumna(id) {
        if (confirm('¿Estás seguro de que quieres borrar esta columna?')) {
            // Enviar una solicitud AJAX para borrar la columna
            fetch(`/columnas/${id}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('delete-' + id).closest('tr').remove();
                    alert('Columna eliminada correctamente');
                } else {
                    alert('Hubo un problema al eliminar la columna');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Hubo un error al eliminar la columna');
            });
        }
    }
</script>


@endsection