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

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<!-- Alert Notifikasi untuk Semua Error -->
@if ($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="fas fa-times-circle me-2"></i>
    <strong>Terjadi Kesalahan!</strong>
    <ul class="mb-0">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
    <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()" id="btn-simpan">
                        <i class="fas fa-floppy-disk me-1"></i>
                        <span class="font-weight-bold">Simpan</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                @include('components.alert')
                <div class="card-body">
                    <p class="text-uppercase text-sm">Insert Penilai</p>
                    <hr class="horizontal dark mt-0">
                    <form id="penilai-form" action="{{ route('penilai.store') }}" method="POST">
                        @csrf
                        <!-- Input NIK dan Nama Penilai -->
                        <div class="mb-3">
                            <label for="nik_penilai" class="form-label">NIK Penilai</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="nik_penilai" name="nik_penilai" readonly
                                    placeholder="Pilih Penilai">
                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                    data-bs-target="#penilaiModal" style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="nama_penilai" class="form-label">Nama Penilai</label>
                            <input type="text" class="form-control" id="nama_penilai" name="nama_penilai" readonly>
                        </div>

                        <!-- Tambah Karyawan yang Dinilai -->
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <p class="text-uppercase text-sm">Karyawan yang Dinilai</p>
                                    <hr class="horizontal dark mt-0">

                                    <!-- Dropdown Pilih Karyawan -->
                                    <div class="row mt-4">
                                        <div class="col-md-12">
                                            <div class="d-flex justify-content-between align-items-end">
                                                <!-- Input Pilih Karyawan -->
                                                <div style="width: 80%;">
                                                    <label for="karyawan_nama" class="form-label">Pilih Karyawan</label>
                                                    <div class="input-group">
                                                        <input type="text" id="karyawan_nama" class="form-control"
                                                            readonly placeholder="Klik untuk memilih karyawan">
                                                        <input type="hidden" id="karyawan_nik">
                                                        <span class="input-group-text bg-primary text-light"
                                                            data-bs-toggle="modal" data-bs-target="#karyawanModal"
                                                            style="cursor: pointer;">
                                                            <i class="fas fa-search"></i>
                                                        </span>
                                                    </div>
                                                </div>

                                                <!-- Tombol Tambah Karyawan di Pojok Kanan -->
                                                <div style="width: 18%;" class="text-end">
                                                    <button type="button" class="btn btn-warning"
                                                        onclick="addKaryawan()">
                                                        <i class="fa fa-plus me-2"></i> Tambah Karyawan
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <!-- Tabel Karyawan yang Dipilih -->
                                    <div class="table-responsive mt-3">
                                        <table class="table table-bordered">
                                            <thead class="text-center" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>No</th>
                                                    <th>NIK Karyawan</th>
                                                    <th>Nama Karyawan</th>
                                                    <th>Aksi</th>
                                                </tr>
                                                <tr></tr>
                                            </thead>
                                            <tbody id="karyawan-list">
                                                <!-- Karyawan akan ditambahkan di sini -->
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="penilaiModal" tabindex="-1" role="dialog" aria-labelledby="penilaiModalLabel"
    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="penilaiModalLabel">Pilih Penilai</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 display" id="list_penilai">
                    <thead class="text-center" style="background-color: #00b7bd4f;">
                        <tr>
                            <th>Aksi</th>
                            <th>NIK</th>
                            <th>Nama Penilai</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($penilaiList as $penilai)
                        <tr>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm"
                                    onclick="selectPenilai('{{ $penilai->nik }}', '{{ $penilai->nama }}')">
                                    <i class="fas fa-check-circle"></i> Pilih
                                </button>

                            </td>
                            <td>{{ $penilai->nik }}</td>
                            <td>{{ $penilai->nama }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Search Karyawan -->
<div class="modal fade" id="karyawanModal" tabindex="-1" role="dialog" aria-labelledby="karyawanModalLabel"
    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="karyawanModalLabel">Pilih Karyawan
                </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 display" id="list_karyawan">
                    <thead class="text-center" style="background-color: #00b7bd4f;">
                        <tr>
                            <th>Action</th>
                            <th>NIK</th>
                            <th>Nama</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($karyawanList as $karyawan)
                        <tr>
                            <td width="20px">
                                <button type="button" class="btn btn-sm btn-primary"
                                    onclick="selectKaryawan('{{ $karyawan->nik }}', '{{ $karyawan->nama }}')">
                                    <i class="fas fa-check-circle me-1"></i>
                                    Pilih
                                </button>
                            </td>
                            <td class="text-sm font-weight-normal">
                                {{ $karyawan->nik }}</td>
                            <td class="text-sm font-weight-normal">
                                {{ $karyawan->nama }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    let karyawanIndex = 0;

        function addKaryawan() {
            const nik = document.getElementById('karyawan_nik').value;
            const nama = document.getElementById('karyawan_nama').value;

            if (!nik || !nama) {
                Swal.fire('Error!', 'Harap pilih karyawan terlebih dahulu.', 'error');
                return;
            }

            const tableBody = document.getElementById('karyawan-list');

            // ✅ Hapus baris kosong jika ada
            const emptyRow = tableBody.querySelector('tr:not([data-nik])');
            if (emptyRow) {
                emptyRow.remove();
            }

            // ✅ Cek apakah karyawan sudah ada dalam daftar
            const existingRows = document.querySelectorAll("#karyawan-list tr[data-nik]");
            for (let row of existingRows) {
                if (row.dataset.nik === nik) {
                    Swal.fire('Error!', 'Karyawan sudah ditambahkan.', 'error');
                    return;
                }
            }

            // ✅ Tambahkan baris baru
            const newRow = document.createElement('tr');
            newRow.dataset.nik = nik;
            newRow.innerHTML = `
        <td class="text-center"></td> <!-- Nomor urut akan diperbarui nanti -->
        <td>${nik} <input type="hidden" name="karyawan[]" value="${nik}"></td>
        <td>${nama}</td>
        <td class="text-center">
            <button type="button" class="btn btn-danger btn-sm" onclick="removeKaryawan(this)">
                <i class="fa fa-trash"></i> Hapus
            </button>
        </td>
    `;

            tableBody.appendChild(newRow);
            updateRowNumbers(); // ✅ Update nomor urut setelah menambahkan karyawan

            // Reset input setelah menambahkan karyawan
            document.getElementById('karyawan_nik').value = '';
            document.getElementById('karyawan_nama').value = '';
        }



        function removeKaryawan(button) {
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Data akan dihapus dari daftar.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!'
            }).then((result) => {
                if (result.isConfirmed) {
                    button.closest('tr').remove();
                    updateRowNumbers();

                    // ✅ Jika tidak ada karyawan tersisa, tambahkan baris kosong kembali
                    const tableBody = document.getElementById('karyawan-list');
                    if (tableBody.children.length === 0) {
                        const emptyRow = document.createElement('tr');
                        emptyRow.innerHTML =
                            `<td colspan="4" class="text-center text-muted">Belum ada karyawan ditambahkan</td>`;
                        tableBody.appendChild(emptyRow);
                    }

                    Swal.fire('Dihapus!', 'Karyawan berhasil dihapus.', 'success');
                }
            });
        }


        function updateRowNumbers() {
            const rows = document.querySelectorAll("#karyawan-list tr");
            let index = 1; // Mulai dari 1

            rows.forEach((row) => {
                if (row.dataset.nik) { // Hanya update nomor jika baris memiliki data
                    row.cells[0].textContent = index++; // Update nomor urut
                }
            });
        }

        function submitForm() {
            // Periksa apakah ada karyawan yang telah ditambahkan
            if (document.querySelectorAll("#karyawan-list tr").length === 0) {
                Swal.fire('Error!', 'Harap tambahkan minimal satu karyawan yang dinilai.', 'error');
                return;
            }

            // Ambil data dari form
            let formData = new FormData(document.getElementById('penilai-form'));

            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Data akan disimpan ke dalam sistem.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('penilai-form').submit();
                }
            });
        }


        function selectPenilai(nik, nama) {
            document.getElementById('nik_penilai').value = nik;
            document.getElementById('nama_penilai').value = nama;
            $('#penilaiModal').modal('hide'); // Menutup modal setelah memilih
        }

        $(document).ready(function() {
            $('#list_penilai').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).ready(function() {
            $('#list_karyawan').DataTable({
                responsive: true,
                paging: true,
                searching: true,
                ordering: true,
                info: true,
                pageLength: 10, // Tampilkan 10 data per halaman
                lengthMenu: [10, 25, 50, 100], // Pilihan jumlah data yang bisa ditampilkan
                language: {
                    search: "Cari Karyawan:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ditemukan",
                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                }
            });
        });

        // Fungsi untuk memilih karyawan dan menampilkan datanya
        function selectKaryawan(nik, nama) {
            document.getElementById("karyawan_nama").value = nama;
            document.getElementById("karyawan_nik").value = nik;
            $('#karyawanModal').modal('hide'); // Tutup modal setelah memilih
        }
</script>
@endsection