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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <!-- Alert Sukses -->
    @push('js')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            // Alert sukses
            @if (session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: '{{ session('success') }}',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            @endif

            // Alert error
            @if (session('error'))
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan!',
                    text: '{{ session('error') }}',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            @endif

            // Alert warning jika tidak ada perubahan
            @if (session('warning'))
                Swal.fire({
                    icon: 'warning',
                    title: 'Perhatian!',
                    text: '{{ session('warning') }}',
                    confirmButtonColor: '#f39c12',
                    confirmButtonText: 'OK'
                });
            @endif

            // Alert untuk validasi error (Laravel validation)
            @if ($errors->any())
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan!',
                    html: '<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            @endif
        </script>
    @endpush
    <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">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i> Kembali
                        </button>
                        <button class="btn btn-primary mb-0" id="btnSubmit">
                            <i class="fas fa-floppy-disk me-1"></i> Simpan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <form method="POST" action="{{ route('mskrko.update', $karyawanKompetensi->id) }}" id="mskrko-form">
                        @csrf
                        @method('PUT')

                        <!-- Tambahkan hidden input untuk mengirim idencrypt -->
                        <input type="hidden" name="idencrypt" value="{{ encrypt($karyawanKompetensi->id) }}">

                        <div class="card-body">
                            <p class="text-uppercase text-sm">EDIT KARYAWAN KOMPETENSI</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                {{-- Input NIK dengan Modal Pencarian --}}
                                <div class="col-md-12">
                                    <label class="form-control-label">NIK</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="nikInput" name="nik" class="form-control" readonly
                                            value="{{ $karyawanKompetensi->nik }}" required>
                                        <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>

                                {{-- Input Nama (Otomatis setelah pilih NIK) --}}
                                <div class="col-md-12">
                                    <label class="form-control-label">Nama</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="namaInput" class="form-control" readonly
                                            value="{{ $karyawanKompetensi->nama }}">
                                    </div>
                                </div>

                                {{-- Dropdown Sub Paket --}}
                                <div class="col-md-12">
                                    <label class="form-control-label">Sub Paket</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="subPaketInput" class="form-control" readonly required
                                            value="{{ $karyawanKompetensi->sub_paket }}">
                                        <input type="hidden" id="subPaketId" name="id_sub_paket"
                                            value="{{ $karyawanKompetensi->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>
                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Pilih 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>

    <!-- Modal Pilih Sub Paket -->
    <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">Pilih Sub Paket 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 display" id="list_sub_paket">
                        <thead class="text-center" style="background-color: #00b7bd4f;">
                            <tr>
                                <th>Action</th>
                                <th>Sub Paket</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($subPaketList as $subPaket)
                                <tr>
                                    <td width="20px">
                                        <button type="button" class="btn btn-sm btn-primary"
                                            onclick="selectSubPaket('{{ $subPaket->id }}', '{{ $subPaket->sub_paket }}')">
                                            <i class="fas fa-check-circle me-1"></i> Pilih
                                        </button>
                                    </td>
                                    <td class="text-sm font-weight-normal">{{ $subPaket->sub_paket }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

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

            $('#btnSubmit').click(function(event) {
                event.preventDefault();
                let form = $('#mskrko-form');

                Swal.fire({
                    title: 'Apakah Anda yakin?',
                    text: "Pastikan data yang Anda masukkan sudah benar!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Simpan!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });

        function selectKaryawan(nik, nama) {
            document.getElementById('nikInput').value = nik;
            document.getElementById('namaInput').value = nama;
            $('#karyawanModal').modal('hide');
        }

        function selectSubPaket(id, subPaket) {
            document.getElementById('subPaketId').value = id;
            document.getElementById('subPaketInput').value = subPaket;
            $('#subPaketModal').modal('hide');
        }
    </script>
@endpush