@extends('admin.layouts.app')

@section('content')
    <div class="azp-page azp-product-editor">

        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Novo produto</div>
                <div class="azp-page-subtitle">Cria um novo produto para o catálogo geral com uma estrutura mais organizada e profissional.</div>
            </div>

            <div class="azp-actions">
                <a href="{{ route('admin.products.index') }}" class="btn outline">Voltar</a>
            </div>
        </div>

        @if($errors->any())
            <div class="flash error">
                <strong>Revê os campos:</strong>
                <ul style="margin:6px 0 0 18px;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST"
              action="{{ route('admin.products.store') }}"
              enctype="multipart/form-data"
              class="azp-product-form">
            @csrf

            <div class="azp-product-shell">

                {{-- COLUNA PRINCIPAL --}}
                <div class="azp-product-main">

                    {{-- INFORMAÇÃO PRINCIPAL --}}
                    <section class="azp-card azp-editor-card">
                        <div class="azp-editor-head">
                            <div>
                                <div class="azp-editor-kicker">Produto</div>
                                <h2 class="azp-editor-title">Informação principal</h2>
                                <div class="azp-editor-subtitle">Define os dados base, o preço, o estado e o tipo do produto.</div>
                            </div>

                            <div class="azp-editor-mini-badges">
                                <span class="azp-soft-badge" id="live-status-badge">Ativo</span>
                                <span class="azp-soft-badge" id="live-type-badge">Venda</span>
                            </div>
                        </div>

                        <div class="azp-form-grid azp-form-grid-2">
                            <div class="field field-span-2">
                                <div class="label">Nome *</div>
                                <input type="text"
                                       name="name"
                                       id="name"
                                       value="{{ old('name') }}"
                                       placeholder="Ex.: T-shirt técnica AzPadel">
                            </div>

                            <div class="field">
                                <div class="label">SKU</div>
                                <input type="text"
                                       name="sku"
                                       value="{{ old('sku') }}"
                                       placeholder="Ex.: AZP-TS-001">
                            </div>

                            <div class="field">
                                <div class="label">Tamanho</div>
                                <input type="text"
                                       name="size"
                                       value="{{ old('size') }}"
                                       placeholder="Ex.: S, M, L, 40cm, pack 3">
                            </div>

                            <div class="field">
                                <div class="label">Preço *</div>
                                <div class="azp-input-with-addon">
                                    <input type="number"
                                           step="0.01"
                                           name="price"
                                           id="price"
                                           value="{{ old('price') }}"
                                           placeholder="0.00">
                                    <span class="addon">€</span>
                                </div>
                            </div>

                            <div class="field">
                                <div class="label">Estado</div>
                                <label class="azp-toggle-card">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox"
                                           name="is_active"
                                           id="is_active"
                                           value="1"
                                        {{ old('is_active', 1) ? 'checked' : '' }}>
                                    <span class="azp-toggle-ui"></span>
                                    <span class="azp-toggle-copy">
                                        <strong>Produto ativo</strong>
                                        <small>Disponível para utilização.</small>
                                    </span>
                                </label>
                            </div>

                            <div class="field">
                                <div class="label">Tipo</div>
                                <label class="azp-toggle-card">
                                    <input type="hidden" name="is_internal" value="0">
                                    <input type="checkbox"
                                           name="is_internal"
                                           id="is_internal"
                                           value="1"
                                        {{ old('is_internal') ? 'checked' : '' }}>
                                    <span class="azp-toggle-ui"></span>
                                    <span class="azp-toggle-copy">
                                        <strong>Produto interno</strong>
                                        <small>Usado apenas em compras internas.</small>
                                    </span>
                                </label>
                            </div>

                            <div class="field field-span-2" id="fornecedor-field" style="{{ old('is_internal') ? '' : 'display:none;' }}">
                                <div class="label">Fornecedor *</div>
                                <select name="fornecedor_id" id="fornecedor_id">
                                    <option value="">Selecionar fornecedor</option>
                                    @foreach($fornecedores as $fornecedor)
                                        <option value="{{ $fornecedor->id }}"
                                            {{ (string) old('fornecedor_id') === (string) $fornecedor->id ? 'selected' : '' }}>
                                            {{ $fornecedor->nome }}@if($fornecedor->ref) — {{ $fornecedor->ref }}@endif
                                        </option>
                                    @endforeach
                                </select>
                                <div class="hint">Obrigatório quando o produto é interno.</div>
                            </div>
                        </div>
                    </section>

                    {{-- CLASSIFICAÇÃO --}}
                    <section class="azp-card azp-editor-card">
                        <div class="azp-editor-head">
                            <div>
                                <div class="azp-editor-kicker">Organização</div>
                                <h2 class="azp-editor-title">Classificação</h2>
                                <div class="azp-editor-subtitle">Agrupa o produto em categorias e subcategorias para facilitar a gestão.</div>
                            </div>

                            <div class="azp-editor-stats-inline">
                                <div class="azp-inline-stat">
                                    <span id="categories-count">0</span>
                                    <small>Categorias</small>
                                </div>
                                <div class="azp-inline-stat">
                                    <span id="subcategories-count">0</span>
                                    <small>Subcategorias</small>
                                </div>
                            </div>
                        </div>

                        <div class="field">
                            <div class="label">Categorias</div>

                            <div class="pill-grid azp-category-grid" id="categories-grid">
                                @foreach($categories as $id => $name)
                                    <label class="pill-check azp-pill-premium">
                                        <input type="checkbox"
                                               name="categories[]"
                                               value="{{ $id }}"
                                            {{ in_array($id, old('categories', $selectedCategories ?? [])) ? 'checked' : '' }}>
                                        <span>{{ $name }}</span>
                                    </label>
                                @endforeach
                            </div>

                            <div class="hint">Seleciona uma ou mais categorias para o produto.</div>
                        </div>

                        <div class="azp-subcategory-wrap" style="margin-top:18px;">
                            <div class="label">Subcategorias</div>

                            <input type="hidden"
                                   id="selected-subcategories-json"
                                   value='@json(old("subcategories", $selectedSubcategories ?? []))'>

                            <div id="subcategories-pill-grid" class="pill-grid azp-subcategory-grid"></div>

                            <div class="hint azp-subcategory-hint">
                                Seleciona primeiro uma categoria.
                            </div>
                        </div>
                    </section>

                    {{-- DESCRIÇÃO --}}
                    <section class="azp-card azp-editor-card">
                        <div class="azp-editor-head">
                            <div>
                                <div class="azp-editor-kicker">Conteúdo</div>
                                <h2 class="azp-editor-title">Descrição</h2>
                                <div class="azp-editor-subtitle">Acrescenta contexto, detalhes e informação útil sobre o produto.</div>
                            </div>

                            <div class="azp-editor-mini-badges">
                                <span class="azp-soft-badge" id="description-count">0 caracteres</span>
                            </div>
                        </div>

                        <div class="field">
                            <div class="label">Descrição</div>
                            <textarea name="description"
                                      id="description"
                                      rows="6"
                                      placeholder="Descrição do produto...">{{ old('description') }}</textarea>
                        </div>
                    </section>
                </div>

                {{-- SIDEBAR --}}
                <aside class="azp-product-side">

                    <div class="azp-side-sticky">

                        {{-- RESUMO --}}
                        <section class="azp-card azp-editor-card azp-summary-card">
                            <div class="azp-editor-head azp-editor-head-compact">
                                <div>
                                    <div class="azp-editor-kicker">Resumo</div>
                                    <h2 class="azp-editor-title">Visão rápida</h2>
                                </div>
                            </div>

                            <div class="azp-summary-list">
                                <div class="azp-summary-row">
                                    <span>Nome</span>
                                    <strong id="summary-name">—</strong>
                                </div>

                                <div class="azp-summary-row">
                                    <span>Preço</span>
                                    <strong id="summary-price">—</strong>
                                </div>

                                <div class="azp-summary-row">
                                    <span>Estado</span>
                                    <strong id="summary-status">Ativo</strong>
                                </div>

                                <div class="azp-summary-row">
                                    <span>Tipo</span>
                                    <strong id="summary-type">Venda</strong>
                                </div>

                                <div class="azp-summary-row" id="summary-supplier-row" style="display:none;">
                                    <span>Fornecedor</span>
                                    <strong id="summary-supplier">—</strong>
                                </div>

                                <div class="azp-summary-row">
                                    <span>Galeria</span>
                                    <strong id="summary-gallery-count">0 imagens</strong>
                                </div>
                            </div>
                        </section>

                        {{-- IMAGEM PRINCIPAL --}}
                        <section class="azp-card azp-editor-card">
                            <div class="azp-editor-head azp-editor-head-compact">
                                <div>
                                    <div class="azp-editor-kicker">Imagem</div>
                                    <h2 class="azp-editor-title">Imagem principal</h2>
                                </div>
                            </div>

                            <div class="azp-main-image-preview-wrap">
                                <div class="azp-main-image-preview empty" id="main-image-preview">
                                    <span>Sem imagem</span>
                                </div>
                            </div>

                            <div class="field" style="margin-top:14px;">
                                <div class="azp-upload-box">
                                    <input type="file" name="main_image" id="main_image" accept="image/*">
                                    <div class="hint">PNG/JPG até 4MB.</div>
                                </div>
                            </div>
                        </section>

                        {{-- GALERIA --}}
                        <section class="azp-card azp-editor-card">
                            <div class="azp-editor-head azp-editor-head-compact">
                                <div>
                                    <div class="azp-editor-kicker">Media</div>
                                    <h2 class="azp-editor-title">Galeria</h2>
                                </div>
                            </div>

                            <div class="field">
                                <div class="azp-upload-box">
                                    <input type="file" name="images[]" id="gallery_input" accept="image/*" multiple>
                                    <div class="hint">Podes selecionar várias imagens.</div>
                                </div>
                            </div>

                            <div id="gallery-preview" class="azp-gallery-preview"></div>
                        </section>

                        {{-- AÇÕES --}}
                        <section class="azp-card azp-editor-card">
                            <div class="form-actions azp-form-actions-stack">
                                <button class="btn primary" type="submit">Guardar produto</button>
                                <a href="{{ route('admin.products.index') }}" class="btn outline">Cancelar</a>
                            </div>
                        </section>

                    </div>
                </aside>
            </div>
        </form>
    </div>
