@use('App\Services\MenuService')
@use('App\Services\PermissionsService')
@extends('layouts.main')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white border-bottom">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center gap-3">
                                <x-buttons.back-small name="role" :route="route('role.index')" />
                                <h4 class="mb-0 fw-semibold text-dark">{{ $title }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <!-- Basic Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card bg-light border-0">
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <i class="fas fa-user-tag text-primary fs-4"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <small class="text-muted fw-medium d-block">{{ __('validation.attributes.name') }}</small>
                                                        <span class="fw-semibold text-dark">{{ $role->name }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <i class="fas fa-calendar-plus text-success fs-4"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <small class="text-muted fw-medium d-block">{{ __('validation.attributes.created_by') }}</small>
                                                        <span class="fw-semibold text-dark">{{ $role->created_by_name }}</span>
                                                        <br>
                                                        <small class="text-muted">{{ $role->created_at_display }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                            @if(!empty($role->updated_by))
                                            <div class="col-md-6">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <i class="fas fa-calendar-check text-info fs-4"></i>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <small class="text-muted fw-medium d-block">{{ __('validation.attributes.updated_by') }}</small>
                                                        <span class="fw-semibold text-dark">{{ $role->updated_by_name }}</span>
                                                        <br>
                                                        <small class="text-muted">{{ $role->updated_at_display }}</small>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Permissions Section -->
                        @php
                            $defaultPermissions = PermissionsService::getDefaultPermissions();
                        @endphp

                        <div class="row">
                            <div class="col-12">
                                <h5 class="fw-bold text-dark mb-4">
                                    <i class="fas fa-shield-alt text-primary me-2"></i>
                                    {{ __('Permissions') }}
                                </h5>

                                @foreach(MenuService::$menus as $menuKey => $menuParent)
                                    @php
                                        $permissions = $defaultPermissions->where('main_menu', '=', $menuKey);
                                    @endphp

                                    <div class="card border-0 shadow-sm mb-4">
                                        <div class="card-header bg-primary bg-opacity-10 border-0">
                                            <h6 class="mb-0 fw-semibold text-primary">
                                                <i class="fa {{ $menuParent['icon'] }} me-2"></i>
                                                {{ __('module.' . $menuKey) }}
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row g-3">
                                                @foreach($permissions as $moduleType => $permission)
                                                    @php
                                                        $rolePermission = $role->permissions->where('module_type', '=', $moduleType)->first()?->permissions;
                                                    @endphp

                                                    <div class="col-12">
                                                        <div class="d-flex align-items-start">
                                                            <div class="flex-shrink-0">
                                                                <i class="fas fa-cog text-muted mt-1"></i>
                                                            </div>
                                                            <div class="flex-grow-1 ms-3">
                                                                <h6 class="fw-semibold text-dark mb-2">{{ __('module.' . $moduleType) }}</h6>
                                                                <div class="d-flex flex-wrap gap-2">
                                                                    @foreach($permission['options'] as $option)
                                                                        <span class="badge {{ isset($rolePermission[$option]) && $rolePermission[$option] ? 'bg-success' : 'bg-secondary' }} rounded-pill px-3 py-2">
                                                                            <i class="fas {{ isset($rolePermission[$option]) && $rolePermission[$option] ? 'fa-check' : 'fa-times' }} me-1"></i>
                                                                            {{ ucwords(Str::snake($option, ' ')) }}
                                                                        </span>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection