@extends('admin.layouts.app')

@section('title', 'Mega-menu')

@push('styles')
    <style>
        .card.fancy{border:1px solid var(--bs-border-color); border-radius:.75rem; transition:.18s}
        .card.fancy:hover{box-shadow:0 .75rem 1.5rem rgba(0,0,0,.06); transform:translateY(-2px)}
        .badge-soft{background:rgba(13,110,253,.1); color:#0d6efd}
        .item-row{border-bottom:1px dashed var(--bs-border-color)}
        .item-actions .btn{--bs-btn-padding-y:.25rem; --bs-btn-padding-x:.45rem; --bs-btn-font-size:.8rem}
        .preview-card{border:1px dashed var(--bs-border-color); border-radius:.5rem; overflow:hidden}
        .preview-card img{width:100%; height:140px; object-fit:cover}
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        @if(session('status'))
            <div class="alert alert-success mt-4">{{ session('status') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger mt-4">
                <ul class="mb-0">
                    @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="d-flex align-items-center justify-content-between mb-3 mt-4">
            <div>
                <span class="badge rounded-pill badge-soft px-3 py-2">Builder meniu</span>
                <h3 class="mb-0">„{{ $menu->name }}” (<code>{{ $menu->key }}</code>)</h3>
            </div>
            <div>
                <a href="{{ route('admin.menus.builder', $menu->key) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-repeat"></i> Reîncarcă
                </a>
            </div>
        </div>

        <div class="row g-4">
            {{-- STÂNGA: Adăugare nivel 1 --}}
            <div class="col-xl-5">
                <div class="card fancy">
                    <div class="card-header bg-transparent">
                        <strong>Adaugă element (nivel 1)</strong>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.menus.items.store', $menu) }}" method="post" enctype="multipart/form-data" class="row g-3 needs-validation" novalidate>
                            @csrf
                            <input type="hidden" name="parent_id" value="">
                            <div class="col-md-4">
                                <label class="form-label">Tip</label>
                                <select class="form-select" name="type" id="type_top">
                                    <option value="link">Link</option>
                                    <option value="dropdown">Dropdown</option>
                                    <option value="megamenu">Mega menu</option>
                                    <option value="label">Label</option>
                                    <option value="divider">Divider</option>
                                    <option value="category">Category</option>
                                </select>
                            </div>
                            <div class="col-md-8" data-if="link,dropdown,megamenu,label,category">
                                <label class="form-label">Titlu *</label>
                                <input class="form-control" name="title" required>
                            </div>

                            <div class="col-12" data-if="link">
                                <label class="form-label">URL *</label>
                                <input class="form-control" name="url">
                            </div>

                            <div class="col-md-6" data-if="link,category">
                                <label class="form-label">Target</label>
                                <select class="form-select" name="target">
                                    <option value="_self">Aceeași fereastră</option>
                                    <option value="_blank">Deschide în tab nou</option>
                                </select>
                            </div>

                            <div class="col-md-6" data-if="link,dropdown,megamenu,label,divider,category">
                                <label class="form-label">CSS class</label>
                                <input class="form-control" name="css_class" placeholder="ex: has-homemenu">
                            </div>

                            <div class="col-12" data-if="category">
                                <label class="form-label">Categorie *</label>
                                <select class="form-select" name="category_id">
                                    <option value="">—</option>
                                    @foreach(($categories ?? []) as $c)
                                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input type="hidden" name="is_active" value="0">
                                    <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                                    <label class="form-check-label">Activ</label>
                                </div>
                            </div>

                            <div class="col-12">
                                <button class="btn btn-primary"><i class="bi bi-plus-circle me-1"></i> Adaugă</button>
                            </div>
                        </form>
                    </div>
                </div>


            </div>
            <div class="col-12 col-xl-4">
                <div class="alert alert-info mt-3">
                    <div class="fw-bold mb-1">Tipuri & reguli:</div>
                    <ul class="mb-0">
                        <li><strong>Link</strong> = element normal; dacă are copii devine dropdown.</li>
                        <li><strong>Dropdown</strong> = container fără URL; adaugă copii de tip link/category.</li>
                        <li><strong>Mega menu</strong> = container pentru carduri „mega_card”.</li>
                        <li><strong>Category</strong> = item care duce la pagina categoriei (URL generat dinamic).</li>
                        <li><strong>Divider</strong> = linie de separare (fără titlu/URL).</li>
                        <li><strong>Label</strong> = „etichetă” de secțiune (fără link).</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row g-4 mt-4">


            {{-- DREAPTA: Structură curentă (recursiv) --}}
            <div class="col-12">
                <div class="card fancy">
                    <div class="card-header bg-transparent d-flex flex-wrap gap-2 align-items-center justify-content-between">
                        <strong>Structură curentă</strong>

                        <div class="d-flex flex-wrap gap-2 align-items-center ms-auto">
                            <div class="input-group input-group-sm" style="width:260px">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                <input id="treeSearch" type="text" class="form-control" placeholder="Caută titlu / tip / categorie…">
                            </div>
                            <button id="expandAll" class="btn btn-sm btn-outline-secondary" type="button">
                                <i class="bi bi-arrows-expand"></i> Extinde tot
                            </button>
                            <button id="collapseAll" class="btn btn-sm btn-outline-secondary" type="button">
                                <i class="bi bi-arrows-collapse"></i> Strânge tot
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <div id="treeStats" class="small text-secondary mb-2"></div>

                        <div id="menuTree">
                            @forelse($menu->items as $it)
                                @include('admin.menus.partials.item', [
                                  'item' => $it,
                                  'menu' => $menu,
                                  'categories' => ($categories ?? collect()),
                                  'depth' => 0,
                                  'path'  => [$it->title]
                                ])
                            @empty
                                <div class="text-secondary">Nu există elemente încă.</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- MODAL EDIT --}}
        <div class="modal fade" id="modalEdit" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form id="editForm" class="modal-content" method="post" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-pencil-square me-2"></i>Editează element</h5>
                        <button class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div id="editFields" class="row g-3">
                            {{-- câmpurile vin din JS --}}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Închide</button>
                        <button class="btn btn-primary">Salvează</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <style>
        /* Arbore meniu – ghidaje & stări */
        #menuTree .node{
            --indent: calc(var(--depth, 0) * 16px);
            padding-left: calc(var(--indent) + 8px);
            position: relative;
            transition: background-color .15s ease;
        }
        #menuTree .node:not([data-depth="0"])::before{
            content:"";
            position:absolute;
            left: calc(var(--indent));
            top: 0.5rem;
            bottom: 0.5rem;
            width: 0;
            border-left: 1px dashed var(--bs-border-color);
            opacity:.8;
        }
        #menuTree .node .title{
            display:inline-flex; align-items:center; gap:.35rem;
        }
        #menuTree .tree-toggle{
            border: 1px solid var(--bs-border-color);
            background: #fff;
            width: 24px; height: 24px;
            padding: 0; line-height: 1;
        }
        #menuTree .tree-toggle i{ transition: transform .15s ease; }
        #menuTree .is-collapsed > .head .tree-toggle i{ transform: rotate(-90deg); }

        #menuTree .children{ margin-left: 0; }
        #menuTree .match .title{ background:#fff3cd; border-radius:.35rem; padding:0 .25rem; }
        #menuTree .filter-hidden{ display:none !important; }

        #menuTree .crumb{
            font-size:.75rem; color: var(--bs-secondary-color);
            margin-left:.5rem;
        }
    </style>
