@extends('layout.app')

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

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

<div class="container-fluid py-4">
    <div class="row">
        <!-- Permission Information -->
        <div class="col-md-4">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi Permission</h6>
                </div>
                <div class="card-body pt-0">
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Nama Permission</label>
                        <p class="mb-0 font-weight-bold">{{ $permission->name }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Display Name</label>
                        <p class="mb-0">{{ $permission->display_name }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Grup</label>
                        <p class="mb-0">
                            <span class="badge badge-sm bg-gradient-info">{{ $permission->group }}</span>
                        </p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Status</label>
                        <p class="mb-0">
                            @if($permission->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($permission->description)
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Deskripsi</label>
                        <p class="mb-0">{{ $permission->description }}</p>
                    </div>
                    @endif
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Dibuat</label>
                        <p class="mb-0">{{ $permission->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">{{ $permission->updated_at->format('d M Y H:i') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Roles using this permission -->
        <div class="col-md-8">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Roles yang menggunakan Permission ini ({{ $permission->roles->count() }})</h6>
                </div>
                <div class="card-body pt-0">
                    @if($permission->roles->count() > 0)
                    <div class="row">
                        @foreach($permission->roles as $role)
                        <div class="col-md-6 mb-3">
                            <div class="card border-start border-primary h-100 py-2">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                {{ $role->display_name }}
                                            </div>
                                            <div class="h6 mb-0 font-weight-bold text-gray-800">
                                                {{ $role->name }}
                                            </div>
                                            @if($role->description)
                                                <small class="text-muted">{{ Str::limit($role->description, 50) }}</small>
                                            @endif
                                        </div>
                                        <div class="col-auto">
                                            @if($role->is_active)
                                                <i class="material-symbols-rounded text-success" style="font-size: 32px; vertical-align: middle;">check_circle</i>
                                            @else
                                                <i class="material-symbols-rounded text-danger" style="font-size: 32px; vertical-align: middle;">cancel</i>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-4">
                        <i class="material-symbols-rounded" style="font-size: 48px; color: #6c757d; margin-bottom: 1rem;">badge</i>
                        <h6 class="text-muted">Belum ada role</h6>
                        <p class="text-muted">Permission ini belum digunakan oleh role manapun</p>
                        <a href="{{ route('role-management.index') }}" class="btn btn-sm bg-gradient-primary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 16px; vertical-align: middle;">badge</i> Kelola Role
                        </a>
                    </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('permission-management.edit', $permission) }}" 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 Permission
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('permission-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({{ $permission->id }})">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">power_settings_new</i> 
                                {{ $permission->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn bg-gradient-danger mb-0 w-100" onclick="deletePermission({{ $permission->id }})">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Hapus Permission
                            </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 permission 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(permissionId) {
    if (confirm('Apakah Anda yakin ingin mengubah status permission ini?')) {
        fetch(`/permission-management/${permissionId}/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 deletePermission(permissionId) {
    document.getElementById('deleteForm').action = `/permission-management/${permissionId}`;
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>
@endsection