@extends('layouts.app')

@section('content')

<style>
    .tab-fieldset { border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; margin-bottom: 15px; position: relative; }
    .fieldset-legend { font-size: 13px; font-weight: 600; color: #495057; padding: 0 8px; position: absolute; top: -8px; left: 10px; margin: 0; }
    .select-container { display: flex; align-items: flex-start; gap: 3px; flex-wrap: nowrap; margin-bottom: 15px; }
    .select-sm { font-size: 0.85rem; padding: 2px 6px; height: 26px; min-width: 160px; max-width: 200px; }
    .small-label { font-size: 0.75rem; font-weight: 600; color: #495057; margin-bottom: 2px; text-align: left; }
</style>

<div class="container-fluid">
    <!-- Barra di selezione iniziale -->
    <div class="row mb-2 select-container">
        <div class="col-md-12">
            <div class="select-container">
                @foreach(['Tipo Prodotto' => 'tipoProdotto', 'Categoria' => 'categoriaTipoProdotto', 'Prodotto' => 'prodottiCategoria'] as $label => $id)
                    <div>
                        <label class="small-label">{{ $label }}</label>
                        <select id="{{ $id }}" class="form-select select-sm" {{ $id != 'tipoProdotto' ? 'disabled' : '' }}>
                            <option value="">Seleziona...</option>
                            @if($id == 'tipoProdotto')
                                @foreach($categoryTree as $tipoId => $tipo)
                                    <option value="{{ $tipoId }}">{{ $tipo['nome'] }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Struttura dinamica -->
    <div id="productData">
        <div class="row">
            <div class="col-md-3"><ul class="nav flex-column nav-pills" id="categoryTabs"></ul></div>
            <div class="col-md-5"><div class="tab-content" id="categoryContent"></div></div>
            <div class="col-md-4"><div id="divDistintaPrezzi" class="tab-content"></div></div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let categoryTree = @json($categoryTree);
    let vincoli = Array.isArray(@json($vincoli)) ? @json($vincoli) : [];

    $(document).ready(function () {

        /** 📌 GESTIONE SELEZIONE TIPI E CATEGORIE **/
        $("#tipoProdotto").on("change", function () {
            let tipoId = $(this).val();
            aggiornaCategorie(tipoId);
        });

        $("#categoriaTipoProdotto").on("change", function () {
            let categoriaId = $(this).val();
            aggiornaProdotti($("#tipoProdotto").val(), categoriaId);
        });

        $("#prodottiCategoria").on("change", function () {
            let productId = $(this).val();
            caricaDatiProdotto(productId);
        });

    });

    function aggiornaCategorie(tipoId) {
        let categoriaSelect = $("#categoriaTipoProdotto").prop("disabled", true).html('<option value="">Seleziona...</option>');
        let prodottiSelect = $("#prodottiCategoria").prop("disabled", true).html('<option value="">Seleziona...</option>');

        if (tipoId && categoryTree[tipoId]) {
            categoryTree[tipoId].sottocategorie.forEach(cat => categoriaSelect.append(`<option value="${cat.id}">${cat.nome}</option>`));
            categoriaSelect.prop("disabled", false);
        }
    }

    function aggiornaProdotti(tipoId, categoriaId) {
        let prodottiSelect = $("#prodottiCategoria").prop("disabled", true).html('<option value="">Seleziona...</option>');

        if (categoriaId && tipoId) {
            let categoria = categoryTree[tipoId].sottocategorie.find(c => c.id == categoriaId);
            if (categoria && categoria.prodotti.length > 0) {
                categoria.prodotti.forEach(prod => prodottiSelect.append(`<option value="${prod.id}">${prod.nome}</option>`));
                prodottiSelect.prop("disabled", false);
            }
        }
    }

    function caricaDatiProdotto(productId) {
        if (!productId) {
            $("#productData").addClass("d-none");
            return;
        }

        $.ajax({
            url: "{{ route('getProdottoTipografico', ['idProdotto' => 'idProdotto', 'stato' => 'attivi']) }}".replace('idProdotto', productId),
            method: "GET",
            dataType: "json",
            success: function(response) {
                if (!response || !response.configurazione || !response.configurazione.categorie) {
                    console.error("Struttura JSON non valida!", response);
                    return;
                }

                let categorie = Object.values(response.configurazione.categorie);
                generaTabsCategorie(categorie);
                produzioneProdotto();
            }
        });
    }

    function generaTabsCategorie(categorie) {
        let first = true;
        let categoryTabs = $("#categoryTabs").empty();
        let categoryContent = $("#categoryContent").empty();
        let divDistintaPrezzi = $("#divDistintaPrezzi").empty();

        categorie.forEach(categoria => {
            let activeClass = first ? "active" : "";
            first = false;

            let checkboxOpzionale = `<input type="checkbox" class="form-check-input me-2 toggle-categoria" 
                data-target="#content-${categoria.idCategoria}" ${categoria.opzionale ? 'checked' : ''} ${categoria.opzionale === 0 ? "disabled" : ""}>`;

            categoryTabs.append(`
                <li class="nav-item d-flex align-items-center">
                    ${checkboxOpzionale}
                    <a class="nav-link ${activeClass}" data-bs-toggle="pill" href="#content-${categoria.idCategoria}">
                        ${categoria.nomeCategoria}
                    </a>
                </li>
            `);

            let contenuto = `
                <div class="tab-pane fade ${activeClass}" id="content-${categoria.idCategoria}">
                    <fieldset class="tab-fieldset">
                        <legend class="fieldset-legend">${categoria.nomeCategoria}</legend>
                        <div class="row">${generaOpzioniCategoria(categoria)}</div>
                    </fieldset>
                </div>
            `;

            categoryContent.append(contenuto);
        });

        $(".toggle-categoria").on("change", function() {
            let target = $(this).data("target");
            $(target).toggle();
        });
    }

    function generaOpzioniCategoria(categoria) {
        return categoria.tabelleBase ? Object.values(categoria.tabelleBase).map(tabella => `
            <div class="col-md-6 col-lg-4 mb-2">
                <label class="small-label">${tabella.nomeTabella}</label>
                <select id="${tabella.mysqlTabella}_${categoria.idCategoria}" class="form-select select-sm feature-select">
                    ${tabella.attributi.map(attr => `<option value="${attr.idAttributoBase}" ${attr.altriCampi.predefinito ? 'selected' : ''}>${attr.altriCampi.nomeAttributo}</option>`).join('')}
                </select>
            </div>`).join('') : '';
    }
</script>
@endpush