@endpush
@push('scripts')
    <script>
        // Arată/ascunde câmpurile după tip + setări required
        function toggleTypeFields(wrapper, type){
            wrapper.querySelectorAll('[data-if]').forEach(el=>{
                const list = (el.getAttribute('data-if')||'').split(',');
                const show = list.includes(type);
                el.style.display = show ? '' : 'none';

                const titleInput = el.querySelector('input[name="title"]');
                if (titleInput) titleInput.required = (type !== 'divider');

                const urlInput = el.querySelector('input[name="url"]');
                if (urlInput) urlInput.required = (type === 'link');

                const catSelect = el.querySelector('select[name="category_id"]');
                if (catSelect) catSelect.required = (type === 'category');
            });

            // dacă e category, completează implicit titlul (dacă nu a fost scris manual)
            maybeAutoTitle(wrapper);
        }

        // completează Titlu cu numele categoriei (doar dacă n-a fost suprascris manual)
        function maybeAutoTitle(wrapper){
            const typeSel = wrapper.querySelector('[name="type"]');
            const type = typeSel ? typeSel.value : null;
            if (type !== 'category') return;

            const catSel = wrapper.querySelector('select[name="category_id"]');
            const title  = wrapper.querySelector('input[name="title"]');
            if (!catSel || !title) return;

            const opt = catSel.selectedOptions[0];
            if (!opt) return;

            // scriem dacă e gol sau a fost autocompletat anterior
            if (!title.value.trim() || title.dataset.autofill === '1') {
                title.value = (opt.text || '').trim();
                title.dataset.autofill = '1';
            }
        }

        // Top form: init + change
        const topType = document.getElementById('type_top');
        if (topType) {
            toggleTypeFields(topType.closest('form'), topType.value);
            topType.addEventListener('change', e=>{
                const form = e.target.closest('form');
                toggleTypeFields(form, e.target.value);
            });
        }

        // Delegated: când se schimbă o categorie oriunde (top/add-child/modal)
        document.addEventListener('change', (e)=>{
            if (e.target.matches('select[name="category_id"]')) {
                const form  = e.target.closest('form') || document;
                const title = form.querySelector('input[name="title"]');
                const opt   = e.target.selectedOptions[0];
                if (title && opt && ( !title.value.trim() || title.dataset.autofill === '1')) {
                    title.value = (opt.text || '').trim();
                    title.dataset.autofill = '1';
                }
            }

            // când se schimbă tipul într-un formular „Add child”, re-rulează toggle
            if (e.target.matches('select[name="type"]')) {
                const form = e.target.closest('form');
                if (form) toggleTypeFields(form, e.target.value);
            }
        });

        // Dacă utilizatorul editează manual Titlu, nu mai suprascriem ulterior
        document.addEventListener('input', (e)=>{
            if (e.target.matches('input[name="title"]')) {
                e.target.dataset.autofill = '0';
            }
        });

        // --- Modal EDIT (dinamic) ---
        document.addEventListener('click', e=>{
            const btn = e.target.closest('[data-edit]');
            if(!btn) return;

            let data = {};
            try { data = JSON.parse(btn.dataset.edit || '{}'); } catch(_) { data = {}; }
            if (!data.title && data.label) data.title = data.label;
            if (typeof data.is_active === 'undefined' && typeof data.active !== 'undefined') {
                data.is_active = !!data.active;
            }

            const form = document.getElementById('editForm');
            const btnAction = btn.getAttribute('data-action');
            form.action = btnAction ? btnAction : @json(route('admin.menus.items.update', 0)).replace(/\/0$/, '/' + (data.id || 0));

            const cats = @json(($categories ?? collect())->map(fn($c)=>['id'=>$c->id,'name'=>$c->name])->values());

            const fields = `
      <div class="col-md-4">
        <label class="form-label">Tip</label>
        <select class="form-select" name="type" id="edit_type">
          ${['link','dropdown','megamenu','mega_card','label','divider','category']
                .map(t=>`<option value="${t}" ${data.type===t?'selected':''}>${t}</option>`).join('')}
        </select>
      </div>

      <div class="col-md-8" data-if="link,dropdown,megamenu,label,category">
        <label class="form-label">Titlu *</label>
        <input class="form-control" name="title" value="${data.title ?? ''}">
      </div>

      <div class="col-12" data-if="link">
        <label class="form-label">URL *</label>
        <input class="form-control" name="url" value="${data.url ?? ''}">
      </div>

      <div class="col-md-6" data-if="link,category">
        <label class="form-label">Target</label>
        <select class="form-select" name="target">
          <option value="_self"  ${data.target==='_self' ? 'selected' : ''}>Aceeași fereastră</option>
          <option value="_blank" ${data.target==='_blank' ? 'selected' : ''}>Tab nou</option>
        </select>
      </div>

      <div class="col-md-6" data-if="link,dropdown,megamenu,label,divider,category">
        <label class="form-label">CSS class</label>
        <input class="form-control" name="css_class" value="${data.css_class ?? ''}">
      </div>

      <div class="col-12" data-if="category">
        <label class="form-label">Categorie *</label>
        <select class="form-select" name="category_id">
          <option value="">—</option>
          ${cats.map(c=>`<option value="${c.id}" ${String(data.category_id||'')===String(c.id)?'selected':''}>${c.name}</option>`).join('')}
        </select>
      </div>

      <div class="col-md-4">
        <label class="form-label d-block">Activ</label>
        <div class="form-check form-switch">
          <input type="hidden" name="is_active" value="0">
          <input class="form-check-input" type="checkbox" name="is_active" value="1" ${data.is_active ? 'checked' : ''}>
        </div>
      </div>

      <div class="col-md-6" data-if="mega_card">
        <label class="form-label">Button text</label>
        <input class="form-control" name="button_text" value="${data.button_text ?? ''}">
      </div>
      <div class="col-md-6" data-if="mega_card">
        <label class="form-label">Button URL</label>
        <input class="form-control" name="button_url" value="${data.button_url ?? ''}">
      </div>
      <div class="col-md-6" data-if="mega_card">
        <label class="form-label">Imagine (JPG/PNG/WebP)</label>
        <input type="file" name="image" class="form-control" accept="image/*">
        ${data.image_url ? `<small class="text-secondary">Curentă: <a href="${data.image_url}" target="_blank" rel="noopener">vezi</a></small>` : ''}
      </div>
    `;

            const wrap = document.getElementById('editFields');
            wrap.innerHTML = fields;

            const sel = document.getElementById('edit_type');
            const sync = ()=> toggleTypeFields(wrap, sel.value);
            sel.addEventListener('change', sync);
            sync();                // ascunde/arată grupuri
            maybeAutoTitle(wrap);  // dacă e category + are deja selectat, completează titlul

            new bootstrap.Modal(document.getElementById('modalEdit')).show();
        });
    </script>

    <script>
        (function(){
            const treeEl = document.getElementById('menuTree');
            if(!treeEl) return;

            // 1) Pliere/expandare pe ramură + persistare în localStorage
            let collapsed = {};
            try { collapsed = JSON.parse(localStorage.getItem('menuCollapsed')||'{}'); } catch(_){}

            // aplică stare de colaps salvata
            treeEl.querySelectorAll('.node[data-node-id]').forEach(node=>{
                const id = node.dataset.nodeId;
                const hasKids = node.querySelector(':scope > .children') !== null;
                if(hasKids && collapsed[id]) {
                    node.classList.add('is-collapsed');
                    const ch = node.querySelector(':scope > .children');
                    if(ch) ch.style.display = 'none';
                }
            });

            // toggle pe click
            treeEl.addEventListener('click', (e)=>{
                const btn = e.target.closest('.tree-toggle');
                if(!btn) return;
                const node = btn.closest('.node');
                const id = node.dataset.nodeId;
                const ch = node.querySelector(':scope > .children');
                if(!ch) return;

                const willCollapse = !node.classList.contains('is-collapsed') ? true : false;
                node.classList.toggle('is-collapsed', willCollapse);
                ch.style.display = willCollapse ? 'none' : '';
                collapsed[id] = willCollapse ? true : undefined;
                if(!collapsed[id]) delete collapsed[id];
                localStorage.setItem('menuCollapsed', JSON.stringify(collapsed));
            });

            // 2) Expand / Collapse all
            document.getElementById('expandAll')?.addEventListener('click', ()=>{
                treeEl.querySelectorAll('.node.is-collapsed').forEach(n=>{
                    n.classList.remove('is-collapsed');
                    const ch = n.querySelector(':scope > .children');
                    if(ch) ch.style.display = '';
                });
                collapsed = {};
                localStorage.setItem('menuCollapsed', JSON.stringify(collapsed));
            });
            document.getElementById('collapseAll')?.addEventListener('click', ()=>{
                treeEl.querySelectorAll('.node').forEach(n=>{
                    const ch = n.querySelector(':scope > .children');
                    if(ch){
                        n.classList.add('is-collapsed');
                        ch.style.display = 'none';
                        collapsed[n.dataset.nodeId] = true;
                    }
                });
                localStorage.setItem('menuCollapsed', JSON.stringify(collapsed));
            });

            // 3) Căutare instant + auto-expand pe potriviri
            const search = document.getElementById('treeSearch');
            const stats  = document.getElementById('treeStats');

            // indexare părinți (pt a dezvălui ascendenții la match)
            const byId = {};
            treeEl.querySelectorAll('.node[data-node-id]').forEach(n=> byId[n.dataset.nodeId] = n);

            function revealAncestors(node){
                let p = node.dataset.parentId;
                while(p){
                    const an = byId[p];
                    if(!an) break;
                    // deschide dacă era pliat
                    const ch = an.querySelector(':scope > .children');
                    if(ch){
                        an.classList.remove('is-collapsed');
                        ch.style.display = '';
                        delete collapsed[an.dataset.nodeId];
                    }
                    p = an.dataset.parentId;
                }
            }

            function filterTree(q){
                const nodes = [...treeEl.querySelectorAll('.node[data-node-id]')];
                if(!q){
                    nodes.forEach(n=> n.classList.remove('filter-hidden','match'));
                    // re-aplică starea de colaps salvată
                    treeEl.querySelectorAll('.node[data-node-id]').forEach(node=>{
                        const id = node.dataset.nodeId;
                        const ch = node.querySelector(':scope > .children');
                        if(!ch) return;
                        const isCol = !!collapsed[id];
                        node.classList.toggle('is-collapsed', isCol);
                        ch.style.display = isCol ? 'none' : '';
                    });
                    updateStats();
                    return;
                }

                q = q.toLowerCase();
                // expandă tot temporar, filtrăm doar afișarea
                treeEl.querySelectorAll('.node.is-collapsed').forEach(n=>{
                    n.classList.remove('is-collapsed');
                    const ch = n.querySelector(':scope > .children');
                    if(ch) ch.style.display = '';
                });

                nodes.forEach(n=>{
                    const hay = (n.dataset.title || '') + ' ' + (n.dataset.type || '') + ' ' + (n.dataset.cat || '');
                    const ok = hay.includes(q);
                    n.classList.toggle('match', ok);
                    n.classList.toggle('filter-hidden', !ok);
                    if(ok) revealAncestors(n);
                });

                // arată și descendenții direct ai match-urilor (ca să vezi context)
                treeEl.querySelectorAll('.node.match .children .node').forEach(n=> n.classList.remove('filter-hidden'));
                updateStats();
            }

            function updateStats(){
                const total = treeEl.querySelectorAll('.node[data-node-id]').length;
                const shown = treeEl.querySelectorAll('.node[data-node-id]:not(.filter-hidden)').length;
                stats.textContent = `${shown} / ${total} elemente vizibile`;
            }

            search?.addEventListener('input', e=> filterTree(e.target.value.trim()));
            updateStats();
        })();
    </script>
@endpush