@extends('adminlte::page')

@section('title', 'Access Center')

@section('content_header')
<div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center">
    <div>
        <h1 class="mb-1">Access Center</h1>
        <p class="text-muted mb-0">Kelola pengguna, roles, dan permissions dalam satu tempat.</p>
    </div>
    <button class="btn btn-primary btn-gradient mt-3 mt-lg-0" data-toggle="modal" data-target="#userModal" onclick="openCreateUserModal()">
        <i class="fas fa-user-plus mr-2"></i> Tambah Pengguna Baru
    </button>
</div>
@endsection

@section('content')
<div class="card card-outline card-primary shadow-sm access-center-card">
    <div class="card-header border-0 p-0 bg-transparent">
        <ul class="nav nav-tabs nav-tabs-modern" id="accessCenterTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab">
                    <i class="fas fa-users mr-2"></i> Pengguna
                    <span class="badge badge-pill badge-primary ml-2">{{ $users->total() }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="roles-tab" data-toggle="tab" href="#roles" role="tab">
                    <i class="fas fa-user-tag mr-2"></i> Roles
                    <span class="badge badge-pill badge-info ml-2">{{ $roles->count() }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="permissions-tab" data-toggle="tab" href="#permissions" role="tab">
                    <i class="fas fa-shield-alt mr-2"></i> Permissions
                    <span class="badge badge-pill badge-warning ml-2">{{ $permissions->count() }}</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="card-body p-0">
        <div class="tab-content">
            <div class="tab-pane fade show active p-4" id="users" role="tabpanel">
                @php
                    $totalUsersStat = $stats['total'] ?? $users->total();
                    $activeUsersStat = $stats['active'] ?? 0;
                    $inactiveUsersStat = $stats['inactive'] ?? 0;
                    $newUsersStat = $stats['new'] ?? 0;
                @endphp

                <div class="access-hero card border-0 shadow-sm mb-4">
                    <div class="card-body p-4 p-lg-5">
                        <div class="row align-items-center">
                            <div class="col-lg-8">
                                <p class="hero-eyebrow text-uppercase mb-2">Access Center</p>
                                <h2 class="hero-title mb-3">Kelola tim Anda dengan pengalaman modern</h2>
                                <p class="text-muted mb-4">
                                    Pantau status aktif, role, serta hak akses pengguna dalam satu layar yang rapi dan mudah dinavigasi.
                                </p>
                                <div class="hero-meta d-flex flex-wrap">
                                    <span><i class="fas fa-users"></i> {{ $totalUsersStat }} Pengguna terdaftar</span>
                                    <span><i class="fas fa-id-card"></i> {{ $roles->count() }} Roles tersedia</span>
                                </div>
                            </div>
                            <div class="col-lg-4 text-lg-right mt-4 mt-lg-0">
                                <button class="btn btn-primary btn-gradient btn-lg shadow" data-toggle="modal" data-target="#userModal" onclick="openCreateUserModal()">
                                    <i class="fas fa-user-plus mr-2"></i> Tambah Pengguna Baru
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row user-stat-grid mb-4">
                    <div class="col-sm-6 col-lg-3 mb-3">
                        <div class="stat-card shadow-sm">
                            <div class="stat-icon bg-primary-subtle text-primary"><i class="fas fa-layer-group"></i></div>
                            <div>
                                <p class="stat-label">Total Pengguna</p>
                                <h4>{{ number_format($totalUsersStat) }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-3">
                        <div class="stat-card shadow-sm">
                            <div class="stat-icon bg-success-subtle text-success"><i class="fas fa-user-check"></i></div>
                            <div>
                                <p class="stat-label">Aktif</p>
                                <h4>{{ number_format($activeUsersStat) }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-3">
                        <div class="stat-card shadow-sm">
                            <div class="stat-icon bg-warning-subtle text-warning"><i class="fas fa-user-slash"></i></div>
                            <div>
                                <p class="stat-label">Tidak Aktif</p>
                                <h4>{{ number_format($inactiveUsersStat) }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 mb-3">
                        <div class="stat-card shadow-sm">
                            <div class="stat-icon bg-info-subtle text-info"><i class="fas fa-sparkles"></i></div>
                            <div>
                                <p class="stat-label">Pengguna Baru</p>
                                <h4>{{ number_format($newUsersStat) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <form method="get">
                            <input type="hidden" name="status" id="status-filter-input" value="{{ $statusFilter ?? '' }}">
                            <div class="row g-3 align-items-end">
                                <div class="col-lg-5">
                                    <label class="text-uppercase text-muted small mb-1">Pencarian cepat</label>
                                    <div class="input-icon-group">
                                        <span><i class="fas fa-search"></i></span>
                                        <input type="text" name="q" class="form-control form-control-lg" value="{{ $q ?? '' }}" placeholder="Cari nama atau email">
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <label class="text-uppercase text-muted small mb-1">Filter status</label>
                                    <div class="filter-chips">
                                        <button type="button" class="chip active" data-filter-status="">Semua</button>
                                        <button type="button" class="chip" data-filter-status="active">
                                            <i class="fas fa-check-circle mr-1"></i> Aktif
                                        </button>
                                        <button type="button" class="chip" data-filter-status="inactive">
                                            <i class="fas fa-times-circle mr-1"></i> Nonaktif
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-3 text-lg-right">
                                    <button type="submit" class="btn btn-outline-primary mr-2">
                                        <i class="fas fa-filter mr-1"></i> Terapkan
                                    </button>
                                    <a href="{{ route('admin.access-center') }}" class="btn btn-light border">Reset</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="user-grid">
                    @forelse($users as $index => $u)
                        <div class="user-card shadow-sm" id="user-row-{{ $u->id }}">
                            <div class="user-card-header d-flex justify-content-between align-items-start mb-3">
                                <div class="d-flex align-items-center">
                                    <div class="user-avatar mr-3">
                                        <div class="avatar-circle bg-gradient-{{ ['primary', 'success', 'info', 'warning'][$u->id % 4] }}">
                                            {{ strtoupper(substr($u->name, 0, 1)) }}
                                        </div>
                                    </div>
                                    <div>
                                        <div class="d-flex align-items-center">
                                            <strong class="user-name mr-2">{{ $u->name }}</strong>
                                            <span class="user-index">#{{ $users->firstItem() + $index }}</span>
                                        </div>
                                        <div class="user-meta text-muted">
                                            <i class="fas fa-envelope mr-1"></i> {{ $u->email }}
                                        </div>
                                        @if($u->phone)
                                            <div class="user-meta text-muted">
                                                <i class="fas fa-phone mr-1"></i> {{ $u->phone }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div>
                                    <span class="badge badge-pill px-3 py-2 badge-{{ ($u->is_active ?? true) ? 'success' : 'secondary' }}" id="status-badge-{{ $u->id }}">
                                        <i class="fas fa-{{ ($u->is_active ?? true) ? 'check-circle' : 'times-circle' }} mr-1"></i>
                                        {{ ($u->is_active ?? true) ? 'Aktif' : 'Nonaktif' }}
                                    </span>
                                </div>
                            </div>
                            <div class="user-card-body">
                                <div class="user-role-section mb-3">
                                    <label class="text-uppercase text-muted small">Roles</label>
                                    <select class="form-control js-user-roles" multiple data-user-id="{{ $u->id }}">
                                        @foreach($roles as $r)
                                            <option value="{{ $r->name }}" {{ $u->roles->contains('name', $r->name) ? 'selected' : '' }}>
                                                {{ $r->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <div class="small text-success mt-1 d-none" id="roles-status-{{ $u->id }}"></div>
                                </div>
                                <div class="user-card-actions d-flex flex-wrap">
                                    <button class="btn btn-sm btn-info btn-edit-user" data-user-id="{{ $u->id }}">
                                        <i class="fas fa-edit mr-1"></i> Edit
                                    </button>
                                    <button class="btn btn-sm btn-{{ ($u->is_active ?? true) ? 'warning' : 'success' }} btn-toggle-user" data-user-id="{{ $u->id }}" id="toggle-btn-{{ $u->id }}">
                                        <i class="fas fa-{{ ($u->is_active ?? true) ? 'user-slash' : 'user-check' }} mr-1"></i>
                                        {{ ($u->is_active ?? true) ? 'Nonaktifkan' : 'Aktifkan' }}
                                    </button>
                                    <button class="btn btn-sm btn-secondary btn-reset-password" data-user-id="{{ $u->id }}">
                                        <i class="fas fa-key mr-1"></i> Reset Password
                                    </button>
                                    @if(auth()->id() !== $u->id)
                                        <button class="btn btn-sm btn-danger btn-delete-user" data-user-id="{{ $u->id }}" data-user-name="{{ e($u->name) }}">
                                            <i class="fas fa-trash-alt mr-1"></i> Hapus
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="empty-state text-center py-5">
                            <i class="fas fa-users-slash fa-4x text-muted mb-3"></i>
                            <h5 class="text-muted">Belum ada pengguna ditemukan</h5>
                        </div>
                    @endforelse
                </div>

                @if($users->hasPages())
                    <div class="card border-0 shadow-sm mt-4">
                        <div class="card-body d-flex flex-column flex-md-row justify-content-between align-items-center">
                            <p class="text-muted mb-2 mb-md-0">
                                Menampilkan {{ $users->firstItem() }} - {{ $users->lastItem() }} dari {{ $users->total() }} pengguna
                            </p>
                            {{ $users->links() }}
                        </div>
                    </div>
                @endif
            </div>

            <div class="tab-pane fade p-4" id="roles" role="tabpanel">
                <div class="row">
                    <div class="col-md-7">
                        <h5><i class="fas fa-user-tag"></i> Daftar Roles</h5>
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Role</th>
                                    <th>Permissions</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($roles as $role)
                                    <tr>
                                        <td><strong>{{ $role->name }}</strong></td>
                                        <td>
                                            @forelse($role->permissions as $p)
                                                <span class="badge badge-secondary">{{ $p->name }}</span>
                                            @empty
                                                <span class="text-muted"><i>No permissions</i></span>
                                            @endforelse
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-5">
                        <h5><i class="fas fa-plus-circle"></i> Tambah Role</h5>
                        <form action="{{ route('admin.roles.store') }}" method="post" class="card card-body">
                            @csrf
                            <div class="mb-3">
                                <label>Nama Role</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label>Permissions</label>
                                <div class="border rounded p-3" style="max-height:300px; overflow-y:auto;">
                                    @foreach($permissions as $perm)
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="permissions[]" value="{{ $perm->name }}" id="perm_{{ $perm->id }}">
                                            <label class="form-check-label" for="perm_{{ $perm->id }}">{{ $perm->name }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <button class="btn btn-success btn-block">Simpan</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade p-4" id="permissions" role="tabpanel">
                <div class="row">
                    <div class="col-md-7">
                        <h5><i class="fas fa-shield-alt"></i> Daftar Permissions</h5>
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Permission</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($permissions as $perm)
                                    <tr>
                                        <td>{{ $perm->name }}</td>
                                        <td>
                                            <form action="{{ route('admin.permissions.destroy', $perm) }}" method="post" class="d-inline" onsubmit="return confirm('Hapus permission ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-sm btn-danger">Hapus</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-5">
                        <h5><i class="fas fa-plus-circle"></i> Tambah Permission</h5>
                        <form action="{{ route('admin.permissions.store') }}" method="post" class="card card-body">
                            @csrf
                            <div class="mb-3">
                                <label>Nama Permission</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <button class="btn btn-success btn-block">Tambah</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-user-plus mr-2"></i>
                    <span id="modal-title">Tambah Pengguna</span>
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <form id="userForm">
                <div class="modal-body">
                    <input type="hidden" id="user_id">
                    <input type="hidden" id="form_method" value="create">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Nama Lengkap *</label>
                                <input type="text" class="form-control" id="user_name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email *</label>
                                <input type="email" class="form-control" id="user_email" name="email" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>No. Telepon</label>
                                <input type="text" class="form-control" id="user_phone" name="phone">
                            </div>
                        </div>
                        <div class="col-md-6" id="password-field">
                            <div class="form-group">
                                <label>Password</label>
                                <input type="password" class="form-control" id="user_password" name="password">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Roles</label>
                        <div class="border rounded p-3" style="max-height:200px; overflow-y:auto;">
                            @foreach($roles as $r)
                                <div class="custom-control custom-checkbox">
                                    <input class="custom-control-input user-role-checkbox" type="checkbox" name="roles[]" value="{{ $r->name }}" id="modal_role_{{ $r->id }}">
                                    <label class="custom-control-label" for="modal_role_{{ $r->id }}">{{ $r->name }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div id="form-message" class="alert d-none"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="submit-btn">
                        <span id="submit-text">Simpan</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
@parent
<script>
window.AccessCenter = window.AccessCenter || {};
window.AccessCenter.csrfToken = '{{ csrf_token() }}';

window.showToast = function(type, message) {
    const bgColor = type === 'success' ? '#28a745' : '#dc3545';
    const toast = document.createElement('div');
    toast.className = 'alert alert-' + type + ' position-fixed shadow';
    toast.style.cssText = 'top:80px;right:20px;z-index:9999;min-width:300px;';
    toast.innerHTML = '<strong>' + message + '</strong>';
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
};

window.openCreateUserModal = function() {
    document.getElementById('modal-title').textContent = 'Tambah Pengguna';
    document.getElementById('form_method').value = 'create';
    document.getElementById('user_id').value = '';
    document.getElementById('userForm').reset();
    document.querySelectorAll('.user-role-checkbox').forEach(cb => cb.checked = false);
    document.getElementById('password-field').style.display = 'block';
    document.getElementById('submit-btn').disabled = false;
    const formMsg = document.getElementById('form-message');
    formMsg.className = 'alert d-none';
    formMsg.textContent = '';
};

window.openEditUserModal = function(userId) {
    document.getElementById('modal-title').textContent = 'Edit Pengguna';
    document.getElementById('form_method').value = 'edit';
    document.getElementById('user_id').value = userId;
    document.getElementById('password-field').style.display = 'none';
    document.getElementById('submit-btn').disabled = false;
    const formMsg = document.getElementById('form-message');
    formMsg.className = 'alert d-none';
    formMsg.textContent = '';

    fetch('/admin/access-center/users/' + userId + '/data', {
        headers: { 'X-CSRF-TOKEN': window.AccessCenter.csrfToken, 'Accept': 'application/json' }
    }).then(res => res.json()).then(data => {
        if (data.success) {
            document.getElementById('user_name').value = data.user.name;
            document.getElementById('user_email').value = data.user.email;
            document.getElementById('user_phone').value = data.user.phone || '';
            document.querySelectorAll('.user-role-checkbox').forEach(cb => {
                cb.checked = data.user.roles.includes(cb.value);
            });
            $('#userModal').modal('show');
        }
    });
};

window.toggleUserActive = function(userId, btn) {
    if (!confirm('Yakin mengubah status?')) return;
    btn.disabled = true;
    fetch('/admin/access-center/users/' + userId + '/toggle-active', {
        method: 'POST',
        headers: { 
            'X-CSRF-TOKEN': window.AccessCenter.csrfToken, 
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(res => {
        if (!res.ok) {
            throw new Error('Network response was not ok');
        }
        return res.json();
    })
    .then(data => {
        if (data.success) {
            const badge = document.getElementById('status-badge-' + userId);
            if (data.is_active) {
                badge.className = 'badge badge-pill badge-success px-3 py-2';
                badge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Aktif';
                btn.className = 'btn btn-sm btn-warning btn-toggle-user';
                btn.innerHTML = '<i class="fas fa-user-slash mr-1"></i> Nonaktifkan';
            } else {
                badge.className = 'badge badge-pill badge-secondary px-3 py-2';
                badge.innerHTML = '<i class="fas fa-times-circle mr-1"></i> Nonaktif';
                btn.className = 'btn btn-sm btn-success btn-toggle-user';
                btn.innerHTML = '<i class="fas fa-user-check mr-1"></i> Aktifkan';
            }
            window.showToast('success', data.message);
        } else {
            window.showToast('error', data.message || 'Gagal mengubah status');
        }
        btn.disabled = false;
    })
    .catch(error => {
        console.error('Error:', error);
        window.showToast('error', 'Terjadi kesalahan saat mengubah status');
        btn.disabled = false;
    });
};

window.sendPasswordReset = function(userId) {
    if (!confirm('Kirim email reset password?')) return;
    fetch('/admin/access-center/users/' + userId + '/send-reset', {
        method: 'POST',
        headers: { 
            'X-CSRF-TOKEN': window.AccessCenter.csrfToken,
            'Accept': 'application/json'
        }
    })
    .then(res => {
        if (!res.ok) {
            throw new Error('Network response was not ok');
        }
        return res.json();
    })
    .then(data => {
        if (data.success) {
            window.showToast('success', data.message);
        } else {
            window.showToast('error', data.message || 'Gagal mengirim email reset');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        window.showToast('error', 'Terjadi kesalahan saat mengirim email');
    });
};

window.deleteUser = function(userId, userName) {
    if (!confirm('Hapus pengguna "' + userName + '"?')) return;
    const row = document.getElementById('user-row-' + userId);
    fetch('/admin/access-center/users/' + userId + '/delete', {
        method: 'DELETE',
        headers: { 
            'X-CSRF-TOKEN': window.AccessCenter.csrfToken,
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(res => {
        if (!res.ok) {
            throw new Error('Network response was not ok');
        }
        return res.json();
    })
    .then(data => {
        if (data.success) {
            row.remove();
            window.showToast('success', data.message);
            // Reload after a short delay to update stats
            setTimeout(() => location.reload(), 1500);
        } else {
            window.showToast('error', data.message || 'Gagal menghapus pengguna');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        window.showToast('error', 'Terjadi kesalahan saat menghapus pengguna');
    });
};

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.js-user-roles').forEach(sel => {
        sel.addEventListener('change', function() {
            const userId = this.getAttribute('data-user-id');
            const selected = Array.from(this.options).filter(o => o.selected).map(o => o.value);
            fetch('/admin/access-center/users/' + userId + '/roles', {
                method: 'POST',
                headers: { 
                    'X-CSRF-TOKEN': window.AccessCenter.csrfToken, 
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ roles: selected })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    window.showToast('success', 'Roles berhasil diperbarui');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                window.showToast('error', 'Gagal memperbarui roles');
            });
        });
    });

    document.querySelectorAll('.btn-edit-user').forEach(btn => {
        btn.addEventListener('click', function() { window.openEditUserModal(this.dataset.userId); });
    });

    document.querySelectorAll('.btn-toggle-user').forEach(btn => {
        btn.addEventListener('click', function() { window.toggleUserActive(this.dataset.userId, this); });
    });

    document.querySelectorAll('.btn-reset-password').forEach(btn => {
        btn.addEventListener('click', function() { window.sendPasswordReset(this.dataset.userId); });
    });

    document.querySelectorAll('.btn-delete-user').forEach(btn => {
        btn.addEventListener('click', function() { window.deleteUser(this.dataset.userId, this.dataset.userName); });
    });

    document.getElementById('userForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const method = document.getElementById('form_method').value;
        const userId = document.getElementById('user_id').value;
        const formData = new FormData(this);
        const data = {
            name: formData.get('name'),
            email: formData.get('email'),
            phone: formData.get('phone'),
            roles: formData.getAll('roles[]')
        };
        if (method === 'create') data.password = formData.get('password');

        const url = method === 'create' ? '/admin/access-center/users/create' : '/admin/access-center/users/' + userId + '/update';
        const submitBtn = document.getElementById('submit-btn');
        const formMsg = document.getElementById('form-message');
        submitBtn.disabled = true;
        formMsg.className = 'alert d-none';
        formMsg.textContent = '';
        
        fetch(url, {
            method: method === 'create' ? 'POST' : 'PUT',
            headers: { 
                'X-CSRF-TOKEN': window.AccessCenter.csrfToken, 
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(res => {
            if (!res.ok) {
                return res.json().then(data => {
                    throw data;
                });
            }
            return res.json();
        })
        .then(response => {
            if (response.success) {
                window.showToast('success', response.message);
                $('#userModal').modal('hide');
                setTimeout(() => location.reload(), 1500);
            } else {
                formMsg.className = 'alert alert-danger';
                formMsg.textContent = response.message || 'Gagal menyimpan data';
                submitBtn.disabled = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            let errorMessage = 'Terjadi kesalahan saat menyimpan data';
            
            if (error.errors) {
                // Laravel validation errors - show all errors
                const errorList = Object.values(error.errors).flat();
                errorMessage = errorList.join(', ');
            } else if (error.message) {
                errorMessage = error.message;
            }
            
            formMsg.className = 'alert alert-danger';
            formMsg.textContent = errorMessage;
            submitBtn.disabled = false;
        });
    });
});
</script>
@endsection

@push('css')
<style>
.btn-gradient {
    background: linear-gradient(120deg, #5d7bff 0%, #7c53ff 50%, #9c4dff 100%);
    border: none;
}
.access-hero {
    background: linear-gradient(140deg, #eef3ff 0%, #f7f4ff 55%, #ffffff 100%);
    border-radius: 16px;
}
.hero-eyebrow {
    letter-spacing: 0.2rem;
    font-weight: 600;
    color: #5d7bff;
}
.hero-title {
    font-weight: 700;
}
.hero-meta span {
    display: inline-flex;
    align-items: center;
    margin-right: 1.25rem;
    color: #6b7280;
    font-weight: 600;
}
.hero-meta span i {
    margin-right: 6px;
    color: #5d7bff;
}
.user-stat-grid .stat-card {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    border-radius: 16px;
    background: #ffffff;
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 1rem;
}
.bg-primary-subtle { background: rgba(93, 123, 255, 0.12); }
.bg-success-subtle { background: rgba(34, 197, 94, 0.15); }
.bg-warning-subtle { background: rgba(251, 191, 36, 0.18); }
.bg-info-subtle { background: rgba(59, 130, 246, 0.15); }
.stat-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08rem;
    margin-bottom: 0.25rem;
    color: #94a3b8;
}
.input-icon-group {
    position: relative;
}
.input-icon-group span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    color: #9aa4b2;
}
.input-icon-group input {
    padding-left: 2.75rem;
    border-radius: 12px;
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter-chips .chip {
    border: 1px solid #e2e8f0;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}
.filter-chips .chip.active,
.filter-chips .chip:hover {
    background: #eef2ff;
    border-color: #5d7bff;
    color: #5d7bff;
}
.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}
.user-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    padding: 1.5rem;
}
.user-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
}
.user-card-header .user-name {
    font-size: 1.1rem;
}
.user-card-header .user-index {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 600;
}
.user-meta {
    font-size: 0.85rem;
}
.user-card-actions .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 10px;
}
.avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}
.js-user-roles {
    border-radius: 10px;
    min-height: 60px;
}
.nav-tabs-modern {
    padding: 1rem 1.5rem 0 !important;
    background: #ffffff !important;
    border-bottom: 2px solid #e9ecef;
}
.nav-tabs-modern .nav-link {
    color: #6c757d !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 1rem 1.5rem !important;
    font-weight: 600 !important;
}
.nav-tabs-modern .nav-link.active {
    color: #007bff !important;
    border-bottom: 3px solid #007bff !important;
}
@media (max-width: 767px) {
    .user-card-actions .btn {
        width: 100%;
    }
}
</style>
@endpush