@extends('layouts.master')

@section('styles')
    @include('layouts.components.datatable-assets')
    <style>
        .stat-card-custom {
            border-radius: 12px;
            transition: all 0.25s ease-in-out;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .stat-card-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .password-notice-box {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.04) 100%);
            border: 1px dashed rgba(16, 185, 129, 0.4);
            border-radius: 10px;
            padding: 14px 16px;
        }
    </style>
@endsection

@section('content')

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <div class="d-flex align-items-center gap-2">
                <span class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                    <i class="ri-admin-line fs-20"></i>
                </span>
                <div>
                    <h1 class="page-title fw-bold fs-18 mb-0">Manajemen Pengelola Admin Panel</h1>
                    <p class="text-muted mb-0 fs-12">Kelola akun staf operasional & operator admin panel sesuai peran (role) yang telah ditentukan.</p>
                </div>
            </div>
        </div>
        <div class="btn-list mt-md-0 mt-2 d-flex align-items-center gap-2 flex-wrap">
            @if($isOwner)
                <span class="badge bg-warning-transparent text-warning border border-warning px-3 py-2 fs-12 fw-bold" title="Owner Access">
                    <i class="ri-vip-crown-fill me-1"></i>Owner Privileges
                </span>
            @endif
            <button type="button" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1 shadow-sm" data-bs-toggle="modal" data-bs-target="#modal-create-pengelola">
                <i class="ri-user-add-line fs-14"></i> Tambah Pengelola Baru
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-refresh-table" title="Muat Ulang Data">
                <i class="ri-refresh-line"></i>
            </button>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4">

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">TOTAL PENGELOLA</span>
                            <h3 class="mb-0 fw-bold text-dark" id="stat-total">{{ $stats['total_admins'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Akun admin terdaftar</span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                            <i class="ri-team-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">PENGELOLA AKTIF</span>
                            <h3 class="mb-0 fw-bold text-success" id="stat-active">{{ $stats['active_admins'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Dapat login ke portal</span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent text-success rounded-circle">
                            <i class="ri-checkbox-circle-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">NONAKTIF / SUSPEND</span>
                            <h3 class="mb-0 fw-bold text-danger" id="stat-inactive">{{ $stats['inactive_admins'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Akses ditangguhkan</span>
                        </div>
                        <div class="avatar avatar-md bg-danger-transparent text-danger rounded-circle">
                            <i class="ri-user-unfollow-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-semibold text-uppercase mb-1">PERAN TERSEDIA</span>
                            <h3 class="mb-0 fw-bold text-purple">{{ $stats['total_roles'] }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Tingkat hak akses</span>
                        </div>
                        <div class="avatar avatar-md bg-purple-transparent text-purple rounded-circle">
                            <i class="ri-shield-keyhole-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Card Pengelola -->
    <div class="card custom-card mb-4 shadow-sm">
        <div class="card-body p-3 p-md-4">
            <div class="row g-3 align-items-end">
                <div class="col-lg-4 col-md-6 col-12">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Pencarian Pengelola</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted border-end-0"><i class="ri-search-line"></i></span>
                        <input type="search" id="pengelola-search-input" class="form-control border-start-0" placeholder="Cari nama, username, email, telepon...">
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-sm-6">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Peran (Role)</label>
                    <select class="form-select form-select-sm" id="filter-role">
                        <option value="">Semua Peran (Role)</option>
                        @foreach($roles as $r)
                            <option value="{{ $r->id }}">{{ $r->name }} (Lvl {{ $r->level }})</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-2 col-md-6 col-sm-6">
                    <label class="form-label fs-12 mb-1-5 fw-semibold text-muted">Status Akun</label>
                    <select class="form-select form-select-sm" id="filter-status">
                        <option value="">Semua Status</option>
                        <option value="active">Aktif</option>
                        <option value="inactive">Nonaktif</option>
                    </select>
                </div>

                <div class="col-lg-3 col-md-6 col-12 ms-auto d-flex align-items-center justify-content-end gap-2 mt-auto">
                    <button type="button" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1 shadow-sm px-3" id="btn-apply-filters">
                        <i class="ri-filter-3-line fs-14"></i> Terapkan Filter
                    </button>
                    <button type="button" class="btn btn-sm btn-light border d-inline-flex align-items-center gap-1 px-3" id="btn-reset-filters" title="Reset Semua Filter">
                        <i class="ri-refresh-line fs-14"></i> Reset
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Card Pengelola -->
    <div class="card custom-card">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2 py-3 border-bottom">
            <div class="card-title fw-bold fs-14 mb-0 d-flex align-items-center gap-2">
                <i class="ri-user-settings-line text-primary fs-16"></i>
                Daftar Akun Pengelola Portal
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-1" id="btn-refresh-table" title="Muat Ulang Data">
                <i class="ri-refresh-line"></i> Refresh Data
            </button>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive p-3" style="min-height: 320px;">
                <table id="table-pengelola" class="table table-hover text-nowrap w-100 align-middle">
                    <thead class="table-success">
                        <tr>
                            <th class="text-center" style="width: 50px;">#</th>
                            <th>Nama & Username</th>
                            <th>Email</th>
                            <th>No. Telepon</th>
                            <th>Peran (Role)</th>
                            <th class="text-center">Status</th>
                            <th>Sesi Terakhir</th>
                            <th>Terdaftar</th>
                            <th class="text-center" style="width: 70px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-create-pengelola" tabindex="-1" aria-labelledby="modalCreateLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-primary text-white py-3">
                    <h5 class="modal-title fs-15 fw-bold" id="modalCreateLabel">
                        <i class="ri-user-add-line me-1"></i> Tambah Akun Pengelola Baru
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form-create-pengelola" autocomplete="off">
                    @csrf
                    <div class="modal-body p-4">

                        <div class="password-notice-box mb-4">
                            <div class="d-flex align-items-start gap-3">
                                <div class="avatar avatar-sm bg-success text-white rounded-circle flex-shrink-0 mt-1">
                                    <i class="ri-shield-keyhole-line fs-14"></i>
                                </div>
                                <div class="fs-12 text-dark">
                                    <strong class="d-block text-success fw-bold fs-13 mb-1">
                                        🔐 Kata Sandi Acak Tingkat Tinggi Otomatis
                                    </strong>
                                    Sistem secara otomatis akan men-generate kata sandi acak dengan tingkat kompleksitas tinggi (16 karakter kombinasi huruf besar, huruf kecil, angka, dan simbol khusus). Kata sandi akan <strong>dikirimkan langsung ke email pengelola</strong> di bawah untuk keamanan maksimal.
                                </div>
                            </div>
                        </div>

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Nama Lengkap <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted"><i class="ri-user-line"></i></span>
                                    <input type="text" class="form-control" name="name" id="create-name" placeholder="cth: Ahmad Pratama" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Nama Pengguna (Username) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted">@</span>
                                    <input type="text" class="form-control font-monospace" name="username" id="create-username" placeholder="ahmad_pratama" required>
                                </div>
                                <span class="text-muted fs-11 mt-1 d-block">Hanya huruf, angka, garis bawah, atau strip (tanpa spasi).</span>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Alamat Email <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted"><i class="ri-mail-line"></i></span>
                                    <input type="email" class="form-control" name="email" id="create-email" placeholder="ahmad@dbic.com" required>
                                </div>
                                <span class="text-info fs-11 mt-1 d-block"><i class="ri-information-line me-1"></i>Sandi acak akan dikirimkan ke email ini.</span>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Peran / Hak Akses (Role) <span class="text-danger">*</span></label>
                                <select class="form-select" name="role_id" id="create-role-id" required>
                                    <option value="">-- Pilih Peran Pengelola --</option>
                                    @foreach($roles as $r)
                                        <option value="{{ $r->id }}">
                                            {{ $r->name }} (Level {{ $r->level }}) - {{ Str::limit($r->description, 45) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Nomor Telepon (WhatsApp)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted">+62</span>
                                    <input type="text" class="form-control" name="phone" id="create-phone" placeholder="81234567890">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light py-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1" id="btn-submit-create">
                            <span class="spinner-border spinner-border-sm d-none" id="spinner-create"></span>
                            <i class="ri-send-plane-line fs-14"></i> Buat Akun & Kirim Sandi ke Email
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-edit-pengelola" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-warning text-dark py-3">
                    <h5 class="modal-title fs-15 fw-bold" id="modalEditLabel">
                        <i class="ri-edit-line me-1"></i> Edit Data Pengelola
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form-edit-pengelola" autocomplete="off">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" id="edit-id">
                    <div class="modal-body p-4">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" id="edit-name" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Nama Pengguna (Username) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light text-muted">@</span>
                                    <input type="text" class="form-control font-monospace" name="username" id="edit-username" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Alamat Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email" id="edit-email" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Peran / Hak Akses (Role) <span class="text-danger">*</span></label>
                                <select class="form-select" name="role_id" id="edit-role-id" required>
                                    @foreach($roles as $r)
                                        <option value="{{ $r->id }}">{{ $r->name }} (Level {{ $r->level }})</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Nomor Telepon</label>
                                <input type="text" class="form-control" name="phone" id="edit-phone">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fs-12 fw-semibold text-dark">Status Akun <span class="text-danger">*</span></label>
                                <select class="form-select" name="status" id="edit-status" required>
                                    <option value="active">Aktif (Dapat Login)</option>
                                    <option value="inactive">Nonaktif (Akses Ditangguhkan)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light py-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-warning d-inline-flex align-items-center gap-1" id="btn-submit-edit">
                            <span class="spinner-border spinner-border-sm d-none" id="spinner-edit"></span>
                            <i class="ri-save-line fs-14"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');

            const table = $('#table-pengelola').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                responsive: true,
                order: [[0, 'desc']],
                stateSave: true,
                stateDuration: 7200,
                stateSaveParams: function(settings, data) {
                    data.search_query = $('#pengelola-search-input').val();
                    data.filter_role = $('#filter-role').val();
                    data.filter_status = $('#filter-status').val();
                },
                stateLoadParams: function(settings, data) {
                    if (data.search_query !== undefined) $('#pengelola-search-input').val(data.search_query);
                    if (data.filter_role !== undefined) $('#filter-role').val(data.filter_role);
                    if (data.filter_status !== undefined) $('#filter-status').val(data.filter_status);
                },
                drawCallback: function(settings) {
                    const api = this.api();
                    const info = api.page.info();
                    if (info && info.pages > 0 && info.page >= info.pages) {
                        api.page('previous').draw('page');
                    }
                },
                ajax: {
                    url: '{{ route("user-management.pengelola.api.list") }}',
                    data: function(d) {
                        d.search_query = $('#pengelola-search-input').val();
                        d.role_id      = $('#filter-role').val();
                        d.status       = $('#filter-status').val();
                    }
                },
                columns: [
                    { data: 'row_num', name: 'id', className: 'text-center' },
                    { data: 'user_html', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'phone', name: 'phone' },
                    { data: 'role_html', name: 'role_id' },
                    { data: 'status_html', name: 'status', className: 'text-center' },
                    { data: 'last_login_html', name: 'last_login_at' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'action_html', orderable: false, searchable: false, className: 'text-center' }
                ],
                dom: "<'row'<'col-12'tr>>" +
                     "<'row align-items-center mt-3 pt-3 border-top g-2'<'col-sm-12 col-md-6 d-flex align-items-center gap-2 justify-content-sm-start justify-content-center'l i><'col-sm-12 col-md-6 d-flex justify-content-sm-end justify-content-center'p>>",
                language: {
                    processing: '<div class="spinner-border text-primary spinner-border-sm" role="status"><span class="visually-hidden">Memuat...</span></div> <span class="ms-1 text-muted fs-12">Memuat data...</span>',
                    lengthMenu: 'Tampilkan _MENU_ data',
                    emptyTable: 'Tidak ada data pengelola ditemukan',
                    zeroRecords: 'Tidak ada data pengelola yang cocok dengan pencarian',
                    info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
                    infoEmpty: 'Menampilkan 0 sampai 0 dari 0 data',
                    infoFiltered: '(disaring dari _MAX_ total data)',
                    paginate: {
                        first: '<i class="ri-skip-back-line"></i>',
                        last: '<i class="ri-skip-forward-line"></i>',
                        next: '<i class="ri-arrow-right-s-line"></i>',
                        previous: '<i class="ri-arrow-left-s-line"></i>'
                    }
                }
            });

            let searchTimeout;
            $('#pengelola-search-input').on('keyup', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    table.page(0).draw();
                }, 400);
            });

            $('#btn-apply-filters').on('click', function() {
                table.page(0).draw();
            });

            $('#filter-role, #filter-status').on('change', function() {
                table.page(0).draw();
            });

            $('#btn-reset-filters').on('click', function() {
                $('#pengelola-search-input').val('');
                $('#filter-role').val('');
                $('#filter-status').val('');
                table.state.clear();
                table.page(0).draw();
            });

            $('#btn-refresh-table').on('click', function() {
                table.draw();
            });

            $('#form-create-pengelola').on('submit', function(e) {
                e.preventDefault();
                const $btn = $('#btn-submit-create');
                const $spinner = $('#spinner-create');

                $btn.prop('disabled', true);
                $spinner.removeClass('d-none');

                $.ajax({
                    url: '{{ route("user-management.pengelola.store") }}',
                    type: 'POST',
                    data: $(this).serialize(),
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    success: function(res) {
                        $('#modal-create-pengelola').modal('hide');
                        $('#form-create-pengelola')[0].reset();
                        table.draw();

                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Akun Pengelola Dibuat!',
                                html: res.message,
                                confirmButtonColor: '#0F3625',
                            });
                        } else {
                            alert(res.message);
                        }
                    },
                    error: function(err) {
                        const res = err.responseJSON;
                        let msg = res ? res.message : 'Terjadi kesalahan sistem.';
                        if (res && res.errors) {
                            msg = Object.values(res.errors).flat().join('<br>');
                        }
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Membuat Pengelola',
                                html: msg,
                                confirmButtonColor: '#ef4444',
                            });
                        } else {
                            alert('Gagal: ' + msg);
                        }
                    },
                    complete: function() {
                        $btn.prop('disabled', false);
                        $spinner.addClass('d-none');
                    }
                });
            });

            $(document).on('click', '.btn-edit-admin', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                const username = $(this).data('username');
                const email = $(this).data('email');
                const phone = $(this).data('phone');
                const roleId = $(this).data('role-id');
                const status = $(this).data('status');

                $('#edit-id').val(id);
                $('#edit-name').val(name);
                $('#edit-username').val(username);
                $('#edit-email').val(email);
                $('#edit-phone').val(phone);
                $('#edit-role-id').val(roleId);
                $('#edit-status').val(status);

                $('#modal-edit-pengelola').modal('show');
            });

            $('#form-edit-pengelola').on('submit', function(e) {
                e.preventDefault();
                const id = $('#edit-id').val();
                const $btn = $('#btn-submit-edit');
                const $spinner = $('#spinner-edit');

                $btn.prop('disabled', true);
                $spinner.removeClass('d-none');

                $.ajax({
                    url: `{{ url('/user-management/pengelola') }}/${id}`,
                    type: 'PUT',
                    data: $(this).serialize(),
                    headers: { 'X-CSRF-TOKEN': csrfToken },
                    success: function(res) {
                        $('#modal-edit-pengelola').modal('hide');
                        table.draw();

                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil!',
                                text: res.message,
                                confirmButtonColor: '#0F3625',
                            });
                        } else {
                            alert(res.message);
                        }
                    },
                    error: function(err) {
                        const res = err.responseJSON;
                        let msg = res ? res.message : 'Gagal memperbarui data pengelola.';
                        if (res && res.errors) {
                            msg = Object.values(res.errors).flat().join('\n');
                        }
                        alert(msg);
                    },
                    complete: function() {
                        $btn.prop('disabled', false);
                        $spinner.addClass('d-none');
                    }
                });
            });

            $(document).on('click', '.btn-resend-pass', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                const email = $(this).data('email');

                const confirmAction = () => {
                    $.ajax({
                        url: `{{ url('/user-management/pengelola') }}/${id}/resend-credentials`,
                        type: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrfToken },
                        success: function(res) {
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sandi Baru Terkirim!',
                                    text: res.message,
                                    confirmButtonColor: '#0F3625',
                                });
                            } else {
                                alert(res.message);
                            }
                        },
                        error: function(err) {
                            const msg = err.responseJSON ? err.responseJSON.message : 'Gagal mereset sandi.';
                            alert('Error: ' + msg);
                        }
                    });
                };

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: 'Kirim Sandi Baru ke Email?',
                        html: `Sistem akan menghasilkan kata sandi acak tingkat tinggi baru untuk <strong>${name}</strong> dan mengirimkannya ke <strong>${email}</strong>.<br><br><span class="text-muted fs-12">Sandi lama pengelola ini tidak akan berlaku lagi.</span>`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#0F3625',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: '<i class="ri-mail-send-line me-1"></i> Ya, Generate & Kirim Sandi',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            confirmAction();
                        }
                    });
                } else {
                    if (confirm(`Apakah Anda yakin ingin menghasilkan sandi acak baru untuk ${name} dan mengirimkannya ke ${email}?`)) {
                        confirmAction();
                    }
                }
            });

            $(document).on('click', '.btn-toggle-status', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                const status = $(this).data('status');
                const actionText = status === 'active' ? 'mengaktifkan' : 'menonaktifkan';

                if (confirm(`Apakah Anda yakin ingin ${actionText} akun pengelola '${name}'?`)) {
                    $.ajax({
                        url: `{{ url('/user-management/pengelola') }}/${id}/toggle-status`,
                        type: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrfToken },
                        success: function(res) {
                            table.draw();
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Status Diperbarui',
                                    text: res.message,
                                    confirmButtonColor: '#0F3625',
                                    timer: 1500
                                });
                            }
                        },
                        error: function(err) {
                            const msg = err.responseJSON ? err.responseJSON.message : 'Gagal mengubah status.';
                            alert(msg);
                        }
                    });
                }
            });

            $(document).on('click', '.btn-delete-admin', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');

                const deleteAction = () => {
                    $.ajax({
                        url: `{{ url('/user-management/pengelola') }}/${id}`,
                        type: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': csrfToken },
                        success: function(res) {
                            table.draw();
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Akun Dihapus',
                                    text: res.message,
                                    confirmButtonColor: '#0F3625',
                                });
                            } else {
                                alert(res.message);
                            }
                        },
                        error: function(err) {
                            const msg = err.responseJSON ? err.responseJSON.message : 'Gagal menghapus akun pengelola.';
                            alert('Error: ' + msg);
                        }
                    });
                };

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: 'Hapus Akun Pengelola?',
                        html: `Apakah Anda yakin ingin menghapus akun <strong>${name}</strong>? Tindakan ini bersifat permanen.`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#ef4444',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, Hapus Permanen',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            deleteAction();
                        }
                    });
                } else {
                    if (confirm(`Apakah Anda yakin ingin menghapus akun pengelola '${name}'?`)) {
                        deleteAction();
                    }
                }
            });
        });
    </script>
@endsection