@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Detail Role" 
    :breadcrumbs="[
        ['name' => 'Manajemen Role', 'url' => route('role-management.index')],
        ['name' => 'Detail Role']
    ]"
    :action="route('role-management.edit', $role)" 
    actionLabel="Edit Role" 
    actionIcon="edit"
/>

<div class="container-fluid py-4">
    <div class="row">
        <!-- Role Information -->
        <div class="col-md-4">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi Role</h6>
                </div>
                <div class="card-body pt-0">
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Nama Role</label>
                        <p class="mb-0">{{ $role->name }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Display Name</label>
                        <p class="mb-0">{{ $role->display_name }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Status</label>
                        <p class="mb-0">
                            @if($role->is_active)
                                <span class="badge badge-sm bg-gradient-success">Aktif</span>
                            @else
                                <span class="badge badge-sm bg-gradient-danger">Nonaktif</span>
                            @endif
                        </p>
                    </div>
                    
                    @if($role->description)
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Deskripsi</label>
                        <p class="mb-0">{{ $role->description }}</p>
                    </div>
                    @endif
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Dibuat</label>
                        <p class="mb-0">{{ $role->created_at->format('d M Y H:i') }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Diupdate</label>
                        <p class="mb-0">{{ $role->updated_at->format('d M Y H:i') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Permissions -->
        <div class="col-md-8">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Permissions ({{ $role->permissions->count() }})</h6>
                </div>
                <div class="card-body pt-0">
                    @if($role->permissions->count() > 0)
                        @php
                            $permissionsByGroup = $role->permissions->groupBy('group');
                        @endphp
                        
                        @foreach($permissionsByGroup as $group => $groupPermissions)
                        <div class="permission-group mb-4">
                            <h6 class="text-primary font-weight-bold mb-3">
                                <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">folder</i>{{ $group }} ({{ $groupPermissions->count() }})
                            </h6>
                            <div class="row">
                                @foreach($groupPermissions as $permission)
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="material-symbols-rounded text-success me-2" style="font-size: 18px; vertical-align: middle;">key</i>
                                        <div>
                                            <span class="font-weight-bold">{{ $permission->display_name }}</span>
                                            @if($permission->description)
                                                <small class="text-muted d-block">{{ $permission->description }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-4">
                            <i class="material-symbols-rounded" style="font-size: 48px; color: #6c757d; margin-bottom: 1rem;">key</i>
                            <h6 class="text-muted">Belum ada permission</h6>
                            <p class="text-muted">Role ini belum memiliki permission yang ditetapkan</p>
                            <a href="{{ route('role-management.edit', $role) }}" class="btn btn-sm bg-gradient-primary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 16px; vertical-align: middle;">edit</i> Edit Role
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Users with this role -->
    <div class="row mt-4">
        <div class="col">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Users dengan Role ini ({{ $role->users->count() }})</h6>
                </div>
                <div class="table-responsive">
                    @if($role->users->count() > 0)
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th scope="col">User</th>
                                <th scope="col">Email</th>
                                <th scope="col">Status</th>
                                <th scope="col">Terakhir Login</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($role->users as $user)
                            <tr>
                                <th scope="row">
                                    <div class="d-flex align-items-center">
                                        <a href="#" class="avatar rounded-circle me-3">
                                            @if($user->avatar)
                                                <img alt="Image placeholder" src="{{ Storage::url($user->avatar) }}">
                                            @else
                                                <img alt="Image placeholder" src="{{ asset('img/theme/team-1-800x800.jpg') }}">
                                            @endif
                                        </a>
                                        <div>
                                            <span class="name mb-0 text-sm">{{ $user->name }}</span>
                                            <div class="text-muted">{{ $user->username }}</div>
                                        </div>
                                    </div>
                                </th>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <span class="badge badge-sm bg-gradient-{{ $user->status_badge_class }}">{{ $user->status }}</span>
                                </td>
                                <td>
                                    <span class="text-muted">{{ $user->created_at->diffForHumans() }}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <div class="text-center py-4">
                        <i class="material-symbols-rounded" style="font-size: 48px; color: #6c757d; margin-bottom: 1rem;">person</i>
                        <h6 class="text-muted">Belum ada user</h6>
                        <p class="text-muted">Tidak ada user yang menggunakan role ini</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="row mt-4">
        <div class="col">
            <div class="card my-4">
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="{{ route('role-management.edit', $role) }}" class="btn bg-gradient-primary mb-0 w-100">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">edit</i> Edit Role
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('role-management.index') }}" class="btn bg-gradient-secondary mb-0 w-100">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Kembali
                            </a>
                        </div>
                        <div class="col-md-3">
                            <button class="btn bg-gradient-warning mb-0 w-100" onclick="toggleStatus({{ $role->id }})">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">power_settings_new</i> 
                                {{ $role->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn bg-gradient-danger mb-0 w-100" onclick="deleteRole({{ $role->id }})">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Hapus Role
                            </button>
                        </div>
                    </div>
                </div>
            </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">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Apakah Anda yakin ingin menghapus role ini? Tindakan ini tidak dapat dibatalkan.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn bg-gradient-danger mb-0">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function toggleStatus(roleId) {
    if (confirm('Apakah Anda yakin ingin mengubah status role ini?')) {
        fetch(`/role-management/${roleId}/toggle-status`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            alert('Error: ' + error.message);
        });
    }
}

function deleteRole(roleId) {
    document.getElementById('deleteForm').action = `/role-management/${roleId}`;
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>
@endsection