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

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

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

                    <div class="card-tools m-0">
                        <button type="button" class="btn btn-info ml-2" id="btn_print" style="float: right; display: none;">
                            <i class="fas fa-print"></i> Print
                        </button>
                        <button type="button" class="btn btn-info ml-2" id="btn_print_department"
                            style="float: right; display: none;">
                            <i class="fas fa-print"></i> Print
                        </button>
                        <button type="button" class="btn btn-info ml-2" id="btn_print_karyawan"
                            style="float: right; display: none;">
                            <i class="fas fa-print"></i> Print
                        </button>
                    </div>
                </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="%">All Department</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 -->
                        <div class="row mt-2" id="filter-dept-only" style="display: none;">
                            <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>

                        <!-- Search Buttons -->
                        <div class="row mt-3">
                            <div class="col-md-6 d-flex align-items-center">
                                <!-- Search Button -->
                                <button type="submit" id="btnSearch" class="btn btn-primary me-2" disabled>
                                    <i class="fas fa-search"></i> Search
                                </button>

                                <!-- Get Detail Button -->
                                <a id="btnDetail" class="btn btn-secondary disabled"
                                    href="{{ route('rpkomp.detail', ['filter-year' => request('filter-year', date('Y')), 'filter-dept' => request('filter-dept', '%'), 'filter-karyawan' => request('filter-karyawan', '')]) }}"
                                    target="_blank" role="button" aria-disabled="true">
                                    <i class="fas fa-eye"></i> Get Detail
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @if (request('filter-karyawan') && request('filter-karyawan') !== '%')
            <div class="row">
                @if ($karyawan_info)
                    <div class="col-md-12 mb-4">
                        <div class="card shadow-sm" style="background-color: #00b7bd4f;">
                            <div class="card-body">
                                <h2 class="text-center">{{ strtoupper($karyawan_info->nama) }}
                                    ({{ $karyawan_info->nik }})</h2>
                                <h5 class="text-center">{{ $karyawan_info->departemen }} - Tahun
                                    {{ request('filter-year', date('Y')) }}</h5>
                            </div>
                        </div>
                    </div>
                @endif
            </div>


            <div class="row">
                @foreach ($karyawan_kompetensi as $kategori => $kompetensiList)
                    <div class="col-md-12 mb-4">
                        <div class="card shadow-sm" style="padding: 20px;"> <!-- Besarkan padding untuk card -->
                            <div class="card-header text-center">
                                <h5 class="mb-0">{{ $kategori }}</h5>
                            </div>
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <!-- Grafik -->
                                    <div class="col-md-8"> <!-- Besarkan ukuran grafik -->
                                        <div id="radarChart{{ preg_replace('/[^a-zA-Z0-9]/', '', $kategori) }}"
                                            style="height: 500px;"></div> <!-- Tinggi grafik lebih besar -->
                                    </div>
                                    <!-- Tabel -->
                                    <div class="col-md-4">
                                        <div class="table-responsive" style="font-size: 12px;">
                                            <!-- Perkecil teks tabel -->
                                            <table class="table table-bordered table-sm"
                                                style="color: black; word-wrap: break-word; table-layout: fixed;">
                                                <!-- Tambahkan style warna hitam -->
                                                <thead class="text-center" style="color: black;">
                                                    <!-- Pastikan warna header juga hitam -->
                                                    <tr>
                                                        <th style="width: 20%;">No</th>
                                                        <th>Aspek Pengembangan</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php
                                                        $nomor = 1;
                                                    @endphp

                                                    @foreach ($kompetensiList as $index => $kompetensi)
                                                        @if ($kompetensi['nilai_aktual'] < $kompetensi['nilai_target'])
                                                            <tr>
                                                                <td class="text-center">{{ $nomor }}</td>
                                                                <td style="white-space: normal;">
                                                                    {{ $kompetensi['kompetensi'] }}
                                                                </td>
                                                            </tr>
                                                            @php
                                                                $nomor++;
                                                            @endphp
                                                        @endif
                                                    @endforeach
                                                    <tr></tr>
                                                </tbody>

                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="row">
                @if (isset($departemen_info))
                    <div class="col-md-12 mb-4">
                        <div class="card shadow-sm" style="background-color: #00b7bd4f;">
                            <div class="card-body">
                                <h2 class="text-center">REPORT DEPARTEMEN {{ strtoupper($departemen_info->nama) }}</h2>
                                <h5 class="text-center">Tahun {{ request('filter-year', date('Y')) }}</h5>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="col-md-12 mb-4">
                        <div class="card shadow-sm" style="background-color: #00b7bd4f;">
                            <div class="card-body">
                                <h2 class="text-center">REPORT ALL DEPARTEMEN</h2>
                                <h5 class="text-center">Tahun {{ request('filter-year', date('Y')) }}</h5>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <!-- Charts -->
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header text-center" style="background-color: #00b7bd4f;">
                            <h5 class="mb-0">Report Pemenuhan Kompetensi</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-bordered mb-0">
                                    <thead class="text-center bg-light">
                                        <tr>
                                            <th>Kriteria</th>
                                            <th>Nilai</th>
                                            <th>Jumlah</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Outstanding</td>
                                            <td class="text-center">> 149%</td>
                                            <td class="text-center" style="text-align: right;">
                                                {{ number_format($kriteria_chart['Outstanding']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Exceed Expectations</td>
                                            <td class="text-center">101% - 149%</td>
                                            <td class="text-center" style="text-align: right;">
                                                {{ number_format($kriteria_chart['Exceed Expectations']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Meets Expectations</td>
                                            <td class="text-center">99% - 100.99%</td>
                                            <td class="text-center" style="text-align: right;">
                                                {{ number_format($kriteria_chart['Meets Expectations']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Needs Improvement</td>
                                            <td class="text-center">70% - 98.99%</td>
                                            <td class="text-center" style="text-align: right;">
                                                {{ number_format($kriteria_chart['Needs Improvement']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Unsatisfactory</td>
                                            <td class="text-center">
                                                < 70%</td>
                                            <td class="text-center" style="text-align: right;">
                                                {{ number_format($kriteria_chart['Unsatisfactory']['percentage'] ?? 0, 2) }}%
                                            </td>
                                        </tr>
                                        <tr class="fw-bold bg-light">
                                            <td>Total</td>
                                            <td class="text-center"></td>
                                            <td class="text-center" style="text-align: right;">
                                                {{ number_format($kriteria_chart->sum('percentage'), 2) }}%
                                            </td>
                                        </tr>
                                        <tr class="fw-bold bg-light">
                                            <td>Average Kompetensi</td>
                                            <td class="text-center"></td>
                                            <td class="text-center" style="text-align: right;">
                                                {{ number_format($average_kompetensi, 2) }}%
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- Pie Chart -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header text-center" style="background-color: #00b7bd4f;">
                            @if (isset($departemen_info))
                                <h5 class="mb-0">Kompetensi Departemen {{ $departemen_info->nama }}</h5>
                            @else
                                <h5 class="mb-0">Kompetensi Seluruh Departemen</h5>
                            @endif

                        </div>
                        <div class="card-body">
                            <div id="pieChart" style="height: 300px; cursor: pointer;" class="chart"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-header text-center" style="background-color: #00b7bd4f;">
                            <h5 class="mb-0">Pemenuhan Kompetensi per Department</h5>
                        </div>
                        <div class="card-body">
                            <div id="barChart" style="height: 300px; cursor: pointer;" class="chart"></div>
                        </div>
                    </div>
                </div>

                <!-- Bar Chart: Kompetensi Inti, Peran, General -->
                <div class="row">
                    @foreach ($kategori_kompetensi as $key => $kompetensi)
                        @if (in_array($key, ['Kompetensi Inti', 'Kompetensi Peran', 'Kompetensi Teknis - General']))
                            <div class="col-md-4 mb-4">
                                <div class="card shadow-sm h-100">
                                    <div class="card-header text-center" style="background-color: #00b7bd4f;">
                                        <h5>Prosentase Pencapaian {{ $key }}</h5>
                                    </div>
                                    <div class="card-body d-flex align-items-center">
                                        <div id="barChart{{ preg_replace('/[^a-zA-Z]/', '', $key) }}"
                                            style="height: 300px; width: 100%; cursor: pointer;" class="chart"></div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>

                <!-- Multi-Bar Chart -->
                @if (isset($departemen) && $departemen != '%')
                    <!-- Jika filter departemen dipilih -->
                    <div class="card shadow-sm">
                        <div class="card-header text-center">
                            <h6>Pencapaian Kompetensi Spesifik {{ $departemen_info->nama }}</h6>
                            @if (isset($kompetensi_departemen))
                                @foreach ($kompetensi_departemen as $kategori => $data)
                                    @if (strpos($kategori, 'Spesifik') !== false)
                                        @if (in_array($departemen, ['PM A', 'PM B', 'PM C', 'PM E']))
                                            <div class="row">
                                                <!-- Chart for Kompetensi Teknis - Spesifik Production -->
                                                @if (isset($kompetensi_departemen['Kompetensi Teknis - Spesifik Production']))
                                                    <div class="col-6">
                                                        <div class="card">
                                                            <div class="card-header text-center"
                                                                style="background-color: #00b7bd4f;">
                                                                <h5>Kompetensi Teknis - Spesifik Production</h5>
                                                            </div>
                                                            <div class="card-body">
                                                                <div id="chartProd" class="chart"
                                                                    style="width: auto; height: 800px; vertical-align: middle; cursor: pointer;">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif

                                                <!-- Chart for Kompetensi Teknis - Spesifik Teknik -->
                                                @if (isset($kompetensi_departemen['Kompetensi Teknis - Spesifik Teknik']))
                                                    <div class="col-6">
                                                        <div class="card">
                                                            <div class="card-header text-center"
                                                                style="background-color: #00b7bd4f;">
                                                                <h5>Kompetensi Teknis - Spesifik Teknik</h5>
                                                            </div>
                                                            <div class="card-body">
                                                                <div id="chartTeknik" class="chart"
                                                                    style="width: auto; height: 800px; vertical-align: middle; cursor: pointer;">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            @break

                                        @else
                                            <h5 class="mt-2">{{ $kategori }}</h5>
                                            <input id="kompetensiSelect" type="hidden" value="{{ $kategori }}">
                                        @endif
                                    @endif
                                @endforeach
                            @else
                                <p class="text-danger">Tidak ada data kompetensi spesifik yang tersedia.</p>
                            @endif
                        </div>
                        <div class="card-body">
                            <div id="specificChart" style="height: 650px; cursor: pointer;" class="chart"></div>
                        </div>

                    </div>
                @else
                    <!-- Jika filter All Department -->
                    <div class="card shadow-sm">
                        <div class="card-header text-center" style="background-color: #00b7bd4f;">
                            <h6>Pencapaian Kompetensi</h6>
                            <select id="kompetensiSelect" class="form-select w-50 mx-auto">
                                @foreach ($kompetensi_departemen as $kategori => $data)
                                    @if (in_array($kategori, ['Kompetensi Inti', 'Kompetensi Peran', 'Kompetensi Teknis - General']))
                                        <option value="{{ $kategori }}">{{ $kategori }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="card-body">
                            <div id="multiBarChart" style="height: 300px; cursor: pointer;" class="chart"></div>
                        </div>
                        <div class="table-responsive mt-4">
                            <table id="kompetensiTable" class="table table-bordered table-striped text-center">
                                <thead id="kompetensiHeader" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-center align-middle text-wrap" style="max-width: 200px;">
                                            Department</th>
                                        <th class="text-center align-middle text-wrap" style="max-width: 200px;">
                                            Kompetensi</th>
                                        <th class="text-center align-middle text-wrap" style="max-width: 200px;">Nilai
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="kompetensiBody">
                                    <!-- Data tabel akan diisi melalui JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                @endif

                <div class="row px-4 py-2">
                    <div class="col-lg">
                        <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                    style="color: #FF0000;" class="fas fa-circle"></i> Grafik yang berwarna merah artinya
                                kurang dari 70%</code>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif

    <div class="modal fade" id="dynamicChartModal" tabindex="-1" aria-labelledby="dynamicChartModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #00b7bd4f;">
                    <h5 class="modal-title" id="dynamicChartModalLabel">Chart Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Tempat chart akan dipindahkan -->
                    <div id="dynamicChartContainer" style="width: 100%; height: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
    @push('js')
        <script>
            // ===== Helpers =====
            function getDeptValue() {
                const $select = $('#filter-dept-select');
                return $select.length ? ($select.val() || '') : '';
            }

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

                if (tipe === 'karyawan') {
                    $('#filter-karyawan-dept').show();
                    if ($('#filter-dept-select').length) $('#filter-dept-select').val(null).trigger('change');
                    $('#filter-dept').val('');
                } else if (tipe === 'department') {
                    $('#filter-dept-only').show();
                    $('#filter-karyawan').val('');
                    $('#filter-dept').val('');
                } else if (tipe === '%') {
                    $('#filter-karyawan').val('');
                    $('#filter-dept').val('');
                    if ($('#filter-dept-select').length) $('#filter-dept-select').val(null).trigger('change');
                }
            }

            // Bangun URL Get Detail berdasar filter terkini
            function buildDetailUrl() {
                const baseUrl = "{{ route('rpkhed.detail') }}"; // pastikan route ada
                const params = new URLSearchParams();

                const tipe = $('#tipe-filter').val() || '';
                const tahun = $('#yearSelect').val() || '';
                const nik = $('#filter-karyawan').val() || '';
                const dept = (tipe === 'department') ? (getDeptValue() || '') :
                    (tipe === '%') ? '%' :
                    ($('#filter-dept').val() || '');

                if (tahun) params.set('filter-year', tahun);
                if (dept) params.set('filter-dept', dept);
                if (nik) params.set('filter-karyawan', nik);

                const qs = params.toString();
                return qs ? `${baseUrl}?${qs}` : baseUrl;
            }

            // Validasi untuk Search & Get Detail:
            //   - karyawan   => Tahun + NIK
            //   - department => Tahun + Departemen
            //   - %          => Tahun saja
            function updateButtons() {
                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);
                } else if (tipe === '%') {
                    valid = !!tahun;
                }

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

                // Get Detail
                const $btnDetail = $('#btnDetail');
                if (valid) {
                    $btnDetail.removeClass('disabled btn-secondary')
                        .addClass('btn-info')
                        .attr('href', buildDetailUrl())
                        .attr('aria-disabled', 'false');
                } else {
                    $btnDetail.removeClass('btn-info')
                        .addClass('disabled btn-secondary')
                        .attr('href', '#')
                        .attr('aria-disabled', 'true');
                }
            }

            // Dipanggil dari tombol "Pilih" di tabel modal karyawan
            function selectKaryawan(nik, nama, dept) {
                $('#filter-karyawan').val(nik);
                $('#filter-dept').val(dept);
                $('#searchModalKaryawan').modal('hide');
                updateButtons();
            }
            window.selectKaryawan = selectKaryawan;

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

                if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#karyawanTable')) {
                    $('#karyawanTable').DataTable({
                        responsive: true,
                        lengthChange: false,
                        autoWidth: false
                    });
                }

                // Awal
                $('#filter-karyawan-dept, #filter-dept-only').hide();
                updateButtons();

                // Listeners
                $('#tipe-filter').on('change', function() {
                    toggleFilterBlocks();
                    updateButtons();
                });
                $('#yearSelect').on('change', updateButtons);
                $('#filter-dept-select').on('change', updateButtons);
                $('#filter-karyawan').on('input', updateButtons);

                // Pengaman submit saat Search disabled
                $('#{{ $dmenu }}-form').on('submit', function(e) {
                    if ($('#btnSearch').prop('disabled')) e.preventDefault();
                });

                // Pengaman klik Get Detail saat disabled
                $('#btnDetail').on('click', function(e) {
                    if ($(this).hasClass('disabled') || $(this).attr('aria-disabled') === 'true') {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                });
            });
        </script>
    @endpush
@endsection