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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <div class="row align-items-center">
                    <div class="col-lg">
                        @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>
                                Execute
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm" style="max-width: 560px;">
            <div class="card-body p-3">
                <h6 class="mb-3 text-dark font-weight-bold">Filter Layout Report</h6>
                <hr class="horizontal dark mt-0">

                <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Tanggal Mulai</label>
                        <input class="form-control" type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai', $filter['tanggal_mulai'] ?? '') }}">
                        @error('tanggal_mulai')
                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Tanggal Akhir</label>
                        <input class="form-control" type="date" name="tanggal_akhir" value="{{ old('tanggal_akhir', $filter['tanggal_akhir'] ?? '') }}">
                        @error('tanggal_akhir')
                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Departemen</label>
                        <select class="form-select" name="departemen" id="filter_departemen" onchange="clearKaryawanSelection()">
                            <option value="semua" {{ old('departemen', $filter['departemen'] ?? '') == 'semua' || old('departemen', $filter['departemen'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                            @foreach (($departemen_options ?? []) as $dept)
                                <option value="{{ $dept->nama }}" {{ old('departemen', $filter['departemen'] ?? '') == $dept->nama ? 'selected' : '' }}>{{ $dept->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Grup</label>
                        <select class="form-select" name="grup" id="filter_grup" onchange="clearKaryawanSelection()">
                            <option value="semua" {{ old('grup', $filter['grup'] ?? '') == 'semua' || old('grup', $filter['grup'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                            @foreach (($group_options ?? []) as $grp)
                                <option value="{{ $grp->nama_grup }}" {{ old('grup', $filter['grup'] ?? '') == $grp->nama_grup ? 'selected' : '' }}>{{ $grp->nama_grup }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold">Status Karyawan</label>
                        @php
                            $statusFilterForRole = $status_filter_for_role ?? [
                                'is_krl_role' => false,
                                'is_hrd_role' => false,
                                'preselected_status_ids' => [],
                                'preselected_status_names' => [],
                                'readonly' => false,
                                'message' => '',
                            ];
                        @endphp

                        @if ($statusFilterForRole['readonly'])
                            <div class="position-relative">
                                <select class="form-control select2"
                                    name="status_karyawan[]"
                                    id="filter_status_karyawan"
                                    multiple
                                    @if ($statusFilterForRole['is_krl_role']) readonly @endif>
                                    <option value="all">Semua Status</option>
                                    @if ($status_karyawan_options ?? [])
                                        @foreach ($status_karyawan_options as $st)
                                                                                        <option value="{{ $st->id }}" {{ $selected ? 'selected' : '' }}>
                                                {{ $st->nama }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                @if ($statusFilterForRole['is_krl_role'])
                                    <div class="position-absolute top-0 end-0 p-1" style="margin-top: -6px; margin-left: -6px;">
                                        <i class="fas fa-lock text-secondary" style="font-size: 10px;"></i>
                                    </div>
                                @endif
                            </div>
                            @if (!empty($statusFilterForRole['message']))
                                <small class="text-warning d-block mt-1">
                                    <i class="fas fa-info-circle me-1"></i>{{ $statusFilterForRole['message'] }}
                                </small>
                            @endif
                        @else
                            <select class="form-control select2"
                                name="status_karyawan[]"
                                id="filter_status_karyawan"
                                multiple>
                                <option value="all" {{ empty($statusFilterForRole['preselected_status_ids']) ? 'selected' : '' }}>Semua Status</option>
                                @if ($status_karyawan_options ?? [])
                                    @foreach ($status_karyawan_options as $st)
                                        <br />
<b>Warning</b>:  Undefined variable $st in <b>/opt/lampp/htdocs/msjabsensi/resources/views/report/rptftm/filter.blade.php</b> on line <b>117</b><br />
<br />
<b>Warning</b>:  Attempt to read property "id" on null in <b>/opt/lampp/htdocs/msjabsensi/resources/views/report/rptftm/filter.blade.php</b> on line <b>117</b><br />
                                        <option value="{{ $st->id }}" {{ $selected || ($preselected && empty($filterValue)) ? 'selected' : '' }}>
                                            {{ $st->nama }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        @endif
                    </div>

                    <div class="form-group mb-0">
                        <label class="form-control-label font-weight-bold">Nama Karyawan</label>
                        <input type="hidden" name="karyawan" id="nik_hidden" value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                        <div class="input-group">
                            <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                            <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Modal Karyawan Picker --}}
        <div class="modal fade" id="karyawanPickerModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mb-0">List Data Karyawan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
<style>
    .picker-search-wrap { max-width: 360px; width: 100%; flex-wrap: nowrap; align-items: stretch; }
    .picker-search-wrap > .form-control { height: calc(1.5em + 1rem + 2px); }
    .picker-search-wrap > .btn { height: calc(1.5em + 1rem + 2px); }
</style>
                        <div class="d-flex justify-content-end mb-3">
                            <div class="input-group picker-search-wrap">
                                <input type="text" class="form-control" id="karyawanPickerSearch" placeholder="Cari..." oninput="filterKaryawanPicker()">
                                <button class="btn btn-primary" type="button" onclick="filterKaryawanPicker()">
                                    <i class="fas fa-search me-1"></i>Cari
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center mb-0" id="karyawanPickerTable">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th style="width: 80px;">Action</th>
                                        <th>NIK</th>
                                        <th>Nama</th>
                                        <th>Departemen</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="karyawanPickerBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let karyawanPickerTable = null;
        let karyawanPickerData = [];
        let karyawanPickerRequestId = 0;

        function currentPickerFilters() {
            function v(el) { const n = document.getElementById(el); return n ? n.value : ''; }
            let dp = v('filter_departemen');
            let gr = v('filter_grup');
            
            // Handle multiple select for status_karyawan
            const statusSelect = document.getElementById('filter_status_karyawan');
            let st = [];
            if (statusSelect && statusSelect.selectedOptions) {
                for (let i = 0; i < statusSelect.selectedOptions.length; i++) {
                    const val = statusSelect.selectedOptions[i].value;
                    if (val && val !== 'all') st.push(val);
                }
            }
            
            if (!dp || dp === '' || dp.toLowerCase() === 'semua') dp = '';
            if (!gr || gr === '' || gr.toLowerCase() === 'semua') gr = '';
            if (!st.length || (st.length === 1 && st[0] === 'all')) st = [];
            
            return { departemen: dp, grup: gr, status_karyawan: st };
        }

        function openKaryawanModal() {
            document.getElementById('karyawanPickerSearch').value = '';
            loadKaryawanPickerData();
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                new bootstrap.Modal(document.getElementById('karyawanPickerModal')).show();
            }
        }

        function loadKaryawanPickerData() {
            const f = currentPickerFilters();
            const currentRequestId = ++karyawanPickerRequestId;
            $.ajax({
                url: '{{ url('/rptftm/get-karyawan') }}',
                method: 'GET',
                cache: false,
                data: Object.assign({ query: '' }, f),
                success: function (response) {
                    if (currentRequestId !== karyawanPickerRequestId) {
                        return;
                    }
                    if (response.success) {
                        var data = response.data || [];
                        if (karyawanPickerTable) {
                            karyawanPickerTable.destroy();
                            karyawanPickerTable = null;
                        }
                        renderKaryawanPickerRows(data);
                        if (data.length > 0) {
                            initKaryawanPickerTable();
                        }
                    }
                },
                error: function (xhr, status, error) {
                    if (currentRequestId !== karyawanPickerRequestId) return;
                    console.error('[Rptftm Picker] AJAX error:', status, error);
                }
            });
        }

        function renderKaryawanPickerRows(data) {
            karyawanPickerData = data;
            const tbody = document.getElementById('karyawanPickerBody');
            if (!data.length) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada data</td></tr>';
                return;
            }
            let html = '';
            data.forEach((k, idx) => {
                const rowStyle = isActive(k) ? '' : 'background-color:#ffe9ed;';
                html += `<tr style="cursor:pointer;${rowStyle}" onclick="selectKaryawanFromModal(${idx})">
                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectKaryawanFromModal(${idx})">Pilih</button></td>
                    <td>${escapeHtml(k.nik || '-')}</td>
                    <td>${escapeHtml(k.nama || '-')}</td>
                    <td>${escapeHtml(k.departemen || '-')}</td>
                    <td>${isActive(k) ? 'Active' : 'Non Active'}</td>
                </tr>`;
            });
            tbody.innerHTML = html;
        }

        function initKaryawanPickerTable() {
            if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
            karyawanPickerTable = $('#karyawanPickerTable').DataTable({
                language: {
                    zeroRecords: 'Tekan Tombol Cari Dahulu',
                    info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                    infoEmpty: 'Showing 0 to 0 of 0 entries',
                    infoFiltered: '(filtered from _MAX_ total entries)',
                    paginate: { previous: '<i class="fas fa-angle-left"></i>', next: '<i class="fas fa-angle-right"></i>' }
                },
                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: true,
                order: [[1, 'asc']],
                responsive: true,
                pagingType: 'simple_numbers',
                dom: 'tip'
            });
        }

        function filterKaryawanPicker() {
            const keyword = document.getElementById('karyawanPickerSearch').value.trim();
            if (karyawanPickerTable) karyawanPickerTable.search(keyword).draw();
        }

        function selectKaryawanFromModal(index) {
            const karyawan = karyawanPickerData[index];
            if (!karyawan) return;
            const display = `${karyawan.nik || ''} - ${karyawan.nama || ''}${karyawan.pin ? ' (PIN: ' + karyawan.pin + ')' : ''}`;
            // Nilai filter disimpan sebagai PIN dari mst_link_pin_karyawan,
            // karena query report hanya mencocokkan att_log.pin (bukan nik).
            document.getElementById('nik_hidden').value = karyawan.pin || karyawan.nik || '';
            const pick = document.getElementById('karyawan_pick');
            if (pick) pick.value = display;
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                const m = bootstrap.Modal.getInstance(document.getElementById('karyawanPickerModal'));
                if (m) m.hide();
            }
        }

        function clearKaryawanSelection() {
            const nik = document.getElementById('nik_hidden');
            const pick = document.getElementById('karyawan_pick');
            if (nik) nik.value = '';
            if (pick) pick.value = '';
            reloadKaryawanPickerIfOpen();
        }

        function reloadKaryawanPickerIfOpen() {
            var modalEl = document.getElementById('karyawanPickerModal');
            var isModalOpen = modalEl && (modalEl.classList.contains('show') || getComputedStyle(modalEl).display !== 'none');
            if (isModalOpen) {
                var searchEl = document.getElementById('karyawanPickerSearch');
                if (searchEl) searchEl.value = '';
                loadKaryawanPickerData();
            }
        }

        function escapeHtml(value) {
            return String(value || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
        }

        function isActive(k) {
            return String(k.isactive ?? '1') === '1';
        }

        function normalizeStatusKaryawanSelection(event) {
            const select = document.getElementById('filter_status_karyawan');
            if (!select) return;
            const values = Array.from(select.selectedOptions).map(option => option.value);
            const selectedValue = event && event.params && event.params.data
                ? String(event.params.data.id)
                : '';
            if (selectedValue === 'all') {
                $(select).val(['all']).trigger('change.select2');
            } else if (selectedValue !== '' && values.includes('all')) {
                $(select).val(values.filter(value => value !== 'all')).trigger('change.select2');
            } else if (values.length === 0) {
                $(select).val(['all']).trigger('change.select2');
            }
        }

        $(document).ready(function() {
            $(document).on('select2:select select2:unselect', '#filter_status_karyawan', normalizeStatusKaryawanSelection);
            // Load Select2 library if not already loaded
            if (typeof $.fn.select2 === 'undefined') {
                // Load Select2 CSS
                $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">');
                $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap.css">');
                
                // Load Select2 JS
                $.getScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js')
                    .done(function() {
                        initStatusSelect2();
                    });
            } else {
                initStatusSelect2();
            }
        });

        function initStatusSelect2() {
            const isReadonly = {{ $status_filter_for_role['readonly'] ?? false ? 'true' : 'false' }};
            
            $('#filter_status_karyawan').select2({
                placeholder: 'Pilih Status Karyawan',
                allowClear: !isReadonly,
                width: '100%',
                multiple: true,
                language: {
                    noResults: () => "Tidak ada hasil",
                    searching: () => "Mencari..."
                },
                closeOnSelect: !isReadonly,
                selectOnClose: !isReadonly,
                disabled: isReadonly
            });

            if (isReadonly) {
                $('#filter_status_karyawan').prop('readonly', true);
                $('#filter_status_karyawan').prop('disabled', true);
            }
        }
    </script>
@endpush