@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Manajemen Role" 
    :breadcrumbs="[
        ['name' => 'Manajemen Akses', 'url' => route('user-management.index')],
        ['name' => 'Role']
    ]"
    :action="route('role-management.create')" 
    actionLabel="Tambah Role" 
    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 Role</p>
                            <h4 class="mb-0" id="total-roles"><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">badge</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 role</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">Role Aktif</p>
                            <h4 class="mb-0" id="active-roles"><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">Dengan User</p>
                            <h4 class="mb-0" id="roles-with-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">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-info"><span class="font-weight-bolder">0%</span> Memiliki 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">Dengan Permission</p>
                            <h4 class="mb-0" id="roles-with-permissions"><div class='spinner-border spinner-border-sm' role='status'></div></h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-warning shadow text-center border-radius-lg">
                            <i class="material-symbols-rounded opacity-10">key</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-warning"><span class="font-weight-bolder">0%</span> Memiliki permission</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Roles Table Card -->
    <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;">badge</i> Daftar Role
                    </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="searchRole" class="form-label">Cari Role</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="material-symbols-rounded" style="font-size: 18px;">search</i></span>
                                    <input type="text" class="form-control" id="searchRole" placeholder="Cari nama, display name, atau deskripsi..." onkeyup="filterRoles()">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label for="statusFilter" class="form-label">Filter Status</label>
                                <select class="form-control" id="statusFilter" onchange="filterRoles()">
                                    <option value="">Semua Status</option>
                                    <option value="1">Aktif</option>
                                    <option value="0">Nonaktif</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group mb-3">
                                <label for="hasUsersFilter" class="form-label">Filter User</label>
                                <select class="form-control" id="hasUsersFilter" onchange="filterRoles()">
                                    <option value="">Semua</option>
                                    <option value="1">Dengan User</option>
                                    <option value="0">Tanpa User</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>

                <!-- Table -->
                <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">Role</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Display Name</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">Users</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Permissions</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="rolesTable">
                            @forelse($roles as $role)
                            <tr data-status="{{ $role->is_active ? '1' : '0' }}"
                                data-name="{{ strtolower($role->name) }}"
                                data-display="{{ strtolower($role->display_name) }}"
                                data-description="{{ strtolower($role->description ?? '') }}"
                                data-users="{{ ($role->users_count ?? $role->users->count()) > 0 ? '1' : '0' }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow me-3" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                            <i class="material-symbols-rounded opacity-10" style="font-size: 16px;">badge</i>
                                        </div>
                                        <div>
                                            <span class="text-xs font-weight-bold">{{ $role->name }}</span>
                                            @if($role->description)
                                                <div class="text-xs text-muted mt-1">{{ Str::limit($role->description, 60) }}</div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-xs font-weight-bold">{{ $role->display_name }}</span>
                                </td>
                                <td>
                                    @if($role->is_active)
                                        <span class="badge bg-gradient-success">
                                            <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">check_circle</i> Aktif
                                        </span>
                                    @else
                                        <span class="badge bg-gradient-danger">
                                            <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">cancel</i> Nonaktif
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-gradient-info">{{ $role->users_count ?? $role->users->count() }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-gradient-warning">{{ $role->permissions_count ?? $role->permissions->count() }}</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('role-management.show', $role) }}">
                                                <i class="material-symbols-rounded me-2 text-info" style="font-size: 18px; vertical-align: middle;">visibility</i> Detail
                                            </a></li>
                                            <li><a class="dropdown-item" href="{{ route('role-management.edit', $role) }}">
                                                <i class="material-symbols-rounded me-2 text-warning" style="font-size: 18px; vertical-align: middle;">edit</i> Edit
                                            </a></li>
                                            <li><a class="dropdown-item" href="#" onclick="toggleStatus({{ $role->id }})">
                                                <i class="material-symbols-rounded me-2 {{ $role->is_active ? 'text-danger' : 'text-success' }}" style="font-size: 18px; vertical-align: middle;">power_settings_new</i> 
                                                {{ $role->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                                            </a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteRole({{ $role->id }}, '{{ $role->name }}')">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Hapus
                                            </a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center">
                                    <div class="py-5">
                                        <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">badge</i>
                                        <h4 class="text-muted">Belum ada role</h4>
                                        <p class="text-muted mb-4">Mulai dengan membuat role pertama Anda</p>
                                        <a href="{{ route('role-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 Role Pertama
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($roles->hasPages())
                <div class="card-footer py-4">
                    <nav aria-label="...">
                        {{ $roles->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 Role
                </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 role <strong id="roleNameToDelete"></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> Role yang sedang digunakan oleh user 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("role-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(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        const totalRolesEl = document.getElementById('total-roles');
        const activeRolesEl = document.getElementById('active-roles');
        const rolesWithUsersEl = document.getElementById('roles-with-users');
        const rolesWithPermissionsEl = document.getElementById('roles-with-permissions');
        
        if (totalRolesEl) totalRolesEl.textContent = data.total_roles ?? '0';
        if (activeRolesEl) activeRolesEl.textContent = data.active_roles ?? '0';
        if (rolesWithUsersEl) rolesWithUsersEl.textContent = data.roles_with_users ?? '0';
        if (rolesWithPermissionsEl) rolesWithPermissionsEl.textContent = data.roles_with_permissions ?? '0';
    })
    .catch(error => {
        console.error('Error loading stats:', error);
        const totalRolesEl = document.getElementById('total-roles');
        const activeRolesEl = document.getElementById('active-roles');
        const rolesWithUsersEl = document.getElementById('roles-with-users');
        const rolesWithPermissionsEl = document.getElementById('roles-with-permissions');
        
        if (totalRolesEl) totalRolesEl.textContent = '0';
        if (activeRolesEl) activeRolesEl.textContent = '0';
        if (rolesWithUsersEl) rolesWithUsersEl.textContent = '0';
        if (rolesWithPermissionsEl) rolesWithPermissionsEl.textContent = '0';
    });
}

function filterRoles() {
    const searchTerm = document.getElementById('searchRole').value.toLowerCase();
    const status = document.getElementById('statusFilter').value;
    const hasUsers = document.getElementById('hasUsersFilter').value;
    const rows = document.querySelectorAll('#rolesTable tr[data-status]');
    let visibleCount = 0;
    
    rows.forEach(row => {
        const rowStatus = row.getAttribute('data-status');
        const rowName = row.getAttribute('data-name');
        const rowDisplay = row.getAttribute('data-display');
        const rowDescription = row.getAttribute('data-description');
        const rowUsers = row.getAttribute('data-users');
        
        // Check search filter
        const matchesSearch = searchTerm === '' || 
            rowName.includes(searchTerm) || 
            rowDisplay.includes(searchTerm) || 
            rowDescription.includes(searchTerm);
        
        // Check status filter
        const matchesStatus = status === '' || rowStatus === status;
        
        // Check users filter
        const matchesUsers = hasUsers === '' || rowUsers === hasUsers;
        
        if (matchesSearch && matchesStatus && matchesUsers) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    });
    
    // Show "no results" message if needed
    const emptyRow = document.querySelector('#rolesTable tr td[colspan="6"]');
    if (emptyRow && visibleCount === 0 && rows.length > 0) {
        // Show a temporary "no results" row
        const noResultsRow = row.cloneNode(true);
        noResultsRow.innerHTML = '<td colspan="6" class="text-center"><div class="py-3"><i class="ni ni-search text-muted fa-2x mb-2"></i><p class="text-muted">Tidak ada role yang sesuai dengan filter</p></div></td>';
        if (!document.querySelector('#rolesTable tr.no-results')) {
            noResultsRow.classList.add('no-results');
            document.querySelector('#rolesTable').appendChild(noResultsRow);
        }
    } else if (emptyRow && visibleCount > 0) {
        const noResultsRow = document.querySelector('#rolesTable tr.no-results');
        if (noResultsRow) {
            noResultsRow.remove();
        }
    }
}

function resetFilters() {
    document.getElementById('searchRole').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('hasUsersFilter').value = '';
    filterRoles();
}

function toggleStatus(roleId) {
    if (confirm('Apakah Anda yakin ingin mengubah status role ini?')) {
        const url = '{{ url("/role-management") }}/' + roleId + '/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 deleteRole(roleId, roleName) {
    document.getElementById('roleNameToDelete').textContent = roleName || 'Role ini';
    const deleteUrl = '{{ url("/role-management") }}/' + roleId;
    document.getElementById('deleteForm').action = deleteUrl;
    $('#deleteModal').modal('show');
}
</script>
@endsection