@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-bolt me-1"> </i><span class="font-weight-bold">Execute</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="col-md-12">
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="frdate" class="form-control-label">Dari Tanggal</label>
                                    <input type="date" id="frdate" class="form-control" name="frdate"
                                        value="{{ old('frdate', now()->format('Y-m-d')) }}">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="todate" class="form-control-label">Sampai Tanggal</label>
                                    <input type="date" id="todate" class="form-control" name="todate"
                                        value="{{ old('todate', now()->format('Y-m-d')) }}">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="kategoriBox" class="form-control-label">Pilih Nama Barang</label>
                                    <div id="kategoriBox" class="tagbox" data-name="kategori[]"></div>
                                    <small class="text-muted"></small>
                                    @error('kategori')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        $(document).ready(function() {});
    </script>

    <style>
        .tagbox {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            min-height: 46px;
            padding: .5rem;
            border: 1px solid #ced4da;
            border-radius: .375rem;
            background: #fff;
            cursor: text
        }

        .tagbox:focus-within {
            outline: 2px solid #86b7fe;
            outline-offset: 2px
        }

        .tagbox .tags {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            align-items: center
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .25rem .5rem;
            border-radius: 999px;
            background: #028284;
            font-size: .875rem;
           color:#fff;   
        }

        .tag button {
            border: 0;
            background: transparent;
            font-weight: bold;
            line-height: 1;
            cursor: pointer
        }

        .tag-input {
            flex: 1 1 160px;
            min-width: 120px;
            border: 0;
            outline: 0;
            padding: .25rem
        }

        .dropdown-list {
            position: absolute;
            left: -1px;
            right: -1px;
            top: calc(100% + 2px);
            background: #fff;
            border: 1px solid #ced4da;
            border-radius: .375rem;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
            max-height: 240px;
            overflow: auto;
            z-index: 50;
            display: none
        }

        .dropdown-item {
            padding: .5rem .75rem;
            cursor: pointer
        }

        .dropdown-item:hover,
        .dropdown-item.active {
            background: #f1f3f5
        }

        .dropdown-empty {
            padding: .5rem .75rem;
            color: #6c757d;
            font-size: .875rem
        }
    </style>

    <script>
        (function() {
            // Data dari Controller
            const OPTIONS = @json($kategoriList); // [{value:'...', label:'...'}]
            const PRESELECTED = @json($selectedKategori ?? []); // ['1','2',...]

            // ====== Core ======
            function makeTagInput({
                el,
                name,
                options,
                selected = []
            }) {
                el.classList.add('tagbox');
                el.setAttribute('tabindex', '0');
                el.dataset.name = name;

                const tagsEl = document.createElement('div');
                tagsEl.className = 'tags';
                const input = document.createElement('input');
                input.type = 'text';
                input.className = 'tag-input';
                input.placeholder = '';
                input.autocomplete = 'off';
                const dd = document.createElement('div');
                dd.className = 'dropdown-list';

                el.appendChild(tagsEl);
                el.appendChild(input);
                el.appendChild(dd);

                const selectedSet = new Set((selected || []).map(String));
                const valueToLabel = new Map(options.map(o => [String(o.value), String(o.label)]));

                function renderTags() {
                    tagsEl.querySelectorAll('.tag').forEach(n => n.remove());
                    // bersihkan hidden inputs lama
                    el.querySelectorAll('input[type="hidden"][data-generated="1"]').forEach(n => n.remove());

                    for (const val of selectedSet) {
                        const tag = document.createElement('span');
                        tag.className = 'tag';
                        const lbl = valueToLabel.get(String(val)) ?? String(val);
                        tag.innerHTML =
                            `<span>${escapeHtml(lbl)}</span><button type="button" aria-label="Hapus">&times;</button>`;
                        tag.querySelector('button').addEventListener('click', () => {
                            selectedSet.delete(String(val));
                            renderTags();
                        });
                        tagsEl.appendChild(tag);

                        const hid = document.createElement('input');
                        hid.type = 'hidden';
                        hid.name = name;
                        hid.value = String(val);
                        hid.dataset.generated = '1';
                        el.appendChild(hid);
                    }
                }

                function openDD() {
                    dd.style.display = 'block';
                }

                function closeDD() {
                    dd.style.display = 'none';
                    dd.dataset.activeIndex = '';
                }

                function isOpen() {
                    return dd.style.display === 'block';
                }

                function filterOptions(q) {
                    q = (q || '').trim().toLowerCase();
                    const pool = options.filter(o => !selectedSet.has(String(o.value)));
                    if (!q) return pool.slice(0);
                    return pool.filter(o => {
                        const L = String(o.label || '').toLowerCase();
                        const V = String(o.value || '').toLowerCase();
                        return L.includes(q) || V.includes(q);
                    }).slice(0);
                }

                function renderDD(list) {
                    dd.innerHTML = '';
                    if (list.length === 0) {
                        const empty = document.createElement('div');
                        empty.className = 'dropdown-empty';
                        empty.textContent = 'Tidak ada hasil';
                        dd.appendChild(empty);
                        return;
                    }
                    list.forEach((o, i) => {
                        const item = document.createElement('div');
                        item.className = 'dropdown-item';
                        item.dataset.value = String(o.value);
                        item.textContent = o.label ?? o.value;
                        item.addEventListener('mousedown', (
                            e) => {
                            e.preventDefault();
                            addValue(String(o.value));
                        });
                        dd.appendChild(item);
                    });
                }

                function addValue(val) {
                    if (!val) return;
                    if (!selectedSet.has(String(val))) {
                        selectedSet.add(String(val));
                        renderTags();
                    }
                    input.value = '';
                    closeDD();
                    input.blur();
                }

                function refreshDD() {
                    const list = filterOptions(input.value);
                    renderDD(list);
                    openDD();
                    highlight(0);
                }

                function highlight(idx) {
                    const items = Array.from(dd.querySelectorAll('.dropdown-item'));
                    items.forEach(el => el.classList.remove('active'));
                    if (items.length === 0) return;
                    const i = Math.max(0, Math.min(idx, items.length - 1));
                    items[i].classList.add('active');
                    dd.dataset.activeIndex = String(i);
                    const it = items[i];
                    const r = it.getBoundingClientRect(),
                        R = dd.getBoundingClientRect();
                    if (r.top < R.top || r.bottom > R.bottom) {
                        it.scrollIntoView({
                            block: 'nearest'
                        });
                    }
                }

                // Events
                el.addEventListener('click', () => {
                    input.focus(); // fokus saja; buka terjadi di onfocus
                });
                input.addEventListener('focus', refreshDD);
                input.addEventListener('input', refreshDD);
                input.addEventListener('keydown', (e) => {
                    if (e.key === 'ArrowDown') {
                        if (!isOpen()) refreshDD();
                        else highlight((+dd.dataset.activeIndex || 0) + 1);
                        e.preventDefault();
                    } else if (e.key === 'ArrowUp') {
                        highlight((+dd.dataset.activeIndex || 0) - 1);
                        e.preventDefault();
                    } else if (e.key === 'Enter') {
                        const i = +dd.dataset.activeIndex || 0;
                        const item = dd.querySelectorAll('.dropdown-item')[i];
                        if (item) {
                            addValue(item.dataset.value);
                            e.preventDefault();
                        }
                    } else if (e.key === 'Escape') {
                        closeDD();
                    } else if (e.key === 'Backspace' && input.value === '') {
                        // hapus tag terakhir
                        const last = Array.from(selectedSet).pop();
                        if (last) {
                            selectedSet.delete(last);
                            renderTags();
                            refreshDD();
                        }
                    }
                });

                document.addEventListener('click', (e) => {
                    if (!el.contains(e.target)) {
                        closeDD();
                    }
                });

                // init
                renderTags();
                // pre-render dropdown tertutup
                renderDD(filterOptions(''));

                // Helpers
                function escapeHtml(s) {
                    return String(s).replace(/[&<>"']/g, m => ({
                        '&': '&amp;',
                        '<': '&lt;',
                        '>': '&gt;',
                        '"': '&quot;',
                        "'": '&#39;'
                    } [m]));
                }
            }

            // Inisialisasi
            makeTagInput({
                el: document.getElementById('kategoriBox'),
                name: 'kategori[]',
                options: OPTIONS,
                selected: PRESELECTED
            });
        })();
    </script>
@endpush