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

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

    <div class="container-fluid mt-4">
        <!-- Filter Report Kompetensi -->
        <div class="card card-outline card-info">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">
                    <i class="fas fa-filter"></i> Filter Report Kompetensi
                </h3>
            </div>

            <!-- Card Body -->
            <div class="card-body">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    <div class="row">
                        <!-- Tipe Filter -->
                        <div class="col-md-3 mb-2">
                            <label class="form-label fw-bold">Tipe Filter</label>
                            <select name="tipe-filter" id="tipe-filter" class="form-control select2">
                                <option value="" selected disabled>-- Pilih Tipe Filter --</option>
                                <option value="department">Department</option>
                                <option value="karyawan">Karyawan</option>
                            </select>
                        </div>

                        <!-- Tahun -->
                        <div class="col-md-3 mb-2">
                            <label class="form-label fw-bold">Tahun</label>
                            <select name="filter-year" id="yearSelect" class="form-control select2">
                                <option value="" selected disabled>-- Pilih Tahun Periode --</option>
                                @foreach ($tahun as $t)
                                    <option value="{{ $t->tahun }}">{{ $t->tahun }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Filter Karyawan -->
                    <div class="row mt-2" id="filter-karyawan-dept" style="display: none;">
                        <!-- Input Karyawan -->
                        <div class="col-md-3 mb-2">
                            <label class="form-label fw-bold">Karyawan</label>
                            <div class="input-group">
                                <input type="text" name="filter-karyawan" id="filter-karyawan" class="form-control"
                                    placeholder="Cari Karyawan" readonly>
                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                    data-bs-target="#searchModalKaryawan" style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>
                        <!-- Input Departemen -->
                        <div class="col-md-3 mb-2">
                            <label class="form-label fw-bold">Departemen</label>
                            <input type="text" name="filter-dept" id="filter-dept" class="form-control"
                                placeholder="Departemen" readonly>
                        </div>
                    </div>


                    <!-- Modal Search Karyawan -->
                    <div class="modal fade" id="searchModalKaryawan" tabindex="-1" aria-labelledby="searchModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable modal-lg">
                            <div class="modal-content">
                                <div class="modal-header text-white">
                                    <h5 class="modal-title" id="searchModalLabel">List Karyawan</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <!-- Table List Karyawan -->
                                    <table class="table table-bordered table-hover" id="karyawanTable">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th width="20px">Action</th>
                                                <th>NIK</th>
                                                <th>Nama Karyawan</th>
                                                <th>Department</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($karyawan as $emp)
                                                <tr>
                                                    <td>
                                                        <!-- Button Pilih Karyawan -->
                                                        <button type="button" class="btn btn-primary btn-sm"
                                                            onclick="selectKaryawan('{{ $emp->nik }}', '{{ $emp->NAMA }}', '{{ $emp->DEPT }}')">
                                                            <i class="fas fa-check-circle"></i> Pilih
                                                        </button>
                                                    </td>
                                                    <td>{{ $emp->nik }}</td>
                                                    <td>{{ $emp->NAMA }}</td>
                                                    <td>{{ $emp->DEPT }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Filter Department -->
                    @php
                        $departmentCount = $departments->count();
                    @endphp

                    @if ($departmentCount > 1)
                        <div class="row mt-2" id="filter-dept-only" style="display: block;">
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold">Departemen</label>
                                <select name="filter-dept" id="filter-dept-select" class="form-control select2">
                                    <option value="" selected>Pilih Department</option>
                                    @foreach ($departments as $dept)
                                        <option value="{{ $dept->nama }}">{{ $dept->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @elseif ($departmentCount == 1)
                        <div class="row mt-2" id="filter-dept-only" style="display: block;">
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold">Departemen</label>
                                <input type="text" class="form-control" value="{{ $departments->first()->nama }}"
                                    readonly>
                                <input type="hidden" name="filter-dept" value="{{ $departments->first()->nama }}">
                            </div>
                        </div>
                    @endif


                    <!-- Search Buttons -->
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <button type="submit" id="btnSearch" class="btn btn-primary" disabled>
                                <i class="fas fa-search"></i> Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        // Ambil nilai departemen: dari select (jika >1 dept) atau hidden (jika hanya 1 dept)
        function getDeptValue() {
            const $select = $('#filter-dept-select');
            if ($select.length) return $select.val() || '';
            const $hidden = $('input[name="filter-dept"][type="hidden"]');
            return $hidden.length ? ($hidden.val() || '') : '';
        }

        // Show/hide blok input sesuai tipe filter
        function toggleFilterBlocks() {
            const tipe = $('#tipe-filter').val();
            $('#filter-karyawan-dept, #filter-dept-only').hide();

            if (tipe === 'karyawan') {
                $('#filter-karyawan-dept').show();
                // reset dropdown departemen (jika ada) karena tidak dipakai di mode karyawan
                if ($('#filter-dept-select').length) {
                    $('#filter-dept-select').val(null).trigger('change');
                }
                $('#filter-dept').val('');
            } else if (tipe === 'department') {
                $('#filter-dept-only').show();
                // kosongkan nik karyawan (tidak dipakai di mode department)
                $('#filter-karyawan').val('');
                $('#filter-dept').val('');
            }
        }

        // Aturan enable tombol Search:
        // - tipe=karyawan  => Tahun + NIK (filter-karyawan)
        // - tipe=department=> Tahun + Departemen (select/hidden)
        function updateSearchBtn() {
            const tipe = $('#tipe-filter').val();
            const tahun = $('#yearSelect').val();
            const nik = $('#filter-karyawan').val();
            const dept = getDeptValue();

            let valid = false;
            if (tipe === 'karyawan') {
                valid = !!(tahun && nik);
            } else if (tipe === 'department') {
                valid = !!(tahun && dept);
            }

            const $btn = $('#btnSearch');
            if (valid) {
                $btn.prop('disabled', false).removeClass('disabled').attr('aria-disabled', 'false');
            } else {
                $btn.prop('disabled', true).addClass('disabled').attr('aria-disabled', 'true');
            }
        }

        // Dipanggil saat klik "Pilih" pada modal karyawan
        function selectKaryawan(nik, nama, dept) {
            $('#filter-karyawan').val(nik);
            $('#filter-dept').val(dept); // hanya info readonly
            $('#searchModalKaryawan').modal('hide');
            updateSearchBtn();
        }
        window.selectKaryawan = selectKaryawan; // expose global untuk onclick di Blade

        $(document).ready(function() {
            // Init select2
            if ($.fn.select2) $('.select2').select2();

            // Init DataTable dengan guard (hindari reinit error)
            if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#karyawanTable')) {
                $('#karyawanTable').DataTable({
                    responsive: true,
                    lengthChange: false,
                    autoWidth: false
                });
            }

            // Keadaan awal: sembunyikan blok input sampai tipe dipilih, dan matikan tombol
            $('#filter-karyawan-dept, #filter-dept-only').hide();
            updateSearchBtn();

            // Listener perubahan yang memengaruhi validasi
            $('#tipe-filter').on('change', function() {
                toggleFilterBlocks();
                updateSearchBtn();
            });
            $('#yearSelect').on('change', updateSearchBtn);
            $('#filter-dept-select').on('change', updateSearchBtn);
            $('#filter-karyawan').on('input', updateSearchBtn);

            // Pengaman submit
            $('#{{ $dmenu }}-form').on('submit', function(e) {
                if ($('#btnSearch').prop('disabled')) {
                    e.preventDefault();
                    // Opsional: tampilkan peringatan
                    // Swal.fire('Lengkapi Filter', 'Harap lengkapi filter wajib terlebih dahulu.', 'warning');
                }
            });
        });
    </script>
@endpush