@extends('layouts.master')

@section('title', 'Manajemen Pengguna')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    /* DataTables integration */
    #tablePengguna_wrapper .dataTables_filter input {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 10px;
    }
    #tablePengguna_wrapper .dataTables_filter input:focus {
        border-color: #004B8C !important;
        box-shadow: 0 0 0 0.18rem rgba(0,75,140,.15) !important;
    }
    #tablePengguna_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tablePengguna_wrapper .dataTables_filter label,
    #tablePengguna_wrapper .dataTables_length label {
        font-size: .875rem;
        color: #6c757d;
    }
    #tablePengguna_wrapper .dataTables_info {
        font-size: .8rem;
        color: #6c757d;
    }
    /* Sembunyikan spinner tahun bawaan, ganti dengan select */
    .flatpickr-current-month .numInputWrapper input.cur-year,
    .flatpickr-current-month .numInputWrapper .arrowUp,
    .flatpickr-current-month .numInputWrapper .arrowDown { display: none !important; }
    .flatpickr-current-month .numInputWrapper { overflow: visible; }
    .fp-year-select {
        border: none; background: transparent;
        font-size: 14px; font-weight: 600;
        cursor: pointer; outline: none; color: inherit;
        padding: 0 2px;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Manajemen Pengguna</p>
            <span class="fs-13 text-muted">Pengaturan &rarr; Manajemen Pengguna</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Pengguna</div>
                    <button type="button" class="btn btn-primary btn-sm" onclick="openTambah()">
                        <i class="bx bx-plus me-1"></i> Tambah Pengguna
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle mb-0" id="tablePengguna" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width:45px">No</th>
                                    <th class="text-center" style="width:130px">Aksi</th>
                                    <th>Pengguna</th>
                                    <th>Jabatan / Departemen</th>
                                    <th class="text-center">Role</th>
                                    <th class="text-center" style="width:90px">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($pengguna as $p)
                                <tr>
                                    <td class="text-center"></td>
                                    <td class="text-center" style="white-space:nowrap;">
                                        <button type="button" class="btn btn-info btn-sm px-2 py-1"
                                            title="Lihat" onclick="openLihat({{ $p->id }})">
                                            <i class="bx bx-show fs-14"></i>
                                        </button>
                                        <button type="button" class="btn btn-warning btn-sm px-2 py-1"
                                            title="Edit" onclick="openEdit({{ $p->id }})">
                                            <i class="bx bx-pencil fs-14"></i>
                                        </button>
                                        <button type="button" class="btn btn-secondary btn-sm px-2 py-1"
                                            title="Reset Password" onclick="openReset({{ $p->id }}, '{{ addslashes($p->nama) }}')">
                                            <i class="bx bx-key fs-14"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm px-2 py-1"
                                            title="Hapus" onclick="openHapus({{ $p->id }}, '{{ addslashes($p->nama) }}')">
                                            <i class="bx bx-trash fs-14"></i>
                                        </button>
                                        <button type="button" class="btn btn-dark btn-sm px-2 py-1"
                                            title="Activity Log" onclick="openActivity({{ $p->id }})">
                                            <i class="bx bx-history fs-14"></i>
                                        </button>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            @if($p->foto)
                                                <img src="{{ $p->foto_url }}" alt="{{ $p->nama }}"
                                                    class="rounded-circle" style="width:36px;height:36px;object-fit:cover;">
                                            @else
                                                <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-transparent text-primary flex-shrink-0"
                                                     style="width:36px;height:36px;font-size:18px;">
                                                    <i class="bx bx-user"></i>
                                                </div>
                                            @endif
                                            <div>
                                                <div class="fw-semibold lh-sm">{{ $p->nama }}</div>
                                                <small class="text-muted">{{ $p->username }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="lh-sm">{{ $p->jabatan ?? '-' }}</div>
                                        <small class="text-muted">{{ $p->departemen ?? '-' }}</small>
                                    </td>
                                    <td class="text-center">
                                        @forelse($p->getRoleNames() as $r)
                                            <span class="badge bg-primary-transparent me-1">{{ str_replace('_', ' ', ucwords($r, '_')) }}</span>
                                        @empty
                                            <span class="text-muted">-</span>
                                        @endforelse
                                    </td>
                                    <td class="text-center">
                                        @if($p->is_active)
                                            <span class="badge bg-success">Aktif</span>
                                        @else
                                            <span class="badge bg-secondary">Nonaktif</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">Belum ada pengguna.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- ===== MODAL TAMBAH / EDIT ===== --}}
<div class="modal fade" id="modalPengguna" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalPenggunaTitle">Tambah Pengguna</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formPengguna" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">
                <input type="hidden" name="pengguna_id" id="penggunaId" value="">

                <div class="modal-body" style="max-height:calc(100vh - 210px); overflow-y:auto;">
                    {{-- Nav Tabs --}}
                    <ul class="nav nav-tabs nav-style-5 mb-3" id="penggunaTab">
                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabAkun" type="button">
                                <i class="bx bx-user me-1"></i>Akun
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabProfil" type="button">
                                <i class="bx bx-id-card me-1"></i>Profil
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        {{-- Tab Akun --}}
                        <div class="tab-pane fade show active" id="tabAkun">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Nama Lengkap <span class="text-danger">*</span></label>
                                    <input type="text" name="nama" id="inputNama" class="form-control" placeholder="Nama Lengkap">
                                    <div class="invalid-feedback" id="err_nama"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Username <span class="text-danger">*</span></label>
                                    <input type="text" name="username" id="inputUsername" class="form-control" placeholder="username">
                                    <small class="text-muted d-none" id="usernameNote"><i class="bx bx-lock-alt me-1"></i>Username tidak dapat diubah.</small>
                                    <div class="invalid-feedback" id="err_username"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Email <span class="text-danger">*</span></label>
                                    <input type="email" name="email" id="inputEmail" class="form-control" placeholder="email@domain.com">
                                    <div class="invalid-feedback" id="err_email"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold" id="labelPassword">
                                        Password <span class="text-danger" id="passwordRequired">*</span>
                                    </label>
                                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password">
                                    <small class="text-muted d-none" id="passwordNote">Kosongkan jika tidak ingin mengubah password.</small>
                                    <div class="invalid-feedback" id="err_password"></div>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label fw-semibold">Role <span class="text-danger">*</span></label>
                                    <div class="border rounded p-2" id="rolesWrapper">
                                        <div class="row g-2">
                                            @foreach($roleList as $roleVal)
                                            <div class="col-md-4 col-6">
                                                <div class="form-check">
                                                    <input class="form-check-input role-check" type="checkbox"
                                                        name="roles[]" value="{{ $roleVal }}"
                                                        id="role_{{ $roleVal }}">
                                                    <label class="form-check-label" for="role_{{ $roleVal }}">
                                                        {{ str_replace('_', ' ', ucwords($roleVal, '_')) }}
                                                    </label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="invalid-feedback d-block" id="err_roles"></div>
                                </div>
                                {{-- Section Faskes KSO (hanya muncul jika role sales dipilih) --}}
                                <div class="col-md-12" id="sectionFaskes" style="display:none">
                                    <label class="form-label fw-semibold">Faskes KSO Ditangani</label>
                                    <small class="text-muted d-block mb-2">Pilih faskes yang ditangani oleh user sales ini.</small>
                                    @if($faskesList->isEmpty())
                                    <div class="alert alert-warning py-2 mb-0">
                                        <i class="bx bx-info-circle me-1"></i>
                                        Belum ada faskes dengan gudang KSO. Tambahkan di Data Induk → Fasilitas Kesehatan.
                                    </div>
                                    @else
                                    <div style="max-height:180px;overflow-y:auto;border:1px solid #e9ecef;border-radius:6px;padding:10px 14px">
                                        <div class="row g-1">
                                        @foreach($faskesList as $f)
                                        <div class="col-md-6">
                                            <div class="form-check">
                                                <input class="form-check-input chk-faskes" type="checkbox"
                                                       name="faskes_tanganan[]" value="{{ $f->id }}" id="fkso_{{ $f->id }}">
                                                <label class="form-check-label small" for="fkso_{{ $f->id }}">{{ $f->nama }}</label>
                                            </div>
                                        </div>
                                        @endforeach
                                        </div>
                                    </div>
                                    @endif
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold d-block">Status Aktif</label>
                                    <div class="form-check form-switch mt-1">
                                        <input class="form-check-input" type="checkbox" name="is_active" id="inputIsActive" value="1" checked>
                                        <label class="form-check-label" for="inputIsActive">Aktif</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Tab Profil --}}
                        <div class="tab-pane fade" id="tabProfil">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">NIK</label>
                                    <div class="input-group">
                                        <input type="text" id="inputNikDisplay" class="form-control" placeholder="0000 0000 0000 0000" maxlength="19" inputmode="numeric" autocomplete="off">
                                        <button type="button" class="btn btn-outline-secondary" id="btnToggleNik" tabindex="-1" title="Tampilkan / Sembunyikan NIK">
                                            <i class="bx bx-hide" id="iconToggleNik"></i>
                                        </button>
                                    </div>
                                    <input type="hidden" name="nik" id="inputNik">
                                    <div class="invalid-feedback" id="err_nik"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Jabatan</label>
                                    <input type="text" name="jabatan" id="inputJabatan" class="form-control" placeholder="Jabatan">
                                    <div class="invalid-feedback" id="err_jabatan"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Departemen</label>
                                    <input type="text" name="departemen" id="inputDepartemen" class="form-control" placeholder="Departemen">
                                    <div class="invalid-feedback" id="err_departemen"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">No. HP</label>
                                    <input type="text" name="no_hp" id="inputNoHp" class="form-control" placeholder="08xxxxxxxxxx">
                                    <div class="invalid-feedback" id="err_no_hp"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Jenis Kelamin</label>
                                    <select name="jenis_kelamin" id="inputJk" class="form-select">
                                        <option value="">-- Pilih --</option>
                                        <option value="L">Laki-laki</option>
                                        <option value="P">Perempuan</option>
                                    </select>
                                    <div class="invalid-feedback" id="err_jenis_kelamin"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Tanggal Lahir</label>
                                    <input type="text" id="inputTglLahir" class="form-control"
                                        placeholder="dd-mm-yyyy" maxlength="10" autocomplete="off">
                                    <input type="hidden" name="tanggal_lahir" id="hiddenTglLahir">
                                    <div class="invalid-feedback" id="err_tanggal_lahir"></div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Alamat</label>
                                    <textarea name="alamat" id="inputAlamat" class="form-control" rows="3" placeholder="Alamat lengkap"></textarea>
                                    <div class="invalid-feedback" id="err_alamat"></div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Foto</label>
                                    <div class="d-flex align-items-center gap-3">
                                        <div style="width:64px;height:64px;flex-shrink:0;">
                                            <img id="previewFoto" src=""
                                                alt="Preview" class="rounded-circle"
                                                style="width:64px;height:64px;object-fit:cover;display:none;">
                                            <div id="previewFotoIcon"
                                                class="rounded-circle bg-primary d-flex align-items-center justify-content-center"
                                                style="width:64px;height:64px;font-size:28px;color:#fff;">
                                                <i class="bx bx-user"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <input type="file" name="foto" id="inputFoto" class="form-control"
                                                accept="image/*" onchange="previewFotoFile(this)">
                                            <div class="invalid-feedback" id="err_foto"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mt-3">
                                    <label class="form-label fw-semibold">Tanda Tangan</label>
                                    <div class="small text-muted mb-1">Format PNG dengan latar transparan disarankan. Maks 1MB.</div>
                                    <div class="d-flex align-items-center gap-3">
                                        <div style="flex-shrink:0;width:200px;height:80px;border:1px dashed #ccc;border-radius:6px;background:repeating-conic-gradient(#e0e0e0 0% 25%,#fff 0% 50%) 0 0/12px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;">
                                            <img id="previewTandaTangan" src="" alt="Preview TTD"
                                                style="max-width:196px;max-height:76px;object-fit:contain;display:none;">
                                            <span id="previewTandaTanganIcon" class="text-muted small">Belum ada</span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <input type="file" name="tanda_tangan" id="inputTandaTangan" class="form-control"
                                                accept="image/*" onchange="previewTandaTanganFile(this)">
                                            <div class="invalid-feedback" id="err_tanda_tangan"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="btnSubmitPengguna">
                        <i class="bx bx-save me-1"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ===== MODAL LIHAT ===== --}}
