{{-- resources/views/pages/dashboard/partials/chip-styles-and-js.blade.php --}}

{{-- Quick styles untuk chip dan list modal --}}
<style>
    .chip {
        background: #e8f5ee;
        border: 1px solid #cfe8da;
        border-radius: 999px;
        padding: .35rem .6rem;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        font-size: .85rem;
        line-height: 1
    }

    .chip .remove {
        cursor: pointer
    }

    .chip-input .form-control {
        cursor: pointer;
        min-height: 42px
    }

    .chip-input .form-control:focus {
        box-shadow: none
    }

    .placeholder-chip .text-muted {
        user-select: none
    }

    .list-group-item {
        display: flex;
        align-items: center;
        gap: .55rem
    }

    .list-group-item .form-check-input {
        margin-top: 0
    }

    .form-check-input {
        appearance: none;
        -webkit-appearance: none;
        background-color: #fff;
        border: 2px solid #bbb;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        display: inline-block;
        position: relative;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .form-check-input:checked {
        background-color: #007bff;
        /* Warna centang (biru Bootstrap) */
        border-color: #007bff;
    }

    .form-check-input:checked::after {
        content: "✔";
        color: white;
        font-size: 12px;
        position: absolute;
        top: 0;
        left: 3px;
    }
</style>

@php
    // Bentuk data master {id, label} dari DB (tanpa 'satuan', sesuai skema kamu)
    $paramMesinOpt = isset($mst_parameter_mesin)
        ? $mst_parameter_mesin->map(fn($x) => ['id' => $x->id, 'label' => $x->nama])->values()
        : collect();
    $propertiesOpt = isset($mst_properties)
        ? $mst_properties->map(fn($x) => ['id' => $x->id, 'label' => $x->nama])->values()
        : collect();
@endphp

@push('addjs')
    <script>
        (function() {
            // --- Data master dari controller (pakai id+label)
            const PARAM_MESIN_DATA = @json($paramMesinOpt);
            const PROPERTIES_DATA = @json($propertiesOpt);

            // Fallback dummy bila kosong (optional, biar UI tetap hidup)
            const DATA = {
                param_mesin: PARAM_MESIN_DATA || [],
                properties: PROPERTIES_DATA || []
            };

            // State dipakai untuk chip & hidden input (submit id ke server)
            const state = {
                param_mesin: new Map(),
                properties: new Map(),
            };

            // ---------- Utils ----------
            function htmlEscape(s) {
                return $('<div>').text(s).html();
            }

            function renderList(kind) {
                const list = $('#list-' + kind).empty();
                DATA[kind].forEach((item) => {
                    const id = String(item.id);
                    const label = String(item.label ?? item.nama ?? item.kode ?? id);
                    const checked = state[kind].has(id) ? 'checked' : '';
                    list.append(`
        <label class="list-group-item">
          <input class="form-check-input me-2 modal-check" type="checkbox"
                 data-kind="${kind}" value="${htmlEscape(id)}"
                 data-label="${htmlEscape(label)}" ${checked}>
          <span>${htmlEscape(label)}</span>
        </label>
      `);
                });
                updateHint(kind);
            }

            function renderChips(kind) {
                const wrap = $('#chips-' + kind);
                const hiddenWrap = $('#hidden-' + kind);
                wrap.removeClass('placeholder-chip').empty();
                hiddenWrap.empty();

                if (state[kind].size === 0) {
                    wrap.addClass('placeholder-chip').html('<span class="text-muted">Klik untuk memilih</span>');
                } else {
                    for (const [id, label] of state[kind]) {
                        wrap.append(`
          <span class="chip" data-kind="${kind}" data-id="${htmlEscape(id)}">
            <i class="fas fa-circle" style="font-size:.5rem"></i>
            <span>${htmlEscape(label)}</span>
            <i class="fas fa-times remove" title="Hapus"></i>
          </span>
        `);
                        hiddenWrap.append(`<input type="hidden" name="${kind}[]" value="${htmlEscape(id)}">`);
                    }
                }
                $('#count-' + kind).text(String(state[kind].size));
                $('#count-total').text(String(state.param_mesin.size + state.properties.size));
            }

            function updateHint(kind) {
                $('#hint-' + kind).text(`${state[kind].size} dipilih`);
            }

            $(function() {
                // Buka modal => render daftar
                $('#modalParamMesin').on('show.bs.modal', () => renderList('param_mesin'));
                $('#modalProperties').on('show.bs.modal', () => renderList('properties'));

                // Pencarian di modal
                $(document).on('input', '.search-box', function() {
                    const target = $(this).data('target');
                    const q = (this.value || '').toLowerCase();
                    $(target).children().each(function() {
                        $(this).toggle($(this).text().toLowerCase().indexOf(q) !== -1);
                    });
                });

                // Centang/Uncentang item
                $(document).on('change', '.modal-check', function() {
                    const kind = $(this).data('kind');
                    const id = String($(this).val());
                    const label = String($(this).data('label'));
                    if (this.checked) {
                        state[kind].set(id, label);
                    } else {
                        state[kind].delete(id);
                    }
                    renderChips(kind);
                    updateHint(kind);
                });

                // Hapus chip
                $(document).on('click', '.chip .remove', function(e) {
                    e.stopPropagation();
                    const chip = $(this).closest('.chip');
                    const kind = chip.data('kind');
                    const id = String(chip.data('id'));
                    state[kind].delete(id);
                    $(`#list-${kind} .modal-check[value="${CSS.escape(id)}"]`).prop('checked', false);
                    renderChips(kind);
                    updateHint(kind);
                });

                // Klik area chip -> buka modal
                $(document).on('click', '.chip-input', function() {
                    const kind = $(this).data('kind');
                    if (kind === 'param_mesin') $('#modalParamMesin').modal('show');
                    if (kind === 'properties') $('#modalProperties').modal('show');
                });

                // PILIH SEMUA (menghormati pencarian aktif)
                $(document).on('click', '.btn-select-all', function() {
                    const kind = $(this).data('kind');
                    const $visible = $(`#list-${kind} .modal-check:visible`);
                    $visible.each(function() {
                        const id = String($(this).val());
                        const label = String($(this).data('label'));
                        state[kind].set(id, label);
                    });
                    $visible.prop('checked', true);
                    renderChips(kind);
                    updateHint(kind);
                });

                // RESET (butuh tombol dengan id="btnResetLocal" di header)
                $('#btnResetLocal').on('click', function() {
                    state.param_mesin.clear();
                    state.properties.clear();
                    renderChips('param_mesin');
                    renderChips('properties');
                    // reset select (termasuk multiple)
                    $('select.custom-select').val(null).trigger('change');
                    $('select[name="bulan[]"]').val(null).trigger('change');
                    $('select[name="tahun[]"]').val(null).trigger('change');
                    $('.modal-check').prop('checked', false);
                });

                // Render awal (placeholder)
                renderChips('param_mesin');
                renderChips('properties');
            });
        })();
        document.querySelectorAll('.form-check-input').forEach(chk => {
            chk.addEventListener('change', () => {
                chk.classList.toggle('checked', chk.checked);
            });
        });
    </script>
@endpush