@extends('admin.layouts.app')
@section('title','Footer — Impostazioni')

@push('styles')
    <style>
        .card-lite{border:1px solid var(--bs-border-color);border-radius:.75rem}
        .sortable .item{border:1px solid var(--bs-border-color);border-radius:.5rem;padding:.5rem;margin-bottom:.5rem;background:#fff}
        .item .small{opacity:.75}
        .two-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
        @media (max-width: 992px){ .two-cols{grid-template-columns:1fr} }
    </style>
@endpush

@section('content')
    <div class="container-fluid mt-4">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <form method="post" action="{{ route('admin.footer.update') }}">
            @csrf

            <div class="row g-3">
                <div class="col-lg-8">
                    {{-- Impostazioni generali --}}
                    <div class="card card-lite">
                        <div class="card-header"><strong>Impostazioni generali</strong></div>
                        <div class="card-body two-cols">
                            <div>
                                <label class="form-label">Descrizione breve (azienda)</label>
                                <textarea class="form-control" name="company_blurb" rows="4">{{ old('company_blurb',$settings->company_blurb) }}</textarea>

                                <div class="row g-2 mt-2">
                                    <div class="col-md-6">
                                        <label class="form-label">Telefono</label>
                                        <input class="form-control" name="phone" value="{{ old('phone',$settings->phone) }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Email</label>
                                        <input class="form-control" name="email" value="{{ old('email',$settings->email) }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Indirizzo</label>
                                        <textarea class="form-control" name="address" rows="2">{{ old('address',$settings->address) }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label class="form-label d-block">Social (URL)</label>
                                <input class="form-control mb-2" name="social_facebook"  placeholder="Facebook"  value="{{ old('social_facebook',$settings->social_facebook) }}">
                                <input class="form-control mb-2" name="social_instagram" placeholder="Instagram" value="{{ old('social_instagram',$settings->social_instagram) }}">
                                <input class="form-control mb-2" name="social_youtube"   placeholder="YouTube"   value="{{ old('social_youtube',$settings->social_youtube) }}">
                                <input class="form-control mb-2" name="social_tiktok"    placeholder="TikTok"    value="{{ old('social_tiktok',$settings->social_tiktok) }}">
                                <input class="form-control mb-2" name="social_linkedin"  placeholder="LinkedIn"  value="{{ old('social_linkedin',$settings->social_linkedin) }}">
                                <input class="form-control mb-2" name="social_x"         placeholder="X/Twitter" value="{{ old('social_x',$settings->social_x) }}">
                            </div>
                        </div>
                    </div>

                    {{-- Colonne + link --}}
                    <div class="card card-lite mt-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <strong>Colonne e link</strong>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddCol">+ Aggiungi colonna</button>
                        </div>
                        <div class="card-body" id="colsWrap">
                            @php $oldCols = old('columns'); @endphp
                            @if($oldCols)
                                @foreach($oldCols as $ci=>$col)
                                    @include('admin.footer.partials._column', ['ci'=>$ci,'col'=>$col])
                                @endforeach
                            @else
                                @foreach($columns as $ci=>$c)
                                    @include('admin.footer.partials._column', [
                                      'ci'=>$ci,
                                      'col'=>[
                                        'title'=>$c->title,
                                        'links'=>$c->links->map(fn($l)=>[
                                          'label'=>$l->label,'url'=>$l->url,'target'=>$l->target,'is_active'=>$l->is_active
                                        ])->toArray()
                                      ]
                                    ])
                                @endforeach
                            @endif
                        </div>
                    </div>

                    {{-- Badge-uri (opțional) --}}
                    <div class="card card-lite mt-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <strong>Badge (opzionale)</strong>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddBadge">+ Aggiungi badge</button>
                        </div>
                        <div class="card-body" id="badgesWrap">
                            @php $oldBadges = old('badges'); @endphp
                            @if($oldBadges)
                                @foreach($oldBadges as $bi=>$b)
                                    @include('admin.footer.partials._badge', ['bi'=>$bi,'b'=>$b])
                                @endforeach
                            @else
                                @foreach($badges as $bi=>$b)
                                    @include('admin.footer.partials._badge', ['bi'=>$bi,'b'=>[
                                      'image_path'=>$b->image_path,'url'=>$b->url,'is_active'=>$b->is_active
                                    ]])
                                @endforeach
                            @endif
                        </div>
                    </div>

                </div>

                <div class="col-lg-4">
                    {{-- Categorii --}}
                    <div class="card card-lite">
                        <div class="card-header"><strong>Categorie in footer</strong></div>
                        <div class="card-body">
                            <div class="mb-2">
                                <label class="form-label">Modalità</label>
                                <select name="categories_mode" id="categories_mode" class="form-select">
                                    <option value="auto"   @selected(old('categories_mode',$settings->categories_mode)==='auto')>Automatico (prime categorie attive)</option>
                                    <option value="manual" @selected(old('categories_mode',$settings->categories_mode)==='manual')>Selezione manuale</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Limite categorie (auto)</label>
                                <input type="number" class="form-control" name="category_limit" min="1" max="50"
                                       value="{{ old('category_limit',$settings->category_limit) }}">
                            </div>

                            <div id="manualCats" style="{{ old('categories_mode',$settings->categories_mode)==='manual'?'':'display:none' }}">
                                <label class="form-label">Seleziona categorie (trascina per ordinare)</label>
                                <select id="catsSelect" class="form-select mb-2">
                                    <option value="">— scegli —</option>
                                    @foreach($categories as $c)
                                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                                    @endforeach
                                </select>
                                <div id="catPicked" class="sortable">
                                    @php
                                        $oldSel = collect(old('categories')) ?: $selCats->pluck('category_id');
                                    @endphp
                                    @foreach($oldSel as $cid)
                                        @php $c = $categories->firstWhere('id',$cid); @endphp
                                        @if($c)
                                            <div class="item" data-id="{{ $c->id }}">
                                                <div><strong>{{ $c->name }}</strong></div>
                                                <input type="hidden" name="categories[]" value="{{ $c->id }}">
                                                <button type="button" class="btn btn-sm btn-outline-danger float-end btnCatDel">Rimuovi</button>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3 d-grid">
                        <button class="btn btn-primary">Salva</button>
                        <a class="btn btn-outline-secondary mt-2" href="{{ route('admin.dashboard') }}">Indietro</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const colsWrap = document.getElementById('colsWrap');
            const btnAddCol = document.getElementById('btnAddCol');
            let colIdx = {{ (isset($columns)?$columns->count():0) + (old('columns')?count(old('columns')):0) }};

            btnAddCol?.addEventListener('click', () => {
                fetch('{{ route('admin.footer.edit') }}', {headers:{'X-Requested-With':'XMLHttpRequest'}})
                    .then(()=> {
                        const html = `{!! str_replace(['@','\n',"\r"], ['@@','', ''], addslashes(view('admin.footer.partials._column', ['ci'=>'__IDX__','col'=>['title'=>'','links'=>[]]])->render())) !!}`;
                        colsWrap.insertAdjacentHTML('beforeend', html.replace(/__IDX__/g, colIdx++));
                    });
            });

            document.body.addEventListener('click', (e)=>{
                if (e.target.closest('.btnAddLink')){
                    const box = e.target.closest('.columnBox').querySelector('.linksWrap');
                    const name = e.target.dataset.name;
                    const html = `{!! str_replace(['@','\n',"\r"], ['@@','',''], addslashes(view('admin.footer.partials._link', ['ci'=>'__CI__','li'=>'__LI__','lnk'=>['label'=>'','url'=>'','target'=>'_self','is_active'=>1]])->render())) !!}`;
                    const liCount = box.querySelectorAll('.linkItem').length;
                    box.insertAdjacentHTML('beforeend', html.replace(/__CI__/g, name).replace(/__LI__/g, liCount));
                }
                if (e.target.closest('.btnDelCol'))  e.target.closest('.columnBox')?.remove();
                if (e.target.closest('.btnDelLink')) e.target.closest('.linkItem')?.remove();
                if (e.target.closest('#catsSelect')){
                    // nothing
                }
                if (e.target.classList.contains('btnCatDel')) e.target.closest('.item')?.remove();
            });

            // Categorie manuale
            const mode = document.getElementById('categories_mode');
            const manualCats = document.getElementById('manualCats');
            const catsSelect = document.getElementById('catsSelect');
            const catPicked = document.getElementById('catPicked');

            mode?.addEventListener('change',()=> manualCats.style.display = mode.value==='manual'?'block':'none');

            catsSelect?.addEventListener('change',()=>{
                const id = catsSelect.value; if(!id) return;
                if (catPicked.querySelector(`.item[data-id="${id}"]`)) return;
                const name = catsSelect.options[catsSelect.selectedIndex].text;
                const tpl = document.createElement('div');
                tpl.className='item'; tpl.dataset.id=id;
                tpl.innerHTML = `<div><strong>${name}</strong></div>
      <input type="hidden" name="categories[]" value="${id}">
      <button type="button" class="btn btn-sm btn-outline-danger float-end btnCatDel">Rimuovi</button>`;
                catPicked.appendChild(tpl);
                catsSelect.value='';
            });

            // mic sort simplu via drag&drop
            let drag;
            catPicked?.addEventListener('dragstart',e=>{ if(e.target.classList.contains('item')){ drag=e.target; e.dataTransfer.effectAllowed='move'; }});
            catPicked?.addEventListener('dragover',e=>{ e.preventDefault(); const after=[...catPicked.querySelectorAll('.item:not(.dragging)')].find(el=> e.clientY <= el.getBoundingClientRect().top + el.offsetHeight/2 ); if(drag){ drag.classList.add('dragging'); if(after) catPicked.insertBefore(drag,after); else catPicked.appendChild(drag);} });
            catPicked?.addEventListener('dragend',()=> drag?.classList.remove('dragging'));
        });
    </script>
@endpush