@extends('layouts.app')
@section('titulo', 'Detalle del Elemento')

@section('ruta')
<div class="mb-3 my-2 small">
    <h6>
        <a href="{{route('revision.index')}}">Revisiones</a> >
        <a href="{{route('revision.show', $revision->id)}}">Revisión en {{$revision->lugar->nombre}}</a> >
        <a href="{{route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id])}}">Central {{$central->nombre}}</a> > Detalle Elemento
    </h6>
</div>
@endsection

@section('contenido1')
<div class="card border-0">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title my-0 py-3 px-1">
            <i class="fas fa-microchip me-2 text-primary"></i>@yield('titulo')
        </h5>
        <div class="btn-group">
            <a href="{{ route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id]) }}" class="btn btn-secondary btn-sm">
                <i class="fa-solid fa-arrow-left"></i> Volver
            </a>
            <a href="{{ route('revision.centrales.elementos.edit', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-warning btn-sm">
                <i class="fa-solid fa-pen"></i> Editar
            </a>
            <form action="{{ route('revision.centrales.elementos.destroy', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('¿Estás seguro de que quieres eliminar este elemento?')">
                    <i class="fa-solid fa-trash"></i> Eliminar
                </button>
            </form>
        </div>
    </div>

    <div class="card-body">


        <!-- Información Principal -->
        <div class="row g-4">
            <!-- Identificación -->
            <div class="col-md-6">
                <div class="bg-light rounded p-3 h-100">
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-id-card me-2"></i>Identificación
                    </h6>
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label text-muted small">ID</label>
                            <div class="fw-bold">#{{ $elemento->id }}</div>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted small">Número</label>
                            <div class="fw-bold">{{ $elemento->numero }}</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label text-muted small">Nombre</label>
                            <div class="fw-bold">{{ $elemento->nombre ?: 'Sin nombre asignado' }}</div>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted small">Tipo</label>
                            <div>
                                <span class="badge bg-secondary fs-6">
                                    <i class="fas fa-tag me-1"></i>{{ $elemento->tipo ?: 'No especificado' }}
                                </span>
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted small">Estado</label>
                            <div>
                                @if($elemento->funciona === true)
                                    <span class="badge bg-success fs-6"><i class="fas fa-check me-1"></i>Operativo</span>
                                @elseif($elemento->funciona === false)
                                    <span class="badge bg-danger fs-6"><i class="fas fa-times me-1"></i>Defectuoso</span>
                                @else
                                    <span class="badge bg-warning fs-6"><i class="fas fa-clock me-1"></i>Pendiente</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ubicación Técnica -->
            <div class="col-md-6">
                <div class="bg-light rounded p-3 h-100">
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-map-marker-alt me-2"></i>Ubicación Técnica
                    </h6>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label text-muted small">Central</label>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-server me-2 text-secondary"></i>
                                <span class="fw-bold">{{ $central->nombre }}</span>
                                @if($central->en_red)
                                    <span class="badge bg-info ms-2">
                                        <i class="fas fa-network-wired me-1"></i>En Red
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted small">Zona</label>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-layer-group me-2 text-secondary"></i>
                                <span class="fw-bold">
                                    @if($elemento->zona)
                                        {{ $elemento->zona->numero }} - {{ $elemento->zona->nombre }}
                                    @else
                                        <span class="text-muted">Sin zona asignada</span>
                                    @endif
                                </span>
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted small">Lazo</label>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-link me-2 text-secondary"></i>
                                <span class="fw-bold">{{ $elemento->lazo ?: 'N/A' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Observaciones -->
        @if($elemento->observaciones)
        <div class="row mt-4">
            <div class="col-12">
                <div class="bg-light rounded p-3">
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-sticky-note me-2"></i>Observaciones
                    </h6>
                    <div class="border-start border-primary border-3 ps-3">
                        <p class="mb-0">{{ $elemento->observaciones }}</p>
                    </div>
                </div>
            </div>
        </div>
        @endif


    </div>
</div>



@endsection