<?php include __DIR__ . '/../header.php'; ?>

<?php
$productId = (int) ($item['id'] ?? 0);
$sections  = $sections ?? [];
?>

<div class="container-fluid py-4">

    <h3 class="mb-3">
        <?= __('products.edit', 'Edit Product') ?>
    </h3>

    <form method="POST"
          action="/admin/products/update/<?= $productId ?>"
          enctype="multipart/form-data">

        <!-- ===============================
             PRODUCT DATA
        ================================ -->
        <?php include __DIR__ . '/form_fields.php'; ?>

        <button class="btn btn-success mt-3">
            <?= __('actions.update', 'Update') ?>
        </button>
    </form>

    <hr class="my-5">

    <!-- ===============================
         PAGE BUILDER
    ================================ -->
    <h4 class="mb-3">
        <?= __('sections.page_builder', 'Product Page Builder') ?>
    </h4>

    <form method="POST"
          action="/admin/product-page-builder/save/<?= $productId ?>">

        <div class="row">

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

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

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

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

            <!-- LAYOUT -->
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <?= __('sections.layout', 'Page Layout') ?>
                    </div>

                    <div class="card-body" id="page-layout">

                        <?php if (empty($sections)): ?>
                            <div class="text-muted text-center py-5">
                                <?= __('sections.empty_layout', 'No sections added yet.') ?>
                            </div>
                        <?php endif; ?>

                        <?php foreach ($sections as $index => $section): ?>
                            <div class="card mb-2 section-item">
                                <div class="card-body d-flex justify-content-between align-items-center">

                                    <strong>
                                        <?= __('sections.' . $section['section_type'], ucfirst($section['section_type'])) ?>
                                    </strong>

                                    <div class="btn-group btn-group-sm">

                                        <input type="hidden"
                                               name="layout[<?= $index ?>][type]"
                                               value="<?= $section['section_type'] ?>">

                                        <input type="hidden"
                                               name="layout[<?= $index ?>][enabled]"
                                               value="<?= (int) $section['is_enabled'] ?>">

                                        <button type="button"
                                                class="btn btn-outline-secondary toggle">
                                            <?= $section['is_enabled']
                                                ? __('actions.on', 'On')
                                                : __('actions.off', 'Off') ?>
                                        </button>

                                        <button type="button"
                                                class="btn btn-outline-danger remove">
                                            <?= __('actions.remove', 'Remove') ?>
                                        </button>
                                    </div>

                                </div>
                            </div>
                        <?php endforeach; ?>

                    </div>
                </div>

                <button type="submit" class="btn btn-primary">
                    <?= __('actions.save', 'Save Page Layout') ?>
                </button>
            </div>

        </div>
    </form>

</div>

<script>
(function () {

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

    function createSection(type, label) {
        const index = layout.children.length;

        const card = document.createElement('div');
        card.className = 'card mb-2 section-item';

        card.innerHTML = `
            <div class="card-body d-flex justify-content-between align-items-center">
                <strong>${label}</strong>

                <div class="btn-group btn-group-sm">
                    <input type="hidden" name="layout[${index}][type]" value="${type}">
                    <input type="hidden" name="layout[${index}][enabled]" value="1">

                    <button type="button" class="btn btn-outline-secondary toggle">
                        <?= __('actions.on', 'On') ?>
                    </button>

                    <button type="button" class="btn btn-outline-danger remove">
                        <?= __('actions.remove', 'Remove') ?>
                    </button>
                </div>
            </div>
        `;

        layout.appendChild(card);
    }

    document.addEventListener('click', function (e) {

        const addBtn = e.target.closest('.add-section');
        if (addBtn) {
            createSection(
                addBtn.dataset.type,
                addBtn.textContent.trim()
            );
        }

        const removeBtn = e.target.closest('.remove');
        if (removeBtn) {
            removeBtn.closest('.section-item').remove();
        }

        const toggleBtn = e.target.closest('.toggle');
        if (toggleBtn) {
            const input = toggleBtn.parentElement.querySelector('input[name$="[enabled]"]');
            input.value = input.value === '1' ? '0' : '1';
            toggleBtn.textContent = input.value === '1'
                ? '<?= __('actions.on', 'On') ?>'
                : '<?= __('actions.off', 'Off') ?>';
        }

    });

})();
</script>

<?php include __DIR__ . '/../footer.php'; ?>
