<div class="row">

    <!-- =========================
     * PRODUCT BASIC INFO
     * ========================= -->
    <div class="col-md-6 mb-3">
        <label><?= __('products.title', 'Product Title') ?></label>
        <input type="text" name="title" class="form-control" value="<?= $item['title'] ?? '' ?>" required>
    </div>

    <div class="col-md-6 mb-3">
        <label><?= __('products.slug', 'Slug') ?></label>
        <input type="text" name="slug" class="form-control" value="<?= $item['slug'] ?? '' ?>" required>
    </div>

    <div class="col-md-12 mb-3">
        <label><?= __('products.short_description', 'Short Description') ?></label>
        <textarea name="short_description" class="form-control"><?= $item['short_description'] ?? '' ?></textarea>
    </div>

    <div class="col-md-12 mb-3">
        <label><?= __('products.description', 'Description') ?></label>
        <textarea name="description" class="form-control" rows="5"><?= $item['description'] ?? '' ?></textarea>
    </div>

    <!-- =========================
     * PRICING
     * ========================= -->
    <div class="col-md-4 mb-3">
        <label><?= __('products.price', 'Price') ?></label>
        <input type="number" step="0.01" name="price" class="form-control" value="<?= $item['price'] ?? '' ?>" required>
    </div>

    <div class="col-md-4 mb-3">
        <label><?= __('products.sale_price', 'Sale Price') ?></label>
        <input type="number" step="0.01" name="sale_price" class="form-control" value="<?= $item['sale_price'] ?? '' ?>">
    </div>

    <div class="col-md-4 mb-3">
        <label><?= __('products.currency', 'Currency') ?></label>
        <input type="text" name="currency" class="form-control" value="<?= $item['currency'] ?? 'MAD' ?>">
    </div>

    <!-- =========================
     * INVENTORY
     * ========================= -->
    <div class="col-md-4 mb-3">
        <label><?= __('products.sku', 'SKU') ?></label>
        <input type="text" name="sku" class="form-control" value="<?= $item['sku'] ?? '' ?>">
    </div>

    <div class="col-md-4 mb-3">
        <label><?= __('products.barcode', 'Barcode') ?></label>
        <input type="text" name="barcode" class="form-control" value="<?= $item['barcode'] ?? '' ?>">
    </div>

    <div class="col-md-4 mb-3">
        <label><?= __('products.stock_quantity', 'Stock Quantity') ?></label>
        <input type="number" name="stock_quantity" class="form-control" value="<?= $item['stock_quantity'] ?? 0 ?>">
    </div>

    <!-- =========================
     * MEDIA
     * ========================= -->
    <div class="col-md-6 mb-3">
        <label><?= __('products.images', 'Gallery Images') ?></label>
        <input type="file" name="images[]" class="form-control" multiple>
    </div>

    <div class="col-md-6 mb-3">
        <label><?= __('products.featured_image', 'Featured Image') ?></label>
        <input type="file" name="featured_image" class="form-control">
    </div>

    <!-- =========================
     * ADVANCED
     * ========================= -->
    <div class="col-md-6 mb-3">
        <label><?= __('products.variants', 'Variants (JSON)') ?></label>
        <textarea name="variants" class="form-control"
                  placeholder='[{"name":"Size","options":["S","M","L"]}]'><?= isset($item['variants']) ? json_encode($item['variants']) : '' ?></textarea>
    </div>

    <div class="col-md-6 mb-3">
        <label><?= __('products.attributes', 'Attributes (JSON)') ?></label>
        <textarea name="attributes" class="form-control"
                  placeholder='[{"label":"Material","value":"Cotton"}]'><?= isset($item['attributes']) ? json_encode($item['attributes']) : '' ?></textarea>
    </div>

</div>

<hr>

<!-- =====================================================
 * PRODUCT PAGE BUILDER (UI)
 * ===================================================== -->
<div class="row mt-4">

    <div class="col-12 mb-3">
        <h5><?= __('sections.page_builder', 'Product Page Builder') ?></h5>
        <p class="text-muted">
            <?= __('sections.page_builder_hint', 'Control which sections appear on the product page and their order.') ?>
        </p>
    </div>

    <!-- AVAILABLE SECTIONS -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <?= __('sections.available', 'Available Sections') ?>
            </div>
            <div class="card-body d-grid gap-2">

                <?php
                $availableSections = [
                    'hero',
                    'gallery',
                    'features',
                    'pricing',
                    'testimonials',
                    'faq',
                    'guarantee',
                    'checkout',
                ];
                ?>

                <?php foreach ($availableSections as $sec): ?>
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm add-section"
                            data-section="<?= $sec ?>">
                        <?= __('sections.' . $sec, ucfirst($sec)) ?>
                    </button>
                <?php endforeach; ?>

            </div>
        </div>
    </div>

    <!-- PAGE LAYOUT -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <?= __('sections.page_layout', 'Page Layout') ?>
            </div>
            <div class="card-body" id="product-page-layout">
                <div class="text-muted text-center py-4" id="empty-layout">
                    <?= __('sections.empty_layout', 'No sections added yet.') ?>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
(function () {

    const layout = document.getElementById('product-page-layout');
    const empty  = document.getElementById('empty-layout');

    function refreshEmpty() {
        empty.style.display = layout.children.length ? 'none' : 'block';
    }

    function createSection(type, label) {
        const el = document.createElement('div');
        el.className = 'border rounded p-2 mb-2 d-flex justify-content-between align-items-center';

        el.innerHTML = `
            <strong>${label}</strong>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-outline-secondary move-up">↑</button>
                <button type="button" class="btn btn-outline-secondary move-down">↓</button>
                <button type="button" class="btn btn-outline-danger remove">
                    <?= __('actions.remove', 'Remove') ?>
                </button>
            </div>
        `;

        layout.appendChild(el);
        refreshEmpty();

        el.querySelector('.remove').onclick = () => {
            el.remove();
            refreshEmpty();
        };
    }

    document.querySelectorAll('.add-section').forEach(btn => {
        btn.addEventListener('click', () => {
            createSection(btn.dataset.section, btn.textContent.trim());
        });
    });

})();
</script>
