@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">
                        <button class="btn btn-secondary mb-0"
                            onclick="window.location='{{ URL::to($url_menu) }}'">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>

                        @if (($authorize->edit ?? '0') == '1')
                            @if (($list->isactive ?? 1) == 1)
                                <button class="btn btn-primary mb-0" style="display:none;" id="{{ $dmenu }}-save"
                                    onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                    <i class="fas fa-floppy-disk me-1"></i>
                                    <span class="font-weight-bold">Simpan</span>
                                </button>

                                <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit">
                                    <i class="fas fa-edit me-1"></i>
                                    <span class="font-weight-bold">Edit</span>
                                </button>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                    id="{{ $dmenu }}-form">
                    @csrf
                    @method('PUT')

                    <input type="hidden" name="_from" value="show">

                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">View {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            <div class="row">
                                {{-- SUB ID --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Sub ID</label>
                                        <input type="text" class="form-control bg-dark text-light"
                                            value="{{ $list->sub_id ?? '' }}" readonly>
                                    </div>
                                </div>

                                {{-- ID DETAIL KATEGORI (Readonly) --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">ID Detail Kategori</label>

                                        <input type="hidden" name="id_detkat" id="id_detkat"
                                            value="{{ $list->id_detkat ?? '' }}">

                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                id="id_detkat_display"
                                                value="{{ ($list->id_detkat ?? '') . ' - ' . ($list->detail_name ?? '') }}"
                                                readonly>
                                            <span class="input-group-text bg-secondary text-light"
                                                style="border-color:#d2d6da;">
                                                <i class="fas fa-lock"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                {{-- MODUL (editable) --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Modul</label>
                                        <input type="text" class="form-control"
                                            name="modul" id="modul"
                                            value="{{ old('modul', $list->modul ?? '') }}"
                                            disabled>
                                        @error('modul')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                {{-- PIC (editable via modal) --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">PIC</label>

                                        {{-- simpan NIK --}}
                                        <input type="hidden" name="pic" id="pic"
                                            value="{{ old('pic', $list->pic ?? '') }}">

                                        <div class="input-group">
                                            {{-- tampil nama --}}
                                            <input type="text" class="form-control"
                                                id="pic_display"
                                                value="{{ old('pic_display', $list->pic_name ?? '') }}"
                                                placeholder="Pilih PIC..." disabled>

                                            <span class="input-group-text bg-primary text-light icon-pic-search"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalPic"
                                                style="cursor:pointer; display:none;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                        </div>

                                        @error('pic')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- MODAL PIC --}}
    <div class="modal fade" id="modalPic" tabindex="-1" 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">List Karyawan (PIC)</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="table_pic">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="80px">Action</th>
                                <th>NIK</th>
                                <th>Nama</th>
                                <th>Departemen</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (($karyawanList ?? collect()) as $row)
                                <tr>
                                    <td>
                                        <button type="button" class="btn badge bg-primary badge-lg"
                                            onclick="selectPic('{{ $row->nik }}', @js($row->nama))">
                                            <i class="bi bi-check-circle me-1"></i> Pilih
                                        </button>
                                    </td>
                                    <td class="text-sm">{{ $row->nik }}</td>
                                    <td class="text-sm">{{ $row->nama }}</td>
                                    <td class="text-sm">{{ $row->departemen }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $('#table_pic').DataTable();

        function enableEdit() {
            $('#modul').removeAttr('disabled');
            $('#pic_display').removeAttr('disabled');
            $('.icon-pic-search').show();
        }

        $('#{{ $dmenu }}-edit').click(function() {
            enableEdit();
            $(this).hide();
            $('#{{ $dmenu }}-save').show();
        });
    });

    function selectPic(nik, nama) {
        $('#pic').val(nik);          
        $('#pic_display').val(nama); 
        $('#modalPic').modal('hide');
    }
</script>
@endpush