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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4 align-items-center d-flex">
                {{-- Tombol Kembali & Update --}}
                <div class="col-auto">
                    <div class="nav-wrapper">
                        <a href="{{ route('kompetensi.index') }}" class="btn btn-secondary mb-0">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </a>
                        <button type="button" class="btn btn-primary mb-0" onclick="submitForm()" id="btn-simpan">
                            <i class="fas fa-save me-1"></i>
                            <span class="font-weight-bold">Update</span>
                        </button>
                    </div>
                </div>

                {{-- ✅ ALERT DITEMPATKAN DI SAMPINGNYA --}}
                @if (session('message'))
                    <div class="col">
                        <div class="alert alert-{{ session('class', 'info') }} alert-dismissible fade show mb-0"
                            role="alert">
                            {{ session('message') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Edit Kompetensi</h5>
            </div>
            <div class="card-body">
                <!-- Tombol Tambah Kompetensi -->
                <div class="mt-3 text-end">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kompetensiModal">
                        <i class="fas fa-plus"></i> Tambah Kompetensi
                    </button>
                </div>

                <!-- Modal Pilih Kompetensi -->
                <div class="modal fade" id="kompetensiModal" tabindex="-1" role="dialog"
                    aria-labelledby="kompetensiModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="kompetensiModalLabel">Pilih Kompetensi</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body table-responsive">
                                <table class="table table-striped table-bordered display nowrap w-100" id="list_kompetensi">
                                    <thead class="text-center" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>Aksi</th>
                                            <th>ID Kompetensi</th>
                                            <th>Kompetensi</th>
                                            <th>Kategori</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($kompetensiTambahan as $kompetensi)
                                            <tr>
                                                <td class="text-center">
                                                    <input type="checkbox" class="kompetensi-checkbox"
                                                        value="{{ $kompetensi->id }}"
                                                        data-kompetensi="{{ $kompetensi->kompetensi }}"
                                                        data-kategori="{{ $kompetensi->nama_kategori }}">
                                                </td>
                                                <td class="text-sm font-weight-normal text-center">{{ $kompetensi->id }}
                                                </td>
                                                <td class="text-sm font-weight-normal">{{ $kompetensi->kompetensi }}</td>
                                                <td class="text-sm font-weight-normal">{{ $kompetensi->nama_kategori }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                <button type="button" class="btn btn-primary" onclick="addSelectedKompetensi()">Tambah
                                    Kompetensi</button>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Form Edit Kompetensi -->
                <form role="form" method="POST"
                    action="{{ route('kompetensi.update', ['idencrypt' => encrypt($list->target_id)]) }}"
                    id="kompetensi-form" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="idencrypt" value="{{ encrypt($list->id_sub_paket) }}">

                    <div class="row mb-3">
                        <!-- Pilih Paket -->
                        <div class="col-md-6">
                            <label for="nama_paket" class="form-label">Nama Paket</label>
                            <input type="text" class="form-control required-input" id="nama_paket" name="nama_paket"
                                value="{{ $list->nama_paket }}" placeholder="Nama Paket" readonly>
                            <input type="hidden" name="id_paket" id="id_paket" value="{{ $list->id_paket }}">
                        </div>

                        <!-- Pilih Sub Paket -->
                        <div class="col-md-6">
                            <label for="selected_sub_paket" class="form-label">Sub Paket</label>
                            <input type="text" name="sub_paket" class="form-control required-input"
                                id="selected_sub_paket" value="{{ $list->sub_paket }}" placeholder="Pilih Sub Paket"
                                readonly>
                            <input type="hidden" name="id_sub_paket" id="id_sub_paket"
                                value="{{ $list->id_sub_paket }}">
                        </div>
                    </div>
                    <!-- Daftar Kompetensi -->
                    <div class="table-responsive">
                        <table class="table table-bordered" id="kompetensiTable">
                            <thead>
                                <tr class="text-center" style="background-color: #00b7bd4f;">
                                    <th><input type="checkbox" id="checkAllMain" checked></th>
                                    <th>Kompetensi</th>
                                    <th>Kategori</th>
                                    <th>Target</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($kompetensiList as $kompetensi)
                                    <tr id="row_{{ $kompetensi->id }}">
                                        <td class="text-center">
                                            <input type="checkbox" class="kompetensi-checkbox"
                                                name="id_kompetensi[{{ $kompetensi->id }}]"
                                                value="{{ $kompetensi->id }}" checked>
                                        </td>
                                        <td>{{ $kompetensi->kompetensi }}</td>
                                        <td>{{ $kompetensi->nama_kategori }}</td>
                                        <td>
                                            <input type="number" class="form-control"
                                                name="target[{{ $kompetensi->id }}]"
                                                value="{{ $targets[$kompetensi->id] ?? '0' }}" min="-1"
                                                max="4" step="1" required>
                                        </td>
                                    </tr>
                                    <tr></tr>
                                @empty
                                    <tr id="emptyRow">
                                        <td colspan="4" class="text-center">Tidak ada kompetensi tersedia</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>



                    <!-- Tombol Simpan -->
                    <div class="mt-3 text-end">
                        <a href="{{ route('kompetensi.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                        <button type="button" class="btn btn-primary" onclick="submitForm()"><i
                                class="fas fa-floppy-disk me-1"></i> Update</button>
                    </div>
                </form>


            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            // ✅ Event listener untuk Check All di tabel utama
            $(document).on("change", "#checkAllMain", function() {
                let isChecked = this.checked;

                $(".kompetensi-checkbox").each(function() {
                    $(this).prop("checked", isChecked);
                });
            });

            // ✅ Event listener untuk checkbox individual di tabel utama
            $(document).on("change", ".kompetensi-checkbox-main", function() {
                let allChecked = $(".kompetensi-checkbox-main").length === $(
                    ".kompetensi-checkbox-main:checked").length;
                $("#checkAllMain").prop("checked", allChecked);
            });
        });

        $(document).ready(function() {
            let table = $('#list_kompetensi').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                info: true,
                responsive: true,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ditemukan",
                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                }
            });

            let checkedKompetensi = new Map(); // Menyimpan kompetensi yang dipilih

            // ✅ Event listener untuk checkbox individual
            $(document).on('change', '.kompetensi-checkbox', function() {
                let row = $(this).closest('tr');
                let id = $(this).val();
                let kompetensi = $(this).attr("data-kompetensi");
                let kategori = $(this).attr("data-kategori");

                if (this.checked) {
                    checkedKompetensi.set(id, {
                        id,
                        kompetensi,
                        kategori
                    });
                } else {
                    checkedKompetensi.delete(id);
                }

                console.log("Checked Kompetensi:", Array.from(checkedKompetensi.values()));
            });

            // Fungsi untuk menangani Enter Key Navigation pada semua input target
            function setupEnterKeyNavigation() {
                $(document).on("keydown", 'input[name^="target["]', function(event) {
                    if (event.key === "Enter") {
                        event.preventDefault();
                        let inputs = $('input[name^="target["]'); // Ambil semua input target
                        let index = inputs.index(this); // Dapatkan index input saat ini

                        if (index !== -1 && index + 1 < inputs.length) {
                            inputs.eq(index + 1).focus(); // Fokus ke input target berikutnya
                        }
                    }
                });
            }

            // ========================= FUNGSI TAMBAH KOMPETENSI DARI MODAL KE TABEL UTAMA =========================
            function addSelectedKompetensi() {
                let kompetensiHtml = '';

                checkedKompetensi.forEach((data) => {
                    if ($(`#row_${data.id}`).length === 0) {
                        kompetensiHtml += `
                    <tr id="row_${data.id}">
                        <td class="text-center">
                            <input type="checkbox" class="kompetensi-checkbox" name="id_kompetensi[${data.id}]" value="${data.id}" checked>
                        </td>
                        <td>${data.kompetensi}</td>
                        <td>${data.kategori}</td>
                        <td>
                            <input type="number" class="form-control" name="target[${data.id}]" min="-1" max="4" step="1" required>
                        </td>
                    </tr>
                `;
                    }
                });

                if (checkedKompetensi.size === 0) {
                    Swal.fire({
                        title: 'Pilih Kompetensi!',
                        text: 'Silakan pilih setidaknya satu kompetensi sebelum menambah.',
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                Swal.fire({
                    title: 'Konfirmasi!',
                    text: `Anda yakin ingin menambahkan ${checkedKompetensi.size} kompetensi?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Tambah!',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#emptyRow').remove();
                        $('#kompetensiTable tbody').append(kompetensiHtml);
                        $('#kompetensiModal').modal('hide');
                        setupEnterKeyNavigation();
                        console.log("Kompetensi Ditambahkan:", Array.from(checkedKompetensi.values()));
                    }
                });
            }
            setupEnterKeyNavigation();
            // Attach function to global window scope so it can be called from button
            window.addSelectedKompetensi = addSelectedKompetensi;
        });
        // ========================= FUNGSI SUBMIT FORM =========================
        function submitForm() {
            const form = document.getElementById('kompetensi-form');
            const checkedCheckboxes = document.querySelectorAll('#kompetensiTable .kompetensi-checkbox:checked');
            const requiredInputs = document.querySelectorAll('input[name^="target["]');
            let isValid = true;
            let invalidFields = [];
            let emptyFields = [];

            // ✅ Pastikan ada kompetensi yang dipilih
            if (checkedCheckboxes.length === 0) {
                Swal.fire({
                    title: 'Gagal!',
                    text: 'Pilih minimal satu kompetensi!',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                return;
            }

            // 🔥 Validasi apakah semua input target diisi dan dalam rentang yang benar
            requiredInputs.forEach(input => {
                let value = input.value.trim();
                let numericValue = parseFloat(value);
                let parentTd = input.closest("td"); // Ambil elemen parent untuk menampilkan border merah

                if (value === "") {
                    input.classList.add('is-invalid'); // ❌ Tambahkan warna merah pada input kosong
                    parentTd.classList.add("table-danger"); // ❌ Tambahkan warna merah pada kolom
                    emptyFields.push(input);
                    isValid = false;
                } else {
                    input.classList.remove('is-invalid'); // ✅ Hapus warna merah jika sudah diisi
                    parentTd.classList.remove("table-danger"); // ✅ Hapus warna merah jika sudah benar
                }

                // ✅ Validasi nilai dalam rentang -1 sampai 4
                if (!isNaN(numericValue) && (numericValue < -1 || numericValue > 4)) {
                    isValid = false;
                    invalidFields.push(input);
                    input.classList.add('is-invalid'); // ❌ Tambahkan warna merah jika nilai salah
                    parentTd.classList.add("table-danger"); // ❌ Tambahkan warna merah pada kolom
                } else {
                    input.classList.remove('is-invalid'); // ✅ Hapus warna merah jika valid
                    parentTd.classList.remove("table-danger"); // ✅ Hapus warna merah jika valid
                }
            });

            if (!isValid) {
                let errorMessage = '';
                if (emptyFields.length > 0) {
                    errorMessage += 'Semua kolom target harus diisi!<br>';
                }
                if (invalidFields.length > 0) {
                    errorMessage += 'Nilai target harus dalam rentang -1 hingga 4!';
                }

                Swal.fire({
                    title: 'Gagal!',
                    html: errorMessage,
                    icon: 'error'
                });

                // ✅ Fokus ke input pertama yang salah
                let focusField = emptyFields.length > 0 ? emptyFields[0] : invalidFields[0];
                if (focusField) {
                    focusField.focus();
                }
                return;
            }

            // ✅ SweetAlert konfirmasi sebelum submit
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: 'Data akan disimpan ke dalam sistem.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal',
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        }
    </script>
@endpush