<div class="modal fade" id="modalLihat" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Pengguna</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <div id="lihatFotoWrap" class="d-inline-block position-relative mb-1">
                        <img id="lihatFoto" src=""
                            class="rounded-circle shadow" style="width:90px;height:90px;object-fit:cover;display:none;" alt="Foto">
                        <div id="lihatFotoIcon"
                            class="rounded-circle shadow bg-primary d-flex align-items-center justify-content-center mx-auto"
                            style="width:90px;height:90px;font-size:42px;color:#fff;">
                            <i class="bx bx-user"></i>
                        </div>
                    </div>
                    <h6 class="mt-2 mb-0 fw-bold" id="lihatNama">-</h6>
                    <small class="text-muted" id="lihatUsername">-</small>
                </div>
                <hr>
                <dl class="row mb-0 small">
                    <dt class="col-5 text-muted">Email</dt>
                    <dd class="col-7" id="lihatEmail">-</dd>

                    <dt class="col-5 text-muted">NIK</dt>
                    <dd class="col-7" id="lihatNik">-</dd>

                    <dt class="col-5 text-muted">Jabatan</dt>
                    <dd class="col-7" id="lihatJabatan">-</dd>

                    <dt class="col-5 text-muted">Departemen</dt>
                    <dd class="col-7" id="lihatDepartemen">-</dd>

                    <dt class="col-5 text-muted">No. HP</dt>
                    <dd class="col-7" id="lihatNoHp">-</dd>

                    <dt class="col-5 text-muted">Jenis Kelamin</dt>
                    <dd class="col-7" id="lihatJk">-</dd>

                    <dt class="col-5 text-muted">Tanggal Lahir</dt>
                    <dd class="col-7" id="lihatTglLahir">-</dd>

                    <dt class="col-5 text-muted">Alamat</dt>
                    <dd class="col-7" id="lihatAlamat">-</dd>

                    <dt class="col-5 text-muted">Role</dt>
                    <dd class="col-7" id="lihatRole">-</dd>

                    <dt class="col-5 text-muted">Status</dt>
                    <dd class="col-7" id="lihatStatus">-</dd>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- ===== MODAL RESET PASSWORD ===== --}}
