

<?php $__env->startSection('title', 'CRUD con Laravel 10'); ?>

<?php $__env->startSection('content_header'); ?>
    <h1>BLOG</h1>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<section class="content">
      <div class="row">
        <div class="col-md-3">
          <a href="compose.html" class="btn btn-primary btn-block mb-3">Compose</a>
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Folders</h3>

              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                  <i class="fas fa-minus"></i>
                </button>
              </div>
            </div>
            <div class="card-body p-0">
              <ul class="nav nav-pills flex-column">
                <li class="nav-item active">
                  <a href="#" class="nav-link">
                    <i class="fas fa-inbox"></i> Bandeja de entrada
                    <span class="badge bg-primary float-right">12</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    <i class="far fa-envelope"></i> Enviados
                  </a>
                </li>
                <li class="nav-item">
                  <a href="#" class="nav-link">
                    <i class="far fa-trash-alt"></i> Papelera
                  </a>
                </li>
              </ul>
            </div>
            <!-- /.card-body -->
          </div>
        </div>
        <!-- /.col -->
        <div class="col-md-9">
          <div class="card card-primary card-outline">
          <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Inbox</h3>
                    <div class="card-tools">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" placeholder="Search Mail">
                            <div class="input-group-append">
                                <div class="btn btn-primary">
                                    <i class="fas fa-search"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                <!-- Controles de la bandeja de entrada -->
                <div class="mailbox-controls">
                    <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i class="far fa-square"></i></button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-sm delete-selected-messages"><i class="far fa-trash-alt"></i></button>
                    </div>
                    <button type="button" class="btn btn-default btn-sm" id="refresh-messages-btn"><i class="fas fa-sync-alt"></i></button>
                </div>

                <!-- Contenedor de mensajes -->
                <div id="messages-container">
                    <?php
                    $chunks = $mensajes->chunk(10); // Divide los mensajes en grupos de 10
                    $totalPages = $chunks->count(); // Número total de páginas
                    ?>

                    <?php $__currentLoopData = $chunks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pageIndex => $chunk): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="table-responsive mailbox-messages page" id="page-<?php echo e($pageIndex + 1); ?>" style="display: <?php echo e($pageIndex == 0 ? 'block' : 'none'); ?>;">
                            <table class="table table-hover table-striped">
                                <tbody>
                                    <?php $__currentLoopData = $chunk; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $mensaje): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <tr>
                                            <td>
                                                <div class="icheck-primary">
                                                    <input type="checkbox" class="message-checkbox" value="<?php echo e($mensaje->id); ?>" id="check<?php echo e($loop->index); ?>">
                                                    <label for="check<?php echo e($loop->index); ?>"></label>
                                                </div>
                                            </td>
                                            <td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
                                            <td class="mailbox-name">
                                                <a href="<?php echo e(route('Mensajes.edit', $mensaje->id)); ?>"><?php echo e($mensaje->nombre); ?></a>
                                            </td>
                                            <td class="mailbox-subject"><?php echo e(Str::limit($mensaje->mensaje, 50, '...')); ?></td>
                                            <td class="mailbox-attachment"></td>
                                            <td class="mailbox-date"><?php echo e($mensaje->created_at->diffForHumans()); ?></td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </tbody>
                            </table>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> 
                </div>


                <!-- Formulario oculto para la eliminación masiva -->
                <form id="bulk-delete-form" action="<?php echo e(route('mensajes.destroyMultiple')); ?>" method="POST" style="display: none;">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('DELETE'); ?>
                    <input type="hidden" name="message_ids[]" value="">
                </form>
            </div>
            </div>
            <div class="card-footer p-0">
                    <div class="float-right">
                        <span id="pagination-info">1-<?php echo e($totalPages); ?></span>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-sm" id="prev-page" disabled>
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-sm" id="next-page">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('css'); ?>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap5.min.css">
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>

