@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Manajemen Permission" 
    :breadcrumbs="[
        ['name' => 'Manajemen Akses', 'url' => route('user-management.index')],
        ['name' => 'Permission']
    ]"
    :action="route('permission-management.create')" 
    actionLabel="Tambah Permission" 
    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">
                <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 Permission</p>
                            <h4 class="mb-0" id="total-permissions">
                                <div class="spinner-border spinner-border-sm text-primary" role="status">
                                    <span class="sr-only">Loading...</span>
                                </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">vpn_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-primary">Semua permission</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Permission Aktif</p>
                            <h4 class="mb-0" id="active-permissions">
                                <div class="spinner-border spinner-border-sm text-success" role="status">
                                    <span class="sr-only">Loading...</span>
                                </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">Sedang aktif</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Permission Nonaktif</p>
                            <h4 class="mb-0" id="inactive-permissions">
                                <div class="spinner-border spinner-border-sm text-danger" role="status">
                                    <span class="sr-only">Loading...</span>
                                </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">cancel</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">Dinonaktifkan</p>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-header p-2 ps-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Grup Permission</p>
                            <h4 class="mb-0" id="permission-groups">
                                <div class="spinner-border spinner-border-sm text-info" role="status">
                                    <span class="sr-only">Loading...</span>
                                </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">folder</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">Kategori grup</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Permissions 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;">key</i> Daftar Permission
                    </h6>
                </div>
                
                <!-- Filter and Search Section -->
                <div class="card-body pt-3 border-bottom">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="searchPermission" class="form-label">Cari Permission</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="searchPermission" placeholder="Cari nama, display name, atau deskripsi..." onkeyup="filterPermissions()">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-3">
                                <label for="groupFilter" class="form-label">Filter Grup</label>
                                <select class="form-control" id="groupFilter" onchange="filterPermissions()">
                                    <option value="">Semua Grup</option>
                                    @if(isset($groups))
                                        @foreach($groups as $group)
                                        <option value="{{ $group }}">{{ $group }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </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="filterPermissions()">
                                    <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 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">Permission</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">Grup</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 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="permissionsTable">
                            @forelse($permissions as $permission)
                            <tr data-group="{{ $permission->group }}" 
                                data-status="{{ $permission->is_active ? '1' : '0' }}"
                                data-name="{{ strtolower($permission->name) }}"
                                data-display="{{ strtolower($permission->display_name) }}"
                                data-description="{{ strtolower($permission->description ?? '') }}">
                                <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;">key</i>
                                        </div>
                                        <div>
                                            <span class="text-xs font-weight-bold">{{ $permission->name }}</span>
                                            @if($permission->description)
                                                <div class="text-xs text-muted mt-1">{{ Str::limit($permission->description, 60) }}</div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-xs font-weight-bold">{{ $permission->display_name }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-gradient-info">{{ $permission->group }}</span>
                                </td>
                                <td>
                                    @if($permission->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 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('permission-management.show', $permission) }}">
                                                <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('permission-management.edit', $permission) }}">
                                                <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({{ $permission->id }})">
                                                <i class="material-symbols-rounded me-2 {{ $permission->is_active ? 'text-danger' : 'text-success' }}" style="font-size: 18px; vertical-align: middle;">power_settings_new</i> 
                                                {{ $permission->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                                            </a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deletePermission({{ $permission->id }}, '{{ $permission->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="5" class="text-center">
                                    <div class="py-5">
                                        <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">key</i>
                                        <h4 class="text-muted">Belum ada permission</h4>
                                        <p class="text-muted mb-4">Mulai dengan membuat permission pertama Anda</p>
                                        <a href="{{ route('permission-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 Permission Pertama
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($permissions->hasPages())
                <div class="card-footer py-4">
                    <nav aria-label="...">
                    {{ $permissions->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 Permission
                </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 permission <strong id="permissionNameToDelete"></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> Permission yang sedang digunakan oleh role 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("permission-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 => {
        const totalEl = document.getElementById('total-permissions');
        const activeEl = document.getElementById('active-permissions');
        const inactiveEl = document.getElementById('inactive-permissions');
        const groupsEl = document.getElementById('permission-groups');
        
        if (totalEl) totalEl.textContent = data.total_permissions ?? '0';
        if (activeEl) activeEl.textContent = data.active_permissions ?? '0';
        if (inactiveEl) inactiveEl.textContent = data.inactive_permissions ?? '0';
        if (groupsEl) groupsEl.textContent = Object.keys(data.permission_groups || {}).length || '0';
    })
    .catch(error => {
        console.error('Error loading stats:', error);
        const totalEl = document.getElementById('total-permissions');
        const activeEl = document.getElementById('active-permissions');
        const inactiveEl = document.getElementById('inactive-permissions');
        const groupsEl = document.getElementById('permission-groups');
        
        if (totalEl) totalEl.textContent = '0';
        if (activeEl) activeEl.textContent = '0';
        if (inactiveEl) inactiveEl.textContent = '0';
        if (groupsEl) groupsEl.textContent = '0';
    });
}

function filterPermissions() {
    const searchTerm = document.getElementById('searchPermission').value.toLowerCase();
    const group = document.getElementById('groupFilter').value;
    const status = document.getElementById('statusFilter').value;
    const rows = document.querySelectorAll('#permissionsTable tr[data-group]');
    let visibleCount = 0;
    
    rows.forEach(row => {
        const rowGroup = row.getAttribute('data-group');
        const rowStatus = row.getAttribute('data-status');
        const rowName = row.getAttribute('data-name');
        const rowDisplay = row.getAttribute('data-display');
        const rowDescription = row.getAttribute('data-description');
        
        // Check search filter
        const matchesSearch = searchTerm === '' || 
            rowName.includes(searchTerm) || 
            rowDisplay.includes(searchTerm) || 
            rowDescription.includes(searchTerm);
        
        // Check group filter
        const matchesGroup = group === '' || rowGroup === group;
        
        // Check status filter
        const matchesStatus = status === '' || rowStatus === status;
        
        if (matchesSearch && matchesGroup && matchesStatus) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    });
    
    // Show "no results" message if needed
    const emptyRow = document.querySelector('#permissionsTable tr td[colspan="5"]');
    if (emptyRow && visibleCount === 0) {
        emptyRow.closest('tr').style.display = '';
    } else if (emptyRow) {
        emptyRow.closest('tr').style.display = 'none';
    }
}

function resetFilters() {
    document.getElementById('searchPermission').value = '';
    document.getElementById('groupFilter').value = '';
    document.getElementById('statusFilter').value = '';
    filterPermissions();
}

function toggleStatus(permissionId) {
    if (confirm('Apakah Anda yakin ingin mengubah status permission ini?')) {
        const url = '{{ url("/permission-management") }}/' + permissionId + '/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 deletePermission(permissionId, permissionName) {
    document.getElementById('permissionNameToDelete').textContent = permissionName || 'Permission ini';
    const deleteUrl = '{{ url("/permission-management") }}/' + permissionId;
    document.getElementById('deleteForm').action = deleteUrl;
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>
@endsection