@extends('v2-cms::layouts.app', ['title' => 'Novo Perfil'])

@section('page-breadcrumbs')
    <nav aria-label="Breadcrumb">
        <ol class="breadcrumb bg-transparent p-0 mb-0 small">
            <li class="breadcrumb-item"><a href="{{ route('v2.cms.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('v2.gestaopermissoes.permissions.index') }}" class="text-decoration-none">Infraestrutura</a></li>
            <li class="breadcrumb-item"><a href="{{ route('v2.gestaopermissoes.permissions.index') }}" class="text-decoration-none">Gestão de Permissões</a></li>
            <li class="breadcrumb-item"><a href="{{ route('v2.gestaopermissoes.roles.index') }}" class="text-decoration-none">Perfis</a></li>
            <li class="breadcrumb-item active" aria-current="page">Novo Perfil</li>
        </ol>
    </nav>
@endsection

@section('content')
    @php
        if (!function_exists('mapModuleIcon')) {
            function mapModuleIcon($faIcon) {
                $map = [
                    'fa fa-file-text-o' => 'bi bi-file-earmark-text',
                    'fa fa-home' => 'bi bi-house-door-fill',
                    'fa fa-shield' => 'bi bi-shield-fill-check',
                    'fa fa-universal-access' => 'bi bi-universal-access',
                    'fa fa-sitemap' => 'bi bi-diagram-3-fill',
                    'fa fa-comments' => 'bi bi-chat-left-text-fill',
                    'fa fa-gears' => 'bi bi-gear-fill',
                    'fa fa-gear' => 'bi bi-gear-fill',
                    'fa fa-users' => 'bi bi-people-fill',
                    'fa fa-tags' => 'bi bi-tags-fill',
                    'fa fa-plus' => 'bi bi-plus-lg'
                ];
                return $map[$faIcon] ?? 'bi bi-grid-fill';
            }
        }
    @endphp

<div class="row">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            @v2can('GestaoPermissoes', 'write')
            <form action="{{ route('v2.gestaopermissoes.roles.store') }}" method="POST">
                {{ csrf_field() }}

                <div class="card-body p-4">
                    <!-- Feedback de Erros de Validação -->
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show role-alert p-3 mb-4">
                            <h4 class="alert-heading h6 fw-bold d-flex align-items-center gap-2 mb-2">
                                <i class="bi bi-ban"></i> Atenção!
                            </h4>
                            <ul class="mb-0 ps-3">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
                        </div>
                    @endif

                    <div class="row g-3">
                        <div class="col-md-6 col-12">
                            <div class="mb-3">
                                <label for="name" class="form-label fw-bold">Nome do Perfil <span class="text-danger">*</span></label>
                                <input type="text" id="name" name="name" class="form-control" placeholder="Ex: Financeiro, Redator" value="{{ old('name') }}" required>
                            </div>
                        </div>

                        <div class="col-md-6 col-12">
                            <div class="mb-3">
                                <label for="slug" class="form-label fw-bold">Slug Identificador <span class="text-danger">*</span></label>
                                <input type="text" id="slug" name="slug" class="form-control" placeholder="Ex: financeiro, redator-v2" value="{{ old('slug') }}" required>
                                <div class="form-text mt-2">Nome de identificação único sem espaços ou caracteres especiais.</div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <!-- Matriz de Permissões por Módulo V2 -->
                    <h4 class="h5 fw-bold mb-2 d-flex align-items-center gap-2"><i class="bi bi-sliders text-primary"></i> Definir Níveis de Acesso por Módulo</h4>
                    <p class="text-muted small mb-4">Selecione o nível de permissão que os usuários deste perfil possuirão em cada módulo da V2:</p>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover align-middle mb-0" aria-label="Permissões disponíveis">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 35%;">Módulo</th>
                                    <th style="width: 25%;">Grupo</th>
                                    <th style="width: 40%; text-align: center;">Nível de Acesso</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($modules as $moduleKey => $config)
                                    <tr>
                                        <td>
                                            <i class="{{ mapModuleIcon($config['icon'] ?? '') }} text-primary me-2"></i>
                                            <strong>{{ $config['title'] ?? $moduleKey }}</strong>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $config['group'] ?? 'OUTROS' }}</span>
                                        </td>
                                        <td>
                                            <!-- Opções de Rádio Inline Bootstrap 5 -->
                                            <div class="d-flex justify-content-around align-items-center">
                                                <div class="form-check form-check-inline text-danger fw-bold">
                                                    <input class="form-check-input" type="radio" name="permissions[{{ $moduleKey }}]" id="perm_{{ $moduleKey }}_none" value="none" checked>
                                                    <label class="form-check-label" for="perm_{{ $moduleKey }}_none">
                                                        <i class="bi bi-ban"></i> Sem Acesso
                                                    </label>
                                                </div>
                                                
                                                <div class="form-check form-check-inline text-warning fw-bold">
                                                    <input class="form-check-input" type="radio" name="permissions[{{ $moduleKey }}]" id="perm_{{ $moduleKey }}_read" value="read">
                                                    <label class="form-check-label" for="perm_{{ $moduleKey }}_read">
                                                        <i class="bi bi-eye-fill"></i> Leitura
                                                    </label>
                                                </div>
                                                
                                                <div class="form-check form-check-inline text-success fw-bold">
                                                    <input class="form-check-input" type="radio" name="permissions[{{ $moduleKey }}]" id="perm_{{ $moduleKey }}_write" value="write">
                                                    <label class="form-check-label" for="perm_{{ $moduleKey }}_write">
                                                        <i class="bi bi-pencil-fill"></i> Leitura & Escrita
                                                    </label>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted py-4">
                                            Nenhum módulo V2 registrado no Core para configuração de permissões.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card-footer bg-light py-3 d-flex gap-2">
                    <button type="submit" class="btn btn-primary text-white fw-bold d-inline-flex align-items-center gap-1">
                        <i class="bi bi-check-lg"></i> Salvar Perfil
                    </button>
                    <a href="{{ route('v2.gestaopermissoes.roles.index') }}" class="btn btn-outline-secondary fw-bold">
                        Cancelar
                    </a>
                </div>
            </form>
            @else
                <div class="card-body p-4 text-center py-5">
                    <i class="bi bi-lock-fill text-muted" style="font-size: 2.5rem;" aria-hidden="true"></i>
                    <p class="text-muted mt-3 mb-0 fw-bold">Você não tem permissão de escrita neste módulo.</p>
                    <p class="text-muted small">Apenas super-administradores podem criar perfis de acesso.</p>
                </div>
            @endv2can
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Gerador automático de Slug amigável baseado no Nome do Perfil
    document.addEventListener('DOMContentLoaded', function() {
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');
        
        if (nameInput && slugInput) {
            nameInput.addEventListener('input', function() {
                if (slugInput.dataset.edited === 'true') return;
                
                let name = this.value;
                let slug = name.toString().toLowerCase()
                    .normalize('NFD').replace(/[\u0300-\u036f]/g, '') // remove acentos nativos
                    .replace(/[^a-z0-9 -]/g, '') // remove caracteres invalidos
                    .replace(/\s+/g, '-')        // substitui espacos por hifen
                    .replace(/-+/g, '-');        // evita multiplos hifens
                
                slugInput.value = slug;
            });
            
            slugInput.addEventListener('change', function() {
                this.dataset.edited = 'true';
            });
        }
    });
</script>
@endpush