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

@section('content')
    @include('layouts.navbars.auth.topnav', [
        'title' => $title ?? '',
        'title_menu' => $title_menu ?? 'Dashboard',
        'title_group' => $title_group ?? '-',
    ])

    <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->value == '1')
                            <button id="btnResetLocal" type="button" class="btn btn-danger mb-0">Reset</button>
                            <button type="submit" class="btn btn-primary mb-0" title="View Chart"
                                form="{{ $dmenu }}-form" formaction="{{ url($url_menu . '/chart') }}"
                                formmethod="GET">
                                Terapkan
                            </button>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <form id="{{ $dmenu }}-form" action="" method="GET">
            <div class="row g-3">
                <div class="col-lg-9">
                    <div class="card mb-3">
                        <div class="card-header pb-2">
                            <h6 class="mb-0">Filter</h6>
                        </div>
                        <div class="card-body pt-2">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">Tahun</label>
                                    @php $selTahun = array_map('strval', (array) request('tahun', [])); @endphp
                                    <select name="tahun[]" id="selectTahun" class="form-select custom-select select-multiple select-with-all" 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 class="col-md-3">
                                    <label class="form-label">Bulan</label>
                                    @php $selBulan = array_map('intval', (array) request('bulan', [])); @endphp
                                    <select name="bulan[]" class="form-select custom-select select-multiple" 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 class="col-md-3">
                                    <label class="form-label">Shift</label>
                                    @php $selShift = (array) request('shift', []); @endphp
                                    <select name="shift[]" class="form-select custom-select select-multiple" multiple
                                        data-placeholder="Pilih shift">
                                        @foreach ($shiftList as $item)
                                            <option value="{{ $item }}"
                                                {{ in_array($item, $selShift, true) ? 'selected' : '' }}>
                                                {{ $item }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Team Group</label>
                                    @php $selTeam = (array) request('team_group', []); @endphp
                                    <select name="team_group[]" class="form-select custom-select select-multiple" multiple
                                        data-placeholder="Pilih team group">
                                        @foreach ($timGroupList as $item)
                                            <option value="{{ $item }}"
                                                {{ in_array($item, $selTeam, true) ? 'selected' : '' }}>
                                                {{ $item }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- setelah kolom Team Group (atau posisi yang kamu mau) --}}
                                <div class="col-md-6">
                                    <label class="form-label">Gedung</label>
                                    @php $selGed = (array) request('gedung', []); @endphp
                                    <select name="gedung[]" class="form-select custom-select select-multiple" multiple
                                        data-placeholder="Pilih gedung">
                                        @foreach ($gedung_list ?? [] as $g)
                                            <option value="{{ $g->id }}"
                                                {{ in_array((string) $g->id, array_map('strval', $selGed), true) ? 'selected' : '' }}>
                                                {{ $g->nama }} @if (!empty($g->kode))
                                                    ({{ $g->kode }})
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                    {{-- <div class="form-text">Hanya admin yang bisa memilih multi gedung.</div> --}}
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Material</label>
                                    @php
                                        $selMat = (array) request('material', []);
                                        $selGsm = array_map('strval', (array) request('gsm', []));
                                        $selTreatment = array_map('strval', (array) request('treatment', []));
                                    @endphp
                                    <select name="material[]" class="form-select custom-select select-multiple" multiple
                                        data-placeholder="Pilih material">
                                        @foreach ($mst_material as $item)
                                            <option value="{{ $item->id }}"
                                                {{ in_array((string) $item->id, array_map('strval', $selMat), true) ? 'selected' : '' }}>
                                                {{ $item->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">GSM</label>
                                    <select name="gsm[]" class="form-select custom-select select-multiple" 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 class="col-md-3">
                                    <label class="form-label">Threatment</label>
                                    <select name="treatment[]" class="form-select custom-select select-multiple" 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 class="col-md-6">
                                    <label class="form-label">Customer</label>
                                    @php $selCust = (array) request('customer', []); @endphp
                                    <select name="customer[]" class="form-select custom-select select-multiple" multiple
                                        data-placeholder="Pilih customer">
                                        @foreach ($mst_customer as $item)
                                            <option value="{{ $item->id }}"
                                                {{ in_array((string) $item->id, array_map('strval', $selCust), true) ? 'selected' : '' }}>
                                                {{ $item->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Mesin</label>
                                    @php $selMesin = (array) request('mesin', []); @endphp
                                    <select name="mesin[]" class="form-select custom-select select-multiple" multiple
                                        data-placeholder="Pilih mesin">
                                        @foreach ($mst_mesin as $item)
                                            <option value="{{ $item->id }}"
                                                {{ in_array((string) $item->id, array_map('strval', $selMesin), true) ? 'selected' : '' }}>
                                                {{ $item->nama }}</option>
                                        @endforeach
                                    </select>
                                    <div class="form-text">Mesin diberi warna garis pada chart.</div>
                                </div>

                                <div class="col-md-9">
                                    <label class="form-label">Batch (Highlight)</label>
                                    @php $selBatch = (array) request('batch', []); @endphp
                                    <select name="batch[]" class="form-select custom-select select-multiple" 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 class="form-text">Batch yang dipilih akan diberi tanda ▲ pada chart.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PICKER METRIK --}}
                    <div class="card">
                        <div class="card-header pb-2">
                            <h6 class="mb-0">Dashboard</h6>
                        </div>
                        <div class="card-body pt-2">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label">Properties</label>
                                    <div class="input-group chip-input" data-kind="properties" role="button"
                                        data-bs-toggle="modal" data-bs-target="#modalProperties">
                                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                                        <div id="chips-properties"
                                            class="form-control d-flex flex-wrap gap-2 align-items-center placeholder-chip">
                                            <span class="text-muted">Klik untuk memilih</span>
                                        </div>
                                    </div>
                                    <div id="hidden-properties"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Parameter Mesin</label>
                                    <div class="input-group chip-input" data-kind="param_mesin" role="button"
                                        data-bs-toggle="modal" data-bs-target="#modalParamMesin">
                                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                                        <div id="chips-param_mesin"
                                            class="form-control d-flex flex-wrap gap-2 align-items-center placeholder-chip">
                                            <span class="text-muted">Klik untuk memilih</span>
                                        </div>
                                    </div>
                                    <div id="hidden-param_mesin"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- RIGHT: status pilihan --}}
                <div class="col-lg-3">
                    <div class="card">
                        <div class="card-header pb-2">
                            <h6 class="mb-0">Status Pilihan</h6>
                        </div>
                        <div class="card-body pt-3">
                            <div class="d-flex justify-content-between mb-2"><span>Properties:</span><span
                                    id="count-properties" class="fw-bold">0</span></div>
                            <div class="d-flex justify-content-between mb-2"><span>Parameter Mesin:</span><span
                                    id="count-param_mesin" class="fw-bold">0</span></div>
                            <hr class="my-2">
                            <div class="d-flex justify-content-between"><span>Total Pilihan:</span><span id="count-total"
                                    class="fw-bold">0</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" id="submitHiddenReal" class="d-none"></button>
        </form>
    </div>

    {{-- Modal: wajib pilih minimal satu metrik --}}
    <div class="modal fade" id="modalNeedMetric" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title text-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>Perhatian
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                </div>
                <div class="modal-body pt-1">
                    <div>Pilih minimal satu: <strong>Properties</strong> atau <strong>Parameter Mesin</strong>.</div>
                </div>
                <div class="modal-footer pt-0">
                    <button class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>


    {{-- MODALS (param & properties) --}}
    @include('pages.dashboard.partials.modal-pickers')
    @include('pages.dashboard.partials.chip-styles-and-js')