<div class="modal fade" id="modalResetPassword" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formResetPassword">
                @csrf
                <input type="hidden" name="reset_user_id" id="resetUserId" value="">
                <div class="modal-body">
                    <p class="small text-muted mb-3">Reset password untuk: <strong id="resetNamaPengguna"></strong></p>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Password Baru <span class="text-danger">*</span></label>
                        <input type="password" name="new_password" id="inputNewPassword" class="form-control" placeholder="Min. 8 karakter">
                        <div class="invalid-feedback" id="err_new_password"></div>
                    </div>
                    <div class="mb-1">
                        <label class="form-label fw-semibold">Konfirmasi Password <span class="text-danger">*</span></label>
                        <input type="password" name="new_password_confirmation" id="inputNewPasswordConf" class="form-control" placeholder="Ulangi password">
                        <div class="invalid-feedback" id="err_new_password_confirmation"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-secondary">
                        <i class="bx bx-key me-1"></i>Reset
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ===== MODAL HAPUS ===== --}}
<div class="modal fade" id="modalHapus" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center pt-0">
                <i class="bx bx-trash text-danger" style="font-size:3rem;"></i>
                <h6 class="mt-2 fw-bold">Hapus Pengguna</h6>
                <p class="small text-muted">Anda yakin ingin menghapus pengguna <strong id="hapusNamaPengguna"></strong>?
                    Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer justify-content-center border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="btnKonfirmasiHapus">
                    <i class="bx bx-trash me-1"></i>Hapus
                </button>
            </div>
            <input type="hidden" id="hapusUserId" value="">
        </div>
    </div>
