@extends('admin.layouts.app')

@php
    $isEdit = isset($product);
    $pageTitle = $isEdit ? 'Editează produs' : 'Produs nou';
    $selectedCats    = collect(old('category_ids', $isEdit ? ($selectedCategoryIds ?? []) : []));
    $selectedRelated = collect(old('related_ids',  $isEdit ? ($selectedRelatedIds  ?? []) : []));
@endphp

@section('title', $pageTitle)

@push('styles')
    <style>
        /* Previne orice scroll orizontal doar pe pagina aceasta */
        body { overflow-x: hidden; }
        .app-main .container-xxl { overflow-x: hidden; }

        /* Aspect curat */
        .card.fancy{
            border:1px solid var(--bs-border-color);
            border-radius: 1rem;
            transition: box-shadow .18s ease, transform .18s ease;
        }
        .card.fancy:hover{ box-shadow:0 .75rem 1.5rem rgba(0,0,0,.06); transform: translateY(-2px); }
        .section-title{ font-weight:700; font-size:.95rem; letter-spacing:.25px; text-transform:uppercase; color:var(--bs-secondary-color); }

        .fade-in{ animation:fadein .2s ease; }
        @keyframes fadein { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

        /* imagine principală */
        .main-pick{ border:1px solid var(--bs-border-color); border-radius:.75rem; overflow:hidden; }
        .main-pick img{ width:100%; height:100%; object-fit:cover; display:block; }

        /* chips */
        .chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
        .chip{
            background: var(--bs-tertiary-bg);
            border:1px solid var(--bs-border-color);
            border-radius: 999px; padding:.2rem .6rem; font-size:.825rem;
            word-break: break-word; max-width:100%;
        }
        .chip .x{ margin-left:.35rem; opacity:.7; cursor:pointer; }

        /* protecție overflow pe texte lungi */
        .form-control, .form-select, .chip { min-width: 0; }
    </style>
@endpush

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

        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Verifică erorile:</strong>
                <ul class="mb-0">
                    @foreach ($errors->all() as $e) <li>{{ $e }}</li> @endforeach
                </ul>
            </div>
        @endif
        {{-- HEAD --}}
        <div class="d-flex align-items-center justify-content-between mb-3 pt-3">
            <div>
                <h3 class="mb-1">{{ $pageTitle }}</h3>
                <div class="text-secondary small">
                    @if($isEdit)#{{ $product->id }} • slug: <code class="text-body">{{ $product->slug }}</code>@else Completează câmpurile și apasă Salvează.@endif
                </div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Înapoi
                </a>
                <button form="productForm" class="btn btn-primary">
                    <i class="bi bi-save me-1"></i> Salvează
                </button>
            </div>
        </div>

        {{-- FORM --}}
        <form id="productForm" class="needs-validation" novalidate method="post"
              action="{{ $isEdit ? route('admin.products.update', $product) : route('admin.products.store') }}"
              enctype="multipart/form-data">
            @csrf
            @if($isEdit) @method('PUT') @endif

            <div class="row g-4">
                <div class="col-lg-8">

                    <div class="card fancy fade-in">
                        <div class="card-header bg-transparent">
                            <span class="section-title">Detalii & descrieri</span>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-8">
                                    <label class="form-label">Nume *</label>
                                    <input type="text" name="name" class="form-control" id="inp_name"
                                           value="{{ old('name', $product->name ?? '') }}" required>
                                    <div class="invalid-feedback">Introdu numele produsului.</div>
                                    <div class="form-text">Slug-ul se generează automat (poți edita).</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Slug</label>
                                    <input type="text" name="slug" class="form-control" id="inp_slug"
                                           value="{{ old('slug', $product->slug ?? '') }}">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Preț *</label>
                                    <input type="number" step="0.01" min="0" name="price" class="form-control"
                                           value="{{ old('price', $product->price ?? '') }}" required>
                                    <div class="invalid-feedback">Setează prețul.</div>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label">Livrare (shipping info)</label>
                                    <input type="text" name="shipping_info" class="form-control"
                                           value="{{ old('shipping_info', $product->shipping_info ?? '') }}">
                                </div>

                                <div class="col-12">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Descriere scurtă</span>
                                        <small class="text-secondary"><span id="sd_count">0</span>/800</small>
                                    </label>
                                    <textarea name="short_description" id="inp_short" class="form-control" rows="3" maxlength="800">{{ old('short_description', $product->short_description ?? '') }}</textarea>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">Descriere lungă</label>
                                    <textarea name="long_description" class="form-control" rows="8">{{ old('long_description', $product->long_description ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card fancy mt-4 fade-in">
                        <div class="card-header bg-transparent">
                            <span class="section-title">SEO</span>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Meta title</label>
                                    <input type="text" name="meta_title" class="form-control"
                                           value="{{ old('meta_title', $product->meta_title ?? '') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Meta description</span>
                                        <small class="text-secondary"><span id="md_count">0</span>/255</small>
                                    </label>
                                    <input type="text" id="inp_meta_desc" name="meta_description" class="form-control" maxlength="255"
                                           value="{{ old('meta_description', $product->meta_description ?? '') }}">
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Meta keywords (opțional)</label>
                                    <input type="text" name="meta_keywords" class="form-control"
                                           value="{{ old('meta_keywords', $product->meta_keywords ?? '')}}"
                                           placeholder="Ex: brand, categorie, termen 1, termen 2">
                                    <div class="form-text">Separă cu virgulă. Nu exagera (5–10 termeni max).</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card fancy mt-4 fade-in">
                        <div class="card-header bg-transparent">
                            <span class="section-title">Date interne (affiliate)</span>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Offer ID</label>
                                    <input type="text" name="internal_offer_id" class="form-control"
                                           value="{{ old('internal_offer_id', $product->internal_offer_id ?? '') }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">LP</label>
                                    <input type="text" name="internal_lp" class="form-control"
                                           value="{{ old('internal_lp', $product->internal_lp ?? '') }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Script link</label>
                                    <input type="url" name="internal_link_script" class="form-control"
                                           value="{{ old('internal_link_script', $product->internal_link_script ?? '') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- Right rail --}}
                <div class="col-lg-4">

                    <div class="card fancy fade-in">
                        <div class="card-header bg-transparent">
                            <span class="section-title">Publicare & asocieri</span>
                        </div>
                        <div class="card-body">
                            <div class="form-check form-switch mb-3">
                                <input type="hidden" name="active" value="0">
                                <input class="form-check-input" type="checkbox" id="inp_active" name="active" value="1"
                                    {{ old('active', $product->active ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="inp_active">Activ</label>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Brand</label>
                                <select class="form-select" name="brand_id">
                                    <option value="">—</option>
                                    @foreach($brands as $b)
                                        <option value="{{ $b->id }}" @selected(old('brand_id', $product->brand_id ?? null) == $b->id)>{{ $b->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Categorie implicită</label>
                                <select class="form-select" name="default_category_id">
                                    <option value="">—</option>
                                    @foreach($categories as $c)
                                        <option value="{{ $c->id }}" @selected(old('default_category_id', $product->default_category_id ?? null) == $c->id)>{{ $c->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Categorii</label>
                                <select class="form-select" name="category_ids[]" multiple size="6" id="sel_cats">
                                    @foreach($categories as $c)
                                        <option value="{{ $c->id }}" @selected($selectedCats->contains($c->id))>{{ $c->name }}</option>
                                    @endforeach
                                </select>
                                <div class="chips mt-2" id="chips_cats">
                                    @foreach($categories as $c)
                                        @if($selectedCats->contains($c->id))
                                            <span class="chip" data-val="{{ $c->id }}">{{ $c->name }} <span class="x" title="Scoate" data-x>&times;</span></span>
                                        @endif
                                    @endforeach
                                </div>
                                <div class="form-text">CTRL/CMD + click pentru selecție multiplă.</div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Produse related</label>
                                <select class="form-select" name="related_ids[]" multiple size="6" id="sel_rel">
                                    @foreach($products as $rp)
                                        <option value="{{ $rp->id }}" @selected($selectedRelated->contains($rp->id))>{{ $rp->name }}</option>
                                    @endforeach
                                </select>
                                <div class="chips mt-2" id="chips_rel">
                                    @foreach($products as $rp)
                                        @if($selectedRelated->contains($rp->id))
                                            <span class="chip" data-val="{{ $rp->id }}">{{ $rp->name }} <span class="x" title="Scoate" data-x>&times;</span></span>
                                        @endif
                                    @endforeach
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="card fancy mt-4 fade-in">
                        <div class="card-header bg-transparent">
                            <span class="section-title">Imagine principală</span>
                        </div>
                        <div class="card-body">
                            @php
                                $main = $isEdit ? $product->mainImage : null;
                                $mdisk = $main->disk ?? 'public';
                                $mthumb = $main ? (data_get($main->meta,'thumb_312x340') ?? $main->path) : null;
                                $msrc = $main ? Storage::disk($mdisk)->url($mthumb) : asset('assets/img/product/default.webp');
                            @endphp
                            <div class="main-pick" style="aspect-ratio:312/340;">
                                <img id="mainPreview" src="{{ $msrc }}" alt="Preview">
                            </div>
                            <input type="file" name="main_image" accept="image/*" class="form-control mt-2" id="mainImageInput">
                            <div class="d-grid mt-2">
                                <button class="btn btn-outline-secondary" type="button" id="mainClear"><i class="bi bi-x"></i> Golește</button>
                            </div>
                        </div>
                    </div>

                    <div class="card fancy mt-4 fade-in">
                        <div class="card-header bg-transparent">
                            <span class="section-title">Galerie imagini</span>
                        </div>
                        <div class="card-body">
                            <input type="file" name="gallery[]" accept="image/*" class="form-control mb-3" multiple>
                            @if($isEdit && $product->images->count())
                                <div class="row g-2">
                                    @foreach($product->images as $g)
                                        @php
                                            $gdisk = $g->disk ?? 'public';
                                            $gthumb = data_get($g->meta,'thumb_312x340') ?? $g->path;
                                            $gsrc = Storage::disk($gdisk)->url($gthumb);
                                        @endphp
                                        <div class="col-4">
                                            <div class="position-relative">
                                                <img src="{{ $gsrc }}" class="w-100 rounded border" style="aspect-ratio:1/1;object-fit:cover">
                                                <form class="position-absolute top-0 end-0 m-1" method="post" action="{{ route('admin.products.gallery.destroy', [$product, $g]) }}" onsubmit="return confirm('Ștergi imaginea din galerie?');">
                                                    @csrf @method('DELETE')
                                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-x"></i></button>
                                                </form>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-secondary small">Nu există imagini în galerie.</div>
                            @endif
                        </div>
                    </div>

                </div>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger mt-4">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                    </ul>
                </div>
            @endif
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // live slug
            const inpName = document.getElementById('inp_name');
            const inpSlug = document.getElementById('inp_slug');
            const toSlug = s => s.toLowerCase()
                .normalize('NFD').replace(/[\u0300-\u036f]/g,'')
                .replace(/[^a-z0-9]+/g,'-').replace(/(^-|-$)/g,'').substring(0,255);
            const touched = () => inpSlug.dataset.touched === '1';
            inpName?.addEventListener('input', ()=> { if(!inpSlug.value || !touched()){ inpSlug.value = toSlug(inpName.value); } });
            inpSlug?.addEventListener('input', ()=> inpSlug.dataset.touched='1');

            // counters
            const short = document.getElementById('inp_short');
            const sdCount = document.getElementById('sd_count');
            const md = document.getElementById('inp_meta_desc');
            const mdCount = document.getElementById('md_count');
            const upd = ()=>{
                if(sdCount && short) sdCount.textContent = short.value.length;
                if(mdCount && md) mdCount.textContent = md.value.length;
            };
            short?.addEventListener('input', upd); md?.addEventListener('input', upd); upd();

            // main image preview
            const mainInput = document.getElementById('mainImageInput');
            const mainPrev  = document.getElementById('mainPreview');
            const mainClear = document.getElementById('mainClear');
            mainInput?.addEventListener('change', e => {
                const f = e.target.files?.[0]; if(!f) return;
                if(!/image\/(jpe?g|png|webp)/i.test(f.type)){ alert('Format invalid (JPG/PNG/WebP).'); mainInput.value=''; return; }
                const r = new FileReader(); r.onload = ev => mainPrev.src = ev.target.result; r.readAsDataURL(f);
            });
            mainClear?.addEventListener('click', ()=>{ mainInput.value=''; @if(!$isEdit) mainPrev.src='{{ asset('assets/img/product/default.webp') }}'; @endif });

            // live chips (fără căutare, să rămână simplu & fără overflow)
            function setupChips(selectId, chipsId){
                const sel = document.getElementById(selectId);
                const chips = document.getElementById(chipsId);
                if(!sel || !chips) return;

                function render(){
                    chips.innerHTML = '';
                    [...sel.selectedOptions].forEach(o=>{
                        const sp = document.createElement('span');
                        sp.className = 'chip';
                        sp.dataset.val = o.value;
                        sp.innerHTML = `${o.text} <span class="x" data-x>&times;</span>`;
                        chips.appendChild(sp);
                    });
                }
                sel.addEventListener('change', render);
                chips.addEventListener('click', (e)=>{
                    if(e.target?.hasAttribute('data-x')){
                        const val = e.target.parentElement.parentElement.dataset.val || e.target.parentElement.dataset.val;
                        [...sel.options].forEach(o=>{ if(o.value === val){ o.selected = false; }});
                        sel.dispatchEvent(new Event('change'));
                    }
                });
                render();
            }
            setupChips('sel_cats','chips_cats');
            setupChips('sel_rel','chips_rel');

            // 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);
            });
        });
    </script>
@endpush