@endsection
@push('addjs')
    <script>
        (function() {
            // helper aman untuk show modal (BS5/jQuery/alert fallback)
            function showNeedMetricModal() {
                var el = document.getElementById('modalNeedMetric');
                if (window.bootstrap && el) {
                    bootstrap.Modal.getOrCreateInstance(el).show();
                } else if (window.$ && $('#modalNeedMetric').modal) {
                    $('#modalNeedMetric').modal('show');
                } else {
                    alert('Pilih minimal satu: Properties atau Parameter Mesin.');
                }
            }

            // Cegat submit form "Terapkan"
            const formId = '{{ $dmenu }}-form'; // contoh menjadi: 'dashbr-form'
            const $form = $('#' + formId);

            $form.on('submit', function(e) {
                // Strip __all__ pseudo-option agar tidak dikirim ke server
                $('.select-with-all').each(function() {
                    var vals = $(this).val() || [];
                    var filtered = vals.filter(function(v) { return v !== '__all__'; });
                    $(this).val(filtered).trigger('change.select2');
                });

                // cek hidden input yang diinject chips:
                const hasProps = $('#hidden-properties input[name="properties[]"]').length > 0;
                const hasParams = $('#hidden-param_mesin input[name="param_mesin[]"]').length > 0;

                if (!(hasProps || hasParams)) {
                    e.preventDefault();
                    showNeedMetricModal();
                    return false;
                }
            });

            // Jika kamu punya tombol Terapkan di header pakai attribute `form=...`,
            // handler di atas tetap terpanggil karena event-nya 'submit' di form.

            // === "Pilih Semua" inside Select2 dropdown for .select-with-all ===
            $('.select-with-all').each(function() {
                const $sel = $(this);

                // Destroy existing select2 first, then re-init with custom config
                if ($sel.data('select2')) $sel.select2('destroy');

                $sel.select2({
                    placeholder: $sel.data('placeholder') || 'Pilih...',
                    allowClear: true,
                    closeOnSelect: false,
                    templateResult: function(data) {
                        if (data.id === '__all__') {
                            var $el = $('<span style="font-weight:600;color:#1a73e8;"><i class="fas fa-check-double me-1"></i>' + data.text + '</span>');
                            return $el;
                        }
                        return data.text;
                    }
                });

                // Prepend the "Pilih Semua" option (not submitted as value)
                if (!$sel.find('option[value="__all__"]').length) {
                    $sel.prepend('<option value="__all__">Pilih Semua</option>');
                }

                // Handle select/unselect
                $sel.on('select2:select', function(e) {
                    if (e.params && e.params.data && e.params.data.id === '__all__') {
                        // Select all real options
                        var allVals = [];
                        $sel.find('option').each(function() {
                            if (this.value && this.value !== '__all__') allVals.push(this.value);
                        });
                        $sel.val(allVals).trigger('change');
                    }
                });

                $sel.on('select2:unselect', function(e) {
                    if (e.params && e.params.data && e.params.data.id === '__all__') {
                        // Deselect all
                        $sel.val(null).trigger('change');
                    }
                });
            });
        })();
    </script>
@endpush