@extends('admin.layouts.app')
@section('title', $mode==='create'?'Adaugă bloc':'Editează bloc')

@push('styles')
    <style>
        .card.fancy{border:1px solid var(--bs-border-color);border-radius:.85rem}
        .cfg{display:none}
        .pill{display:inline-flex;align-items:center;gap:.35rem;border:1px dashed var(--bs-border-color);border-radius:999px;padding:.25rem .6rem;font-size:.85rem}
        .dual-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
        .dual{border:1px solid var(--bs-border-color);border-radius:.5rem;min-height:320px;display:flex;flex-direction:column}
        .dual header{padding:.5rem .75rem;border-bottom:1px dashed var(--bs-border-color);display:flex;align-items:center;gap:.5rem}
        .dual .body{padding:.5rem;overflow:auto;flex:1}
        .dual .item{border:1px solid var(--bs-border-color);border-radius:.5rem;padding:.4rem .55rem;margin-bottom:.4rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:#fff;cursor:grab}
        .dual .item.dragging{opacity:.6}
        .dual .meta{opacity:.65;font-size:.82rem}
        .dual .actions button{border:0;background:transparent}
        .muted{opacity:.65}
        .hint{font-size:.85rem;color:var(--bs-secondary-color)}
        .search{flex:1}
    </style>
@endpush

@section('content')
    <div class="container-fluid mt-4">
        <form method="post" action="{{ $mode==='create'?route('admin.home-sections.store'):route('admin.home-sections.update', ['home_section' => $section->id]) }}">
            @csrf @if($mode==='edit') @method('PUT') @endif

            <div class="row g-3">
                <div class="col-lg-8">
                    <div class="card fancy">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Tip bloc</label>
                                    <select name="type" id="type" class="form-select" required>
                                        @php $t = old('type',$section->type); @endphp
                                        <option value="products_auto"  @selected($t==='products_auto')>Produse (auto)</option>
                                        <option value="products_manual"@selected($t==='products_manual')>Produse (manual selectate)</option>
                                        <option value="category"       @selected($t==='category')>Categorie</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Layout</label>
                                    <select name="layout" class="form-select">
                                        <option value="slider" @selected(($section->opt('layout','slider'))==='slider')>Slider</option>
                                        <option value="grid"   @selected(($section->opt('layout','slider'))==='grid')>Grid</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Rânduri</label>
                                    <input type="number" min="1" max="6" name="rows" class="form-control"
                                           value="{{ old('rows',$section->opt('rows',1)) }}">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Limit</label>
                                    <input type="number" min="0" name="limit" class="form-control"
                                           value="{{ old('limit',$section->opt('limit',8)) }}">
                                </div>

                                <div class="col-12"><hr></div>

                                <div class="col-md-6">
                                    <label class="form-label">Titlu</label>
                                    <input type="text" name="title" id="title" class="form-control"
                                           value="{{ old('title',$section->title) }}" data-autofill="1">
                                    <div class="hint">Dacă tipul e <strong>Categorie</strong>, se completează automat cu numele categoriei (poți edita).</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Subtitlu (opțional)</label>
                                    <input type="text" name="subtitle" class="form-control"
                                           value="{{ old('subtitle',$section->subtitle) }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- === Config specific tipului === --}}
                    <div class="card fancy mt-3">
                        <div class="card-header"><strong>Config specific</strong></div>
                        <div class="card-body">

                            {{-- products_auto --}}
                            <div class="cfg cfg-products_auto">
                                @php $src = old('source',$section->opt('source','newest'));
                                 $sort = old('sort',$section->opt('sort','newest'));
                                @endphp
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Sursă</label>
                                        <select name="source" class="form-select">
                                            <option value="newest"   @selected($src==='newest')>Cele mai noi</option>
                                            <option value="featured" @selected($src==='featured')>Featured (cat. slug: featured)</option>
                                            <option value="on-sale"  @selected($src==='on-sale')>On Sale (cat. slug: on-sale)</option>
                                            <option value="trending" @selected($src==='trending')>Trending (cat. slug: trending)</option>
                                            <option value="category" @selected($src==='category')>Din categorie</option>
                                        </select>
                                        <div class="hint mt-1">Pentru <em>Din categorie</em> selectezi mai jos o categorie.</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Categorie (doar pt. „Din categorie”)</label>
                                        <select name="category_id_auto" class="form-select">
                                            <option value="">—</option>
                                            @foreach($categories as $c)
                                                <option value="{{ $c->id }}" @selected(old('category_id_auto',$section->opt('category_id_auto'))==$c->id)>
                                                    {{ $c->name }} — {{ $c->computed_products_count }} produse
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Incl. desc.</label>
                                        <select name="include_descendants_auto" class="form-select">
                                            <option value="1" @selected($section->opt('include_descendants_auto',1))>Da</option>
                                            <option value="0" @selected(!$section->opt('include_descendants_auto',1))>Nu</option>
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <label class="form-label">Sortare</label>
                                        <select name="sort" class="form-select">
                                            <option value="newest"    @selected($sort==='newest')>Noi</option>
                                            <option value="name"      @selected($sort==='name')>Nume</option>
                                            <option value="price_asc" @selected($sort==='price_asc')>Preț ▲</option>
                                            <option value="price_desc"@selected($sort==='price_desc')>Preț ▼</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {{-- products_manual --}}
                            <div class="cfg cfg-products_manual">
                                <div class="dual-wrap">
                                    <div class="dual" id="poolBox">
                                        <header>
                                            <strong>Produse disponibile</strong>
                                            <input class="form-control form-control-sm search" id="poolSearch" placeholder="caută...">
                                            <span class="pill muted" id="poolCount">0</span>
                                        </header>
                                        <div class="body" id="poolList">
                                            @foreach($productPool as $it)
                                                <div class="item" data-id="{{ $it->id }}" draggable="true">
                                                    <div>
                                                        <div class="name">{{ $it->name }}</div>
                                                        <div class="meta">#{{ $it->id }}</div>
                                                    </div>
                                                    <div class="actions">
                                                        <button class="btnAdd" title="Adaugă"><i class="bi bi-plus-circle"></i></button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="dual" id="pickedBox">
                                        <header>
                                            <strong>Produse adăugate</strong>
                                            <span class="pill" id="pickedCount">{{ $products->count() }}</span>
                                        </header>
                                        <div class="body" id="pickedList">
                                            @foreach($products as $it)
                                                <div class="item" data-id="{{ $it->id }}" draggable="true">
                                                    <div>
                                                        <div class="name">{{ $it->name }}</div>
                                                        <div class="meta">#{{ $it->id }}</div>
                                                    </div>
                                                    <div class="actions">
                                                        <button class="btnRemove" title="Elimină"><i class="bi bi-x-circle"></i></button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                {{-- hidden ordered ids --}}
                                <input type="hidden" name="product_ids" id="product_ids"
                                       value="{{ old('product_ids', $products->pluck('id')->implode(',')) }}">
                                <div class="hint mt-2">Poți trage/ordona elementele din „Produse adăugate”.</div>
                            </div>

                            {{-- category (o singură categorie) --}}
                            <div class="cfg cfg-category">
                                <div class="row g-3">
                                    <div class="col-md-8">
                                        <label class="form-label">Categorie</label>
                                        <select name="category_id" id="category_id" class="form-select">
                                            <option value="">— selectează —</option>
                                            @php $currentCatId = old('category_id', optional($section->categories->first())->id); @endphp
                                            @foreach($categories as $c)
                                                <option value="{{ $c->id }}"
                                                        data-name="{{ $c->name }}"
                                                    @selected($currentCatId==$c->id)>
                                                    {{ $c->name }} — {{ $c->computed_products_count }} produse
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Include descendenți</label>
                                        <select name="include_descendants" class="form-select">
                                            <option value="1" @selected($section->opt('include_descendants',1))>Da</option>
                                            <option value="0" @selected(!$section->opt('include_descendants',1))>Nu</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <div class="col-lg-4">
                    <div class="card fancy">
                        <div class="card-body">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" name="active" value="1" id="active"
                                    {{ old('active',$section->active)?'checked':'' }}>
                                <label class="form-check-label" for="active">Activ</label>
                            </div>
                            <label class="form-label">Ordine</label>
                            <input type="number" name="position" class="form-control"
                                   value="{{ old('position',$section->position) }}">
                        </div>
                    </div>
                    <div class="mt-3 d-grid">
                        <button class="btn btn-primary">Salvează</button>
                        <a class="btn btn-outline-secondary mt-2" href="{{ route('admin.home-sections.index') }}">Înapoi</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const typeSel    = document.getElementById('type');
            const titleEl    = document.getElementById('title');
            const catSel     = document.getElementById('category_id');

            // --- afișare config după tip ---
            function showCfg(){
                document.querySelectorAll('.cfg').forEach(x=>x.style.display='none');
                const v = typeSel.value;
                const el = document.querySelector('.cfg-'+v);
                if (el) el.style.display = 'block';
            }
            typeSel.addEventListener('change', showCfg);
            showCfg();

            // --- autofill titlu pentru categorie ---
            function maybeFillTitle(){
                if (!catSel) return;
                const opt = catSel.selectedOptions[0];
                if (!opt) return;
                const catName = opt.getAttribute('data-name') || opt.textContent.trim();
                const canAutofill = titleEl.dataset.autofill === '1' || !titleEl.value.trim();
                if (typeSel.value === 'category' && canAutofill) titleEl.value = catName;
            }
            catSel?.addEventListener('change', ()=>{ maybeFillTitle(); titleEl.dataset.autofill = '1'; });
            titleEl?.addEventListener('input', ()=>{ titleEl.dataset.autofill = '0'; });
            maybeFillTitle();

            // === Dual list: produse ===
            const poolList    = document.getElementById('poolList');
            const pickedList  = document.getElementById('pickedList');
            const poolSearch  = document.getElementById('poolSearch');
            const productIds  = document.getElementById('product_ids');
            const poolCount   = document.getElementById('poolCount');
            const pickedCount = document.getElementById('pickedCount');

            // helpers UI
            function updateCounts(){
                poolCount.textContent   = poolList?.querySelectorAll('.item:not(.d-none)').length ?? 0;
                pickedCount.textContent = pickedList?.querySelectorAll('.item').length ?? 0;
            }
            function syncHidden(){
                const ids = Array.from(pickedList.querySelectorAll('.item')).map(x=>x.dataset.id);
                productIds.value = ids.join(',');
                updateCounts();
            }
            function makePoolItem(id, name, meta){
                const el = document.createElement('div');
                el.className = 'item'; el.dataset.id = id; el.draggable = true;
                el.innerHTML =
                    `<div><div class="name">${name}</div><div class="meta">${meta}</div></div>
       <div class="actions"><button class="btnAdd" title="Adaugă"><i class="bi bi-plus-circle"></i></button></div>`;
                return el;
            }
            function makePickedItem(id, name, meta){
                const el = document.createElement('div');
                el.className = 'item'; el.dataset.id = id; el.draggable = true;
                el.innerHTML =
                    `<div><div class="name">${name}</div><div class="meta">${meta}</div></div>
       <div class="actions"><button class="btnRemove" title="Elimină"><i class="bi bi-x-circle"></i></button></div>`;
                return el;
            }
            function getAfterElement(container, y){
                const els = [...container.querySelectorAll('.item:not(.dragging)')];
                return els.find(el => y <= el.getBoundingClientRect().top + el.offsetHeight/2) || null;
            }

            // ascunde din pool ce e deja în picked
            if (poolList && pickedList){
                const pickedIds = new Set([...pickedList.querySelectorAll('.item')].map(x=>x.dataset.id));
                [...poolList.querySelectorAll('.item')].forEach(it => { if (pickedIds.has(it.dataset.id)) it.remove(); });
            }
            updateCounts();

            // + / x butoane
            poolList?.addEventListener('click', (e)=>{
                if (!e.target.closest('.btnAdd')) return;
                e.preventDefault();
                const it = e.target.closest('.item');
                const id   = it.dataset.id;
                const name = it.querySelector('.name').textContent;
                const meta = it.querySelector('.meta').textContent;
                // evităm dubluri
                if (!pickedList.querySelector(`.item[data-id="${id}"]`)) {
                    pickedList.appendChild(makePickedItem(id, name, meta));
                    it.remove();
                    syncHidden();
                }
            });
            pickedList?.addEventListener('click', (e)=>{
                if (!e.target.closest('.btnRemove')) return;
                e.preventDefault();
                const it = e.target.closest('.item');
                const id   = it.dataset.id;
                const name = it.querySelector('.name').textContent;
                const meta = it.querySelector('.meta').textContent;
                // întoarcem în pool sus
                poolList.prepend(makePoolItem(id, name, meta));
                it.remove();
                syncHidden();
            });

            // căutare în pool
            poolSearch?.addEventListener('input', ()=>{
                const term = poolSearch.value.trim().toLowerCase();
                poolList.querySelectorAll('.item').forEach(it=>{
                    const name = it.querySelector('.name').textContent.toLowerCase();
                    const id   = it.dataset.id;
                    it.classList.toggle('d-none', !(name.includes(term) || id.includes(term)));
                });
                updateCounts();
            });

            // ===== Drag & Drop (mutare + re-ordonare) =====
            let dragItem = null;
            // prindem dragstart în CAPTURING ca să fim siguri
            document.addEventListener('dragstart', (e)=>{
                const it = e.target.closest('.item');
                if (!it) return;
                dragItem = it;
                it.classList.add('dragging');
                const name = it.querySelector('.name').textContent;
                const meta = it.querySelector('.meta').textContent;
                const origin = it.parentElement === poolList ? 'pool' : 'picked';
                e.dataTransfer.setData('text/plain', JSON.stringify({ id: it.dataset.id, name, meta, origin }));
                e.dataTransfer.effectAllowed = 'move';
            }, true);

            document.addEventListener('dragend', ()=> {
                dragItem?.classList.remove('dragging');
                dragItem = null;
                syncHidden();
            }, true);

            // peste POOL (permitem drop)
            poolList?.addEventListener('dragover', (e)=>{
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
            });
            poolList?.addEventListener('drop', (e)=>{
                e.preventDefault();
                let data; try { data = JSON.parse(e.dataTransfer.getData('text/plain') || '{}'); } catch(_) { data=null; }
                if (!data || !data.id) return;

                // dacă deja există în pool, nu duplicăm
                if (!poolList.querySelector(`.item[data-id="${data.id}"]`)) {
                    poolList.prepend(makePoolItem(data.id, data.name, data.meta));
                }
                // elimină sursa dacă venea din picked
                if (dragItem && dragItem.parentElement === pickedList) dragItem.remove();
                syncHidden();
            });

            // peste PICKED (permitem drop + re-ordonare în locul corect)
            pickedList?.addEventListener('dragover', (e)=>{
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                const after = getAfterElement(pickedList, e.clientY);
                if (dragItem && dragItem.parentElement === pickedList) {
                    // re-ordonare live
                    if (after) pickedList.insertBefore(dragItem, after); else pickedList.appendChild(dragItem);
                }
            });
            pickedList?.addEventListener('drop', (e)=>{
                e.preventDefault();
                let data; try { data = JSON.parse(e.dataTransfer.getData('text/plain') || '{}'); } catch(_) { data=null; }
                if (!data || !data.id) return;

                // dacă a venit din pool: creăm item nou în picked (evităm dubluri)
                if (data.origin === 'pool' && !pickedList.querySelector(`.item[data-id="${data.id}"]`)) {
                    const newEl = makePickedItem(data.id, data.name, data.meta);
                    const after = getAfterElement(pickedList, e.clientY);
                    if (after) pickedList.insertBefore(newEl, after); else pickedList.appendChild(newEl);
                }
                // dacă a venit din picked, `dragover` deja a făcut re-ordonarea

                // elimină sursa dacă e din pool
                if (dragItem && dragItem.parentElement === poolList) dragItem.remove();
                syncHidden();
            });
        });
    </script>
@endpush