

<?php $__env->startSection('title', 'Manajemen Pengguna | PRADIPA'); ?>

<?php $__env->startSection('content'); ?>
<div class="flex flex-col gap-6">
    <!-- Header Halaman -->
    <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col md:flex-row justify-between md:items-center gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Manajemen Akses Pengguna</h2>
            <p class="text-sm text-slate-500 mt-1 font-medium">Atur hak akses akun operator kabupaten, admin provinsi, dan verifikator pejabat dinas pertanian.</p>
        </div>
        <!-- Tombol Tambah User -->
        <button onclick="bukaModalUser()" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold shadow-sm transition-all flex items-center gap-2 self-start md:self-auto">
            <i data-lucide="user-plus" class="w-4 h-4"></i>
            Tambah Pengguna Baru
        </button>
    </div>

    <!-- Tampilan Error Validasi -->
    <?php if($errors->any()): ?>
        <div class="bg-rose-100 border-l-4 border-rose-600 text-rose-800 p-4 rounded-xl shadow-sm text-sm font-medium">
            <?php echo e($errors->first()); ?>

        </div>
    <?php endif; ?>

    <!-- Tampilan Toast Flash Message Sukses -->
    <?php if(session('success')): ?>
        <div class="bg-emerald-100 border-l-4 border-emerald-600 text-emerald-800 p-4 rounded-xl shadow-sm text-sm flex items-center gap-2">
            <i data-lucide="check-circle" class="text-emerald-600"></i>
            <span class="font-medium"><?php echo e(session('success')); ?></span>
        </div>
    <?php endif; ?>

    <!-- FILTER PENCARIAN -->
    <form action="<?php echo e(route('shared.user.index')); ?>" method="GET" class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col md:flex-row gap-4">
        <div class="flex-1 relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                <i data-lucide="search" class="w-5 h-5"></i>
            </span>
            <input type="text" name="search" value="<?php echo e(request('search')); ?>" placeholder="Cari berdasarkan nama, email, atau no. handphone..." class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all">
        </div>
        
        <div class="w-full md:w-56">
            <select name="role" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 cursor-pointer">
                <option value="">Semua Peran (Role)</option>
                <option value="provinsi_admin" <?php echo e(request('role') == 'provinsi_admin' ? 'selected' : ''); ?>>Admin Provinsi</option>
                <option value="provinsi_pejabat" <?php echo e(request('role') == 'provinsi_pejabat' ? 'selected' : ''); ?>>Pejabat Verifikator</option>
                <option value="kabupaten_user" <?php echo e(request('role') == 'kabupaten_user' ? 'selected' : ''); ?>>Operator Kabupaten</option>
            </select>
        </div>

        <button type="submit" class="px-5 py-2 bg-slate-800 hover:bg-slate-900 text-white rounded-lg text-sm font-semibold transition-all">
            Filter
        </button>
    </form>

    <!-- TABEL DATA PENGGUNA -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm divide-y divide-slate-100">
                <thead class="bg-slate-50">
                    <tr class="text-slate-400 uppercase text-[10px] font-bold tracking-wider">
                        <th class="py-4 px-6">Identitas Pengguna</th>
                        <th class="py-4 px-6">Hak Akses & Wilayah Kerja</th>
                        <th class="py-4 px-6">Nomor Kontak</th>
                        <th class="py-4 px-6">Status Akun</th>
                        <th class="py-4 px-6 text-center">Tindakan Pengurus</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700">
                    <?php $__empty_1 = true; $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <!-- Kolom Identitas -->
                            <td class="py-4 px-6">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full bg-slate-100 text-slate-700 font-extrabold flex items-center justify-center border border-slate-200 uppercase text-xs">
                                        <?php echo e(substr($u->name, 0, 2)); ?>

                                    </div>
                                    <div>
                                        <span class="font-extrabold text-slate-800 block text-sm"><?php echo e($u->name); ?></span>
                                        <span class="text-xs text-slate-400 block font-mono mt-0.5"><?php echo e($u->email); ?></span>
                                    </div>
                                </div>
                            </td>
                            <!-- Kolom Role & Wilayah -->
                            <td class="py-4 px-6">
                                <?php if($u->role === 'provinsi_admin'): ?>
                                    <span class="px-2.5 py-1 bg-red-50 text-red-700 border border-red-200 rounded-full text-[10px] font-bold uppercase tracking-wider">Admin Provinsi</span>
                                <?php elseif($u->role === 'provinsi_pejabat'): ?>
                                    <span class="px-2.5 py-1 bg-purple-50 text-purple-700 border border-purple-200 rounded-full text-[10px] font-bold uppercase tracking-wider">Pejabat Verifikator</span>
                                <?php else: ?>
                                    <span class="px-2.5 py-1 bg-blue-50 text-blue-700 border border-blue-200 rounded-full text-[10px] font-bold uppercase tracking-wider">Operator Kabupaten</span>
                                <?php endif; ?>
                                
                                <?php if($u->regency_id): ?>
                                    <span class="text-xs font-bold text-slate-700 block mt-1.5 flex items-center gap-1">
                                        <i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-400"></i>
                                        Kab. <?php echo e($u->nama_kabupaten); ?>

                                    </span>
                                <?php else: ?>
                                    <span class="text-xs text-slate-400 block mt-1.5 flex items-center gap-1">
                                        <i data-lucide="globe" class="w-3.5 h-3.5 text-slate-400"></i>
                                        Satu Wilayah Provinsi
                                    </span>
                                <?php endif; ?>
                            </td>
                            <!-- Kolom Kontak -->
                            <td class="py-4 px-6 font-mono text-xs">
                                <?php if($u->no_hp): ?>
                                    <a href="https://wa.me/<?php echo e(preg_replace('/[^0-9]/', '', $u->no_hp)); ?>" target="_blank" class="text-slate-600 hover:text-emerald-600 flex items-center gap-1">
                                        <i data-lucide="phone" class="w-3.5 h-3.5 text-emerald-500"></i>
                                        <?php echo e($u->no_hp); ?>

                                    </a>
                                <?php else: ?>
                                    <span class="text-slate-300 italic">Belum diinput</span>
                                <?php endif; ?>
                            </td>
                            <!-- Kolom Status -->
                            <td class="py-4 px-6">
                                <?php if($u->is_active ?? true): ?>
                                    <span class="px-2 py-0.5 bg-emerald-100 text-emerald-800 rounded font-bold text-[10px] uppercase">Aktif</span>
                                <?php else: ?>
                                    <span class="px-2 py-0.5 bg-rose-100 text-rose-800 rounded font-bold text-[10px] uppercase">Suspend</span>
                                <?php endif; ?>
                            </td>
                            <!-- Kolom Aksi -->
                            <td class="py-4 px-6 text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <?php if($u->id != 1): ?>
                                        <!-- TOMBOL EDIT DATA PROFIL USER -->
                                        <button onclick="bukaModalEditUser(<?php echo e($u->id); ?>, '<?php echo e(addslashes($u->name)); ?>', '<?php echo e($u->email); ?>', '<?php echo e($u->no_hp ?? ''); ?>', '<?php echo e($u->role); ?>', '<?php echo e($u->regency_id ?? ''); ?>')" class="p-1.5 hover:bg-emerald-50 text-slate-400 hover:text-emerald-700 rounded-lg transition-colors border border-transparent hover:border-emerald-100" title="Ubah Profil Pengguna">
                                            <i data-lucide="edit-3" class="w-4 h-4"></i>
                                        </button>

                                        <!-- Aksi Toggle Status Aktif -->
                                        <form action="<?php echo e(route('shared.user.toggle', $u->id)); ?>" method="POST">
                                            <?php echo csrf_field(); ?>
                                            <?php if($u->is_active ?? true): ?>
                                                <button type="submit" class="p-1.5 hover:bg-rose-50 text-slate-400 hover:text-rose-600 rounded-lg transition-colors border border-transparent hover:border-rose-100" title="Tangguhkan Akun">
                                                    <i data-lucide="user-minus" class="w-4 h-4"></i>
                                                </button>
                                            <?php else: ?>
                                                <button type="submit" class="p-1.5 hover:bg-emerald-50 text-slate-400 hover:text-emerald-600 rounded-lg transition-colors border border-transparent hover:border-emerald-100" title="Aktifkan Akun">
                                                    <i data-lucide="user-check" class="w-4 h-4"></i>
                                                </button>
                                            <?php endif; ?>
                                        </form>
                                        
                                        <!-- Tombol Reset Sandi -->
                                        <form action="<?php echo e(route('shared.user.reset_password', $u->id)); ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin mengatur ulang kata sandi pengguna <?php echo e($u->name); ?>? Kata sandi akan dikembalikan menjadi default: pradipajaya');">
                                            <?php echo csrf_field(); ?>
                                            <button type="submit" class="p-1.5 hover:bg-slate-100 text-slate-400 hover:text-slate-700 rounded-lg transition-colors border border-transparent hover:border-slate-200" title="Reset Kata Sandi">
                                                <i data-lucide="key-round" class="w-4 h-4"></i>
                                            </button>
                                        </form>
                                    <?php else: ?>
                                        <span class="text-[11px] text-slate-400 italic font-medium">Akun Utama Locked</span>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="5" class="py-8 text-center text-slate-400 font-medium">Tidak ada data pengguna yang sesuai dengan filter pencarian.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ================== MODAL PENDAFTARAN PENGGUNA BARU ================== -->
