@extends('admin.layouts.app')

@section('title', 'Slider – Administrare')

@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); }
        .table > :not(caption) > * > * { vertical-align: middle; }
        .badge-soft { background: rgba(13,110,253,.1); color:#0d6efd; }
        .btn-gradient { background: linear-gradient(90deg, #0d6efd, #20c997); border:0; }
        .btn-gradient:hover{ filter:brightness(1.05); }
        .fade-in { animation: fadeIn .25s ease; }
        @keyframes fadeIn { from {opacity:0; transform:translateY(4px);} to {opacity:1; transform:none;} }
        .shadow-soft { box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
        .file-drop {
            border: 1.5px dashed var(--bs-border-color); border-radius:.75rem; padding:1rem; text-align:center;
            transition:border-color .2s ease, background .2s ease;
        }
        .file-drop.drag { border-color:#0d6efd; background:rgba(13,110,253,.06); }
        .thumb-mini { width: 140px; height: 65px; object-fit: cover; border-radius:.5rem; }
        .preview-on-image {
            position: relative; width: 100%; max-width: 560px; aspect-ratio: 1920/900; border-radius: .75rem; overflow: hidden;
            background: #f3f6ff; border:1px solid var(--bs-border-color);
        }
        .preview-on-image img{ width:100%; height:100%; object-fit:cover; }
        .preview-overlay {
            position:absolute; inset:0; display:flex; align-items:center; padding:2.5rem; color:#fff;
            background: linear-gradient(100deg, rgba(0,0,0,.50), rgba(0,0,0,.10) 50%, rgba(0,0,0,0));
        }
        .switch { --w:44px; --h:24px; position:relative; width:var(--w); height:var(--h); }
        .switch input { display:none; }
        .switch span { position:absolute; inset:0; background:#d0d7e1; border-radius:999px; transition:.2s; }
        .switch span::after{
            content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%;
            box-shadow:0 .15rem .5rem rgba(0,0,0,.15); transition:.2s;
        }
        .switch input:checked + span { background:#20c997; }
        .switch input:checked + span::after { transform: translateX(20px); }
    </style>
@endpush

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

        {{-- Toasts --}}
        @if(session('ok') || session('error'))
            <div class="position-fixed top-0 end-0 p-3" style="z-index:1080">
                <div class="toast show text-bg-{{ session('error') ? 'danger' : 'success' }} shadow-soft">
                    <div class="d-flex">
                        <div class="toast-body">
                            <i class="bi bi-{{ session('error') ? 'x-circle' : 'check2-circle' }} me-2"></i>
                            {{ session('error') ?? session('ok') }}
                        </div>
                        <button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>
            </div>
        @endif

        {{-- Header --}}
        <div class="page-hero p-4 mb-4 mt-4">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div class="d-flex align-items-center gap-3">
                    <span class="badge rounded-pill badge-soft px-3 py-2"><i class="bi bi-images me-1"></i> Slider</span>
                    <h3 class="mb-0">Administrare slide-uri</h3>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button class="btn btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#addPanel">
                        <i class="bi bi-plus-circle me-1"></i> Adaugă slide
                    </button>
                </div>
            </div>
            <div class="text-secondary mt-2">
                Total: <span class="badge text-bg-primary">{{ $slides->count() }}</span>
            </div>
        </div>

        {{-- ADD PANEL --}}
        <div id="addPanel" class="collapse {{ $errors->any() && !old('_edit_id') ? 'show' : '' }}">
            <div class="card fancy mb-4 fade-in">
                <div class="card-body">
                    <div class="row g-4 align-items-start">
                        <div class="col-lg-6">
                            <form id="formAdd" class="row g-3 needs-validation" method="post"
                                  action="{{ route('admin.slides.store') }}" enctype="multipart/form-data" novalidate>
                                @csrf
                                <div class="col-12">
                                    <label class="form-label">Subtitlu</label>
                                    <input type="text" name="subtitle" class="form-control"
                                           value="{{ old('subtitle') }}" placeholder="Winter Special Collection" maxlength="255">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Titlu</label>
                                    <input type="text" name="title" class="form-control"
                                           value="{{ old('title') }}" placeholder="New Collection With Modern Style" maxlength="255">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Text buton</label>
                                    <input type="text" name="button_text" class="form-control"
                                           value="{{ old('button_text') }}" placeholder="Shop Now" maxlength="100">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">URL buton</label>
                                    <input type="text" name="button_url" class="form-control"
                                           value="{{ old('button_url') }}" placeholder="/product/something" maxlength="255">
                                </div>

                                <div class="col-12">
                                    <label class="form-label">Imagine (recomandat 1920×900) – se salvează .webp</label>
                                    <div class="file-drop rounded-3" id="dropZone">
                                        <div class="small text-secondary mb-2">
                                            Trage imaginea aici sau
                                            <label class="link-primary" style="cursor:pointer;">
                                                <input type="file" name="image" id="imageInput" accept="image/*" hidden {{ old('_edit_id') ? '' : 'required' }}>
                                                alege din calculator
                                            </label>
                                        </div>
                                        <div class="small text-muted">Max 8MB · Formate: jpg, jpeg, png, webp</div>
                                    </div>
                                    <div class="invalid-feedback d-block">@error('image') {{ $message }} @enderror</div>
                                </div>

                                <div class="col-12 d-flex align-items-center justify-content-between">
                                    <div class="form-check">
                                        <input type="hidden" name="is_active" value="0">
                                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active_add" value="1" checked>
                                        <label class="form-check-label" for="is_active_add">Activ</label>
                                    </div>
                                    <button class="btn btn-gradient text-white px-4">
                                        <i class="bi bi-save me-1"></i> Salvează slide
                                    </button>
                                </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
                            </form>
                        </div>

                        <div class="col-lg-6">
                            <div class="preview-on-image shadow-soft">
                                <img id="previewImg" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='900'/%3E" alt="preview">
                                <div class="preview-overlay">
                                    <div>
                                        <p class="mb-2 opacity-75" id="pv_subtitle">{{ old('subtitle','Winter Special Collection') }}</p>
                                        <h2 class="mb-3" id="pv_title">{!! nl2br(e(old('title','New Collection With Modern Style'))) !!}</h2>
                                        <a href="#" class="btn btn-light btn-sm fw-semibold shadow-sm" id="pv_btn">
                                            {{ old('button_text','Shop Now') }} <i class="bi bi-arrow-right ms-1"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="small text-secondary mt-2">Previzualizare live a textelor peste imagine.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- LISTA SLIDES --}}
        <div class="card fancy fade-in">
            <div class="card-header bg-body d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-collection-play me-1"></i>
                    <span class="fw-semibold">Slide-uri existente</span>
                </div>
                <input class="form-control form-control-sm" id="tableFilter" placeholder="Filtrează…"
                       style="max-width: 260px;">
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0" id="slidesTable">
                        <thead class="table-light">
                        <tr>
                            <th>Previzualizare</th>
                            <th>Texte</th>
                            <th>Buton</th>
                            <th>Activ</th>
                            <th>Ordine</th>
                            <th class="text-end">Acțiuni</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($slides as $s)
                            @php
                                $imgUrl = asset('storage/'.$s->image_path);
                            @endphp
                            <tr>
                                <td>
                                    <img class="thumb-mini shadow-sm" src="{{ $imgUrl }}" alt="slide">
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $s->title ?: '—' }}</div>
                                    <div class="small text-secondary">{{ $s->subtitle ?: '—' }}</div>
                                </td>
                                <td>
                                    @if($s->button_url)
                                        <div class="small">{{ $s->button_text ?: 'Shop Now' }}</div>
                                        <code class="small text-wrap d-inline-block" style="max-width:240px">{{ $s->button_url }}</code>
                                    @else
                                        <span class="text-secondary">—</span>
                                    @endif
                                </td>
                                <td>
                                    <label class="switch" title="{{ $s->is_active ? 'Dezactivează' : 'Activează' }}">
                                        <input type="checkbox" class="js-toggle" data-id="{{ $s->id }}" {{ $s->is_active ? 'checked' : '' }}>
                                        <span></span>
                                    </label>
                                </td>
                                <td>
                                    <form action="{{ route('admin.slides.move',$s) }}?dir=up" method="POST" class="d-inline">@csrf
                                        <button class="btn btn-sm btn-outline-secondary" title="Mută mai sus">↑</button>
                                    </form>
                                    <form action="{{ route('admin.slides.move',$s) }}?dir=down" method="POST" class="d-inline">@csrf
                                        <button class="btn btn-sm btn-outline-secondary" title="Mută mai jos">↓</button>
                                    </form>
                                    <span class="ms-2 text-secondary small">#{{ $s->position }}</span>
                                </td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-outline-primary js-edit"
                                            data-id="{{ $s->id }}"
                                            data-title="{{ $s->title }}"
                                            data-subtitle="{{ $s->subtitle }}"
                                            data-btntext="{{ $s->button_text }}"
                                            data-btnurl="{{ $s->button_url }}"
                                            data-active="{{ (int)$s->is_active }}"
                                            data-img="{{ $imgUrl }}">
                                        <i class="bi bi-pencil-square"></i> Editează
                                    </button>

                                    <button class="btn btn-sm btn-outline-danger js-del"
                                            data-id="{{ $s->id }}"
                                            data-name="{{ $s->title ?: 'Slide #'.$s->id }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-secondary py-4">Nu există slide-uri.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalEdit" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <form id="editForm" class="modal-content needs-validation" method="post" enctype="multipart/form-data" novalidate>
                    @csrf @method('PUT')
                    <input type="hidden" name="_edit_id" id="edit_id" value="">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-pencil-square me-2"></i>Editează slide</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row g-4">
                            <div class="col-lg-6">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label">Subtitlu</label>
                                        <input type="text" name="subtitle" id="edit_subtitle" class="form-control" maxlength="255">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Titlu</label>
                                        <input type="text" name="title" id="edit_title" class="form-control" maxlength="255">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Text buton</label>
                                        <input type="text" name="button_text" id="edit_button_text" class="form-control" maxlength="100">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">URL buton</label>
                                        <input type="text" name="button_url" id="edit_button_url" class="form-control" maxlength="255">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Imagine (înlocuiește – recomandat 1920×900)</label>
                                        <input type="file" name="image" id="edit_image" accept="image/*" class="form-control">
                                        <div class="form-text">Se va salva .webp, imaginea existentă va fi înlocuită doar dacă alegi una nouă.</div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-check mt-2">
                                            <input type="hidden" name="is_active" value="0">
                                            <input class="form-check-input" type="checkbox" id="edit_active" name="is_active" value="1">
                                            <label class="form-check-label" for="is_active_edit">Activ</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="col-lg-6">
                                <div class="preview-on-image shadow-sm">
                                    <img id="edit_preview_img" src="" alt="preview">
                                    <div class="preview-overlay">
                                        <div>
                                            <p class="mb-2 opacity-75" id="edit_pv_subtitle">—</p>
                                            <h2 class="mb-3" id="edit_pv_title">—</h2>
                                            <a href="#" class="btn btn-light btn-sm fw-semibold shadow-sm" id="edit_pv_btn">
                                                — <i class="bi bi-arrow-right ms-1"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="small text-secondary mt-2">Previzualizare live a textelor peste imagine.</div>
                            </div>
                        </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"><i class="bi bi-save me-1"></i> Salvează</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- DELETE MODAL --}}
        <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 slide</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0">Ești sigur că vrei să ștergi <strong id="delName">acest slide</strong>?</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>

    </div>
@endsection

@push('scripts')
    <script>
        (function(){
            // Map id -> img URL pentru re-deschiderea modalului la erori
            const IMG_MAP = {
                @foreach($slides as $s)
                "{{ $s->id }}": "{{ asset('public/storage/'.$s->image_path) }}",
                @endforeach
            };

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

            // Live preview ADD
            const a_title = document.querySelector('input[name="title"]');
            const a_sub = document.querySelector('input[name="subtitle"]');
            const a_btn = document.querySelector('input[name="button_text"]');
            const pvTitle = document.getElementById('pv_title');
            const pvSub = document.getElementById('pv_subtitle');
            const pvBtn = document.getElementById('pv_btn');
            a_title?.addEventListener('input', ()=> pvTitle.innerHTML = (a_title.value || 'New Collection With Modern Style').replace('\n','<br/>'));
            a_sub?.addEventListener('input', ()=> pvSub.textContent = a_sub.value || 'Winter Special Collection');
            a_btn?.addEventListener('input', ()=> pvBtn.childNodes[0].nodeValue = (a_btn.value || 'Shop Now')+' ');

            // ADD: drag & drop + preview
            const drop = document.getElementById('dropZone');
            const fileInput = document.getElementById('imageInput');
            const pvImg = document.getElementById('previewImg');
            function setPreview(file){
                if (!file) return;
                const ok = /image\/(jpe?g|png|webp)/i.test(file.type);
                if (!ok) { alert('Format invalid. Folosește JPG/PNG/WebP.'); fileInput.value=''; return; }
                const r = new FileReader();
                r.onload = e => pvImg.src = e.target.result;
                r.readAsDataURL(file);
            }
            drop?.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('drag'); });
            drop?.addEventListener('dragleave', () => drop.classList.remove('drag'));
            drop?.addEventListener('drop', e => {
                e.preventDefault(); drop.classList.remove('drag');
                if (e.dataTransfer.files?.length) {
                    fileInput.files = e.dataTransfer.files;
                    setPreview(fileInput.files[0]);
                }
            });
            fileInput?.addEventListener('change', e => setPreview(e.target.files[0]));

            // Filter tabel
            const filter = document.getElementById('tableFilter');
            const rows = Array.from(document.querySelectorAll('#slidesTable tbody tr'));
            filter?.addEventListener('input', ()=>{
                const q = (filter.value||'').toLowerCase();
                rows.forEach(tr=>{
                    const txt = tr.innerText.toLowerCase();
                    tr.style.display = txt.includes(q) ? '' : 'none';
                });
            });

            // Toggle active (POST spre toggle)
            document.querySelectorAll('.js-toggle').forEach(chk=>{
                chk.addEventListener('change', ()=>{
                    const id = chk.dataset.id;
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `{{ route('admin.slides.toggle', ':id') }}`.replace(':id', id);
                    const csrf = document.createElement('input'); csrf.type='hidden'; csrf.name='_token'; csrf.value='{{ csrf_token() }}';
                    form.appendChild(csrf);
                    document.body.appendChild(form);
                    form.submit();
                });
            });

            // DELETE modal
            const delModal = document.getElementById('modalDelete');
            const delForm = document.getElementById('deleteForm');
            document.querySelectorAll('.js-del').forEach(btn=>{
                btn.addEventListener('click', ()=>{
                    const id = btn.dataset.id, name = btn.dataset.name||'slide';
                    document.getElementById('delName').textContent = name;
                    delForm.action = `{{ route('admin.slides.destroy', ':id') }}`.replace(':id', id);
                    new bootstrap.Modal(delModal).show();
                });
            });


// EDIT modal – populare
            const editModal = document.getElementById('modalEdit');
            const editForm  = document.getElementById('editForm');
            const e_id   = document.getElementById('edit_id');
            const e_sub  = document.getElementById('edit_subtitle');
            const e_tit  = document.getElementById('edit_title');
            const e_btxt = document.getElementById('edit_button_text');
            const e_burl = document.getElementById('edit_button_url');
            const e_act  = document.getElementById('edit_active');
            const e_img  = document.getElementById('edit_image');
            const e_pv_img = document.getElementById('edit_preview_img');
            const e_pv_sub = document.getElementById('edit_pv_subtitle');
            const e_pv_tit = document.getElementById('edit_pv_title');
            const e_pv_btn = document.getElementById('edit_pv_btn');

            // Util: parsează "1"/"0"/"true"/"false"
            function parseBool(v) {
                if (v === undefined || v === null) return false;
                const s = String(v).trim().toLowerCase();
                return s === '1' || s === 'true' || s === 'on' || s === 'yes';
            }

            function nl2br(s){ return (s || '—').replace(/\n/g, '<br/>'); }

            function setBtnText(el, text){
                // Dacă ai un <span class="btn-text"> în interior, folosește-l:
                const span = el.querySelector('.btn-text');
                if (span) { span.textContent = text || '—'; return; }
                // fallback pe nodul text înainte de icon
                if (el.firstChild && el.firstChild.nodeType === Node.TEXT_NODE) {
                    el.firstChild.nodeValue = (text || '—') + ' ';
                } else {
                    el.insertAdjacentText('afterbegin', (text || '—') + ' ');
                }
            }

            function openEditModalFromBtn(btn){
                const id   = btn.dataset.id;
                const sub  = btn.dataset.subtitle || '';
                const tit  = btn.dataset.title || '';
                const btxt = btn.dataset.btntext || '';
                const burl = btn.dataset.btnurl || '';
                const act  = parseBool(btn.dataset.active);
                const img  = btn.dataset.img || '';

                e_id.value = id;
                e_sub.value = sub;   e_pv_sub.textContent = sub || '—';
                e_tit.value = tit;   e_pv_tit.innerHTML   = nl2br(tit);
                e_btxt.value = btxt; setBtnText(e_pv_btn, btxt);
                e_burl.value = burl;
                e_act.checked = act;
                e_img.value = '';
                e_pv_img.src = img || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="900"/%3E';

                editForm.action = `{{ route('admin.slides.update', ':id') }}`.replace(':id', id);
                new bootstrap.Modal(editModal).show();
            }

            document.querySelectorAll('.js-edit').forEach(btn=>{
                btn.addEventListener('click', ()=> openEditModalFromBtn(btn));
            });

            // Live preview
            e_tit?.addEventListener('input', ()=> e_pv_tit.innerHTML = nl2br(e_tit.value));
            e_sub?.addEventListener('input', ()=> e_pv_sub.textContent = e_sub.value || '—');
            e_btxt?.addEventListener('input', ()=> setBtnText(e_pv_btn, e_btxt.value));
            e_img?.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. Folosește JPG/PNG/WebP.'); e_img.value=''; return; }
                const r = new FileReader(); r.onload = ev => e_pv_img.src = ev.target.result; r.readAsDataURL(f);
            });

            // Redeschidere modal cu valori old() după validare eșuată pe UPDATE
            @if ($errors->any() && old('_edit_id'))
            (function(){
                const id = "{{ old('_edit_id') }}";

                e_id.value   = id;
                e_sub.value  = @json(old('subtitle'));
                e_tit.value  = @json(old('title'));
                e_btxt.value = @json(old('button_text'));
                e_burl.value = @json(old('button_url'));

                // ATENȚIE: old('is_active') poate fi "0" ca string — îl tratăm corect
                e_act.checked = (String(@json(old('is_active'))) === '1');

                e_pv_sub.textContent = e_sub.value || '—';
                e_pv_tit.innerHTML   = nl2br(e_tit.value);
                setBtnText(e_pv_btn, e_btxt.value);

                e_pv_img.src = (typeof IMG_MAP !== 'undefined' && IMG_MAP[id])
                    ? IMG_MAP[id]
                    : 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="900"/%3E';

                editForm.action = `{{ route('admin.slides.update', ':id') }}`.replace(':id', id);
                new bootstrap.Modal(editModal).show();
            })();
            @endif
        })();
    </script>
@endpush