@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>

    @include('components.alert')

    <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">
                    <input type="hidden" name="detkat_id"
                        value="{{ old('detkat_id', request('detkat_id') ?? request('id_detkat')) }}">
                    @php
                        // detkat berisi ENCRYPTED id_detkat dari list page
                        $detkatPlain = request('detkat_id') ?? request('id_detkat');
                        $detailName = '';

                        if ($detkatPlain) {
                            $found = $detkatList->firstWhere('id', $detkatPlain);
                            if ($found) {
                                $detailName = $found->detail;
                            }
                        }

                        // jika datang dari detail, field dibuat readonly
                        $lockDetkat = !empty($detkatPlain);
                    @endphp
                    @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', $detkatPlain ?? '') }}">

                                        {{-- value yang tampil --}}
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="id_detkat_display"
                                                value="{{ old('id_detkat_display', $detkatPlain ? $detkatPlain . ' - ' . ($detailName ?? '(detail tidak ditemukan)') : '') }}"
                                                placeholder="Pilih detail kategori..." readonly>

                                            @if (!$lockDetkat)
                                                <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>
                                            @else
                                                <span class="input-group-text bg-secondary text-light"
                                                    style="border-color:#d2d6da;">
                                                    <i class="fas fa-lock"></i>
                                                </span>
                                            @endif
                                        </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..." required>
                                        @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', $defaultPicNik ?? '') }}">

                                        <div class="input-group">
                                            <input type="text" class="form-control" name="pic_display" id="pic_display"
                                                value="{{ old('pic_display', $defaultPicName ?? '') }}"
                                                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->department_name }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

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

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

            $('#subkat-form').on('submit', function(event) {
                const missing = [];
                if (!$('#id_detkat').val()) missing.push('Detail Kategori');
                if (!$('#modul').val().trim()) missing.push('Modul');
                if (!$('#pic').val()) missing.push('PIC');

                if (missing.length) {
                    event.preventDefault();
                    Swal.fire({
                        title: 'Data belum lengkap',
                        text: missing.join(', ') + ' wajib diisi.',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        });

        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