<div class="content-wrapper">
    <section class="content-header">
        <h1>
            Espace
            <small>commercial</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
            <li class="active">Espace commercial</li>
        </ol>
    </section>
    <section class="content">
        <div class="card shadow-lg border-0 rounded">
            <div class="row g-0">
                <!-- Left: Product Image -->
                <div class="col-md-6 text-center">
                    <img src="<?= base_url('assets/images/product_image/' . ($products['image'] ?? 'default.png')) ?>"
                        alt="<?= esc($products['name'] ?? '') ?>"
                        class="img-fluid rounded"
                        style="width: 100%; height: 100%; object-fit: cover;">
                </div>

                <!-- Right: Product Details -->
                <div class="col-md-6 p-4">
                    <h2 class="text-dark"><?= esc($products['name'] ?? '') ?></h2>
                    <h4 class="text-success fw-bold">
                        <?= number_format((float) ($products['price'] ?? 0), 0, ',', ' ') ?> MGA
                    </h4>
                    <p class="text-muted">
                        En stock: <strong><?= esc($products['qty'] ?? 0) ?></strong>
                    </p>
                    <p class="text-secondary"><?= esc($products['description'] ?? '') ?></p>

                    <!-- Buttons -->
                    <div class="d-flex mt-4">
                        <form action="<?= base_url('ventes/moreimage/') . ($products['id'] ?? 0) ?>" enctype="multipart/form-data" method="post">
                            <div class="form-group">
                                <label for="image"><b>Ajouter plus d'images</b></label>
                                <input type="file" required name="images[]" multiple accept="image/*" id="image" class="form-control">
                            </div>
                            <button type="submit" class="btn btn-primary me-2">
                                Mettre à jour
                            </button>
                        </form>

                        <a href="<?= base_url('/products') ?>" class="btn btn-outline-secondary">
                            <i class="fa fa-arrow-left"></i> Retour
                        </a>
                    </div>
                </div>
            </div>
            <h3>Galleries</h3>
            <div class="row">
                <?php if (!empty($galleries)) : ?>
                    <?php foreach ($galleries as $key => $value) : ?>
                        <div class="col-md-3 col-xs-12 col-sm-6 mb-3" style="margin-bottom: 1%;">
                            <div class="card shadow-lg border-0 rounded">
                                <div class="card-header bg-success text-white text-center p-0.5">
                                    <!-- Clickable Image -->
                                    <a href="#" data-toggle="modal" data-target="#imageModal<?= $key ?>">
                                        <img src="<?= base_url('assets/images/product_image/' . ($value['images'] ?? 'default.png')) ?>"
                                            alt="<?= esc($value['images'] ?? '') ?>"
                                            class="img-fluid img-thumbnail rounded"
                                            style="width: 100%; height: 250px; object-fit: cover;">
                                    </a>
                                </div>

                                <div class="card-footer" style="padding: 1%;">
                                    <form action="<?= base_url('ventes/moreimage/supp/') . ($value['id'] ?? 0) ?>" method="post">
                                        <button class="btn btn-danger">Supprimer</button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Bootstrap Modal for Each Image -->
                        <div class="modal fade" id="imageModal<?= $key ?>" tabindex="-1" aria-labelledby="imageModalLabel<?= $key ?>" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="imageModalLabel<?= $key ?>">Visualisation d'image</h5>
                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                    <div class="modal-body text-center" style="width: 100%;">
                                        <img src="<?= base_url('assets/images/product_image/' . ($value['images'] ?? 'default.png')) ?>"
                                            alt="<?= esc($value['images'] ?? '') ?>"
                                            class="img-fluid rounded"
                                            style="width: 100%; height: 100%; object-fit: cover;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else : ?>
                    <p class="text-muted p-3">Aucune image disponible dans la galerie.</p>
                <?php endif; ?>
            </div>
        </div>
    </section>
</div>

<script>
    $("#espaceMainMenu").addClass('active');
</script>
