<?php
/**
 * Gestion des images d'une galerie (Tabler).
 * Ajout glisser-déposer multiple, remplacement par drop, réordonnancement, barre de progression bloquante.
 * @var array<string,mixed> $gallery
 * @var list<array<string,mixed>> $images
 * @var array{lw:int,lh:int,pw:int,ph:int} $minDims
 * @var ?string $flash
 * @var list<string> $errors
 */

use App\Core\View;

$gid = (int) $gallery['id'];
?>
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="h2 m-0">Images &mdash; <?= e($gallery['title']) ?></h2>
    <a class="btn" href="<?= e(base_url('admin/galleries')) ?>"><i class="ti ti-arrow-left me-1"></i>Galeries</a>
</div>

<?php if (!empty($errors)): ?>
    <div class="alert alert-danger"><?php foreach ($errors as $er): ?><div><?= e($er) ?></div><?php endforeach; ?></div>
<?php endif; ?>

<div id="addDropzone" class="add-dropzone mb-3" data-upload-url="<?= e(base_url('admin/galleries/' . $gid . '/images')) ?>">
    <input type="file" class="d-none" accept="image/jpeg,image/png" multiple>
    <i class="ti ti-cloud-upload add-dropzone-icon"></i>
    <div class="mt-1"><strong>Glissez vos images ici</strong> ou <span class="text-primary">cliquez pour parcourir</span></div>
    <div class="text-secondary small mt-1">
        JPEG / PNG &middot; jusqu'à 30&nbsp;Mo &middot;
        min. <?= (int) $minDims['lw'] ?>&times;<?= (int) $minDims['lh'] ?> (paysage) / <?= (int) $minDims['pw'] ?>&times;<?= (int) $minDims['ph'] ?> (portrait)
    </div>
</div>

<p class="text-secondary small mb-2" id="reorderHint"<?= empty($images) ? ' style="display:none;"' : '' ?>>
    <i class="ti ti-info-circle me-1"></i>Glissez la poignée d'une vignette pour réordonner &middot; déposez un fichier sur une image pour la remplacer.
</p>

<div class="image-grid" data-sortable="images" data-reorder-url="<?= e(base_url('admin/galleries/' . $gid . '/images/reorder')) ?>">
    <?php foreach ($images as $img): ?>
        <?= View::render('admin/images/_card', ['img' => $img, 'gid' => $gid], null) ?>
    <?php endforeach; ?>
</div>
<div id="emptyImages" class="card<?= empty($images) ? '' : ' d-none' ?>">
    <div class="card-body text-secondary">Aucune image pour le moment. Ajoutez-en ci-dessus.</div>
</div>

<!-- Overlay de progression (bloquant) -->
<div id="uploadOverlay" class="upload-overlay">
    <div class="upload-overlay-box">
        <div class="spinner-border text-primary mb-3" role="status"></div>
        <h3 class="mb-3">Téléversement en cours…</h3>
        <div class="progress" style="height: 18px;">
            <div id="uploadBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
        </div>
        <p id="uploadText" class="mt-2 mb-0 text-secondary small">Préparation…</p>
    </div>
</div>

<!-- Modale des échecs (affichée à la fin) -->
<div class="modal modal-blur fade" id="uploadErrorModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title"><i class="ti ti-alert-triangle text-danger me-2"></i>Fichiers non traités</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p class="text-secondary">Ces fichiers n'ont pas pu être ajoutés&nbsp;:</p>
                <ul id="uploadErrorList" class="list-unstyled mb-0"></ul>
            </div>
            <div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Fermer</button></div>
        </div>
    </div>
</div>
