{{-- resources/views/pages/dashboard/partials/modal-filter.blade.php --}}
<div class="modal fade" id="modalFilter" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Filter</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>

            @php
                // --- State awal untuk range tanggal dari request (rehydrate)
                $rangeCount = (int) request('range_count', 0);
                $ranges = [];
                for ($i = 1; $i <= max(0, $rangeCount); $i++) {
                    $ranges[] = [
                        'start' => request("date_start_$i", ''),
                        'end' => request("date_end_$i", ''),
                    ];
                }

                $selBulan = array_map('intval', (array) request('bulan', []));
                $selShift = (array) request('shift', []);
                $selTeam = (array) request('team_group', []);
                $selMat = (array) request('material', []);
                $selGsm = array_map('strval', (array) request('gsm', []));
                $selTreatment = array_map('strval', (array) request('treatment', []));
                $selCust = (array) request('customer', []);
                $selMesin = (array) request('mesin', []);
                $selBatch = (array) request('batch', []);
                $selGedung = (array) request('gedung', []);

                // State custom boundary (global)
                $cbActive = (string) request('custom_boundary', '') === '1';
                $cbMin = old('custom_min', request('custom_min', ''));
                $cbTarget = old('custom_target', request('custom_target', ''));
                $cbMax = old('custom_max', request('custom_max', ''));
                $cbAllowance = old('custom_allowance', request('custom_allowance', ''));
            @endphp

            <div class="modal-body">
                <form id="filter-form" method="GET" action="">
                    {{-- pertahankan metrik terpilih --}}
                    @foreach ((array) request('properties', []) as $pid)
                        <input type="hidden" name="properties[]" value="{{ $pid }}">
                    @endforeach
                    @foreach ((array) request('param_mesin', []) as $pmid)
                        <input type="hidden" name="param_mesin[]" value="{{ $pmid }}">
                    @endforeach

                    {{-- Grid utama --}}
                    <div class="row g-3 align-items-stretch">
                        {{-- Tahun --}}
                        <div class="col-12 col-md-6 col-xl-3">
                            <div class="ff-group">
                                <label class="form-label">Tahun</label>
                                @php $selTahun = array_map('strval', (array) request('tahun', [])); @endphp
                                <select name="tahun[]" id="selectTahunModal" class="form-select custom-select select-multiple select-with-all ff-control" multiple
                                    data-placeholder="Pilih tahun">
                                    @foreach ($tahunList as $y)
                                        <option value="{{ $y }}"
                                            {{ in_array((string) $y, $selTahun, true) ? 'selected' : '' }}>
                                            {{ $y }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Bulan --}}
                        <div class="col-12 col-md-6 col-xl-3">
                            <div class="ff-group">
                                <label class="form-label">Bulan</label>
                                <select name="bulan[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih bulan">
                                    @foreach ($bulanList as $b)
                                        <option value="{{ (int) $b['mon'] }}"
                                            {{ in_array((int) $b['mon'], $selBulan, true) ? 'selected' : '' }}>
                                            {{ $b['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Shift --}}
                        <div class="col-12 col-md-6 col-xl-3">
                            <div class="ff-group">
                                <label class="form-label">Shift</label>
                                <select name="shift[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih shift">
                                    @foreach ($shiftList as $item)
                                        <option value="{{ $item }}"
                                            {{ in_array($item, $selShift, true) ? 'selected' : '' }}>
                                            {{ $item }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Team Group --}}
                        <div class="col-12 col-md-6 col-xl-3">
                            <div class="ff-group">
                                <label class="form-label">Team Group</label>
                                <select name="team_group[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih team group">
                                    @foreach ($timGroupList as $item)
                                        <option value="{{ $item }}"
                                            {{ in_array($item, $selTeam, true) ? 'selected' : '' }}>
                                            {{ $item }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        {{-- Gedung (admin) --}}
                        <div class="col-12 col-md-6">
                            <div class="ff-group">
                                <label class="form-label">Gedung</label>
                                <select name="gedung[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih gedung">
                                    @foreach ($gedung_list ?? [] as $g)
                                        <option value="{{ $g->id }}"
                                            {{ in_array((string) $g->id, array_map('strval', $selGedung), true) ? 'selected' : '' }}>
                                            {{ $g->nama }} @if (!empty($g->kode))
                                                ({{ $g->kode }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Material (distinct by name, value gabungan id) --}}
                        <div class="col-12 col-md-6">
                            <div class="ff-group">
                                <label class="form-label">Material</label>
                                <select name="material[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih material">
                                    @foreach ($ui_material ?? $mst_material as $item)
                                        @php
                                            $value = isset($item->ids) ? implode(',', $item->ids) : $item->id;
                                            $isSel = false;
                                            foreach ($selMat as $v) {
                                                $arr = is_string($v) && str_contains($v, ',') ? explode(',', $v) : [$v];
                                                if (
                                                    in_array((string) $value, [(string) $v], true) ||
                                                    count(
                                                        array_intersect(
                                                            $arr,
                                                            isset($item->ids) ? $item->ids : [$item->id],
                                                        ),
                                                    ) > 0
                                                ) {
                                                    $isSel = true;
                                                    break;
                                                }
                                            }
                                        @endphp
                                        <option value="{{ $value }}" {{ $isSel ? 'selected' : '' }}>
                                            {{ $item->nama }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- GSM --}}
                        <div class="col-12 col-md-6">
                            <div class="ff-group">
                                <label class="form-label">GSM</label>
                                <select name="gsm[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih GSM">
                                    @foreach ($gsmList ?? [] as $gsm)
                                        <option value="{{ $gsm }}"
                                            {{ in_array((string) $gsm, $selGsm, true) ? 'selected' : '' }}>
                                            {{ $gsm }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Threatment --}}
                        <div class="col-12 col-md-6">
                            <div class="ff-group">
                                <label class="form-label">Threatment</label>
                                <select name="treatment[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih threatment">
                                    @foreach ($treatmentList ?? [] as $treatment)
                                        <option value="{{ $treatment }}"
                                            {{ in_array((string) $treatment, $selTreatment, true) ? 'selected' : '' }}>
                                            {{ $treatment }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Customer (distinct) --}}
                        <div class="col-12 col-md-6">
                            <div class="ff-group">
                                <label class="form-label">Customer</label>
                                <select name="customer[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih customer">
                                    @foreach ($ui_customer ?? $mst_customer as $item)
                                        @php
                                            $value = isset($item->ids) ? implode(',', $item->ids) : $item->id;
                                            $isSel = false;
                                            foreach ($selCust as $v) {
                                                $arr = is_string($v) && str_contains($v, ',') ? explode(',', $v) : [$v];
                                                if (
                                                    in_array((string) $value, [(string) $v], true) ||
                                                    count(
                                                        array_intersect(
                                                            $arr,
                                                            isset($item->ids) ? $item->ids : [$item->id],
                                                        ),
                                                    ) > 0
                                                ) {
                                                    $isSel = true;
                                                    break;
                                                }
                                            }
                                        @endphp
                                        <option value="{{ $value }}" {{ $isSel ? 'selected' : '' }}>
                                            {{ $item->nama }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Mesin (distinct) --}}
                        <div class="col-12 col-md-6 col-xl-3">
                            <div class="ff-group">
                                <label class="form-label">Mesin</label>
                                <select name="mesin[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih mesin">
                                    @foreach ($ui_mesin ?? $mst_mesin as $item)
                                        @php
                                            $value = isset($item->ids) ? implode(',', $item->ids) : $item->id;
                                            $isSel = false;
                                            foreach ($selMesin as $v) {
                                                $arr = is_string($v) && str_contains($v, ',') ? explode(',', $v) : [$v];
                                                if (
                                                    in_array((string) $value, [(string) $v], true) ||
                                                    count(
                                                        array_intersect(
                                                            $arr,
                                                            isset($item->ids) ? $item->ids : [$item->id],
                                                        ),
                                                    ) > 0
                                                ) {
                                                    $isSel = true;
                                                    break;
                                                }
                                            }
                                        @endphp
                                        <option value="{{ $value }}" {{ $isSel ? 'selected' : '' }}>
                                            {{ $item->nama }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Batch (Highlight) --}}
                        <div class="col-12 col-md-6 col-xl-9">
                            <div class="ff-group">
                                <label class="form-label">Batch (Highlight)</label>
                                <select name="batch[]" class="form-select custom-select select-multiple ff-control"
                                    multiple data-placeholder="Pilih batch">
                                    @foreach ($trs_batch as $item)
                                        <option value="{{ $item->id }}"
                                            {{ in_array((string) $item->id, array_map('strval', $selBatch), true) ? 'selected' : '' }}>
                                            {{ $item->kode }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- ================== --}}
                    {{-- Skala Sumbu Y --}}
                    {{-- ================== --}}
                    <hr class="my-2">

                    <div class="ff-group">
                        <label class="form-label fw-bold">Skala Sumbu Y (Visual)</label>
                        <select name="y_scale_mode" class="form-select ff-control">
                            @php $ysm = request('y_scale_mode', 'normal'); @endphp
                            <option value="tight" {{ $ysm === 'tight' ? 'selected' : '' }}>Rapat</option>
                            <option value="normal" {{ $ysm === 'normal' ? 'selected' : '' }}>Normal</option>
                            <option value="loose" {{ $ysm === 'loose' ? 'selected' : '' }}>Longgar</option>
                        </select>
                        <small class="text-muted">
                            Mengatur jarak visual antara data dan batas atas/bawah grafik.
                        </small>
                    </div>


                    {{-- ======================== --}}
                    {{-- Range Tanggal (opsional) --}}
                    {{-- ======================== --}}
                    <hr class="my-2">

                    <div class="ff-group">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <span class="form-label fw-bold mb-0">Range Tanggal</span>
                                <span class="text-muted ms-1">(garis chart dipisah per range)</span>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddRange">+
                                    Tambah</button>
                                <button type="button" class="btn btn-sm btn-outline-danger"
                                    id="btnClearRange">Reset</button>
                            </div>
                        </div>

                        {{-- disimpan otomatis; diupdate oleh JS --}}
                        <input type="hidden" name="range_count" id="range_count" value="{{ count($ranges) }}">

                        <div id="rangeRows" class="d-flex flex-column gap-2"></div>

                        {{-- template baris (disembunyikan) --}}
                        <template id="tplRangeRow">
                            <div class="range-row row g-2 align-items-center">
                                <div class="col-12 col-sm-6 col-lg-3">
                                    <label class="form-label mb-1">Tanggal Awal</label>
                                    <input type="date" class="form-control ff-control" name="__DATE_START__"
                                        value="">
                                </div>
                                <div class="col-12 col-sm-6 col-lg-3">
                                    <label class="form-label mb-1">Tanggal Akhir</label>
                                    <input type="date" class="form-control ff-control" name="__DATE_END__"
                                        value="">
                                </div>

                                {{-- kolom tombol: dummy label agar sejajar, lalu tombol di tengah --}}
                                <div class="col-12 col-sm-auto d-flex flex-column">
                                    <label class="form-label mb-1 d-none d-sm-block">&nbsp;</label>
                                    <div class="col-12 col-sm-auto d-flex">
                                        <button type="button"
                                            class="btn btn-outline-danger w-100 w-sm-auto mt-sm-3 range-del-btn btnDelRange"
                                            title="Hapus range">
                                            &minus;
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    {{-- ========================================================= --}}
                    {{-- SUMBER STANDARD PROPERTIES (Reguler / Khusus Per Customer) --}}
                    {{-- (Dipindah ke sini — tepat setelah grid utama) --}}
                    {{-- ========================================================= --}}
                    <hr class="my-2">
                    @php
                        $specSource = request('spec_source', 'regular'); // 'regular' | 'special'
                        $hasSpecial = !empty($special_customers) && count($special_customers) > 0;
                    @endphp
                    <div class="mb-3 p-3 border rounded bg-light-subtle">
                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                            <div class="me-auto">
                                <label class="form-label fw-bold mb-1">Sumber Standard Properties</label>
                                <div class="text-muted small">
                                    Pilih <strong>Reguler</strong> (global) atau <strong>Khusus</strong> (per customer).
                                </div>
                            </div>
                            <div class="d-flex align-items-center flex-wrap gap-3">
                                <div class="form-check form-check-inline m-0">
                                    <input class="form-check-input" type="radio" name="spec_source"
                                        id="specRegular" value="regular"
                                        {{ $specSource !== 'special' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="specRegular">Reguler</label>
                                </div>
                                <div class="form-check form-check-inline m-0">
                                    <input class="form-check-input" type="radio" name="spec_source"
                                        id="specSpecial" value="special"
                                        {{ $specSource === 'special' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="specSpecial">Khusus (Per Customer)</label>
                                </div>
                                <a href="{{ url('/lstspc') }}" class="btn btn-sm btn-outline-primary ms-1"
                                    target="_blank" rel="noopener">Cek Detail</a>
                            </div>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">
                                Mode <strong>Khusus</strong> akan mencari standard di
                                <code>Menu Master Standard Special (Khusus per Customer)</code>.
                            </small>
                        </div>
                    </div>

                    {{-- ====================================== --}}
                    {{-- Custom Boundary (Global, override spec) --}}
                    {{-- ====================================== --}}
                    <hr class="my-2">
                    <div class="ff-group">
                        <span class="form-label fw-bold">Custom Standard Properties (Per Property)</span>
                        <small class="text-muted d-block mb-2">
                            Kosongkan jika ingin memakai standard Reguler / Khusus.
                        </small>

                        @foreach ((array) request('properties', []) as $pid)
                            @php
                                $p = $mst_properties->firstWhere('id', (int) $pid);
                                if (!$p) {
                                    continue;
                                }
                                $cp = request("custom_prop.$pid", []);
                            @endphp

                            <div class="border rounded p-2 mb-2">
                                <div class="fw-bold mb-1">{{ $p->nama }}</div>
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="number" step="any" class="form-control"
                                            name="custom_prop[{{ $pid }}][min]" placeholder="Min"
                                            value="{{ $cp['min'] ?? '' }}">
                                    </div>
                                    <div class="col">
                                        <input type="number" step="any" class="form-control"
                                            name="custom_prop[{{ $pid }}][target]" placeholder="Target"
                                            value="{{ $cp['target'] ?? '' }}">
                                    </div>
                                    <div class="col">
                                        <input type="number" step="any" class="form-control"
                                            name="custom_prop[{{ $pid }}][max]" placeholder="Max"
                                            value="{{ $cp['max'] ?? '' }}">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </form>
            </div>

            {{-- Footer --}}
            <div class="modal-footer d-flex justify-content-between">
                <div class="d-flex gap-2">
                    <button class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                    <button class="btn btn-primary"
                        onclick="
                            // Strip __all__ pseudo-option sebelum submit
                            document.querySelectorAll('#filter-form .select-with-all').forEach(function(sel) {
                                Array.from(sel.options).forEach(function(o) {
                                    if (o.value === '__all__') o.selected = false;
                                });
                            });
                            document.getElementById('filter-form').submit();
                        ">Terapkan</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL CUSTOMER KHUSUS (DILUAR MODAL FILTER) --}}
{{-- ========================================================= --}}
@push('modals')
    <div class="modal fade" id="modalCustomersSpecial" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Customer dengan Standard Khusus</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body">
                    @if (!empty($special_customers) && count($special_customers))
                        <ul class="list-group">
                            @foreach ($special_customers as $c)
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span>{{ $c->nama }}</span>
                                    <span class="badge bg-light text-muted">ID: {{ $c->id }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-muted">
                            Belum ada data customer khusus pada gedung yang terpilih / terjangkau filter saat ini.
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endpush

{{-- Scoped layout tweaks khusus modal filter --}}
<style>
    .range-del-btn {
        height: 42px !important;
        /* sama seperti .ff-control */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px !important;
        line-height: 1 !important;
    }

    /* di layar kecil, biarkan flex wrap rapi */
    @media (max-width: 575.98px) {
        .range-row .range-del-btn {
            min-height: 38px;
        }
    }

    #modalFilter .modal-dialog {
        max-width: 980px;
    }

    #modalFilter .ff-group {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        height: 100%;
    }

    #modalFilter .ff-control.form-select,
    #modalFilter .ff-control.form-control {
        min-height: 42px;
    }

    #modalFilter .ff-control[multiple] {
        min-height: 42px;
        max-height: 120px;
        overflow: auto;
    }

    #modalFilter .form-label {
        font-weight: 700;
        margin-bottom: .15rem;
    }

    @media (max-width:575.98px) {
        #modalFilter .modal-body .row {
            row-gap: .5rem;
        }
    }

    /* Kolom tombol minus sejajar bawah input date */
    #modalFilter .range-row .col-btn {
        padding-bottom: .125rem;
    }

    #modalFilter .range-row .btnDelRange {
        line-height: 1.25rem;
    }

    /* Nonaktifkan bidang custom saat toggle off */
    #modalFilter .cb-disabled input {
        background: #f7f7f7;
        pointer-events: none;
    }