<div id="modalTambahUser" class="hidden fixed inset-0 z-50 bg-slate-900/60 flex items-center justify-center p-4">
    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl border border-slate-200 overflow-hidden">
        <div class="bg-slate-50 border-b border-slate-100 px-6 py-4 flex justify-between items-center">
            <h3 class="font-bold text-slate-800 text-base">Registrasi Pengguna Sistem</h3>
            <button onclick="tutupModalUser()" class="text-slate-400 hover:text-slate-600 bg-slate-100 hover:bg-slate-200 p-1.5 rounded-full transition-all">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        
        <form action="<?php echo e(route('shared.user.store')); ?>" method="POST" class="p-6 flex flex-col gap-4">
            <?php echo csrf_field(); ?>
            <!-- Input Nama -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Nama Lengkap:</label>
                <input type="text" name="name" placeholder="Contoh: Admin Kab Banyumas" required class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <!-- Input Email -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Alamat Email Kredensial:</label>
                <input type="email" name="email" placeholder="Contoh: banyumas@pradipa.id" required class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <!-- Input HP -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">No. Handphone (WhatsApp):</label>
                <input type="text" name="no_hp" placeholder="Contoh: 08123456789" class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <!-- Pilihan Role -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Peran (Role) Pengguna:</label>
                <select name="role" id="selectRole" onchange="toggleRegencySelect()" required class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 cursor-pointer">
                    <option value="kabupaten_user">Operator Kabupaten / Kota</option>
                    <option value="provinsi_admin">Administrator Provinsi</option>
                    <option value="provinsi_pejabat">Pejabat Dinas Provinsi</option>
                </select>
            </div>

            <!-- Pilihan Kunci Kabupaten -->
            <div id="wrapperRegencySelect" class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Kunci Wilayah Kabupaten:</label>
                <select name="regency_id" id="selectRegency" class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 cursor-pointer">
                    <option value="">-- Pilihlah Wilayah Kerja Kabupaten --</option>
                    <?php $__currentLoopData = $kabupatens; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kab): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($kab->id); ?>"><?php echo e($kab->nama_kabupaten); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <!-- Input Sandi -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Kata Sandi Pertama (Sandi Default):</label>
                <input type="text" name="password" value="pradipajaya" required class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 font-mono">
            </div>

            <div class="flex justify-end gap-2 border-t border-slate-100 pt-4 mt-2">
                <button type="button" onclick="tutupModalUser()" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold rounded-lg">Batal</button>
                <button type="submit" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg shadow-sm">Simpan Akun</button>
            </div>
        </form>
    </div>
