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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @if (session('message'))
        <div class="alert alert-{{ session('class', 'info') }} alert-dismissible fade show" role="alert">
            {{ session('message') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <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">
                        @include('assesm._partials.back_button')
                        <button type="button" class="btn btn-primary mb-0" onclick="submitForm()"><i
                                class="fas fa-floppy-disk me-1"></i> Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="card mb-4">
            <div class="card-body">
                <form method="GET" action="{{ URL::to($url_menu . '/add') }}" id="filter-form">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <label for="kategori" class="form-label">Pilih Kategori</label>
                            <select class="form-control" name="filter_kategori" id="kategori"
                                onchange="document.getElementById('filter-form').submit()">
                                <option value="" selected disabled>Pilih Kategori</option>
                                @foreach ($kategoriList as $kategori)
                                    <option value="{{ $kategori->id }}"
                                        {{ request('filter_kategori') == $kategori->id ? 'selected' : '' }}>
                                        {{ $kategori->nama_kategori }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Tambah Kompetensi</h5>
            </div>
            <div class="card-body">
                <!-- Form Tambah Kompetensi -->
                <form role="form" method="POST" action="{{ route('kompetensi.store') }}" id="kompetensi-form"
                    enctype="multipart/form-data">
                    @csrf
                    <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"
                                placeholder="Nama Paket" readonly>
                            <input type="hidden" name="id_paket" id="id_paket">
                        </div>

                        <!-- Pilih Sub Paket -->
                        <div class="col-md-6">
                            <label for="selected_sub_paket" class="form-label">Sub Paket</label>
                            <div class="input-group">
                                <input type="text" name="sub_paket" class="form-control required-input"
                                    id="selected_sub_paket" placeholder="Pilih Sub Paket" readonly required>
                                <input type="hidden" name="id_sub_paket" id="id_sub_paket">
                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                    data-bs-target="#subPaketModal" style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr class="text-center" style="background-color: #00b7bd4f;">
                                    <th><input type="checkbox" id="checkAll"></th>
                                    <th>Kompetensi</th>
                                    <th>Kategori</th>
                                    <th>Target</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $selectedKompetensi = session('selectedKompetensi', []); @endphp
                                @forelse ($kompetensiList as $index => $kompetensi)
                                    <tr>
                                        <td class="text-center">
                                            <label>
                                                <input type="checkbox" class="kompetensi-checkbox"
                                                    name="id_kompetensi[{{ $kompetensi->id }}]"
                                                    value="{{ $kompetensi->id }}"
                                                    {{ in_array($kompetensi->id, $selectedKompetensi) ? 'checked' : '' }}>
                                            </label>
                                        </td>
                                        <td>{{ $kompetensi->kompetensi }}</td>
                                        <td>
                                            {{ $kompetensi->nama_kategori ?? 'Tidak Ditemukan' }}
                                            <input type="hidden" name="id_kategori[{{ $kompetensi->id }}]"
                                                value="{{ $kompetensi->id_kategori }}">
                                        </td>
                                        <td>
                                            <input type="number" class="form-control required-input"
                                                name="target[{{ $kompetensi->id }}]" placeholder="Masukkan Target"
                                                min="-1" step="1" required max="4"
                                                {{ in_array($kompetensi->id, $selectedKompetensi) ? '' : 'disabled' }}>
                                        </td>
                                    </tr>
                                    <tr></tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">Tidak ada kompetensi yang tersedia</td>
                                    </tr>
                                @endforelse
                            </tbody>

                        </table>
                    </div>
                    <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> Simpan</button>
                    </div>
                </form>

                <div class="modal fade" id="subPaketModal" tabindex="-1" role="dialog"
                    aria-labelledby="subPaketModalLabel" 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="subPaketModalLabel">List Sub Paket</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body table-responsive">
                                <table class="table display" id="list_sub_paket">
                                    <thead class="text-center" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="20px">Action</th>
                                            <th>ID Sub Paket</th>
                                            <th>Sub Paket</th>
                                            <th>Nama Paket</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($subPaketList as $subPaket)
                                            <tr>
                                                <td width="20px">
                                                    <span class="btn badge bg-primary badge-lg"
                                                        onclick="selectSubPaket('{{ $subPaket->id }}', '{{ $subPaket->sub_paket }}', '{{ $subPaket->nama_paket }}', '{{ $subPaket->id_paket }}')">
                                                        <i class="bi bi-check-circle me-1"></i> Select
                                                    </span>
                                                </td>
                                                <td class="text-sm font-weight-normal">{{ $subPaket->id }}</td>
                                                <td class="text-sm font-weight-normal">{{ $subPaket->sub_paket }}
                                                </td>
                                                <td class="text-sm font-weight-normal">{{ $subPaket->nama_paket }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $('#list_sub_paket').DataTable({
                responsive: true,
                paging: true,
                searching: true,
                ordering: true,
                info: 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)"
                }
            });
        });
        document.addEventListener("DOMContentLoaded", function() {
            // Tangkap semua input target
            let targetInputs = document.querySelectorAll('input[name^="target["]');

            // Loop untuk setiap input target
            targetInputs.forEach((input, index) => {
                input.addEventListener("keydown", function(event) {
                    if (event.key === "Enter") { // Jika tombol Enter ditekan
                        event.preventDefault(); // Cegah submit form

                        // Cek apakah ada input target di bawahnya
                        let nextInput = targetInputs[index + 1];

                        if (nextInput) {
                            nextInput.focus(); // Pindahkan fokus ke input berikutnya
                        }
                    }
                });
            });
        });
        document.addEventListener("DOMContentLoaded", function() {
            const kompetensiCheckboxes = document.querySelectorAll('input[type="checkbox"].kompetensi-checkbox');
            const checkAll = document.getElementById('checkAll');
            const subPaketInput = document.getElementById('selected_sub_paket');
            const idSubPaket = document.getElementById('id_sub_paket');

            // ✅ Event listener untuk Check All
            checkAll.addEventListener('change', function() {
                kompetensiCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                    toggleTargetInput(checkbox);
                });
            });

            // ✅ Event listener untuk checkbox individual
            kompetensiCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    toggleTargetInput(this);
                });
            });

            function toggleTargetInput(checkbox) {
                const targetInput = document.querySelector(`input[name="target[${checkbox.value}]"]`);
                if (checkbox.checked) {
                    targetInput.removeAttribute('disabled');
                    targetInput.setAttribute('required', 'true');
                } else {
                    targetInput.setAttribute('disabled', 'true');
                    targetInput.removeAttribute('required');
                    targetInput.value = ''; // Kosongkan nilai target saat kompetensi tidak dipilih
                    targetInput.classList.remove('is-invalid'); // ✅ Reset alert merah jika sebelumnya error
                }
            }

            // ✅ Fungsi Validasi Sub Paket
            function validateSubPaket() {
                if (subPaketInput.value.trim() === '') {
                    subPaketInput.classList.add('is-invalid'); // ✅ Tambahkan alert merah
                    return false;
                } else {
                    subPaketInput.classList.remove('is-invalid'); // ✅ Reset alert jika sudah diisi
                    return true;
                }
            }

            // ✅ Fungsi Submit Form
            window.submitForm = function() {
                const form = document.getElementById('kompetensi-form');
                const checkedCheckboxes = document.querySelectorAll('.kompetensi-checkbox:checked');
                const targetInputs = document.querySelectorAll('input[name^="target["]');
                let isValid = true;
                let invalidFields = [];
                let emptyFields = [];

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

                // ✅ Pastikan sub paket dipilih
                if (!validateSubPaket()) {
                    Swal.fire('Gagal!', 'Pilih Sub Paket terlebih dahulu!', 'error');
                    return;
                }

                // ✅ Validasi apakah semua input target diisi
                checkedCheckboxes.forEach(checkbox => {
                    const targetInput = document.querySelector(
                        `input[name="target[${checkbox.value}]"]`);
                    let value = targetInput.value.trim();

                    if (value === "") {
                        targetInput.classList.add(
                            'is-invalid'); // ❌ Tambahkan warna merah pada input target
                        checkbox.classList.add('is-invalid'); // ❌ Tambahkan warna merah pada checkbox
                        targetInput.setCustomValidity("Kolom ini harus diisi!");
                        isValid = false;
                        emptyFields.push(targetInput);
                    } else {
                        targetInput.classList.remove(
                            'is-invalid'); // ✅ Hapus warna merah jika sudah diisi
                        checkbox.classList.remove('is-invalid'); // ✅ Hapus warna merah jika sudah valid
                        targetInput.setCustomValidity("");
                    }

                    // ✅ Cek apakah nilai berada dalam rentang (-1 sampai 4)
                    let numericValue = parseFloat(value);
                    if (!isNaN(numericValue) && (numericValue < -1 || numericValue > 4)) {
                        isValid = false;
                        invalidFields.push(targetInput);
                        targetInput.classList.add('is-invalid'); // Tambahkan warna merah jika error
                    } else {
                        targetInput.classList.remove('is-invalid'); // Hapus tanda merah jika valid
                    }
                });

                if (!isValid) {
                    let errorMessage = '';
                    if (emptyFields.length > 0) {
                        errorMessage += 'Semua kolom target harus diisi untuk kompetensi yang dipilih!<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();
                    }
                });
            };

            // ✅ Fungsi Select Sub Paket
            window.selectSubPaket = function(id, subPaket, paketName, paketId) {
                subPaketInput.value = subPaket;
                idSubPaket.value = id;
                document.getElementById('nama_paket').value = paketName;
                document.getElementById('id_paket').value = paketId;

                subPaketInput.classList.remove('is-invalid'); // ✅ Reset alert jika sebelumnya error
                $('#subPaketModal').modal('hide');
            };
        });


        function selectSubPaket(id, subPaket, paketName, paketId) {
            // Isi input dengan sub paket yang dipilih
            document.getElementById('selected_sub_paket').value = subPaket;
            document.getElementById('nama_paket').value = paketName; // Update nama paket otomatis
            document.getElementById('id_sub_paket').value = id; // Update ID Sub Paket
            document.getElementById('id_paket').value = paketId; // Update ID Paket dengan nilai yang benar
            $('#subPaketModal').modal('hide');
        }
    </script>
@endpush