@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="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>

                        @if (($authorize->add ?? '0') == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('subkat-form').submit();">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @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) }}" id="subkat-form">
                    @csrf

                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $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="(Auto Generate)" readonly>
                                    </div>
                                </div>

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

                                        {{-- value yang disimpan ke DB --}}
                                        <input type="hidden" name="id_detkat" id="id_detkat"
                                            value="{{ old('id_detkat') }}">

                                        {{-- value yang tampil --}}
                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                id="id_detkat_display"
                                                value="{{ old('id_detkat_display') }}"
                                                placeholder="Pilih detail kategori..." readonly>

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

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

                                {{-- MODUL --}}
                                <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') }}"
                                            placeholder="Input modul...">
                                        @error('modul')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

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

                                        <input type="hidden" name="pic" id="pic" value="{{ old('pic') }}">

                                        <div class="input-group">
                                            <input type="text" class="form-control"
                                                id="pic_display"
                                                value="{{ old('pic_display') }}"
                                                placeholder="Pilih PIC..." readonly>

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

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

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

    {{-- MODAL DETAIL KATEGORI --}}
    <div class="modal fade" id="modalDetkat" 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 Detail Kategori</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_detkat">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="80px">Action</th>
                                <th>ID</th>
                                <th>Kategori</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($detkatList as $row)
                                <tr>
                                    <td>
                                        <button type="button" class="btn badge bg-primary badge-lg"
                                            onclick="selectDetkat('{{ $row->id }}', @js($row->detail))">
                                            <i class="bi bi-check-circle me-1"></i> Pilih
                                        </button>
                                    </td>
                                    <td class="text-sm">{{ $row->id }}</td>
                                    <td class="text-sm">{{ $row->kategori }}</td>
                                    <td class="text-sm">{{ $row->detail }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </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 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_detkat').DataTable();
        $('#table_pic').DataTable();
    });

    function selectDetkat(id, detail) {
        // simpan ke DB
        $('#id_detkat').val(id);

        // tampil ke user: WEB036 - Material
        $('#id_detkat_display').val(id + ' - ' + detail);

        $('#modalDetkat').modal('hide');
    }

    function selectPic(nik, nama) {
        // simpan ke DB
        $('#pic').val(nik);

        // tampil ke user
        $('#pic_display').val(nama);

        $('#modalPic').modal('hide');
    }
</script>
@endpush