sistema_funcionando_lastwar/gallery.php

<?php
require_once __DIR__ . '/includes/session_check.php';

$gallery_path = __DIR__ . '/galeria';
$files = array_diff(scandir($gallery_path), array('.', '..'));

require_once __DIR__ . '/templates/header.php';
?>

<style>
/* Estilos para que el formulario de subida sea responsive en móviles */
@media (max-width: 576px) {
    .upload-form .input-group {
        flex-direction: column;
        gap: 0.5rem; /* Espacio entre input y botón */
    }

    .upload-form .input-group .form-control,
    .upload-form .input-group .btn {
        width: 100%;
        border-radius: var(--bs-border-radius) !important;
    }

    /* Ajuste específico para el input de archivo para evitar que se recorte */
    .upload-form .input-group input[type="file"].form-control {
        height: auto; /* Permite que el alto se ajuste al contenido */
        padding: 0.75rem; /* Añade más espacio vertical */
    }
}
</style>
<div class="container-fluid">
    <h1 class="mt-4" data-translate="true">Galería de Imágenes</h1>

    <?php if (isset($_GET['success'])):
        $successMessages = [
            'upload' => '<span data-translate="true">Imagen subida con éxito.</span>',
            'deleted' => '<span data-translate="true">Imagen eliminada con éxito.</span>',
            'renamed' => '<span data-translate="true">Nombre de la imagen cambiado con éxito.</span>'
        ];
        $successKey = $_GET['success'];
        if (array_key_exists($successKey, $successMessages)):
            echo '<div class="alert alert-success">' . $successMessages[$successKey] . '</div>';
        endif;
    elseif (isset($_GET['error'])):
        $errorMessages = [
            'upload_failed' => '<span data-translate="true">Error al subir la imagen.</span>',
            'delete_failed' => '<span data-translate="true">Error al eliminar la imagen.</span>',
            'rename_failed' => '<span data-translate="true">Error al cambiar el nombre de la imagen.</span>',
            'invalid_file' => '<span data-translate="true">Archivo no válido o no encontrado.</span>',
            'not_found' => '<span data-translate="true">El archivo original no se encontró.</span>',
            'name_exists' => '<span data-translate="true">Ya existe un archivo con ese nombre.</span>',
            'empty_name' => '<span data-translate="true">El nuevo nombre no puede estar vacío.</span>'
        ];
        $errorKey = $_GET['error'];
        if (array_key_exists($errorKey, $errorMessages)):
            echo '<div class="alert alert-danger">' . $errorMessages[$errorKey] . '</div>';
        endif;
    endif; ?>

    <!-- Upload Form -->
    <div class="card shadow-sm mb-4">
        <div class="card-header"><h5 class="mb-0" data-translate="true">Subir Nueva Imagen</h5></div>
        <div class="card-body upload-form">
            <form action="upload.php" method="post" enctype="multipart/form-data">
                <div class="input-group">
                    <input type="file" class="form-control" name="imageFile" id="imageFile" required data-translate-title="true" title="Seleccionar archivo">
                    <button class="btn btn-primary" type="submit" data-translate="true">Subir Imagen</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Image Grid -->
    <div class="row">
        <?php if (empty($files)): ?>
            <div class="col-12"><p class="text-center text-muted" data-translate="true">No hay imágenes en la galería.</p></div>
        <?php else: ?>
            <?php foreach ($files as $file): if (is_file($gallery_path . '/' . $file)):
                ?>
                <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <div class="card h-100">
                        <img src="<?php echo site_url('galeria/' . $file); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($file); ?>" style="height: 200px; object-fit: cover;">
                        <div class="card-body">
                            <p class="card-text small text-truncate" title="<?php echo htmlspecialchars($file); ?>"><?php echo htmlspecialchars($file); ?></p>
                        </div>
                        <div class="card-footer text-center">
                            <button type="button" class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#renameModal" data-filename="<?php echo htmlspecialchars($file); ?>" data-translate="true">Renombrar</button>
                            <form action="delete_image.php" method="POST" class="d-inline" onsubmit="return confirm(this.querySelector('[data-translate-confirm]').getAttribute('data-translate-confirm'));">
                                <input type="hidden" name="filename" value="<?php echo htmlspecialchars($file); ?>">
                                <input type="hidden" name="confirm_message" value="¿Estás seguro de que quieres eliminar esta imagen?" data-translate-confirm="¿Estás seguro de que quieres eliminar esta imagen?">
                                <button type="submit" class="btn btn-sm btn-danger" data-translate="true">Borrar</button>
                            </form>
                        </div>
                    </div>
                </div>
            <?php endif; endforeach; ?>
        <?php endif; ?>
    </div>
</div>

<!-- Rename Image Modal -->
<div class="modal fade" id="renameModal" tabindex="-1" aria-labelledby="renameModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="renameModalLabel" data-translate="true">Cambiar Nombre de Imagen</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" data-translate-aria-label="true"></button>
      </div>
      <form action="rename_image.php" method="POST">
        <div class="modal-body">
            <input type="hidden" name="old_filename" id="modalOldFilename">
            <div class="mb-3">
                <label for="new_filename" class="form-label" data-translate="true">Nuevo nombre (sin extensión):</label>
                <input type="text" class="form-control" id="new_filename" name="new_filename" required data-translate-placeholder="true">
            </div>
            <p class="small text-muted" data-translate="true">La extensión del archivo se conservará.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-translate="true">Cerrar</button>
          <button type="submit" class="btn btn-primary" data-translate="true">Guardar Cambios</button>
        </div>
      </form>
    </div>
  </div>
</div>

<?php require_once __DIR__ . '/templates/footer.php'; ?>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var renameModal = document.getElementById('renameModal');
    renameModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var filename = button.getAttribute('data-filename');
        var modalOldFilenameInput = renameModal.querySelector('#modalOldFilename');
        var modalNewFilenameInput = renameModal.querySelector('#new_filename');
        
        modalOldFilenameInput.value = filename;
        // Pre-fill with the name without extension
        modalNewFilenameInput.value = filename.substring(0, filename.lastIndexOf('.') || filename.length);
    });
});
</script>