@endsection

@push('styles')
    <style>
        .azp-product-editor {
            max-width: 1500px;
            margin: 0 auto;
        }

        .azp-product-shell {
            display: grid;
            grid-template-columns: minmax(0, 1.65fr) minmax(340px, .9fr);
            gap: 22px;
            align-items: start;
        }

        .azp-product-main,
        .azp-product-side {
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .azp-side-sticky {
            position: sticky;
            top: 20px;
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .azp-editor-card {
            padding: 22px;
            border-radius: 24px;
        }

        .azp-editor-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        }

        .azp-editor-head-compact {
            margin-bottom: 14px;
            padding-bottom: 12px;
        }

        .azp-editor-kicker {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted, #64748b);
            margin-bottom: 6px;
        }

        .azp-editor-title {
            margin: 0;
            font-size: 22px;
            line-height: 1.1;
            font-weight: 800;
            color: var(--ink, #0f172a);
        }

        .azp-editor-subtitle {
            margin-top: 6px;
            color: var(--muted, #64748b);
            font-size: 13px;
            line-height: 1.45;
            max-width: 760px;
        }

        .azp-editor-mini-badges {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .azp-soft-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 0 12px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid rgba(15, 23, 42, 0.08);
            color: #0f172a;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }

        .azp-editor-stats-inline {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .azp-inline-stat {
            min-width: 88px;
            border: 1px solid rgba(15, 23, 42, 0.08);
            background: #fafcff;
            border-radius: 16px;
            padding: 10px 12px;
            text-align: center;
        }

        .azp-inline-stat span {
            display: block;
            font-size: 18px;
            font-weight: 800;
            color: var(--ink, #0f172a);
            line-height: 1;
        }

        .azp-inline-stat small {
            display: block;
            margin-top: 4px;
            font-size: 11px;
            color: var(--muted, #64748b);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        .azp-form-grid-2 {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .field-span-2 {
            grid-column: span 2;
        }

        .azp-input-with-addon {
            position: relative;
        }

        .azp-input-with-addon input {
            padding-right: 42px;
        }

        .azp-input-with-addon .addon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 800;
            color: var(--muted, #64748b);
            pointer-events: none;
        }

        .azp-toggle-card {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 58px;
            padding: 12px 14px;
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 16px;
            background: #fff;
            cursor: pointer;
        }

        .azp-toggle-card input[type="checkbox"] {
            display: none;
        }

        .azp-toggle-ui {
            position: relative;
            width: 46px;
            height: 26px;
            border-radius: 999px;
            background: #dbe3ea;
            transition: .2s ease;
            flex: 0 0 auto;
        }

        .azp-toggle-ui::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,.18);
            transition: .2s ease;
        }

        .azp-toggle-card input[type="checkbox"]:checked + .azp-toggle-ui {
            background: #111;
        }

        .azp-toggle-card input[type="checkbox"]:checked + .azp-toggle-ui::after {
            transform: translateX(20px);
        }

        .azp-toggle-copy {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .azp-toggle-copy strong {
            font-size: 14px;
            color: var(--ink, #0f172a);
        }

        .azp-toggle-copy small {
            margin-top: 3px;
            font-size: 12px;
            color: var(--muted, #64748b);
        }

        .azp-pill-premium span {
            font-weight: 700;
        }

        .azp-summary-card {
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        }

        .azp-summary-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .azp-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }

        .azp-summary-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .azp-summary-row span {
            color: var(--muted, #64748b);
            font-size: 13px;
            font-weight: 700;
        }

        .azp-summary-row strong {
            color: var(--ink, #0f172a);
            font-size: 14px;
            font-weight: 800;
            text-align: right;
            max-width: 65%;
            word-break: break-word;
        }

        .azp-upload-box {
            border: 1px dashed rgba(15, 23, 42, 0.18);
            border-radius: 18px;
            padding: 16px;
            background: linear-gradient(180deg, #fff, #fafafa);
        }

        .azp-main-image-preview-wrap {
            display: block;
        }

        .azp-main-image-preview {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 20px;
            border: 1px solid rgba(15, 23, 42, 0.08);
            overflow: hidden;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .azp-main-image-preview.empty {
            background:
                linear-gradient(180deg, #fafafa, #f4f4f5);
            color: #64748b;
            font-weight: 700;
            font-size: 14px;
        }

        .azp-main-image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .azp-gallery-preview {
            margin-top: 14px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .azp-gallery-item {
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
        }

        .azp-gallery-item img {
            width: 100%;
            height: 130px;
            object-fit: cover;
            display: block;
        }

        .azp-gallery-item-meta {
            padding: 8px 10px;
            font-size: 12px;
            color: var(--muted, #64748b);
            font-weight: 700;
        }

        .azp-form-actions-stack {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .azp-form-actions-stack .btn {
            width: 100%;
            justify-content: center;
        }

        @media (max-width: 1200px) {
            .azp-product-shell {
                grid-template-columns: 1fr;
            }

            .azp-side-sticky {
                position: static;
            }
        }

        @media (max-width: 768px) {
            .azp-form-grid-2 {
                grid-template-columns: 1fr;
            }

            .field-span-2 {
                grid-column: span 1;
            }

            .azp-editor-head {
                flex-direction: column;
            }

            .azp-gallery-preview {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const categoryCheckboxes = document.querySelectorAll('input[name="categories[]"]');
            const subGrid = document.getElementById('subcategories-pill-grid');
            const selectedJson = document.getElementById('selected-subcategories-json');
            let selectedSet = new Set(JSON.parse(selectedJson.value || '[]').map(String));
            let availableMap = new Map();

            const isInternalInput = document.getElementById('is_internal');
            const isActiveInput = document.getElementById('is_active');
            const fornecedorField = document.getElementById('fornecedor-field');
            const fornecedorSelect = document.getElementById('fornecedor_id');

            const nameInput = document.getElementById('name');
            const priceInput = document.getElementById('price');
            const descriptionInput = document.getElementById('description');
            const mainImageInput = document.getElementById('main_image');
            const galleryInput = document.getElementById('gallery_input');

            const summaryName = document.getElementById('summary-name');
            const summaryPrice = document.getElementById('summary-price');
            const summaryStatus = document.getElementById('summary-status');
            const summaryType = document.getElementById('summary-type');
            const summarySupplier = document.getElementById('summary-supplier');
            const summarySupplierRow = document.getElementById('summary-supplier-row');
            const summaryGalleryCount = document.getElementById('summary-gallery-count');

            const liveStatusBadge = document.getElementById('live-status-badge');
            const liveTypeBadge = document.getElementById('live-type-badge');
            const descriptionCount = document.getElementById('description-count');

            const categoriesCount = document.getElementById('categories-count');
            const subcategoriesCount = document.getElementById('subcategories-count');

            const mainImagePreview = document.getElementById('main-image-preview');
            const galleryPreview = document.getElementById('gallery-preview');

            function getCategories() {
                return Array.from(categoryCheckboxes).filter(function (c) {
                    return c.checked;
                }).map(function (c) {
                    return c.value;
                });
            }

            function getSelectedSubcategoryCount() {
                return subGrid.querySelectorAll('input[name="subcategories[]"]:checked').length;
            }

            function updateCategoryCount() {
                categoriesCount.textContent = getCategories().length;
                subcategoriesCount.textContent = getSelectedSubcategoryCount();
            }

            function renderSubcats() {
                subGrid.innerHTML = '';

                Array.from(availableMap.values())
                    .sort(function (a, b) {
                        return a.name.localeCompare(b.name);
                    })
                    .forEach(function (sc) {
                        const label = document.createElement('label');
                        label.className = 'pill-check azp-pill-premium';

                        const input = document.createElement('input');
                        input.type = 'checkbox';
                        input.name = 'subcategories[]';
                        input.value = sc.id;
                        input.checked = selectedSet.has(String(sc.id));

                        input.addEventListener('change', function () {
                            if (input.checked) {
                                selectedSet.add(String(sc.id));
                            } else {
                                selectedSet.delete(String(sc.id));
                            }
                            updateCategoryCount();
                        });

                        const span = document.createElement('span');
                        span.textContent = sc.name;

                        label.appendChild(input);
                        label.appendChild(span);
                        subGrid.appendChild(label);
                    });

                const hint = document.querySelector('.azp-subcategory-hint');
                if (hint) {
                    hint.style.display = availableMap.size ? 'none' : 'block';
                }

                updateCategoryCount();
            }

            function refreshSubcats() {
                availableMap.clear();
                const cats = getCategories();

                if (!cats.length) {
                    selectedSet.clear();
                    renderSubcats();
                    return;
                }

                Promise.all(
                    cats.map(function (id) {
                        return fetch('/admin/category-subcategories/' + id, {
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        })
                            .then(function (r) {
                                return r.json();
                            })
                            .then(function (items) {
                                items.forEach(function (sc) {
                                    availableMap.set(String(sc.id), sc);
                                });
                            });
                    })
                ).then(function () {
                    Array.from(selectedSet).forEach(function (id) {
                        if (!availableMap.has(id)) {
                            selectedSet.delete(id);
                        }
                    });

                    renderSubcats();
                });
            }

            function toggleFornecedorField() {
                if (!isInternalInput || !fornecedorField) {
                    return;
                }

                if (isInternalInput.checked) {
                    fornecedorField.style.display = '';
                    summarySupplierRow.style.display = '';
                } else {
                    fornecedorField.style.display = 'none';
                    summarySupplierRow.style.display = 'none';
                    if (fornecedorSelect) {
                        fornecedorSelect.value = '';
                    }
                }

                updateSummary();
            }

            function updateSummary() {
                summaryName.textContent = nameInput && nameInput.value.trim() ? nameInput.value.trim() : '—';

                if (priceInput && priceInput.value !== '') {
                    const num = parseFloat(priceInput.value);
                    summaryPrice.textContent = isNaN(num)
                        ? '—'
                        : num.toLocaleString('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €';
                } else {
                    summaryPrice.textContent = '—';
                }

                const active = isActiveInput ? isActiveInput.checked : false;
                summaryStatus.textContent = active ? 'Ativo' : 'Inativo';
                liveStatusBadge.textContent = active ? 'Ativo' : 'Inativo';

                const internal = isInternalInput ? isInternalInput.checked : false;
                summaryType.textContent = internal ? 'Interno' : 'Venda';
                liveTypeBadge.textContent = internal ? 'Interno' : 'Venda';

                if (internal) {
                    const supplierText = fornecedorSelect && fornecedorSelect.selectedIndex > 0
                        ? fornecedorSelect.options[fornecedorSelect.selectedIndex].text
                        : '—';
                    summarySupplier.textContent = supplierText;
                }

                const descLen = descriptionInput && descriptionInput.value ? descriptionInput.value.length : 0;
                descriptionCount.textContent = descLen + ' caracteres';
            }

            function renderMainImagePreview(file) {
                mainImagePreview.innerHTML = '';

                if (!file) {
                    mainImagePreview.classList.add('empty');
                    mainImagePreview.innerHTML = '<span>Sem imagem</span>';
                    return;
                }

                mainImagePreview.classList.remove('empty');

                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.alt = 'Preview da imagem principal';
                mainImagePreview.appendChild(img);
            }

            function renderGalleryPreview(files) {
                galleryPreview.innerHTML = '';

                if (!files || !files.length) {
                    summaryGalleryCount.textContent = '0 imagens';
                    return;
                }

                Array.from(files).forEach(function (file, index) {
                    const box = document.createElement('div');
                    box.className = 'azp-gallery-item';

                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    img.alt = 'Preview ' + (index + 1);

                    const meta = document.createElement('div');
                    meta.className = 'azp-gallery-item-meta';
                    meta.textContent = 'Imagem ' + (index + 1);

                    box.appendChild(img);
                    box.appendChild(meta);
                    galleryPreview.appendChild(box);
                });

                summaryGalleryCount.textContent = files.length + (files.length === 1 ? ' imagem' : ' imagens');
            }

            categoryCheckboxes.forEach(function (cb) {
                cb.addEventListener('change', function () {
                    refreshSubcats();
                    updateCategoryCount();
                });
            });

            if (isInternalInput) {
                isInternalInput.addEventListener('change', toggleFornecedorField);
            }

            if (isActiveInput) {
                isActiveInput.addEventListener('change', updateSummary);
            }

            if (fornecedorSelect) {
                fornecedorSelect.addEventListener('change', updateSummary);
            }

            if (nameInput) {
                nameInput.addEventListener('input', updateSummary);
            }

            if (priceInput) {
                priceInput.addEventListener('input', updateSummary);
            }

            if (descriptionInput) {
                descriptionInput.addEventListener('input', updateSummary);
            }

            if (mainImageInput) {
                mainImageInput.addEventListener('change', function () {
                    renderMainImagePreview(this.files && this.files[0] ? this.files[0] : null);
                });
            }

            if (galleryInput) {
                galleryInput.addEventListener('change', function () {
                    renderGalleryPreview(this.files);
                });
            }

            refreshSubcats();
            updateSummary();
            toggleFornecedorField();
            renderMainImagePreview(null);
            renderGalleryPreview(null);
        });
    </script>
@endpush