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

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

    <!-- Alert Sukses -->
    <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('penilai.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="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Edit Penilai</p>
                        <hr class="horizontal dark mt-0">

                        <form id="penilai-form" action="{{ route('penilai.update', $penilai->nik_penilai) }}"
                            method="POST">
                            @csrf
                            @method('PUT')

                            <!-- Input NIK dan Nama Penilai -->
                            <div class="mb-3">
                                <label for="nik_penilai" class="form-label">NIK Penilai</label>
                                <input type="text" class="form-control" id="nik_penilai" name="nik_penilai"
                                    value="{{ $penilai->nik_penilai }}" readonly>
                            </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"
                                    value="{{ $penilai->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 id="thead-aksi"
                                                            style="display: {{ $hasDeletable ? 'table-cell' : 'none' }};">
                                                            Aksi</th>
                                                    </tr>
                                                </thead>

                                                <tbody id="karyawan-list">
                                                    @foreach ($karyawanList as $index => $karyawan)
                                                        <tr data-nik="{{ $karyawan->nik }}">
                                                            <td class="text-center">{{ $index + 1 }}</td>
                                                            <td>{{ $karyawan->nik }} <input type="hidden" name="karyawan[]"
                                                                    value="{{ $karyawan->nik }}"></td>
                                                            <td>{{ $karyawan->nama }}</td>
                                                            @if ($hasDeletable && $karyawan->kompetensi_exists == 0)
                                                                <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>
                                                            @endif
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </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 ($allKaryawan 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>{{ $karyawan->nik }}</td>
                                    <td>{{ $karyawan->nama }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        let karyawanIndex = 0;

        function toggleAksiColumn() {
            let aksiColumn = document.getElementById("thead-aksi");
            let hasActions = document.querySelectorAll("#karyawan-list tr[data-nik]").length > 0;
            aksiColumn.style.display = hasActions ? "table-cell" : "none";
        }

        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');

            // 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 ke tabel
            const newRow = document.createElement('tr');
            newRow.dataset.nik = nik;
            newRow.innerHTML = `
            <td class="text-center"></td>
            <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();
            toggleAksiColumn();

            // 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();
                    toggleAksiColumn();
                    Swal.fire('Dihapus!', 'Karyawan berhasil dihapus.', 'success');
                }
            });
        }

        function updateRowNumbers() {
            const rows = document.querySelectorAll("#karyawan-list tr[data-nik]");
            let index = 1;

            rows.forEach((row) => {
                row.cells[0].textContent = index++;
            });
        }

        function submitForm() {
            const karyawanRows = document.querySelectorAll("#karyawan-list tr[data-nik]");

            if (karyawanRows.length === 0) {
                Swal.fire('Error!', 'Harap tambahkan minimal satu karyawan yang dinilai.', 'error');
                return;
            }

            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');
        }

        $(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)"
                }
            });

            $('#list_karyawan').DataTable({
                responsive: true,
                paging: true,
                searching: true,
                ordering: true,
                info: true,
                pageLength: 10,
                lengthMenu: [10, 25, 50, 100],
                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)"
                }
            });

            // Event listener untuk memilih karyawan
            $(document).on('click', '.select-karyawan', function() {
                let nik = $(this).data('nik');
                let nama = $(this).data('nama');
                $('#karyawan_nama').val(nama);
                $('#karyawan_nik').val(nik);
                $('#karyawanModal').modal('hide');
            });
        });

        function selectKaryawan(nik, nama) {
            document.getElementById("karyawan_nama").value = nama;
            document.getElementById("karyawan_nik").value = nik;
            $('#karyawanModal').modal('hide');
        }
    </script>
@endsection