@extends('admin.layouts.app')

@section('title', 'Categorii')

@push('styles')
    <style>
        .page-hero{
            background:
                radial-gradient(1000px 500px at 10% -20%, rgba(13,110,253,.10), transparent 60%),
                radial-gradient(800px 500px at 90% 0%, rgba(32,201,151,.10), transparent 60%);
            border-radius: 1rem;
        }
        .card.fancy{ border:1px solid var(--bs-border-color); transition:transform .18s ease, box-shadow .18s ease; }
        .card.fancy:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.06); }
        .fade-in{ animation:fadeIn .25s ease; } @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
        .badge-soft{ background: rgba(13,110,253,.1); color:#0d6efd; }
        .table> :not(caption)>*>*{ vertical-align: middle; }
        .btn-gradient{ background:linear-gradient(90deg,#0d6efd,#20c997); border:0; }
        .btn-gradient:hover{ filter:brightness(1.05); }
        .search-wrap{ position:relative; }
        .search-wrap .bi-search{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); opacity:.6; }
        .search-wrap input{ padding-left:2.25rem; }
        .slug-hint{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
        .row-hover:hover{ background: rgba(13,110,253,.03); }
        .form-switch .form-check-input{ cursor:pointer; }
    </style>
@endpush

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

        {{-- Toast --}}
        @if(session('status'))
            <div class="position-fixed top-0 end-0 p-3" style="z-index:1080">
                <div class="toast text-bg-success show">
                    <div class="d-flex">
                        <div class="toast-body"><i class="bi bi-check2-circle me-2"></i>{{ session('status') }}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>
            </div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger"><i class="bi bi-exclamation-triangle me-1"></i>{{ $errors->first() }}</div>
        @endif

        {{-- Header --}}
        <div class="page-hero p-4 mb-4 mt-4">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-3">
                <span class="badge rounded-pill badge-soft px-3 py-2">
                    <i class="bi bi-collection me-1"></i> Categorii
                </span>
                    <h3 class="mb-0">Administrare categorii</h3>
                </div>


                @php $mode = request('mode','table'); @endphp

                <div class="text-end d-flex gap-2 align-items-center">
                    <div class="btn-group" role="group">
                        <a href="{{ route('admin.categories.index', array_merge(request()->except('page'), ['mode'=>'table'])) }}"
                           class="btn btn-outline-secondary {{ $mode==='table'?'active':'' }}">
                            <i class="bi bi-table"></i> Tabel
                        </a>
                        <a href="{{ route('admin.categories.index', array_merge(request()->except('page'), ['mode'=>'tree'])) }}"
                           class="btn btn-outline-secondary {{ $mode==='tree'?'active':'' }}">
                            <i class="bi bi-diagram-3"></i> Arbore
                        </a>
                    </div>

                    <button class="btn btn-gradient text-white" data-bs-toggle="modal" data-bs-target="#modalAdd">
                        <i class="bi bi-plus-circle me-1"></i> Adaugă categorie
                    </button>
                </div>
            </div>
            <div class="text-secondary mt-2">
                Total: <span class="badge text-bg-primary">{{ $countAll }}</span>
            </div>
        </div>

        <div class="card fancy fade-in">
            <div class="card-body">

                {{-- Search / Filters --}}
                <form method="get" class="row g-3 align-items-center mb-3">
                    <div class="col-lg-6">
                        <div class="search-wrap">
                            <i class="bi bi-search"></i>
                            <input type="text" name="q" class="form-control" value="{{ $q }}" placeholder="Caută în nume, slug, meta…">
                        </div>
                    </div>
                    <div class="col-lg-6 text-lg-end">
                        <button class="btn btn-outline-secondary me-2"><i class="bi bi-filter me-1"></i>Filtrează</button>
                        <a href="{{ route('admin.categories.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x-circle me-1"></i>Reset</a>
                    </div>
                </form>
                @if($mode === 'table')

                @php
                    $parentId = (int) request('parent');
                @endphp
                @if($parentId)
                    @php
                        // încercăm să luăm din $parents, altfel fallback DB (1 query)
                        $ctx = $parents->firstWhere('id', $parentId) ?? \App\Models\Category::with('parent')->find($parentId);
                        $crumb = [];
                        $x = $ctx;
                        while ($x) { $crumb[] = $x; $x = $x->parent; }
                        $crumb = array_reverse($crumb);
                    @endphp

                    <div class="mb-3 d-flex align-items-center gap-2 flex-wrap">
                        <a class="btn btn-sm btn-outline-secondary"
                           href="{{ route('admin.categories.index', request()->except('parent')) }}">
                            ⟵ Înapoi
                        </a>
                        <div class="small">
                            @foreach($crumb as $i => $node)
                                @if($i) <span class="text-secondary mx-1">›</span> @endif
                                <a href="{{ route('admin.categories.index', array_merge(request()->except('page'), ['parent' => $node->id])) }}">
                                    {{ $node->name }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead class="table-light">
                        <tr>
                            <th>Categoria</th>
                            <th>Slug</th>
                            <th>Părinte</th>
                            <th class="text-center">Produse</th>
                            <th class="text-center">Activă</th>
                            <th>Ordine</th>
                            <th class="text-end">Acțiuni</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($categories as $c)
                            <tr class="row-hover">
                                <td>
                                    <div class="fw-semibold">{{ $c->name }}</div>

                                    {{-- link rapid către subcategorii (dacă există) --}}
                                    @php
                                        // dacă ai withCount('children') în controller, preferă $c->children_count;
                                        $childrenCount = $c->children_count ?? $c->children()->count();
                                    @endphp

                                    {{-- hint părinte (doar dacă nu ești deja în drill-down pe acel părinte) --}}
                                    @if(empty($parentId) && $c->parent)
                                        <div class="small text-secondary">Părinte: {{ $c->parent->name }}</div>
                                    @endif
                                </td>
                                <td class="slug-hint text-secondary">/{{ $c->slug }}</td>
                                <td>{{ $c->parent?->name ?? '—' }}</td>
                                <td class="text-center">
                                    <span class="badge text-bg-primary">{{ $c->products_count }}</span>
                                </td>
                                <td class="text-center">
                                    <form action="{{ route('admin.categories.toggle',$c) }}" method="post" class="d-inline">
                                        @csrf
                                        <div class="form-check form-switch d-inline-block">
                                            <input class="form-check-input" type="checkbox" role="switch"
                                                   onChange="this.form.submit()"
                                                {{ $c->active ? 'checked' : '' }}>
                                        </div>
                                    </form>
                                </td>
                                <td style="white-space:nowrap;">
                                    <form action="{{ route('admin.categories.move',$c) }}?dir=up" method="post" class="d-inline">@csrf
                                        <button class="btn btn-sm btn-outline-secondary" title="Mută sus">↑</button>
                                    </form>
                                    <form action="{{ route('admin.categories.move',$c) }}?dir=down" method="post" class="d-inline">@csrf
                                        <button class="btn btn-sm btn-outline-secondary" title="Mută jos">↓</button>
                                    </form>
                                    <span class="ms-2 text-secondary">#{{ $c->position }}</span>
                                </td>
                                <td class="text-end">
                                    <div class="btn-group">
                                        <button
                                            class="btn btn-sm btn-outline-primary js-edit"
                                            data-bs-toggle="modal" data-bs-target="#modalEdit"
                                            data-id="{{ $c->id }}"
                                            data-name="{{ $c->name }}"
                                            data-slug="{{ $c->slug }}"
                                            data-parent="{{ $c->parent_id ?? '' }}"
                                            data-active="{{ $c->active ? 1 : 0 }}"
                                            data-meta_title="{{ $c->meta_title ?? '' }}"
                                            data-meta_description="{{ $c->meta_description ? e($c->meta_description) : '' }}"
                                        >
                                            <i class="bi bi-pencil-square"></i> Editează
                                        </button>

                                        <button
                                            class="btn btn-sm btn-outline-danger js-del"
                                            data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-id="{{ $c->id }}"
                                            data-name="{{ $c->name }}"
                                            data-count="{{ $c->products_count }}"
                                        >
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center text-secondary py-4">Nu există categorii.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div class="small text-secondary">
                        Showing {{ $categories->firstItem() }} to {{ $categories->lastItem() }} of {{ $categories->total() }} results
                    </div>
                    {{ $categories->withQueryString()->onEachSide(1)->links('pagination::bootstrap-5') }}
                </div>
                @else
                    {{-- ===== MOD ARBORE (nou) ===== --}}
                    @php
                        // Luăm toate categoriile o singură dată, ordonate; include și parent pt info
                        $allCats = \App\Models\Category::with(['parent'])->withCount('products')->orderBy('position')->get();
                        // grupăm pe părinte
                        $byParent = $allCats->groupBy(fn($c)=> (string)($c->parent_id ?? 'root'));

                        $renderTree = function($nodes) use (&$renderTree, $byParent) {
                            foreach ($nodes as $c) {
                                $children = $byParent->get((string)$c->id) ?? collect();
                                $hasKids  = $children->count() > 0;
                    @endphp
                    <li class="tree-item" data-name="{{ Str::lower($c->name) }}" data-slug="{{ Str::lower($c->slug) }}">
                        <div class="tree-row">
                            @if($hasKids)
                                <button class="tree-toggle" data-bs-toggle="collapse" data-bs-target="#c{{ $c->id }}" aria-expanded="true" title="Deschide/închide">
                                    <i class="bi bi-caret-down-fill"></i>
                                </button>
                            @else
                                <span class="tree-spacer"></span>
                            @endif

                            <div class="tree-main">
                                <div class="fw-semibold">{{ $c->name }}</div>
                                <div class="small text-secondary">/{{ $c->slug }}</div>
                                @if($c->parent)
                                    <div class="small text-secondary">Părinte: {{ $c->parent->name }}</div>
                                @endif
                            </div>

                            <div class="tree-meta">
                                <span class="badge text-bg-primary" title="Produse">{{ $c->products_count }}</span>
                                <form action="{{ route('admin.categories.toggle',$c) }}" method="post" class="d-inline">@csrf
                                    <div class="form-check form-switch d-inline-block align-middle ms-2" title="Activă">
                                        <input class="form-check-input" type="checkbox" onChange="this.form.submit()" {{ $c->active ? 'checked' : '' }}>
                                    </div>
                                </form>
                                <span class="text-secondary small ms-2">#{{ $c->position }}</span>
                            </div>

                            <div class="tree-actions btn-group">
                                <form action="{{ route('admin.categories.move',$c) }}?dir=up" method="post" class="d-inline">@csrf
                                    <button class="btn btn-sm btn-outline-secondary" title="Sus">↑</button>
                                </form>
                                <form action="{{ route('admin.categories.move',$c) }}?dir=down" method="post" class="d-inline">@csrf
                                    <button class="btn btn-sm btn-outline-secondary" title="Jos">↓</button>
                                </form>

                                <button
                                    class="btn btn-sm btn-outline-primary js-edit"
                                    data-bs-toggle="modal" data-bs-target="#modalEdit"
                                    data-id="{{ $c->id }}"
                                    data-name="{{ $c->name }}"
                                    data-slug="{{ $c->slug }}"
                                    data-parent="{{ $c->parent_id ?? '' }}"
                                    data-active="{{ $c->active ? 1 : 0 }}"
                                    data-meta_title="{{ $c->meta_title ?? '' }}"
                                    data-meta_description="{{ $c->meta_description ? e($c->meta_description) : '' }}"
                                >
                                    <i class="bi bi-pencil-square"></i>
                                </button>

                                <form action="{{ route('admin.categories.destroy', $c) }}" method="post" class="d-inline"
                                      onsubmit="return confirm('Ștergi categoria & legăturile?');">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>
                        </div>

                        @if($hasKids)
                            <ul id="c{{ $c->id }}" class="collapse show">
                                @php $renderTree($children); @endphp
                            </ul>
                        @endif
                    </li>
                    @php
                        }
                    };

                    $roots = $byParent->get('root') ?? collect();
                    @endphp

                    <div class="tree-wrap">
                        <ul id="catTree" class="tree">
                            @php $renderTree($roots); @endphp
                        </ul>
                    </div>

                    {{-- în modul Arbore nu are sens paginația; filtrarea se face live din căsuța de căutare --}}
                @endif

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

    {{-- MODAL: ADD --}}
    <div class="modal fade" id="modalAdd" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content needs-validation" method="post" action="{{ route('admin.categories.store') }}" novalidate>
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-folder-plus me-2"></i>Adaugă categorie</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" name="name" id="add_name" class="form-control" placeholder="Nume categorie" required>
                                <label>Nume categorie</label>
                                <div class="invalid-feedback">Completează numele.</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" name="slug" id="add_slug" class="form-control" placeholder="slug (opțional)">
                                <label>Slug (opțional)</label>
                                <small class="text-secondary">Dacă îl lași gol, se generează automat din nume.</small>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <select name="parent_id" class="form-select" aria-label="Părinte (opțional)">
                                    <option value="">— fără părinte —</option>
                                    @foreach($parents as $p)
                                        <option value="{{ $p->id }}">{{ $p->name }}</option>
                                    @endforeach
                                </select>
                                <label>Părinte (opțional)</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-switch">
                                <input class="form-check-input" type="checkbox" id="add_active" name="active" checked>
                                <label class="form-check-label" for="add_active">Activă</label>
                            </div>
                        </div>
                        <hr>
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" name="meta_title" class="form-control" placeholder="Meta title">
                                <label>Meta title</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea name="meta_description" class="form-control" style="height:120px" placeholder="Meta description"></textarea>
                                <label>Meta description</label>
                            </div>
                        </div>

                        @if ($errors->any() && !old('_edit_id'))
                            <div class="col-12">
                                <div class="alert alert-danger small mb-0">
                                    <ul class="mb-0 ps-3">
                                        @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Renunță</button>
                    <button class="btn btn-gradient text-white">Salvează</button>
                </div>
            </form>
        </div>
    </div>

    {{-- MODAL: EDIT --}}
    <div class="modal fade" id="modalEdit" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="editForm" class="modal-content needs-validation" method="post" novalidate>
                @csrf @method('PUT')
                <input type="hidden" name="_edit_id" value="1">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-pencil-square me-2"></i>Editează categorie</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" name="name" id="edit_name" class="form-control" required>
                                <label>Nume categorie</label>
                                <div class="invalid-feedback">Completează numele.</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" name="slug" id="edit_slug" class="form-control" placeholder="slug">
                                <label>Slug</label>
                                <small class="text-secondary">Se poate edita; trebuie să fie unic.</small>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <select name="parent_id" id="edit_parent" class="form-select" aria-label="Părinte (opțional)">
                                    <option value="">— fără părinte —</option>
                                    @foreach($parents as $p)
                                        <option value="{{ $p->id }}">{{ $p->name }}</option>
                                    @endforeach
                                </select>
                                <label>Părinte (opțional)</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-switch">
                                <input class="form-check-input" type="checkbox" id="edit_active" name="active">
                                <label class="form-check-label" for="edit_active">Activă</label>
                            </div>
                        </div>
                        <hr>
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" name="meta_title" id="edit_meta_title" class="form-control" placeholder="Meta title">
                                <label>Meta title</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea name="meta_description" id="edit_meta_description" class="form-control" style="height:120px" placeholder="Meta description"></textarea>
                                <label>Meta description</label>
                            </div>
                        </div>

                        @if ($errors->any() && old('_edit_id'))
                            <div class="col-12">
                                <div class="alert alert-danger small mb-0">
                                    <ul class="mb-0 ps-3">
                                        @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Renunță</button>
                    <button class="btn btn-gradient text-white">Salvează</button>
                </div>
            </form>
        </div>
    </div>

    {{-- MODAL: DELETE --}}
    <div class="modal fade" id="modalDelete" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="deleteForm" class="modal-content" method="post">
                @csrf @method('DELETE')
                <div class="modal-header">
                    <h5 class="modal-title text-danger"><i class="bi bi-exclamation-triangle me-2"></i>Ștergere categorie</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">Ești sigur că vrei să ștergi categoria <strong id="delName">—</strong>?</p>
                    <p class="mb-0 small text-secondary">
                        <span id="delInfo"></span>
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Renunță</button>
                    <button class="btn btn-danger">Șterge</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('styles')
    <style>
        /* arbore vizual în tabel */


        /* ---- Pagination fixes (conflict cu .next/.previous din temă) ---- */
        .pagination .next,
        .pagination .previous,
        .pagination .page-item.next,
        .pagination .page-item.previous,
        .pagination li.next,
        .pagination li.previous {
            position: static !important;
            width: auto !important;
            height: auto !important;
            background: none !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .pagination .next::before,
        .pagination .previous::before,
        .pagination .page-item.next::before,
        .pagination .page-item.previous::before,
        .pagination li.next::before,
        .pagination li.previous::before {
            content: none !important;
        }

        /* look&feel compact Bootstrap */
        .pagination { --bs-pagination-border-radius: .5rem; margin: 0; }
        .pagination .page-link{ border-radius:.5rem; }
        .pagination .page-item.active .page-link{
            background-color:#0d6efd; border-color:#0d6efd;
        }

        .link-sub {
            text-decoration: none;
            border: 1px dashed var(--bs-border-color);
            border-radius: 999px;
            padding: .1rem .45rem;
            color: inherit;
        }
        .link-sub:hover { background: rgba(13,110,253,.06); border-color: #0d6efd; }

        /* --- Tree view --- */
        .tree-wrap{ max-width: 100%; overflow:auto; }
        .tree, .tree ul{ list-style:none; margin:0; padding-left:1rem; }
        .tree > li{ position:relative; }
        .tree ul{ margin-top:.25rem; }

        /* liniile de arbore */
        .tree li{ position:relative; }
        .tree li::before{ content:""; position:absolute; left:-.75rem; top:1.15rem; width:.75rem; border-top:1px dashed var(--bs-border-color); opacity:.6; }
        .tree li::after{ content:""; position:absolute; left:-.75rem; top:-.35rem; bottom:1.15rem; border-left:1px dashed var(--bs-border-color); opacity:.6; }
        .tree > li::after{ display:none; } /* nu trasa verticala la radacini */

        /* randul unui nod */
        .tree-row{
            display:grid;
            grid-template-columns:auto 1fr auto auto;
            gap:.5rem .75rem;
            align-items:center;
            padding:.25rem .25rem;
            border-radius:.5rem;
        }
        .tree-row:hover{ background:rgba(13,110,253,.05); }

        /* buton expand/collapse */
        .tree-toggle{
            width:1.75rem; height:1.75rem; display:inline-flex; align-items:center; justify-content:center;
            border:1px solid var(--bs-border-color); border-radius:.35rem; background:#fff;
            padding:0;
        }
        .tree-toggle[aria-expanded="false"] .bi{ transform:rotate(-90deg); }
        .tree-toggle .bi{ transition:.15s transform ease; }
        .tree-spacer{ width:1.75rem; height:1.75rem; display:inline-block; }

        /* coloane din rand */
        .tree-main{ min-width: 240px; }
        .tree-meta{ display:flex; align-items:center; gap:.25rem; }

        /* actiuni apar discret pe hover pe ecrane mari */
        @media (min-width: 992px){
            .tree-actions{ opacity:0; transition:.12s; }
            .tree-row:hover .tree-actions{ opacity:1; }
        }
    </style>
@endpush
@push('scripts')
    <script>
        // tiny helper – slugify
        function slugify(str){
            return (str || '')
                .toString()
                .normalize('NFD').replace(/[\u0300-\u036f]/g,'') // diacritice
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g,'')
                .trim()
                .replace(/\s+/g,'-')
                .replace(/-+/g,'-');
        }

        document.addEventListener('DOMContentLoaded', () => {
            // bootstrap validation
            document.querySelectorAll('.needs-validation').forEach(form => {
                form.addEventListener('submit', e => {
                    if (!form.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
                    form.classList.add('was-validated');
                }, false);
            });

            // live validation nicuțică cu jQuery (dacă există)
            if (window.jQuery) {
                (function($){
                    const live = (sel) => {
                        $(document).on('input', sel, function(){
                            const v = $(this).val().trim();
                            if (v.length) { $(this).removeClass('is-invalid').addClass('is-valid'); }
                            else { $(this).removeClass('is-valid').addClass('is-invalid'); }
                        });
                    };
                    live('#add_name'); live('#edit_name');
                })(jQuery);
            }

            // auto-slug add
            const addName = document.getElementById('add_name');
            const addSlug = document.getElementById('add_slug');
            addName?.addEventListener('input', () => {
                if (!addSlug.value.trim()){
                    addSlug.value = slugify(addName.value);
                }
            });

            // EDIT modal populate
            const editModal = document.getElementById('modalEdit');
            const editForm  = document.getElementById('editForm');
            const e_name = document.getElementById('edit_name');
            const e_slug = document.getElementById('edit_slug');
            const e_parent = document.getElementById('edit_parent');
            const e_active = document.getElementById('edit_active');
            const e_meta_t = document.getElementById('edit_meta_title');
            const e_meta_d = document.getElementById('edit_meta_description');

            document.querySelectorAll('.js-edit').forEach(btn => {
                btn.addEventListener('click', ()=> {
                    const id     = btn.dataset.id;
                    const name   = btn.dataset.name || '';
                    const slug   = btn.dataset.slug || '';
                    const parent = btn.dataset.parent || '';
                    const active = +btn.dataset.active === 1;
                    const mt     = btn.dataset.meta_title || '';
                    const md     = btn.dataset.meta_description || '';

                    e_name.value = name;
                    e_slug.value = slug;
                    e_meta_t.value = mt;
                    e_meta_d.value = md;

                    // set parent
                    for (const opt of e_parent.options) {
                        opt.selected = (opt.value && String(opt.value) === String(parent));
                    }
                    e_active.checked = !!active;

                    editForm.action = `{{ route('admin.categories.update', ':id') }}`.replace(':id', id);
                });
            });

            // DELETE modal populate
            const deleteModal = document.getElementById('modalDelete');
            const deleteForm  = document.getElementById('deleteForm');
            const delName     = document.getElementById('delName');
            const delInfo     = document.getElementById('delInfo');

            document.querySelectorAll('.js-del').forEach(btn => {
                btn.addEventListener('click', () => {
                    const id   = btn.dataset.id;
                    const name = btn.dataset.name || '—';
                    const cnt  = parseInt(btn.dataset.count || '0', 10);

                    delName.textContent = name;
                    if (cnt > 0) {
                        delInfo.innerHTML = `Această categorie are <strong>${cnt}</strong> produs(e). <br>
                Confirmând, legătura cu produse va fi ștearsă, iar câmpul „categorie implicită” pe produse va deveni <code>NULL</code>.`;
                    } else {
                        delInfo.textContent = 'Nu are produse asociate.';
                    }

                    deleteForm.action = `{{ route('admin.categories.destroy', ':id') }}`.replace(':id', id);
                });
            });

            // dacă vin erori pe ADD/EDIT, redeschidem modalul potrivit
            @if ($errors->any())
            @if (old('_edit_id'))
            new bootstrap.Modal(document.getElementById('modalEdit')).show();
            @else
            new bootstrap.Modal(document.getElementById('modalAdd')).show();
            @endif
            @endif
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const isTree = new URLSearchParams(location.search).get('mode') === 'tree';
            if (!isTree) return;

            const q = document.querySelector('input[name="q"]');
            const tree = document.getElementById('catTree');
            if (!q || !tree) return;

            const apply = () => {
                const term = (q.value || '').trim().toLowerCase();

                // arată totul dacă nu există termen
                if (!term) {
                    tree.querySelectorAll('li.tree-item').forEach(li => li.classList.remove('d-none'));
                    // pliază doar la cerere — default lăsăm deschis
                    return;
                }

                // arată doar nodurile care conțin termenul în nume/slug
                tree.querySelectorAll('li.tree-item').forEach(li => {
                    const name = li.dataset.name || '';
                    const slug = li.dataset.slug || '';
                    const match = name.includes(term) || slug.includes(term);
                    li.classList.toggle('d-none', !match);
                });

                // deschide toate sublistele când cauți
                document.querySelectorAll('.tree ul.collapse').forEach(ul => {
                    const c = bootstrap.Collapse.getOrCreateInstance(ul, {toggle:false});
                    c.show();
                });
            };

            q.addEventListener('input', apply);
            apply();
        });
    </script>
@endpush