</div>

{{-- ===== MODAL ACTIVITY LOG ===== --}}
<div class="modal fade" id="modalActivity" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title mb-0">Activity Log</h5>
                    <small class="text-muted" id="activityNama"></small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div id="activityLoading" class="text-center py-4">
                    <div class="spinner-border spinner-border-sm text-primary me-2"></div>
                    <span class="text-muted">Memuat log...</span>
                </div>
                <div id="activityEmpty" class="text-center py-4 d-none">
                    <i class="bx bx-history text-muted" style="font-size:2.5rem;"></i>
                    <p class="text-muted mt-2 mb-0">Tidak ada aktivitas dalam 7 hari terakhir.</p>
                </div>
                <ul class="list-group list-group-flush" id="activityList"></ul>
            </div>
            <div class="modal-footer py-2">
                <small class="text-muted me-auto"><i class="bx bx-calendar me-1"></i>7 hari terakhir</small>
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
    const csrfToken = $('meta[name="csrf-token"]').attr('content');
    const urlBase   = '{{ url("pengaturan/pengguna") }}';

    // =========================================================
    // NIK MASK — "1232 243* **** 4561" | eye button untuk toggle
    // =========================================================
    var nikRaw     = '';
    var nikVisible = false;

    function formatNik(raw) {
        return raw.replace(/(.{4})/g, '$1 ').trim();
    }

    function maskNik(raw) {
        if (raw.length < 8) return formatNik(raw);
        var p1 = raw.substring(0, 4);
        var p2 = raw.substring(4, 7) + '*';
        var p3 = '****';
        var p4 = raw.length >= 16 ? raw.substring(12, 16) : raw.substring(12);
        return (p1 + ' ' + p2 + ' ' + p3 + ' ' + p4).trim();
    }

    function renderNik(showFull) {
        $('#inputNikDisplay').val(showFull ? formatNik(nikRaw) : maskNik(nikRaw));
    }

    // Saat mengetik: simpan raw, format dengan spasi
    $('#inputNikDisplay').on('input', function() {
        nikRaw = $(this).val().replace(/\D/g, '').substring(0, 16);
        $(this).val(formatNik(nikRaw));
        $('#inputNik').val(nikRaw);
    });

    // Saat fokus: tampilkan full supaya bisa diedit
    $('#inputNikDisplay').on('focus', function() {
        $(this).val(formatNik(nikRaw));
    });

    // Saat blur: terapkan mask (kecuali jika nikVisible = true)
    $('#inputNikDisplay').on('blur', function() {
        if (!nikVisible) renderNik(false);
    });

    // Tombol mata: toggle tampil / sembunyikan
    $('#btnToggleNik').on('click', function() {
        nikVisible = !nikVisible;
        $('#iconToggleNik')
            .toggleClass('bx-hide', !nikVisible)
            .toggleClass('bx-show', nikVisible);
        renderNik(nikVisible);
    });

    // =========================================================
    // FLATPICKR — Tanggal Lahir + year dropdown + auto-dash typing
    // =========================================================
    function buildYearSelect(fp) {
        var numWrapper = fp.calendarContainer.querySelector('.numInputWrapper');
        if (!numWrapper || numWrapper.querySelector('.fp-year-select')) return;
        var sel = document.createElement('select');
        sel.className = 'fp-year-select';
        var maxY = new Date().getFullYear();
        for (var y = maxY; y >= 1940; y--) {
            var opt = document.createElement('option');
            opt.value = y; opt.textContent = y;
            if (y === fp.currentYear) opt.selected = true;
            sel.appendChild(opt);
        }
        sel.addEventListener('change', function() { fp.changeYear(parseInt(this.value)); });
        numWrapper.appendChild(sel);
    }

    var fpTglLahir = flatpickr('#inputTglLahir', {
        dateFormat   : 'd-m-Y',
        allowInput   : true,
        disableMobile: true,
        locale: {
            months: {
                shorthand: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],
                longhand : ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'],
            },
            weekdays: {
                shorthand: ['Min','Sen','Sel','Rab','Kam','Jum','Sab'],
                longhand : ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'],
            },
            firstDayOfWeek: 1,
        },
        onReady: function(d, s, fp) { buildYearSelect(fp); },
        onYearChange: function(d, s, fp) {
            var sel = fp.calendarContainer.querySelector('.fp-year-select');
            if (sel) sel.value = fp.currentYear;
        },
        onChange: function(dates) {
            if (dates.length > 0) {
                var d = dates[0];
                var iso = d.getFullYear()
                    + '-' + String(d.getMonth()+1).padStart(2,'0')
                    + '-' + String(d.getDate()).padStart(2,'0');
                $('#hiddenTglLahir').val(iso);
            } else {
                $('#hiddenTglLahir').val('');
            }
        },
    });

    // Auto-dash: ketik angka → otomatis sisip "-" di posisi 2 dan 5
    var _fpTyping = false;
    $('#inputTglLahir').on('input', function() {
        if (_fpTyping) return;
        var digits = $(this).val().replace(/\D/g, '').substring(0, 8);
        var fmt = digits.substring(0, 2);
        if (digits.length > 2) fmt += '-' + digits.substring(2, 4);
        if (digits.length > 4) fmt += '-' + digits.substring(4, 8);
        $(this).val(fmt);
        // Bila tanggal lengkap, update kalender & hidden field
        if (fmt.length === 10) {
            _fpTyping = true;
            fpTglLahir.setDate(fmt, true);
            _fpTyping = false;
        } else {
            $('#hiddenTglLahir').val('');
        }
    });

    function clearTglLahir() {
        fpTglLahir.clear();
        $('#hiddenTglLahir').val('');
    }

    function setTglLahir(isoDate) {
        if (!isoDate) { clearTglLahir(); return; }
        var tgl = isoDate.substring(0, 10);
        var p = tgl.split('-');
        fpTglLahir.setDate(p[2]+'-'+p[1]+'-'+p[0], true);
    }

    // =========================================================
    // HELPERS
    // =========================================================
    function clearFormErrors(formId) {
        $('#' + formId + ' .form-control, #' + formId + ' .form-select').removeClass('is-invalid');
        $('#' + formId + ' .invalid-feedback').text('');
        $('#err_roles').text('');
    }

    function showFormErrors(errors, prefix) {
        prefix = prefix || '';
        $.each(errors, function(field, messages) {
            // Collect roles/* errors into #err_roles
            if (field === 'roles' || field.indexOf('roles.') === 0) {
                $('#err_roles').text(messages[0]);
                return;
            }
            var key = field.replace(/\./g, '_');
            var inputId = '#input' + key.charAt(0).toUpperCase() + key.slice(1);
            var errId   = '#err_' + key;
            $(inputId).addClass('is-invalid');
            $(errId).text(messages[0]);
        });
    }

    function previewFotoFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#previewFoto').attr('src', e.target.result).show();
                $('#previewFotoIcon').hide();
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function setPreviewFoto(fotoUrl) {
        if (fotoUrl) {
            $('#previewFoto').attr('src', fotoUrl).show();
            $('#previewFotoIcon').hide();
        } else {
            $('#previewFoto').hide().attr('src', '');
            $('#previewFotoIcon').show();
        }
    }

    function previewTandaTanganFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#previewTandaTangan').attr('src', e.target.result).show();
                $('#previewTandaTanganIcon').hide();
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function setPreviewTandaTangan(url) {
        if (url) {
            $('#previewTandaTangan').attr('src', url).show();
            $('#previewTandaTanganIcon').hide();
        } else {
            $('#previewTandaTangan').hide().attr('src', '');
            $('#previewTandaTanganIcon').show();
        }
    }

    // =========================================================
    // MODAL TAMBAH
    // =========================================================
    function openTambah() {
        clearFormErrors('formPengguna');
        $('#modalPenggunaTitle').text('Tambah Pengguna');
        $('#formPengguna')[0].reset();
        $('#formMethod').val('POST');
        $('#penggunaId').val('');
        $('#passwordRequired').show();
        $('#passwordNote').addClass('d-none');
        $('#inputIsActive').prop('checked', true);
        setPreviewFoto(null);
        setPreviewTandaTangan(null);
        clearTglLahir();
        nikRaw = ''; nikVisible = false;
        $('#inputNikDisplay').val('');
        $('#inputNik').val('');
        $('#iconToggleNik').removeClass('bx-show').addClass('bx-hide');
        // Reset roles
        $('.role-check').prop('checked', false);
        $('#err_roles').text('');
        // Reset faskes
        $('.chk-faskes').prop('checked', false);
        $('#sectionFaskes').hide();
        // Username editable saat tambah baru
        $('#inputUsername').prop('readonly', false).removeClass('bg-light');
        $('#usernameNote').addClass('d-none');
        // Switch to first tab
        $('#penggunaTab button[data-bs-target="#tabAkun"]').tab('show');
        $('#modalPengguna').modal('show');
    }

    // =========================================================
    // MODAL EDIT
    // =========================================================
    function openEdit(id) {
        clearFormErrors('formPengguna');
        $('#formPengguna')[0].reset();
        $('#formMethod').val('PUT');
        $('#penggunaId').val(id);
        $('#modalPenggunaTitle').text('Edit Pengguna');
        $('#passwordRequired').hide();
        $('#passwordNote').removeClass('d-none');
        // Username readonly saat edit
        $('#inputUsername').prop('readonly', true).addClass('bg-light');
        $('#usernameNote').removeClass('d-none');
        // Reset NIK state
        nikRaw = ''; nikVisible = false;
        $('#iconToggleNik').removeClass('bx-show').addClass('bx-hide');
        $('#penggunaTab button[data-bs-target="#tabAkun"]').tab('show');

        $.ajax({
            url     : urlBase + '/' + id,
            method  : 'GET',
            headers : {'X-CSRF-TOKEN': csrfToken},
            success : function(response) {
                if (!response.success) return;
                var d = response.data;
                $('#inputNama').val(d.nama || '');
                $('#inputUsername').val(d.username || '');
                $('#inputEmail').val(d.email || '');
                $('#inputPassword').val('');
                // Reset all role checkboxes then check the ones assigned
                $('.role-check').prop('checked', false);
                $('.chk-faskes').prop('checked', false);
                if (d.roles && d.roles.length) {
                    $.each(d.roles, function(i, r) { $('#role_' + r).prop('checked', true); });
                }
                // Toggle section faskes & centang faskes yang sudah dipilih
                toggleSectionFaskes();
                if (d.faskes_tanganan && d.faskes_tanganan.length) {
                    $.each(d.faskes_tanganan, function(i, fid) { $('#fkso_' + fid).prop('checked', true); });
                }
                $('#inputIsActive').prop('checked', d.is_active == true || d.is_active == 1);
                nikRaw = (d.nik || '').replace(/\D/g, '');
                $('#inputNik').val(nikRaw);
                renderNik(false); // tampilkan ter-mask saat pertama load
                $('#inputJabatan').val(d.jabatan || '');
                $('#inputDepartemen').val(d.departemen || '');
                $('#inputNoHp').val(d.no_hp || '');
                $('#inputJk').val(d.jenis_kelamin || '');
                setTglLahir(d.tanggal_lahir || null);
                $('#inputAlamat').val(d.alamat || '');
                setPreviewFoto(d.foto ? d.foto_url : null);
                setPreviewTandaTangan(d.tanda_tangan_url || null);
                $('#modalPengguna').modal('show');
            },
            error: function() {
                Swal.fire({icon:'error', title:'Error', text:'Gagal mengambil data pengguna.', timer:1500, showConfirmButton:false});
            }
        });
    }

    // =========================================================
    // SUBMIT TAMBAH / EDIT
    // =========================================================
    $('#formPengguna').on('submit', function(e) {
        e.preventDefault();
        clearFormErrors('formPengguna');

        var id     = $('#penggunaId').val();
        var method = $('#formMethod').val();
        var url    = method === 'PUT' ? urlBase + '/' + id : urlBase;

        var formData = new FormData(this);
        // Ensure is_active is sent correctly
        if (!$('#inputIsActive').is(':checked')) {
            formData.set('is_active', '0');
        } else {
            formData.set('is_active', '1');
        }
        // For PUT, Laravel needs _method override
        if (method === 'PUT') {
            formData.set('_method', 'PUT');
        }

        $('#btnSubmitPengguna').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');

        $.ajax({
            url         : url,
            method      : 'POST',
            headers     : {'X-CSRF-TOKEN': csrfToken},
            data        : formData,
            processData : false,
            contentType : false,
            success: function(response) {
                if (response.success) {
                    $('#modalPengguna').modal('hide');
                    Swal.fire({icon:'success', title:'Berhasil', text:response.message, timer:1500, showConfirmButton:false})
                        .then(function() { location.reload(); });
                } else {
                    Swal.fire({icon:'error', title:'Gagal', text:response.message || 'Terjadi kesalahan.', timer:1500, showConfirmButton:false});
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    showFormErrors(xhr.responseJSON.errors);
                    // Switch to akun tab if error in akun fields
                    var akunFields = ['nama','username','email','password','roles'];
                    var hasAkunErr = false;
                    $.each(xhr.responseJSON.errors, function(k){ if (akunFields.indexOf(k) >= 0) hasAkunErr = true; });
                    if (hasAkunErr) $('#penggunaTab button[data-bs-target="#tabAkun"]').tab('show');
                } else {
                    Swal.fire({icon:'error', title:'Error', text:'Terjadi kesalahan server.', timer:1500, showConfirmButton:false});
                }
            },
            complete: function() {
                $('#btnSubmitPengguna').prop('disabled', false).html('<i class="bx bx-save me-1"></i>Simpan');
            }
        });
    });

    // =========================================================
    // MODAL LIHAT
    // =========================================================
    function openLihat(id) {
        $.ajax({
            url     : urlBase + '/' + id,
            method  : 'GET',
            headers : {'X-CSRF-TOKEN': csrfToken},
            success : function(response) {
                if (!response.success) return;
                var d = response.data;
                if (d.foto) {
                    $('#lihatFoto').attr('src', d.foto_url).show();
                    $('#lihatFotoIcon').hide();
                } else {
                    $('#lihatFoto').hide();
                    $('#lihatFotoIcon').show();
                }
                $('#lihatNama').text(d.nama || '-');
                $('#lihatUsername').text('@' + (d.username || '-'));
                $('#lihatEmail').text(d.email || '-');
                $('#lihatNik').text(d.nik || '-');
                $('#lihatJabatan').text(d.jabatan || '-');
                $('#lihatDepartemen').text(d.departemen || '-');
                $('#lihatNoHp').text(d.no_hp || '-');
                $('#lihatJk').text(d.nama_jk || '-');
                if (d.tanggal_lahir) {
                    var tgl = d.tanggal_lahir;
                    if (tgl.length > 10) tgl = tgl.substring(0, 10);
                    var parts = tgl.split('-');
                    $('#lihatTglLahir').text(parts[2]+'-'+parts[1]+'-'+parts[0]);
                } else {
                    $('#lihatTglLahir').text('-');
                }
                $('#lihatAlamat').text(d.alamat || '-');
                if (d.roles && d.roles.length) {
                    var roleBadges = $.map(d.roles, function(r) {
                        var label = r.replace(/_/g, ' ').replace(/\b\w/g, function(c){ return c.toUpperCase(); });
                        return '<span class="badge bg-primary-transparent me-1">' + label + '</span>';
                    }).join('');
                    $('#lihatRole').html(roleBadges);
                } else {
                    $('#lihatRole').text('-');
                }
                if (d.is_active) {
                    $('#lihatStatus').html('<span class="badge bg-success">Aktif</span>');
                } else {
                    $('#lihatStatus').html('<span class="badge bg-secondary">Nonaktif</span>');
                }
                $('#modalLihat').modal('show');
            },
            error: function() {
                Swal.fire({icon:'error', title:'Error', text:'Gagal mengambil data pengguna.', timer:1500, showConfirmButton:false});
            }
        });
    }

    // =========================================================
    // MODAL RESET PASSWORD
    // =========================================================
    function openReset(id, nama) {
        $('#resetUserId').val(id);
        $('#resetNamaPengguna').text(nama);
        $('#formResetPassword')[0].reset();
        clearFormErrors('formResetPassword');
        $('#modalResetPassword').modal('show');
    }

    $('#formResetPassword').on('submit', function(e) {
        e.preventDefault();
        clearFormErrors('formResetPassword');

        var id = $('#resetUserId').val();
        var data = {
            new_password              : $('#inputNewPassword').val(),
            new_password_confirmation : $('#inputNewPasswordConf').val(),
            _method                   : 'PATCH',
        };

        $.ajax({
            url     : urlBase + '/' + id + '/reset-password',
            method  : 'POST',
            headers : {'X-CSRF-TOKEN': csrfToken},
            data    : data,
            success : function(response) {
                if (response.success) {
                    $('#modalResetPassword').modal('hide');
                    Swal.fire({icon:'success', title:'Berhasil', text:response.message, timer:1500, showConfirmButton:false})
                        .then(function() { location.reload(); });
                } else {
                    Swal.fire({icon:'error', title:'Gagal', text:response.message || 'Terjadi kesalahan.', timer:1500, showConfirmButton:false});
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    showFormErrors(xhr.responseJSON.errors);
                } else {
                    Swal.fire({icon:'error', title:'Error', text:'Terjadi kesalahan server.', timer:1500, showConfirmButton:false});
                }
            }
        });
    });

    // =========================================================
    // MODAL HAPUS
    // =========================================================
    function openHapus(id, nama) {
        $('#hapusUserId').val(id);
        $('#hapusNamaPengguna').text(nama);
        $('#modalHapus').modal('show');
    }

    $('#btnKonfirmasiHapus').on('click', function() {
        var id = $('#hapusUserId').val();

        $.ajax({
            url     : urlBase + '/' + id,
            method  : 'POST',
            headers : {'X-CSRF-TOKEN': csrfToken},
            data    : {_method: 'DELETE'},
            success : function(response) {
                if (response.success) {
                    $('#modalHapus').modal('hide');
                    Swal.fire({icon:'success', title:'Berhasil', text:response.message, timer:1500, showConfirmButton:false})
                        .then(function() { location.reload(); });
                } else {
                    Swal.fire({icon:'error', title:'Gagal', text:response.message || 'Terjadi kesalahan.', timer:1500, showConfirmButton:false});
                }
            },
            error: function() {
                Swal.fire({icon:'error', title:'Error', text:'Terjadi kesalahan server.', timer:1500, showConfirmButton:false});
            }
        });
    });

    // =========================================================
    // MODAL ACTIVITY LOG
    // =========================================================
    function openActivity(id) {
        $('#activityList').empty();
        $('#activityEmpty').addClass('d-none');
        $('#activityLoading').removeClass('d-none');
        $('#activityNama').text('');
        $('#modalActivity').modal('show');

        $.ajax({
            url     : urlBase + '/' + id + '/activity',
            method  : 'GET',
            headers : {'X-CSRF-TOKEN': csrfToken},
            success : function(response) {
                $('#activityLoading').addClass('d-none');
                $('#activityNama').text(response.nama);

                if (!response.logs || response.logs.length === 0) {
                    $('#activityEmpty').removeClass('d-none');
                    return;
                }

                $.each(response.logs, function(i, log) {
                    var icon = 'bx-circle';
                    var color = 'text-secondary';
                    if (log.description === 'Login') { icon = 'bx-log-in'; color = 'text-success'; }
                    else if (log.description === 'Logout') { icon = 'bx-log-out'; color = 'text-danger'; }
                    else if (log.description.includes('dibuat')) { icon = 'bx-user-plus'; color = 'text-primary'; }
                    else if (log.description.includes('diperbarui')) { icon = 'bx-edit'; color = 'text-warning'; }
                    else if (log.description.includes('dihapus')) { icon = 'bx-user-x'; color = 'text-danger'; }
                    else if (log.description.includes('Approve') || log.description.includes('approve')) { icon = 'bx-check-circle'; color = 'text-success'; }

                    $('#activityList').append(
                        '<li class="list-group-item py-2 px-3">' +
                            '<div class="d-flex align-items-center gap-2">' +
                                '<i class="bx ' + icon + ' fs-18 ' + color + ' flex-shrink-0"></i>' +
                                '<div>' +
                                    '<div class="fw-semibold lh-sm" style="font-size:.875rem">' + log.description + '</div>' +
                                    '<small class="text-muted">' + log.created_at + '</small>' +
                                '</div>' +
                            '</div>' +
                        '</li>'
                    );
                });
            },
            error: function() {
                $('#activityLoading').addClass('d-none');
                $('#activityEmpty').removeClass('d-none');
            }
        });
    }

    // =========================================================
    // FASKES KSO — toggle section saat role sales dipilih
    // =========================================================
    function toggleSectionFaskes() {
        var hasSales = $('#role_staf_sales').is(':checked') || $('#role_kepala_sales').is(':checked');
        if (hasSales) {
            $('#sectionFaskes').show();
        } else {
            $('#sectionFaskes').hide();
            $('.chk-faskes').prop('checked', false);
        }
    }

    $(document).on('change', '#role_staf_sales, #role_kepala_sales', toggleSectionFaskes);

    // =========================================================
    // DATATABLE
    // =========================================================
    var dt = $('#tablePengguna').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/id.json',
        },
        columnDefs: [
            { targets: 0, orderable: false, searchable: false },
            { targets: 1, orderable: false, searchable: false },
            { targets: [4, 5], orderable: false },
        ],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        order: [[2, 'asc']],
        drawCallback: function() {
            var api   = this.api();
            var start = api.page.info().start;
            api.rows({page: 'current', order: 'applied'}).nodes().each(function(row, i) {
                $('td:first-child', row).html(start + i + 1);
            });
        },
        dom: "<'row align-items-center mb-2'<'col-sm-6'l><'col-sm-6 text-end'f>>" +
             "<'row'<'col-12'tr>>" +
             "<'row align-items-center mt-2'<'col-sm-5'i><'col-sm-7'p>>",
    });
</script>
@endsection