@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">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        @include('assesm._partials.back_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="{{ URL::to('msstko/store') }}" id="msstko-form">
                        @csrf
                        <div class="card-body">

                            {{-- Struktur Organisasi --}}
                            <p class="text-uppercase text-sm">insert Struktur Organisasi</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
                                            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 --}}
                                <div class="col-md-12">
                                    <label class="form-control-label">Nama</label>
                                    <input type="text" id="namaInput" class="form-control mb-3" readonly>
                                </div>

                                {{-- Input Departemen --}}
                                <div class="col-md-12">
                                    <label class="form-control-label">Departemen</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="departemenInput" class="form-control" readonly required>
                                        <input type="hidden" id="departemenId" name="id_departemen">
                                        <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                            data-bs-target="#departemenModal" style="cursor: pointer;">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>

                                {{-- Input Jabatan --}}
                                <div class="col-md-12">
                                    <label class="form-control-label">Jabatan</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="jabatanInput" class="form-control" readonly required>
                                        <input type="hidden" id="jabatanId" name="id_jabatan">
                                        <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                            data-bs-target="#jabatanModal" style="cursor: pointer;">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>

                                {{-- Input NIK Atasan --}}
                                <div class="col-md-12">
                                    <label class="form-control-label">Atasan</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="AtasanInput" class="form-control" readonly required>
                                        <input type="hidden" id="nikAtasanInput" name="nik_atasan">
                                        <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                            data-bs-target="#atasanModal" 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 Karyawan -->
    <div class="modal fade" id="atasanModal" tabindex="-1" role="dialog" aria-labelledby="atasanModalLabel"
        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="atasanModalLabel">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_atasan">
                        <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="selectAtasan('{{ $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>

    <div class="modal fade" id="departemenModal" tabindex="-1" role="dialog" aria-labelledby="departemenModalLabel"
        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="departemenModalLabel">Pilih Departemen</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_departemen">
                        <thead class="text-center" style="background-color: #00b7bd4f;">
                            <tr>
                                <th>Action</th>
                                <th>ID</th>
                                <th>Departemen</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($departemenList as $departemen)
                                <tr>
                                    <td width="20px">
                                        <button type="button" class="btn btn-sm btn-primary"
                                            onclick="selectDepartemen('{{ $departemen->id }}', '{{ $departemen->nama }}')">
                                            <i class="fas fa-check-circle me-1"></i> Pilih
                                        </button>
                                    </td>
                                    <td class="text-sm font-weight-normal">{{ $departemen->id }}</td>
                                    <td class="text-sm font-weight-normal">{{ $departemen->nama }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="jabatanModal" tabindex="-1" role="dialog" aria-labelledby="jabatanModalLabel"
        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="jabatanModalLabel">Pilih Jabatan</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_jabatan">
                        <thead class="text-center" style="background-color: #00b7bd4f;">
                            <tr>
                                <th>Action</th>
                                <th>ID</th>
                                <th>Jabatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($jabatanList as $jabatan)
                                <tr>
                                    <td width="20px">
                                        <button type="button" class="btn btn-sm btn-primary"
                                            onclick="selectJabatan('{{ $jabatan->id }}', '{{ $jabatan->nama }}')">
                                            <i class="fas fa-check-circle me-1"></i> Pilih
                                        </button>
                                    </td>
                                    <td class="text-sm font-weight-normal">{{ $jabatan->id }}</td>
                                    <td class="text-sm font-weight-normal">{{ $jabatan->nama }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            $('#list_karyawan, #list_atasan, #list_departemen, #list_jabatan').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 = $('#msstko-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 selectAtasan(nik, nama) {
            document.getElementById('nikAtasanInput').value = nik;
            document.getElementById('AtasanInput').value = nama;
            $('#atasanModal').modal('hide');
        }

        function selectDepartemen(id, nama) {
            document.getElementById('departemenId').value = id;
            document.getElementById('departemenInput').value = nama;
            $('#departemenModal').modal('hide');
        }

        function selectJabatan(id, nama) {
            document.getElementById('jabatanId').value = id;
            document.getElementById('jabatanInput').value = nama;
            $('#jabatanModal').modal('hide');
        }
    </script>
@endpush