</div>

<!-- ================== MODAL UBAH / EDIT DETAIL PENGGUNA ================== -->
<div id="modalEditUser" class="hidden fixed inset-0 z-50 bg-slate-900/60 flex items-center justify-center p-4">
    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl border border-slate-200 overflow-hidden">
        <div class="bg-slate-50 border-b border-slate-100 px-6 py-4 flex justify-between items-center">
            <h3 class="font-bold text-slate-800 text-base">Ubah Detail Profil Pengguna</h3>
            <button onclick="tutupModalEditUser()" class="text-slate-400 hover:text-slate-600 bg-slate-100 hover:bg-slate-200 p-1.5 rounded-full transition-all">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        
        <!-- Form ditargetkan rute aksi-nya secara dinamis via JavaScript -->
        <form id="formEditUser" method="POST" class="p-6 flex flex-col gap-4">
            <?php echo csrf_field(); ?>
            
            <!-- Input Nama -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Nama Lengkap:</label>
                <input type="text" name="name" id="editName" placeholder="Nama lengkap..." required class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <!-- Input Email -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Alamat Email Kredensial:</label>
                <input type="email" name="email" id="editEmail" placeholder="Alamat email..." required class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <!-- Input HP -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">No. Handphone (WhatsApp):</label>
                <input type="text" name="no_hp" id="editNoHp" placeholder="Contoh: 08123456789" class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <!-- Pilihan Role -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Peran (Role) Pengguna:</label>
                <select name="role" id="editRole" onchange="toggleEditRegencySelect()" required class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 cursor-pointer">
                    <option value="kabupaten_user">Operator Kabupaten / Kota</option>
                    <option value="provinsi_admin">Administrator Provinsi</option>
                    <option value="provinsi_pejabat">Pejabat Dinas Provinsi</option>
                </select>
            </div>

            <!-- Pilihan Kunci Kabupaten -->
            <div id="wrapperEditRegencySelect" class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Kunci Wilayah Kabupaten:</label>
                <select name="regency_id" id="editRegency" class="w-full px-3.5 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 cursor-pointer">
                    <option value="">-- Pilihlah Wilayah Kerja Kabupaten --</option>
                    <?php $__currentLoopData = $kabupatens; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kab): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($kab->id); ?>"><?php echo e($kab->nama_kabupaten); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <div class="flex justify-end gap-2 border-t border-slate-100 pt-4 mt-2">
                <button type="button" onclick="tutupModalEditUser()" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold rounded-lg">Batal</button>
                <button type="submit" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg shadow-sm">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    // Penanganan Modal Tambah
    function bukaModalUser() {
        document.getElementById('modalTambahUser').classList.remove('hidden');
    }
    function tutupModalUser() {
        document.getElementById('modalTambahUser').classList.add('hidden');
    }

    // Toggle tampilan wilayah untuk Form Tambah
    function toggleRegencySelect() {
        const role = document.getElementById('selectRole').value;
        const wrapper = document.getElementById('wrapperRegencySelect');
        const selectRegency = document.getElementById('selectRegency');

        if (role === 'kabupaten_user') {
            wrapper.classList.remove('hidden');
            selectRegency.setAttribute('required', 'required');
        } else {
            wrapper.classList.add('hidden');
            selectRegency.removeAttribute('required');
            selectRegency.value = "";
        }
    }

    // Penanganan Modal Edit
    function bukaModalEditUser(id, name, email, noHp, role, regencyId) {
        // Isi form isian modal edit dengan nilai lama
        document.getElementById('editName').value = name;
        document.getElementById('editEmail').value = email;
        document.getElementById('editNoHp').value = noHp;
        document.getElementById('editRole').value = role;
        document.getElementById('editRegency').value = regencyId;

        // Atur action tujuan form secara dinamis ke rute update user di web.php
        const form = document.getElementById('formEditUser');
        form.action = `<?php echo e(url('shared/users')); ?>/${id}/update`;

        // Sesuaikan visual pilihan kabupaten pada form edit
        toggleEditRegencySelect();

        // Tampilkan modal edit
        document.getElementById('modalEditUser').classList.remove('hidden');
    }

    function tutupModalEditUser() {
        document.getElementById('modalEditUser').classList.add('hidden');
    }

    // Toggle tampilan wilayah untuk Form Edit
    function toggleEditRegencySelect() {
        const role = document.getElementById('editRole').value;
        const wrapper = document.getElementById('wrapperEditRegencySelect');
        const selectRegency = document.getElementById('editRegency');

        if (role === 'kabupaten_user') {
            wrapper.classList.remove('hidden');
            selectRegency.setAttribute('required', 'required');
        } else {
            wrapper.classList.add('hidden');
            selectRegency.removeAttribute('required');
            selectRegency.value = "";
        }
    }

    // Jalankan satu kali di awal pemuatan halaman
    document.addEventListener('DOMContentLoaded', function() {
        toggleRegencySelect();
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laragon\www\pradipa\resources\views/shared/user/index.blade.php ENDPATH**/ ?>