<!-- Script combinado para actualizar mensajes y eliminar mensajes seleccionados -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const refreshMessagesButton = document.getElementById('refresh-messages-btn');
    const messagesContainer = document.getElementById('messages-container');

    // Función para manejar la actualización de mensajes
    function handleRefreshClick() {
        console.log('Refresh button clicked'); // Para depuración
        fetch('<?php echo e(route('mensajes.refresh')); ?>', {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Actualiza el contenedor de mensajes con la nueva data
                messagesContainer.innerHTML = data.html;
                alert('Mensajes actualizados correctamente.');
            } else {
                alert('Hubo un error al actualizar los mensajes: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Hubo un error al actualizar los mensajes.');
        });
    }

    // Manejo del botón de eliminar mensajes seleccionados
    function handleDeleteSelectedMessages() {
        const selectedCheckboxes = document.querySelectorAll('.message-checkbox:checked');
        const form = document.getElementById('bulk-delete-form');
        const input = form.querySelector('input[name="message_ids[]"]');

        if (selectedCheckboxes.length > 0) {
            const ids = Array.from(selectedCheckboxes).map(checkbox => checkbox.value);
            input.value = ids.join(',');
            form.submit();
        } else {
            alert('Seleccione al menos un mensaje para eliminar.');
        }
    }

    // Asignar eventos a los botones
    if (refreshMessagesButton) {
        refreshMessagesButton.addEventListener('click', handleRefreshClick);
    }

    const deleteButton = document.querySelector('.delete-selected-messages');
    if (deleteButton) {
        deleteButton.addEventListener('click', handleDeleteSelectedMessages);
    }
});
</script>


<!-- Mensajes paginas-->
<script>
document.addEventListener('DOMContentLoaded', function () {
    var currentPage = 1;
    var totalPages = <?php echo e($totalPages); ?>;

    function updatePaginationInfo() {
        document.getElementById('pagination-info').innerText = currentPage + '-' + totalPages;
    }

    document.getElementById('prev-page').addEventListener('click', function () {
        if (currentPage > 1) {
            document.getElementById('page-' + currentPage).style.display = 'none';
            currentPage--;
            document.getElementById('page-' + currentPage).style.display = 'block';
            updatePaginationInfo();
            if (currentPage === 1) {
                document.getElementById('prev-page').setAttribute('disabled', true);
            }
            document.getElementById('next-page').removeAttribute('disabled');
        }
    });

    document.getElementById('next-page').addEventListener('click', function () {
        if (currentPage < totalPages) {
            document.getElementById('page-' + currentPage).style.display = 'none';
            currentPage++;
            document.getElementById('page-' + currentPage).style.display = 'block';
            updatePaginationInfo();
            if (currentPage === totalPages) {
                document.getElementById('next-page').setAttribute('disabled', true);
            }
            document.getElementById('prev-page').removeAttribute('disabled');
        }
    });

    updatePaginationInfo();
});
</script>

<script>
  document.querySelector('.checkbox-toggle').addEventListener('click', function() {
    var checkboxes = document.querySelectorAll('.mailbox-messages input[type="checkbox"]');
    var isChecked = this.classList.toggle('active');
    
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = isChecked;
    });

    // Cambiar el icono del botón
    if (isChecked) {
        this.innerHTML = '<i class="far fa-check-square"></i>';
    } else {
        this.innerHTML = '<i class="far fa-square"></i>';
    }
});

document.querySelector('.fa-trash-alt').parentElement.addEventListener('click', function() {
    var selectedMessages = [];
    var checkboxes = document.querySelectorAll('.mailbox-messages input[type="checkbox"]:checked');

    checkboxes.forEach(function(checkbox) {
        selectedMessages.push(checkbox.dataset.id); // Suponiendo que tienes un atributo data-id con el ID del mensaje
    });

    if (selectedMessages.length > 0) {
        if (confirm('¿Estás seguro de que quieres eliminar los mensajes seleccionados?')) {
            fetch('/Mensajes/delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ ids: selectedMessages })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Recargar la página o eliminar las filas de la tabla
                    location.reload();
                }
            });
        }
    } else {
        alert('No has seleccionado ningún mensaje.');
    }
});

</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('adminlte::page', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\laragon\www\laravel10crudx\resources\views/Mensajes/index.blade.php ENDPATH**/ ?>