@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->edit == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('mslink-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-7">
                <form role="form" method="POST" action="{{ url($url_menu . '/' . $idencrypt) }}" id="mslink-form">
                    @csrf
                    @method('PUT')
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            @php
                                $selectedNik = old('nik', $detail_form->nik);
                                $selectedProfile = collect($profile_options)->firstWhere('nik', $selectedNik);
                                $selectedProfileLabel = $selectedNik ?? '';
                                if ($selectedProfile) {
                                    $selectedProfileLabel = $selectedProfile->nik . ' - ' . $selectedProfile->nama;
                                    if (!empty($selectedProfile->departemen)) {
                                        $selectedProfileLabel .= ' (' . $selectedProfile->departemen . ')';
                                    }
                                }
                            @endphp

                            <div class="mb-3">
                                <label class="form-control-label">User</label>
                                <select name="user_id" class="form-select" required>
                                    <option value="">Pilih User</option>
                                    @foreach ($users_options as $user)
                                        @php
                                            $nama = trim($user->nama ?? '');
                                        @endphp
                                        <option value="{{ $user->id }}"
                                            {{ old('user_id', $detail_form->user_id) == $user->id ? 'selected' : '' }}>
                                            {{ $user->username }}{{ $nama !== '' ? ' - ' . $nama : '' }} (ID: {{ $user->id }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-control-label">NIK Profil</label>
                                <input type="hidden" name="nik" id="nik_profile_value" value="{{ $selectedNik }}">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="nik_profile_display"
                                        value="{{ $selectedProfileLabel }}" placeholder="Pilih NIK Profil" readonly>
                                    <span class="input-group-text bg-primary text-light" style="cursor: pointer;"
                                        data-bs-toggle="modal" data-bs-target="#searchModalNikProfile">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>
                                @error('nik')
                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-control-label">Status</label>
                                <select name="isactive" class="form-select" required>
                                    <option value="1" {{ old('isactive', $detail_form->isactive) == '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('isactive', $detail_form->isactive) == '0' ? 'selected' : '' }}>Non Active</option>
                                </select>
                                @error('isactive')
                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="searchModalNikProfile" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Pemohon</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="search_nik_profile_input" class="form-control mb-3"
                        placeholder="Cari NIK, Nama, atau Departemen...">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table_nik_profile">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="60px">Pilih</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="nik_profile_tbody">
                                @forelse ($profile_options as $profile)
                                    <tr class="nik-profile-row"
                                        data-search="{{ strtolower(trim(($profile->nik ?? '') . ' ' . ($profile->nama ?? '') . ' ' . ($profile->departemen ?? ''))) }}">
                                        <td>
                                            <button type="button" class="btn badge bg-primary badge-sm"
                                                onclick='selectNikProfile(@json($profile->nik), @json($profile->nama ?? ""), @json($profile->departemen ?? ""))'>
                                                <i class="bi bi-check-circle"></i> Pilih
                                            </button>
                                        </td>
                                        <td>{{ $profile->nik }}</td>
                                        <td>{{ $profile->nama }}</td>
                                        <td>{{ $profile->departemen ?? '-' }}</td>
                                    </tr>
                                @empty
                                    <tr id="nik_profile_empty_row">
                                        <td colspan="4" class="text-center text-muted">Data tidak ditemukan</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function formatNikProfileLabel(nik, nama, departemen) {
            let label = nik || '';
            if (nama) {
                label += ' - ' + nama;
            }
            if (departemen) {
                label += ' (' + departemen + ')';
            }
            return label;
        }

        function selectNikProfile(nik, nama, departemen) {
            document.getElementById('nik_profile_value').value = nik || '';
            document.getElementById('nik_profile_display').value = formatNikProfileLabel(nik, nama, departemen);

            const modalEl = document.getElementById('searchModalNikProfile');
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            if (modal) {
                modal.hide();
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('search_nik_profile_input');
            const rows = Array.from(document.querySelectorAll('.nik-profile-row'));
            const tbody = document.getElementById('nik_profile_tbody');

            if (!searchInput) {
                return;
            }

            searchInput.addEventListener('input', function() {
                const query = (this.value || '').toLowerCase().trim();
                let visibleCount = 0;

                rows.forEach(function(row) {
                    const haystack = row.getAttribute('data-search') || '';
                    const matched = haystack.includes(query);
                    row.style.display = matched ? '' : 'none';
                    if (matched) {
                        visibleCount++;
                    }
                });

                let emptyRow = document.getElementById('nik_profile_empty_row_filtered');
                if (visibleCount === 0 && rows.length > 0) {
                    if (!emptyRow) {
                        emptyRow = document.createElement('tr');
                        emptyRow.id = 'nik_profile_empty_row_filtered';
                        emptyRow.innerHTML = '<td colspan="4" class="text-center text-muted">Data tidak ditemukan</td>';
                        tbody.appendChild(emptyRow);
                    }
                } else if (emptyRow) {
                    emptyRow.remove();
                }
            });
        });
    </script>
@endsection