<?php include 'views/header.php';
$db = new DBconnection();
$parques = $db->connect(); ?>

<div class="container-div">
    <h2>Banners</h2>
    <p>En este catálogo puedes ver, editar y eliminar Banners.</p>
    <div class="project-actions">
        <button class="btn btn-add" data-bs-toggle="modal" data-bs-target="#bannersModal">Agregar Banner</button>
    </div>

    <div class="list-group-header">
        <div class="row Banner-table">
            <div class="col-4"><strong>Banner</strong></div>
            <div class="col-2"><strong>Acciones</strong></div>
        </div>
    </div>

    <ul id="sortableBanners" class="list-group">
    </ul>
</div>

<div class="modal fade" id="bannersModal" tabindex="-1" aria-labelledby="bannersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bannersModalLabel">Agregar Banner</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="bannerForm" class="dropzone" enctype="multipart/form-data">
                    <input type="hidden" id="id" name="id">

                    <div class="mb-3">
                        <div id="currentImageContainer" class="mb-3" style="display: none;">
                            <label for="currentImage" class="form-label">Imagen actual</label>
                            <img id="currentImage" src="" alt="Imagen actual" style="width: 100%; max-width: 300px; height: auto;">
                        </div>

                        <div class="dz-message">
                            Arrastra y suelta una imagen aquí o haz clic para seleccionar
                        </div>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="submitBanner">Guardar</button>
                </form>
            </div>
        </div>
    </div>
</div>
<?php include 'views/footer.php'; ?>