construprogress/resources/views/livewire/projects/feature-manager.blade.php

<x-slot name="header">
    <div class="flex items-center justify-between">
        {{-- Izquierda: avatar + datos --}}
        <div class="flex items-center gap-4">
            {{-- Avatar --}}
            <div>
                <h2 class="font-bold text-xl leading-tight">{{ $project->name }}</h2>
                @if($project->description)
                    <p class="text-sm text-gray-500 leading-tight mt-0.5">{{ Str::limit($project->description, 80) }}</p>
                @endif
            </div>
        </div>
        
        {{-- Derecha: estado + botones --}}
        <div class="flex flex-col items-end gap-2">
            <div class="flex items-center gap-2">
                <a href="{{ route('projects.list') }}" class="btn btn-ghost btn-sm px-2">
                    <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
                </a>
                {{-- Estado --}}
                @php
                    $statusCfg = match($project->status) {
                        'in_progress' => ['badge-primary',  'En progreso'],
                        'completed'   => ['badge-success',  'Completado'],
                        'paused'      => ['badge-warning',  'Pausado'],
                        'planning'    => ['badge-ghost',    'Planificación'],
                        default       => ['badge-ghost',    ucfirst(str_replace('_',' ',$project->status))],
                    };
                @endphp
                <span class="badge {{ $statusCfg[0] }} badge-sm">{{ $statusCfg[1] }}</span>
            </div>
            {{-- Botones --}}
            <div class="flex gap-2 mt-1">
                <a href="{{ route('projects.map', $project) }}" class="btn btn-outline btn-sm gap-1">
                    <x-heroicon-o-map class="w-4 h-4" />
                    Mapa
                </a>
                @can('edit layers')
                    <a href="{{ route('projects.features', $project) }}" class="btn btn-outline btn-sm gap-1">
                        <x-heroicon-o-cube class="w-4 h-4" />
                        Elementos
                    </a>
                @endcan
                @can('edit projects')
                    <a href="{{ route('projects.templates', $project) }}" class="btn btn-outline btn-sm gap-1">
                        <x-heroicon-o-clipboard-document-list class="w-4 h-4" />
                        Plantillas
                    </a>
                @endcan
                <a href="{{ route('projects.gantt', $project) }}" class="btn btn-outline btn-sm gap-1">
                    <x-heroicon-o-calendar-days class="w-4 h-4" />
                    Gantt
                </a>
                <a href="{{ route('projects.issues', $project) }}" class="btn btn-outline btn-sm gap-1">
                    <x-heroicon-o-exclamation-triangle class="w-4 h-4" />
                    Issues
                </a>
                @can('view tasks')
                    <a href="{{ route('projects.tasks', $project) }}" class="btn btn-outline btn-sm gap-1">
                        <x-heroicon-o-clipboard-document-list class="w-4 h-4" />
                        Tareas
                    </a>
                @endcan
            </div>
        </div>
    </div>
</x-slot>

<div class="py-6">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <a href="{{ route('projects.dashboard', $project) }}" wire:navigate class="btn btn-ghost btn-sm gap-1 mb-3">
            <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
        </a>

        <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
            <div>
                <h1 class="text-xl font-bold">Elementos del proyecto</h1>
                <p class="text-sm text-base-content/60">{{ $project->name }} · editar nombre, tipo, activar/desactivar o eliminar</p>
            </div>
            <a href="{{ route('feature-types') }}" wire:navigate class="btn btn-outline btn-sm gap-1">
                <x-heroicon-o-tag class="w-4 h-4" /> Tipos de elemento
            </a>
        </div>

        <div class="bg-white rounded-xl shadow p-6">
            <livewire:projects.project-features-table :project-id="$project->id" :key="'pft-'.$project->id" />
        </div>
    </div>
</div>

{{-- Modal editar elemento --}}
@if($showForm)
    <div class="fixed inset-0 z-40 bg-black/50" wire:click="$set('showForm', false)"></div>
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div class="bg-base-100 rounded-box shadow-2xl w-full max-w-md">
            <div class="flex items-center justify-between p-4 border-b border-base-300">
                <h3 class="font-bold">Editar elemento</h3>
                <button wire:click="$set('showForm', false)" class="btn btn-sm btn-ghost btn-circle"><x-heroicon-o-x-mark class="w-4 h-4" /></button>
            </div>
            <form wire:submit.prevent="save" class="p-4 space-y-3">
                <div class="form-control">
                    <label class="label"><span class="label-text font-medium">Nombre <span class="text-error">*</span></span></label>
                    <input type="text" wire:model="name" autofocus class="input input-bordered w-full @error('name') input-error @enderror" />
                    @error('name')<span class="text-xs text-error">{{ $message }}</span>@enderror
                </div>
                <div class="form-control">
                    <label class="label"><span class="label-text font-medium">Tipo de elemento</span></label>
                    <select wire:model="featureTypeId" class="select select-bordered w-full">
                        <option value="">Sin tipo</option>
                        @foreach($featureTypes as $ft)
                            <option value="{{ $ft->id }}">{{ $ft->name }}</option>
                        @endforeach
                    </select>
                    @if($featureTypes->isEmpty())
                        <span class="text-xs text-base-content/50 mt-1">No hay tipos.
                            <a href="{{ route('feature-types') }}" wire:navigate class="link link-primary">Crear tipos</a>
                        </span>
                    @endif
                </div>
                <div class="form-control">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" wire:model="isActive" class="toggle toggle-success toggle-sm" />
                        <span class="label-text">Activo</span>
                    </label>
                </div>
                <div class="flex justify-end gap-2 pt-2 border-t border-base-300">
                    <button type="button" wire:click="$set('showForm', false)" class="btn btn-ghost btn-sm">Cancelar</button>
                    <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                </div>
            </form>
        </div>
    </div>
@endif