</style>

@push('js')
    <script>
        (function() {
            // ===== Range dinamis: add/remove & auto-reindex =====
            const host = document.getElementById('rangeRows');
            const tpl = document.getElementById('tplRangeRow');
            const hidCnt = document.getElementById('range_count');
            const btnAdd = document.getElementById('btnAddRange');
            const btnClr = document.getElementById('btnClearRange');

            const INITIAL = @json($ranges);

            function reindex() {
                const rows = [...host.querySelectorAll('.range-row')];
                rows.forEach((row, idx) => {
                    const i = idx + 1;
                    const start = row.querySelector('input[name="__DATE_START__"], input[name^="date_start_"]');
                    const end = row.querySelector('input[name="__DATE_END__"], input[name^="date_end_"]');
                    if (start) start.setAttribute('name', `date_start_${i}`);
                    if (end) end.setAttribute('name', `date_end_${i}`);
                    const labs = row.querySelectorAll('label');
                    if (labs[0]) labs[0].textContent = `Tanggal Awal #${i}`;
                    if (labs[1]) labs[1].textContent = `Tanggal Akhir #${i}`;
                });
                hidCnt.value = rows.length;
            }

            function addRow(values = {
                start: '',
                end: ''
            }) {
                const node = tpl.content.firstElementChild.cloneNode(true);
                const start = node.querySelector('input[name="__DATE_START__"]');
                const end = node.querySelector('input[name="__DATE_END__"]');
                if (values.start) start.value = values.start;
                if (values.end) end.value = values.end;

                node.querySelector('.btnDelRange').addEventListener('click', () => {
                    node.remove();
                    reindex();
                });

                host.appendChild(node);
                reindex();
            }

            if (INITIAL.length) {
                INITIAL.forEach(r => addRow(r));
            }

            btnAdd?.addEventListener('click', () => addRow());
            btnClr?.addEventListener('click', () => {
                host.innerHTML = '';
                reindex();
            });

            // ===== Custom boundary toggle =====
            const cbToggle = document.getElementById('cbToggle');
            const cbFields = document.getElementById('cbFields');
            const cbClear = document.getElementById('cbClear');

            function syncCbFields() {
    if (!cbToggle || !cbFields) return; // ⬅️ GUARD WAJIB

    const off = !cbToggle.checked;
    cbFields.classList.toggle('cb-disabled', off);

    cbFields
        .querySelectorAll('input[type="number"]')
        .forEach(inp => {
            inp.disabled = off;
        });
}

            cbToggle?.addEventListener('change', syncCbFields);
            syncCbFields();

            cbClear?.addEventListener('click', () => {
                cbFields.querySelectorAll('input[type="number"]').forEach(i => i.value = '');
            });
        })();
    </script>
@endpush