@extends('layouts.app')

@section('title', 'View Permission - ISP ERP System')

@section('page-title', 'Permission Details')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-eye me-2"></i>
                                Permission Details
                            </h3>
                            <p class="mb-0 opacity-75">View complete information about this permission</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('permissions.edit', $permission) }}" class="btn btn-warning btn-custom">
                                <i class="fas fa-edit me-2"></i>Edit Permission
                            </a>
                            <a href="{{ route('permissions.index') }}" class="btn btn-light btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Permissions
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Permission Information -->
    <div class="row">
        <div class="col-lg-8">
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Basic Information
                    </h4>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Permission Key</label>
                            <div class="p-3 bg-light rounded">
                                <code class="text-primary fs-5">{{ $permission->permission_key }}</code>
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Status</label>
                            <div class="p-3">
                                @if($permission->is_active)
                                    <span class="badge bg-success custom-badge fs-6">
                                        <i class="fas fa-check-circle me-2"></i>Active
                                    </span>
                                @else
                                    <span class="badge bg-warning custom-badge fs-6">
                                        <i class="fas fa-exclamation-triangle me-2"></i>Inactive
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Description</label>
                        <div class="p-3 bg-light rounded">
                            <p class="mb-0 fs-5">{{ $permission->description }}</p>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Parent Permission</label>
                            <div class="p-3 bg-light rounded">
                                @if($permission->parent)
                                    <span class="text-primary">{{ $permission->parent->description }}</span>
                                    <br>
                                    <small class="text-muted">{{ $permission->parent->permission_key }}</small>
                                @else
                                    <span class="text-muted">No Parent (Root Permission)</span>
                                @endif
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Permission Type</label>
                            <div class="p-3 bg-light rounded">
                                @if($permission->parent_id)
                                    <span class="badge bg-info custom-badge">
                                        <i class="fas fa-level-down-alt me-1"></i>Child Permission
                                    </span>
                                @else
                                    <span class="badge bg-primary custom-badge">
                                        <i class="fas fa-star me-1"></i>Root Permission
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Child Permissions -->
            @if($permission->children && $permission->children->count() > 0)
                <div class="custom-card mb-4">
                    <div class="custom-card-header">
                        <h4 class="mb-0">
                            <i class="fas fa-sitemap me-2"></i>
                            Child Permissions ({{ $permission->children->count() }})
                        </h4>
                    </div>
                    <div class="custom-card-body">
                        <div class="table-responsive">
                            <table class="table custom-table">
                                <thead>
                                    <tr>
                                        <th>Permission Key</th>
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($permission->children as $child)
                                        <tr>
                                            <td>
                                                <code class="text-primary">{{ $child->permission_key }}</code>
                                            </td>
                                            <td>{{ $child->description }}</td>
                                            <td>
                                                @if($child->is_active)
                                                    <span class="badge bg-success custom-badge">Active</span>
                                                @else
                                                    <span class="badge bg-warning custom-badge">Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex gap-2">
                                                    <a href="{{ route('permissions.show', $child) }}" 
                                                       class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('permissions.edit', $child) }}" 
                                                       class="btn btn-sm btn-outline-warning">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        
        <div class="col-lg-4">
            <!-- Timestamps -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-clock me-2"></i>
                        Timestamps
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Created</label>
                        <div class="p-2 bg-light rounded">
                            <i class="fas fa-calendar-plus me-2 text-primary"></i>
                            {{ $permission->created_at->format('M d, Y') }}
                            <br>
                            <small class="text-muted">{{ $permission->created_at->format('H:i:s') }}</small>
                        </div>
                    </div>
                    
                    @if($permission->updated_at != $permission->created_at)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Last Updated</label>
                            <div class="p-2 bg-light rounded">
                                <i class="fas fa-calendar-edit me-2 text-warning"></i>
                                {{ $permission->updated_at->format('M d, Y') }}
                                <br>
                                <small class="text-muted">{{ $permission->updated_at->format('H:i:s') }}</small>
                            </div>
                        </div>
                    @endif
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Age</label>
                        <div class="p-2 bg-light rounded">
                            <i class="fas fa-hourglass-half me-2 text-info"></i>
                            {{ $permission->created_at->diffForHumans() }}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Quick Actions -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        Quick Actions
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('permissions.edit', $permission) }}" class="btn btn-warning btn-custom">
                            <i class="fas fa-edit me-2"></i>Edit Permission
                        </a>
                        <a href="{{ route('permissions.create') }}" class="btn btn-success btn-custom">
                            <i class="fas fa-plus me-2"></i>Add Child Permission
                        </a>
                        <a href="{{ route('permissions.index') }}" class="btn btn-info btn-custom">
                            <i class="fas fa-list me-2"></i>View All Permissions
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Permission Statistics -->
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Statistics
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="bg-primary bg-opacity-10 rounded-circle p-3 mx-auto mb-2" style="width: 60px; height: 60px;">
                                <i class="fas fa-sitemap text-primary fa-2x"></i>
                            </div>
                            <h4 class="mb-0 text-primary">{{ $permission->children ? $permission->children->count() : 0 }}</h4>
                            <small class="text-muted">Children</small>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="bg-success bg-opacity-10 rounded-circle p-3 mx-auto mb-2" style="width: 60px; height: 60px;">
                                <i class="fas fa-users text-success fa-2x"></i>
                            </div>
                            <h4 class="mb-0 text-success">0</h4>
                            <small class="text-muted">Assigned Users</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    initializeTooltips();
});

function initializeTooltips() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}
</script>
@endsection