@extends('layout.app')

@section('title', 'Manajemen User - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Manajemen User" 
    :breadcrumbs="[
        ['name' => 'Manajemen Akses', 'url' => route('user-management.index')],
        ['name' => 'User']
    ]"
    :action="route('user-management.create')" 
    actionLabel="Tambah User" 
    actionIcon="add"
/>

<div class="container-fluid py-4">
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Total User</p>
                            <h4 class="mb-0" id="total-users"><div class='spinner-border spinner-border-sm' role='status'></div></h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-primary shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">person</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-success"><span class="font-weight-bolder">0%</span> Semua user</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">User Aktif</p>
                            <h4 class="mb-0" id="active-users"><div class='spinner-border spinner-border-sm' role='status'></div></h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-success shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">check_circle</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-success"><span class="font-weight-bolder">0%</span> Sedang aktif</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Admin</p>
                            <h4 class="mb-0" id="admin-users"><div class='spinner-border spinner-border-sm' role='status'></div></h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-danger shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">admin_panel_settings</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-danger"><span class="font-weight-bolder">0%</span> User admin</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Operator</p>
                            <h4 class="mb-0" id="operator-users"><div class='spinner-border spinner-border-sm' role='status'></div></h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-info shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">support_agent</i>
                        </div>
                    </div>
                </div>
                <hr class="dark horizontal my-0">
                <div class="card-footer p-2 ps-3">
                    <p class="mb-0 text-sm text-info"><span class="font-weight-bolder">0%</span> User operator</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <div class="row">
        <div class="col">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">person</i> Daftar User
                    </h6>
                </div>
                
                <!-- Filter and Search Section -->
                <div class="card-body pt-3 border-bottom">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group mb-3">
                                <label for="searchUser" class="form-label">Cari User</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">search</i></span>
                                    <input type="text" class="form-control" id="searchUser" placeholder="Cari nama, username, atau email..." onkeyup="filterUsers()">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label for="roleFilter" class="form-label">Filter Role</label>
                                <select class="form-control" id="roleFilter" onchange="filterUsers()">
                                    <option value="">Semua Role</option>
                                    <option value="admin">Admin</option>
                                    <option value="operator">Operator</option>
                                    <option value="finance">Finance</option>
                                    <option value="support">Support</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <label for="statusFilter" class="form-label">Filter Status</label>
                                <select class="form-control" id="statusFilter" onchange="filterUsers()">
                                    <option value="">Semua Status</option>
                                    <option value="Aktif">Aktif</option>
                                    <option value="Nonaktif">Nonaktif</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <label class="form-label">&nbsp;</label>
                                <button type="button" class="btn bg-gradient-secondary mb-0 w-100" onclick="resetFilters()">
                                    <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">refresh</i> Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-hover align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">User</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Role</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Terakhir Login</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="usersTable">
                            @forelse($users as $user)
                            <tr data-role="{{ strtolower($user->role) }}"
                                data-status="{{ $user->status }}"
                                data-name="{{ strtolower($user->name) }}"
                                data-username="{{ strtolower($user->username ?? '') }}"
                                data-email="{{ strtolower($user->email) }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-sm rounded-circle me-3">
                                            @if($user->avatar)
                                                <img alt="Image placeholder" src="{{ Storage::url($user->avatar) }}" class="rounded-circle">
                                            @else
                                                <div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                                    <i class="material-symbols-rounded opacity-10" style="font-size: 16px;">person</i>
                                                </div>
                                            @endif
                                        </div>
                                        <div>
                                            <span class="text-xs font-weight-bold">{{ $user->name }}</span>
                                            <div class="text-xs text-muted">{{ $user->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge badge-sm bg-gradient-{{ $user->role_badge_class ?? 'secondary' }}">{{ ucfirst($user->role) }}</span>
                                    @if($user->roles->count() > 0)
                                        <br class="mt-1">
                                        @foreach($user->roles as $role)
                                            <span class="badge badge-sm bg-gradient-secondary mt-1">{{ $role->display_name }}</span>
                                        @endforeach
                                    @endif
                                </td>
                                <td>
                                    @if($user->status === 'Aktif')
                                        <span class="badge badge-sm bg-gradient-success">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">check_circle</i> Aktif
                                        </span>
                                    @else
                                        <span class="badge badge-sm bg-gradient-danger">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">cancel</i> Nonaktif
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <span class="text-xs font-weight-bold">{{ $user->created_at->diffForHumans() }}</span>
                                </td>
                                <td class="text-center">
                                    <div class="dropdown">
                                        <a class="btn btn-sm bg-gradient-primary mb-0" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Menu Aksi" style="width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0;">
                                            <i class="material-symbols-rounded" style="font-size: 18px; line-height: 1;">more_vert</i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                            <li><a class="dropdown-item" href="{{ route('user-management.show', $user) }}">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">visibility</i> Detail
                                            </a></li>
                                            <li><a class="dropdown-item" href="{{ route('user-management.edit', $user) }}">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">edit</i> Edit
                                            </a></li>
                                            <li><a class="dropdown-item" href="#" onclick="toggleStatus({{ $user->id }})">
                                                <i class="material-symbols-rounded me-2 {{ $user->status === 'Aktif' ? 'text-danger' : 'text-success' }}" style="font-size: 18px; vertical-align: middle;">power_settings_new</i> 
                                                {{ $user->status === 'Aktif' ? 'Nonaktifkan' : 'Aktifkan' }}
                                            </a></li>
                                            @if($user->id !== auth()->id())
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteUser({{ $user->id }}, '{{ $user->name }}')">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Hapus
                                            </a></li>
                                            @endif
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center">
                                    <div class="py-5">
                                        <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">person</i>
                                        <h4 class="text-muted">Belum ada user</h4>
                                        <p class="text-muted mb-4">Mulai dengan membuat user pertama Anda</p>
                                        <a href="{{ route('user-management.create') }}" class="btn bg-gradient-primary mb-0">
                                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">add</i> Tambah User Pertama
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($users->hasPages())
                <div class="card-footer py-4">
                    <nav aria-label="...">
                        {{ $users->links() }}
                    </nav>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);">
            <div class="modal-header border-bottom">
                <h5 class="modal-title font-weight-bold" id="deleteModalLabel" style="color: #344767;">
                    <i class="material-symbols-rounded me-2 text-danger" style="font-size: 20px; vertical-align: middle;">delete</i> Konfirmasi Hapus User
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-4">
                <div class="alert alert-warning text-white mb-3" role="alert">
                    <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i> 
                    <strong>Peringatan!</strong> Tindakan ini tidak dapat dibatalkan.
                </div>
                <p class="mb-0">Apakah Anda yakin ingin menghapus user <strong id="userNameToDelete"></strong>?</p>
                <p class="text-muted small mt-2 mb-0">
                    <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i> User yang sedang login tidak dapat dihapus.
                </p>
            </div>
            <div class="modal-footer border-top">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i> Batal
                </button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn bg-gradient-danger mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Load stats on page load
document.addEventListener('DOMContentLoaded', function() {
    loadStats();
});

function loadStats() {
    fetch('{{ route("user-management.stats") }}', {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        credentials: 'same-origin'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        document.getElementById('total-users').textContent = data.total_users || '0';
        document.getElementById('active-users').textContent = data.active_users || '0';
        document.getElementById('admin-users').textContent = data.admin_users || '0';
        document.getElementById('operator-users').textContent = data.operator_users || '0';
    })
    .catch(error => {
        console.error('Error loading stats:', error);
        document.getElementById('total-users').textContent = '0';
        document.getElementById('active-users').textContent = '0';
        document.getElementById('admin-users').textContent = '0';
        document.getElementById('operator-users').textContent = '0';
    });
}

function filterUsers() {
    const searchTerm = document.getElementById('searchUser').value.toLowerCase();
    const role = document.getElementById('roleFilter').value.toLowerCase();
    const status = document.getElementById('statusFilter').value;
    const rows = document.querySelectorAll('#usersTable tr[data-role]');
    let visibleCount = 0;
    
    rows.forEach(row => {
        const rowRole = row.getAttribute('data-role');
        const rowStatus = row.getAttribute('data-status');
        const rowName = row.getAttribute('data-name');
        const rowUsername = row.getAttribute('data-username');
        const rowEmail = row.getAttribute('data-email');
        
        // Check search filter
        const matchesSearch = searchTerm === '' || 
            rowName.includes(searchTerm) || 
            rowUsername.includes(searchTerm) || 
            rowEmail.includes(searchTerm);
        
        // Check role filter
        const matchesRole = role === '' || rowRole === role;
        
        // Check status filter
        const matchesStatus = status === '' || rowStatus === status;
        
        if (matchesSearch && matchesRole && matchesStatus) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    });
}

function resetFilters() {
    document.getElementById('searchUser').value = '';
    document.getElementById('roleFilter').value = '';
    document.getElementById('statusFilter').value = '';
    filterUsers();
}

function toggleStatus(userId) {
    if (confirm('Apakah Anda yakin ingin mengubah status user ini?')) {
        const url = '{{ url("/user-management") }}/' + userId + '/toggle-status';
        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || 'Terjadi kesalahan');
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'Terjadi kesalahan'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error: ' + error.message);
        });
    }
}

function deleteUser(userId, userName) {
    document.getElementById('userNameToDelete').textContent = userName || 'User ini';
    const deleteUrl = '{{ url("/user-management") }}/' + userId;
    document.getElementById('deleteForm').action = deleteUrl;
    $('#deleteModal').modal('show');
}
</script>
@endsection