@extends('layouts.app')

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

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Manajemen Pengguna" 
        subtitle="Kelola akun Admin dan akun Warga dalam satu dashboard terpusat."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Pengaturan' => '#',
            'Manajemen Pengguna' => route('admin.manajemen-pengguna.index')
        ]"
    />

    <div class="container-fluid px-0">
        
        <!-- Nav Tabs -->
        <ul class="nav nav-pills custom-nav-pills mb-3 p-1 bg-light rounded-lg" id="userManagementTab" role="tablist" style="border-radius: 10px; display: inline-flex;">
            <li class="nav-item">
                <a class="nav-link active font-weight-bold px-4 py-2" id="admin-tab" data-toggle="tab" href="#admin-content" role="tab" aria-controls="admin-content" aria-selected="true" style="border-radius: 8px;">
                    <i class="fas fa-user-shield mr-2"></i> Admin
                    <span class="badge badge-pill badge-primary ml-1 px-2">{{ $admins->count() }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link font-weight-bold px-4 py-2 text-secondary" id="warga-tab" data-toggle="tab" href="#warga-content" role="tab" aria-controls="warga-content" aria-selected="false" style="border-radius: 8px;">
                    <i class="fas fa-users mr-2"></i> Warga
                    <span class="badge badge-pill badge-secondary ml-1 px-2">{{ $wargas->count() }}</span>
                </a>
            </li>
        </ul>

        <!-- Role Admin Info Helper Card -->
        <div class="alert border-0 shadow-sm mb-4 py-2 px-3 d-flex align-items-center" style="border-radius: 8px; background-color: #f0fdf4; border-left: 4px solid #0F766E !important; color: #0f766e;">
            <i class="fas fa-info-circle mr-2" style="font-size: 1.1rem;"></i>
            <span class="text-sm font-weight-medium">
                Role Admin digunakan oleh aparatur desa yang diberi kewenangan mengelola Sistem Informasi Administrasi Desa (SIAD).
            </span>
        </div>

        <!-- Tab Content -->
        <div class="tab-content" id="userManagementTabContent">
            
            <!-- TAB 1: ADMIN -->
            <div class="tab-pane fade show active" id="admin-content" role="tabpanel" aria-labelledby="admin-tab">
                <div class="card shadow-sm border-0" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                        <h5 class="font-weight-bold text-dark mb-1">Daftar Akun Admin</h5>
                        <p class="text-secondary text-sm mb-0">Kelola akun Admin yang digunakan oleh aparatur desa untuk mengakses Sistem Informasi Administrasi Desa (SIAD).</p>
                    </div>

                    <div class="card-body bg-white p-4">
                        @php
                            $activeAdminCount = $admins->where('status', 'aktif')->count();
                        @endphp

                        <x-datatable id="adminTable" :export-columns="[0, 1, 2, 3, 4, 5]" title="Daftar Akun Admin" placeholder="Cari nama, jabatan, atau username...">
                            <x-slot name="buttons">
                                <button type="button" class="btn btn-primary font-weight-bold btn-sm mr-2 px-3" data-toggle="modal" data-target="#createAdminModal" style="border-radius: 6px; height: 36px; display: inline-flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-plus mr-1"></i> Tambah Akun
                                </button>
                            </x-slot>

                            <thead>
                                <tr>
                                    <th width="50">No</th>
                                    <th>Nama Lengkap</th>
                                    <th>Jabatan</th>
                                    <th>Username</th>
                                    <th>Nomor WhatsApp</th>
                                    <th width="110">Status</th>
                                    <th width="130" class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($admins as $admin)
                                    @php
                                        $wa = preg_replace('/[^0-9]/', '', $admin->nomor_whatsapp ?? '');
                                        $formattedWa = (strlen($wa) >= 10) ? substr($wa, 0, 4) . ' ' . substr($wa, 4, 4) . ' ' . substr($wa, 8) : ($admin->nomor_whatsapp ?? '-');
                                    @endphp
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td class="font-weight-bold text-dark">{{ $admin->name }}</td>
                                        <td><span class="badge badge-light border px-2 py-1 text-sm font-weight-normal">{{ !empty($admin->jabatan) ? $admin->jabatan : '-' }}</span></td>
                                        <td class="text-dark">{{ $admin->username ?? '-' }}</td>
                                        <td>{{ $formattedWa }}</td>
                                        <td>
                                            @if ($admin->status === 'aktif')
                                                <span class="badge-pill-soft status-disetujui px-2 py-1 text-xs">Aktif</span>
                                            @else
                                                <span class="badge-pill-soft status-ditolak px-2 py-1 text-xs">Nonaktif</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center align-items-center" style="gap: 4px;">
                                                <!-- 1. Detail (Icon Only) -->
                                                <button type="button" class="btn btn-sm btn-outline-info px-2 py-1" data-toggle="modal" data-target="#detailAdminModal{{ $admin->id }}" title="Detail Admin">
                                                    <i class="fas fa-eye"></i>
                                                </button>

                                                <!-- 2. Edit (Icon Only) -->
                                                <button type="button" class="btn btn-sm btn-outline-primary px-2 py-1" data-toggle="modal" data-target="#editAdminModal{{ $admin->id }}" title="Edit Admin">
                                                    <i class="fas fa-edit"></i>
                                                </button>

                                                <!-- 3. Nonaktifkan / Aktifkan (Icon Only) -->
                                                <form action="{{ route('admin.manajemen-pengguna.admin.toggle-status', $admin->id) }}" method="POST" class="toggleAdminForm d-inline m-0 p-0" data-status="{{ $admin->status }}" data-name="{{ $admin->name }}" data-active-count="{{ $activeAdminCount }}">
                                                    @csrf
                                                    @if ($admin->status === 'aktif')
                                                        <button type="submit" class="btn btn-action-reject btn-sm font-weight-bold px-2 py-1" style="height: 31px; width: 32px; display: inline-flex; align-items: center; justify-content: center;" title="{{ $activeAdminCount <= 1 ? 'Minimal harus terdapat satu akun Admin aktif.' : 'Nonaktifkan Admin' }}">
                                                            <i class="fas fa-ban"></i>
                                                        </button>
                                                    @else
                                                        <button type="submit" class="btn btn-action-approve btn-sm font-weight-bold px-2 py-1" style="height: 31px; width: 32px; display: inline-flex; align-items: center; justify-content: center;" title="Aktifkan Admin">
                                                            <i class="fas fa-check-circle"></i>
                                                        </button>
                                                    @endif
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </x-datatable>
                    </div>
                </div>
            </div>

            <!-- TAB 2: WARGA -->
            <div class="tab-pane fade" id="warga-content" role="tabpanel" aria-labelledby="warga-tab">
                <div class="card shadow-sm border-0" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-body bg-white p-4">
                        <x-datatable id="wargaTable" :export-columns="[0, 1, 2, 3, 4, 5]" title="Data Pengguna Warga" placeholder="Cari warga (Nama Lengkap, NIK, Username, Nomor WhatsApp)...">
                            <thead>
                                <tr>
                                    <th width="60">No</th>
                                    <th>NIK</th>
                                    <th>Nama Lengkap</th>
                                    <th>Username</th>
                                    <th>Nomor WhatsApp</th>
                                    <th>Tanggal Registrasi</th>
                                    <th width="150">Status</th>
                                    <th width="200" class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($wargas as $warga)
                                    @php
                                        $waWarga = preg_replace('/[^0-9]/', '', $warga->nomor_whatsapp ?? '');
                                        $formattedWaWarga = (strlen($waWarga) >= 10) ? substr($waWarga, 0, 4) . ' ' . substr($waWarga, 4, 4) . ' ' . substr($waWarga, 8) : ($warga->nomor_whatsapp ?? '-');
                                    @endphp
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td><code>{{ optional($warga->penduduk)->nik ?? '-' }}</code></td>
                                        <td>{{ $warga->name }}</td>
                                        <td class="text-dark">{{ $warga->username ?? '-' }}</td>
                                        <td>{{ $formattedWaWarga }}</td>
                                        <td>{{ $warga->created_at->translatedFormat('d M Y - H:i') }}</td>
                                        <td>
                                            @if ($warga->status === 'aktif')
                                                <span class="badge-pill-soft status-disetujui px-2 py-1 text-xs">Aktif</span>
                                            @elseif ($warga->status === 'nonaktif')
                                                <span class="badge-pill-soft status-ditolak px-2 py-1 text-xs">Nonaktif</span>
                                            @elseif ($warga->status === 'ditolak')
                                                <span class="badge-pill-soft status-ditolak px-2 py-1 text-xs">Ditolak</span>
                                            @elseif ($warga->status === 'menunggu_verifikasi')
                                                <span class="badge-pill-soft status-menunggu px-2 py-1 text-xs">Menunggu Verifikasi</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($warga->status === 'menunggu_verifikasi')
                                                <div class="d-flex justify-content-center align-items-center" style="gap: 6px;">
                                                    <!-- Setujui Form -->
                                                    <form action="{{ route('admin.manajemen-pengguna.warga.setujui', $warga->id) }}" method="POST" class="approveForm d-inline m-0 p-0">
                                                        @csrf
                                                        <button type="submit" class="btn btn-action-approve btn-sm font-weight-bold" style="height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;">
                                                            <i class="fas fa-check mr-1"></i> Setujui
                                                        </button>
                                                    </form>
                                                    <!-- Tolak Form -->
                                                    <form action="{{ route('admin.manajemen-pengguna.warga.tolak', $warga->id) }}" method="POST" class="rejectForm d-inline m-0 p-0">
                                                        @csrf
                                                        <button type="submit" class="btn btn-action-reject btn-sm font-weight-bold" style="height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;">
                                                            <i class="fas fa-times mr-1"></i> Tolak
                                                        </button>
                                                    </form>
                                                </div>
                                            @elseif ($warga->status === 'aktif')
                                                <!-- Nonaktifkan Form -->
                                                <form action="{{ route('admin.manajemen-pengguna.warga.nonaktifkan', $warga->id) }}" method="POST" class="deactivateForm d-inline m-0 p-0">
                                                    @csrf
                                                    <button type="submit" class="btn btn-action-reject btn-sm font-weight-bold" style="height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;">
                                                        <i class="fas fa-ban mr-1"></i> Nonaktifkan
                                                    </button>
                                                </form>
                                            @elseif ($warga->status === 'nonaktif')
                                                <!-- Aktifkan Form -->
                                                <form action="{{ route('admin.manajemen-pengguna.warga.aktifkan', $warga->id) }}" method="POST" class="activateForm d-inline m-0 p-0">
                                                    @csrf
                                                    <button type="submit" class="btn btn-action-approve btn-sm font-weight-bold" style="height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;">
                                                        <i class="fas fa-check-circle mr-1"></i> Aktifkan
                                                    </button>
                                                </form>
                                            @else
                                                —
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </x-datatable>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!-- MODAL: TAMBAH ADMIN -->
    <div class="modal fade" id="createAdminModal" tabindex="-1" role="dialog" aria-labelledby="createAdminModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow" style="border-radius: 12px;">
                <div class="modal-header bg-primary text-white p-4" style="border-top-left-radius: 12px; border-top-right-radius: 12px;">
                    <h5 class="modal-title font-weight-bold" id="createAdminModalLabel">
                        <i class="fas fa-user-plus mr-2"></i> Tambah Akun Admin Baru
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('admin.manajemen-pengguna.admin.store') }}" method="POST">
                    @csrf
                    <div class="modal-body p-4">
                        <div class="row">
                            <div class="col-md-6 form-group mb-3">
                                <label for="name" class="font-weight-bold text-secondary text-sm">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="Masukkan nama lengkap aparatur..." required style="border-radius: 8px;">
                                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label for="jabatan" class="font-weight-bold text-secondary text-sm">Jabatan <span class="text-danger">*</span></label>
                                <select name="jabatan" id="jabatan" class="form-control @error('jabatan') is-invalid @enderror" required style="border-radius: 8px;">
                                    <option value="" disabled selected>-- Pilih Jabatan --</option>
                                    <option value="Kepala Desa" {{ old('jabatan') == 'Kepala Desa' ? 'selected' : '' }}>Kepala Desa</option>
                                    <option value="Sekretaris Desa" {{ old('jabatan') == 'Sekretaris Desa' ? 'selected' : '' }}>Sekretaris Desa</option>
                                    <option value="Kaur Pemerintahan" {{ old('jabatan') == 'Kaur Pemerintahan' ? 'selected' : '' }}>Kaur Pemerintahan</option>
                                    <option value="Kaur Keuangan" {{ old('jabatan') == 'Kaur Keuangan' ? 'selected' : '' }}>Kaur Keuangan</option>
                                    <option value="Kaur Perencanaan" {{ old('jabatan') == 'Kaur Perencanaan' ? 'selected' : '' }}>Kaur Perencanaan</option>
                                    <option value="Kasi Pemerintahan" {{ old('jabatan') == 'Kasi Pemerintahan' ? 'selected' : '' }}>Kasi Pemerintahan</option>
                                    <option value="Kasi Pelayanan" {{ old('jabatan') == 'Kasi Pelayanan' ? 'selected' : '' }}>Kasi Pelayanan</option>
                                    <option value="Kasi Kesejahteraan" {{ old('jabatan') == 'Kasi Kesejahteraan' ? 'selected' : '' }}>Kasi Kesejahteraan</option>
                                    <option value="Operator Desa" {{ old('jabatan') == 'Operator Desa' ? 'selected' : '' }}>Operator Desa</option>
                                    <option value="Staff Desa" {{ old('jabatan') == 'Staff Desa' ? 'selected' : '' }}>Staff Desa</option>
                                    <option value="Lainnya" {{ old('jabatan') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                                </select>
                                @error('jabatan') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label for="username" class="font-weight-bold text-secondary text-sm">Username <span class="text-danger">*</span></label>
                                <input type="text" name="username" id="username" class="form-control @error('username') is-invalid @enderror" value="{{ old('username') }}" placeholder="Contoh: admin_sekdes" required style="border-radius: 8px;">
                                @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label for="nomor_whatsapp" class="font-weight-bold text-secondary text-sm">Nomor WhatsApp <span class="text-danger">*</span></label>
                                <input type="text" name="nomor_whatsapp" id="nomor_whatsapp" class="form-control @error('nomor_whatsapp') is-invalid @enderror" value="{{ old('nomor_whatsapp') }}" placeholder="Contoh: 082212345678" required style="border-radius: 8px;">
                                @error('nomor_whatsapp') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label for="password" class="font-weight-bold text-secondary text-sm">Password <span class="text-danger">*</span></label>
                                <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" placeholder="Minimal 6 karakter" required style="border-radius: 8px;">
                                @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label for="password_confirmation" class="font-weight-bold text-secondary text-sm">Konfirmasi Password <span class="text-danger">*</span></label>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="Ulangi password" required style="border-radius: 8px;">
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label for="status" class="font-weight-bold text-secondary text-sm">Status <span class="text-danger">*</span></label>
                                <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required style="border-radius: 8px;">
                                    <option value="aktif" {{ old('status', 'aktif') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="nonaktif" {{ old('status') == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('status') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6 form-group mb-3">
                                <label class="font-weight-bold text-secondary text-sm">Role System</label>
                                <input type="text" class="form-control bg-light" value="Admin" readonly style="border-radius: 8px;">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light p-3" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
                        <button type="button" class="btn btn-light border" data-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary font-weight-bold">
                            <i class="fas fa-save mr-1"></i> Simpan Admin
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- MODAL EDIT & DETAIL FOR EACH ADMIN -->
    @foreach ($admins as $admin)
        @php
            $waModal = preg_replace('/[^0-9]/', '', $admin->nomor_whatsapp ?? '');
            $formattedWaModal = (strlen($waModal) >= 10) ? substr($waModal, 0, 4) . ' ' . substr($waModal, 4, 4) . ' ' . substr($waModal, 8) : ($admin->nomor_whatsapp ?? '-');
        @endphp
        <!-- MODAL DETAIL ADMIN -->
        <div class="modal fade" id="detailAdminModal{{ $admin->id }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content border-0 shadow" style="border-radius: 12px;">
                    <div class="modal-header bg-info text-white p-4" style="border-top-left-radius: 12px; border-top-right-radius: 12px;">
                        <h5 class="modal-title font-weight-bold">
                            <i class="fas fa-id-card mr-2"></i> Detail Akun Admin
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-4">
                        <table class="table table-borderless table-striped">
                            <tr>
                                <th width="140" class="text-secondary">Nama Lengkap</th>
                                <td class="font-weight-bold text-dark">: {{ $admin->name }}</td>
                            </tr>
                            <tr>
                                <th class="text-secondary">Jabatan</th>
                                <td>: <span class="badge badge-light border">{{ !empty($admin->jabatan) ? $admin->jabatan : '-' }}</span></td>
                            </tr>
                            <tr>
                                <th class="text-secondary">Username</th>
                                <td>: <span class="text-dark">{{ $admin->username ?? '-' }}</span></td>
                            </tr>
                            <tr>
                                <th class="text-secondary">Nomor WhatsApp</th>
                                <td>: {{ $formattedWaModal }}</td>
                            </tr>
                            <tr>
                                <th class="text-secondary">Role System</th>
                                <td>: <span class="badge badge-primary px-2">Admin</span></td>
                            </tr>
                            <tr>
                                <th class="text-secondary">Status Akun</th>
                                <td>: 
                                    @if ($admin->status === 'aktif')
                                        <span class="badge-pill-soft status-disetujui text-xs px-2 py-1">Aktif</span>
                                    @else
                                        <span class="badge-pill-soft status-ditolak text-xs px-2 py-1">Nonaktif</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="text-secondary">Terdaftar Pada</th>
                                <td>: {{ $admin->created_at ? $admin->created_at->translatedFormat('d F Y - H:i') : '-' }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer bg-light p-3" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- MODAL EDIT ADMIN -->
        <div class="modal fade" id="editAdminModal{{ $admin->id }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content border-0 shadow" style="border-radius: 12px;">
                    <div class="modal-header bg-primary text-white p-4" style="border-top-left-radius: 12px; border-top-right-radius: 12px;">
                        <h5 class="modal-title font-weight-bold">
                            <i class="fas fa-edit mr-2"></i> Edit Akun Admin: {{ $admin->name }}
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{ route('admin.manajemen-pengguna.admin.update', $admin->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-body p-4">
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label for="name_{{ $admin->id }}" class="font-weight-bold text-secondary text-sm">Nama Lengkap <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name_{{ $admin->id }}" class="form-control" value="{{ old('name', $admin->name) }}" required style="border-radius: 8px;">
                                </div>

                                <div class="col-md-6 form-group mb-3">
                                    <label for="jabatan_{{ $admin->id }}" class="font-weight-bold text-secondary text-sm">Jabatan <span class="text-danger">*</span></label>
                                    <select name="jabatan" id="jabatan_{{ $admin->id }}" class="form-control" required style="border-radius: 8px;">
                                        @php
                                            $jabatans = ['Kepala Desa', 'Sekretaris Desa', 'Kaur Pemerintahan', 'Kaur Keuangan', 'Kaur Perencanaan', 'Kasi Pemerintahan', 'Kasi Pelayanan', 'Kasi Kesejahteraan', 'Operator Desa', 'Staff Desa', 'Lainnya'];
                                        @endphp
                                        @foreach ($jabatans as $j)
                                            <option value="{{ $j }}" {{ old('jabatan', $admin->jabatan) == $j ? 'selected' : '' }}>{{ $j }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 form-group mb-3">
                                    <label for="username_{{ $admin->id }}" class="font-weight-bold text-secondary text-sm">Username <span class="text-danger">*</span></label>
                                    <input type="text" name="username" id="username_{{ $admin->id }}" class="form-control" value="{{ old('username', $admin->username) }}" required style="border-radius: 8px;">
                                </div>

                                <div class="col-md-6 form-group mb-3">
                                    <label for="nomor_whatsapp_{{ $admin->id }}" class="font-weight-bold text-secondary text-sm">Nomor WhatsApp <span class="text-danger">*</span></label>
                                    <input type="text" name="nomor_whatsapp" id="nomor_whatsapp_{{ $admin->id }}" class="form-control" value="{{ old('nomor_whatsapp', $admin->nomor_whatsapp) }}" required style="border-radius: 8px;">
                                </div>

                                <div class="col-md-6 form-group mb-3">
                                    <label for="status_{{ $admin->id }}" class="font-weight-bold text-secondary text-sm">Status <span class="text-danger">*</span></label>
                                    <select name="status" id="status_{{ $admin->id }}" class="form-control" required style="border-radius: 8px;">
                                        <option value="aktif" {{ old('status', $admin->status) == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                        <option value="nonaktif" {{ old('status', $admin->status) == 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                    </select>
                                </div>

                                <div class="col-md-6 form-group mb-3">
                                    <label class="font-weight-bold text-secondary text-sm">Role System</label>
                                    <input type="text" class="form-control bg-light" value="Admin" readonly style="border-radius: 8px;">
                                </div>

                                <div class="col-md-6 form-group mb-3">
                                    <label for="password_{{ $admin->id }}" class="font-weight-bold text-secondary text-sm">Password Baru <small class="text-muted">(Opsional)</small></label>
                                    <input type="password" name="password" id="password_{{ $admin->id }}" class="form-control" placeholder="Kosongkan jika tidak diubah" style="border-radius: 8px;">
                                </div>

                                <div class="col-md-6 form-group mb-3">
                                    <label for="password_confirmation_{{ $admin->id }}" class="font-weight-bold text-secondary text-sm">Konfirmasi Password Baru</label>
                                    <input type="password" name="password_confirmation" id="password_confirmation_{{ $admin->id }}" class="form-control" placeholder="Ulangi password baru" style="border-radius: 8px;">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer bg-light p-3" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
                            <button type="button" class="btn btn-light border" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary font-weight-bold">
                                <i class="fas fa-save mr-1"></i> Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

@endsection

@push('js')
<script>
$(document).ready(function() {

    // Initialize Tooltips
    $('[title]').tooltip();

    // Toggle Admin status SweetAlert
    $(document).on('submit', '.toggleAdminForm', function(e) {
        e.preventDefault();
        let form = this;
        let status = $(form).data('status');
        let name = $(form).data('name');
        let activeCount = parseInt($(form).data('active-count')) || 0;

        if (status === 'aktif' && activeCount <= 1) {
            Swal.fire({
                title: 'Tidak Dapat Menonaktifkan!',
                text: 'Minimal harus terdapat satu akun Admin aktif.',
                icon: 'error',
                confirmButtonColor: '#ef4444'
            });
            return false;
        }

        let title = status === 'aktif' ? 'Nonaktifkan Akun Admin?' : 'Aktifkan Akun Admin?';
        let text = status === 'aktif' 
            ? 'Apakah Anda yakin ingin menonaktifkan akun admin ' + name + '?' 
            : 'Apakah Anda yakin ingin mengaktifkan kembali akun admin ' + name + '?';
        let confirmBtnColor = status === 'aktif' ? '#ef4444' : '#0F766E';
        let confirmBtnText = status === 'aktif' ? 'Ya, Nonaktifkan' : 'Ya, Aktifkan';

        Swal.fire({
            title: title,
            text: text,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: confirmBtnColor,
            cancelButtonColor: '#64748b',
            confirmButtonText: confirmBtnText,
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // SweetAlert2 on Warga Approve
    $(document).on('submit', '.approveForm', function(e) {
        e.preventDefault();
        let form = this;
        Swal.fire({
            title: 'Setujui Akun?',
            text: 'Apakah Anda yakin ingin mengaktifkan akun warga ini?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#0F766E',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Setujui',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // SweetAlert2 on Warga Reject
    $(document).on('submit', '.rejectForm', function(e) {
        e.preventDefault();
        let form = this;
        Swal.fire({
            title: 'Tolak Permohonan?',
            text: 'Apakah Anda yakin ingin menolak permohonan akun ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Tolak',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // SweetAlert2 on Warga Deactivate
    $(document).on('submit', '.deactivateForm', function(e) {
        e.preventDefault();
        let form = this;
        Swal.fire({
            title: 'Nonaktifkan Akun?',
            text: 'Apakah Anda yakin ingin menonaktifkan akun warga ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Nonaktifkan',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // SweetAlert2 on Warga Activate
    $(document).on('submit', '.activateForm', function(e) {
        e.preventDefault();
        let form = this;
        Swal.fire({
            title: 'Aktifkan Akun?',
            text: 'Apakah Anda yakin ingin mengaktifkan kembali akun warga ini?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#0F766E',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Aktifkan',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
});
</script>

@if (session('success'))
    <script>
        $(document).ready(function() {
            Swal.fire({
                title: 'Berhasil!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonColor: '#0F766E'
            });
        });
    </script>
@endif

@if (session('error'))
    <script>
        $(document).ready(function() {
            Swal.fire({
                title: 'Gagal!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonColor: '#ef4444'
            });
        });
    </script>
@endif
@endpush