@extends('layouts.app')
@section('titulo','Elementos de la Central')

@push('styles')
<style>
.transition-icon {
    transition: transform 0.3s ease;
}
.btn[aria-expanded="true"] .transition-icon {
    transform: rotate(90deg);
}
.btn-link {
    color: #333 !important;
}
.btn-link:hover {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05);
}
.accordion .card-header {
    border-bottom: 1px solid #dee2e6;
}
.accordion .collapse.show {
    border-top: 1px solid #dee2e6;
}
</style>
@endpush

@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.show', $revision->id)}}">Central {{$central->nombre}}</a> > Elementos</h6>
</div>
@endsection
@section('contenido1')

<div class="card border-0 mb-4">
    <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"></i>{{ $central->nombre }} - Elementos
        </h5>
        <div class="d-flex align-items-center gap-2 ms-auto">
            <div class="btn-group" role="group" aria-label="Vista">
                <a href="{{ route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id, 'vista' => 'lazo']) }}" class="btn btn-outline-secondary {{ ($vista ?? 'lazo') === 'lazo' ? 'active' : '' }}">
                    <i class="fas fa-project-diagram me-1"></i> Por Lazo
                </a>
                <a href="{{ route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id, 'vista' => 'zona']) }}" class="btn btn-outline-secondary {{ ($vista ?? 'lazo') === 'zona' ? 'active' : '' }}">
                    <i class="fas fa-layer-group me-1"></i> Por Zona
                </a>
                <a href="{{ route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id, 'vista' => 'pendientes']) }}" class="btn btn-outline-secondary {{ ($vista ?? 'lazo') === 'pendientes' ? 'active' : '' }}">
                    <i class="fas fa-clock me-1"></i> Pendientes
                </a>
            </div>
            <a href="{{ route('revision.centrales.elementos.create', ['revision' => $revision->id, 'centrale' => $central->id]) }}" class="btn btn-primary">
                <i class="fa-solid fa-plus"></i> NUEVO ELEMENTO
            </a>
        </div>
    </div>
    <div class="card-body">
        <!-- Información de la central -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="border rounded p-3">
                    <h6 class="text-muted mb-2"><i class="fas fa-info-circle me-2"></i>Información General</h6>
                    <div class="mb-2">
                        <strong>Central:</strong> {{ $central->nombre }}
                    </div>
                    <div class="mb-2">
                        <strong>Total Elementos:</strong> {{ $elementos->count() }}
                    </div>
                    <div class="mb-2">
                        <strong>Lazos Configurados:</strong> {{ $elementosPorLazo->count() }}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded p-3">
                    <h6 class="text-muted mb-2"><i class="fas fa-chart-pie me-2"></i>Distribución por Tipo</h6>
                    @php
                        $sensores = $elementos->filter(function($elem) { 
                            return $elem->tipoElemento && $elem->tipoElemento->tipo == 1; 
                        });
                        $modulos = $elementos->filter(function($elem) { 
                            return $elem->tipoElemento && $elem->tipoElemento->tipo == 2; 
                        });
                        $revisadosCount = $elementos->filter(function($elem) use ($revision) {
                            return $elem->ultimaPrueba && $elem->ultimaPrueba->id_revision == $revision->id;
                        })->count();
                    @endphp
                    <div class="mb-2">
                        <strong>Sensores:</strong> <span class="badge bg-info">{{ $sensores->count() }}</span>
                    </div>
                    <div class="mb-2">
                        <strong>Módulos:</strong> <span class="badge bg-warning">{{ $modulos->count() }}</span>
                    </div>
                    <div class="mb-2">
                        <strong>Revisados:</strong> <span class="badge bg-success">{{ $revisadosCount }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(($vista ?? 'lazo') === 'lazo')
<!-- Elementos agrupados por lazos -->
<div class="accordion" id="accordionLazos">
@foreach($elementosPorLazo->sortKeys() as $numeroLazo => $elementosLazo)
<div class="card border-0 mb-3">
    <div class="card-header bg-light p-0" id="heading{{ $numeroLazo }}">
        <h5 class="mb-0">
            <button class="btn btn-link w-100 text-start py-3 px-3 text-decoration-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $numeroLazo }}" aria-expanded="false" aria-controls="collapse{{ $numeroLazo }}">
                <i class="fas fa-chevron-right me-2 text-primary transition-icon"></i>
                <i class="fas fa-circle me-2 text-primary"></i>Lazo {{ $numeroLazo }}
                <span class="badge bg-primary ms-2">{{ $elementosLazo->count() }} Elementos</span>
                @php
                    $sensoresLazo = $elementosLazo->filter(function($elem) { 
                        return $elem->tipoElemento && $elem->tipoElemento->tipo == 1; 
                    });
                    $modulosLazo = $elementosLazo->filter(function($elem) { 
                        return $elem->tipoElemento && $elem->tipoElemento->tipo == 2; 
                    });
                @endphp
                <small class="text-muted ms-2">
                    ({{ $sensoresLazo->count() }} sensores, {{ $modulosLazo->count() }} módulos)
                </small>
            </button>
        </h5>
    </div>
    <div id="collapse{{ $numeroLazo }}" class="collapse" aria-labelledby="heading{{ $numeroLazo }}" data-bs-parent="#accordionLazos">
        <div class="card-body">
        @php
            // Separar sensores de módulos usando el tipo de la base de datos
            $sensores = $elementosLazo->filter(function($elemento) {
                return $elemento->tipoElemento && $elemento->tipoElemento->tipo == 1;
            })->sortBy('numero');
            
            $modulos = $elementosLazo->filter(function($elemento) {
                return $elemento->tipoElemento && $elemento->tipoElemento->tipo == 2;
            })->sortBy('numero');
        @endphp

        <!-- Sensores -->
        @if($sensores->count() > 0)
        <div class="mb-4">
            <h6 class="text-muted mb-3">
                <i class="fas fa-search me-2"></i>Sensores 
                <span class="badge bg-info ms-2">{{ $sensores->count() }}</span>
            </h6>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th style="width: 10%;">Lazo</th>
                            <th style="width: 12%;">Número</th>
                            <th style="width: 15%;">Tipo</th>
                            <th style="width: 30%;">Nombre</th>
                            <th style="width: 12%;">Comprobado</th>
                            <th style="width: 12%;">Nº Zona</th>
                            <th style="width: 12%;">Nombre Zona</th>
                            <th style="width: 9%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sensores as $elemento)
                        <tr>
                            <td class="text-center"><code>{{ $numeroLazo }}</code></td>
                            <td class="text-center"><code>{{ $elemento->numero }}</code></td>
                            <td class="text-center">
                                @if($elemento->tipoElemento)
                                    @php $abrev = $elemento->tipoElemento->abreviatura; @endphp
                                    @if($abrev == 'OPTI')
                                        <span class="badge bg-info">
                                            <i class="fas fa-eye me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'TER')
                                        <span class="badge bg-warning">
                                            <i class="fas fa-thermometer-half me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'MULT')
                                        <span class="badge bg-success">
                                            <i class="fas fa-layer-group me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'SMART 4')
                                        <span class="badge bg-primary">
                                            <i class="fas fa-microchip me-1"></i>{{ $abrev }}
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-circle me-1"></i>{{ $abrev }}
                                        </span>
                                    @endif
                                @else
                                    <span class="badge bg-secondary">N/A</span>
                                @endif
                            </td>
                            <td>{{ $elemento->nombre }}</td>
                            <td class="text-center">
                                @php $up = $elemento->ultimaPrueba; @endphp
                                @if($up && $up->estado)
                                    @if($up->estado === 'funciona')
                                        <span class="badge bg-success">Funciona</span>
                                    @elseif($up->estado === 'no funciona')
                                        <span class="badge bg-danger">No Funciona</span>
                                    @elseif($up->estado === 'pendiente')
                                        <span class="badge bg-warning">Pendiente</span>
                                    @endif
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $elemento->zona->numero ?? 'N/A' }}</span>
                            </td>
                            <td class="text-center">{{ $elemento->zona->nombre ?? 'Sin zona' }}</td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('revision.centrales.elementos.show', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-info" title="Ver detalles">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="{{ route('revision.centrales.elementos.edit', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-warning" title="Editar elemento">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <form action="{{ route('revision.centrales.elementos.marcar-pendiente', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-secondary" title="Marcar como pendiente" onclick="return confirm('¿Marcar este elemento como pendiente?')">
                                            <i class="fa-solid fa-clock"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('revision.centrales.elementos.marcar-no-funciona', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger" title="Marcar como no funciona" onclick="return confirm('¿Marcar este elemento como NO FUNCIONA?')">
                                            <i class="fa-solid fa-times-circle"></i>
                                        </button>
                                    </form>
                                    <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-outline-dark" title="Eliminar elemento" onclick="return confirm('¿Estás seguro de que quieres eliminar este elemento?')">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <!-- Módulos -->
        @if($modulos->count() > 0)
        <div class="mb-4">
            <h6 class="text-muted mb-3">
                <i class="fas fa-cogs me-2"></i>Módulos 
                <span class="badge bg-warning ms-2">{{ $modulos->count() }}</span>
            </h6>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th style="width: 10%;">Lazo</th>
                            <th style="width: 12%;">Número</th>
                            <th style="width: 15%;">Tipo</th>
                            <th style="width: 30%;">Nombre</th>
                            <th style="width: 12%;">Comprobado</th>
                            <th style="width: 12%;">Nº Zona</th>
                            <th style="width: 12%;">Nombre Zona</th>
                            <th style="width: 9%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($modulos as $elemento)
                        <tr>
                            <td class="text-center"><code>{{ $numeroLazo }}</code></td>
                            <td class="text-center"><code>{{ $elemento->numero }}</code></td>
                            <td class="text-center">
                                @if($elemento->tipoElemento)
                                    @php $abrev = $elemento->tipoElemento->abreviatura; @endphp
                                    @if($abrev == 'PUL')
                                        <span class="badge bg-primary">
                                            <i class="fas fa-hand-paper me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'SIRE')
                                        <span class="badge bg-danger">
                                            <i class="fas fa-volume-up me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'MON')
                                        <span class="badge bg-success">
                                            <i class="fas fa-desktop me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'CON')
                                        <span class="badge bg-info">
                                            <i class="fas fa-cog me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'AUX')
                                        <span class="badge bg-warning">
                                            <i class="fas fa-plug me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'ASPR')
                                        <span class="badge bg-dark">
                                            <i class="fas fa-water me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'SPRK')
                                        <span class="badge bg-info text-dark">
                                            <i class="fas fa-shower me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'ZMX')
                                        <span class="badge" style="background-color: #6f42c1; color: white;">
                                            <i class="fas fa-map-marker-alt me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'CDI')
                                        <span class="badge" style="background-color: #fd7e14; color: white;">
                                            <i class="fas fa-terminal me-1"></i>{{ $abrev }}
                                        </span>
                                    @elseif($abrev == 'BOOSTER')
                                        <span class="badge bg-dark">
                                            <i class="fas fa-rocket me-1"></i>{{ $abrev }}
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-circle me-1"></i>{{ $abrev }}
                                        </span>
                                    @endif
                                @else
                                    <span class="badge bg-secondary">N/A</span>
                                @endif
                            </td>
                            <td>{{ $elemento->nombre }}</td>
                            <td class="text-center">
                                @php $up = $elemento->ultimaPrueba; @endphp
                                @if($up && $up->estado)
                                    @if($up->estado === 'funciona')
                                        <span class="badge bg-success">Funciona</span>
                                    @elseif($up->estado === 'no funciona')
                                        <span class="badge bg-danger">No Funciona</span>
                                    @elseif($up->estado === 'pendiente')
                                        <span class="badge bg-warning">Pendiente</span>
                                    @endif
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $elemento->zona->numero ?? 'N/A' }}</span>
                            </td>
                            <td class="text-center">{{ $elemento->zona->nombre ?? 'Sin zona' }}</td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('revision.centrales.elementos.show', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-info" title="Ver detalles">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="{{ route('revision.centrales.elementos.edit', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-warning" title="Editar elemento">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <form action="{{ route('revision.centrales.elementos.marcar-pendiente', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-secondary" title="Marcar como pendiente" onclick="return confirm('¿Marcar este elemento como pendiente?')">
                                            <i class="fa-solid fa-clock"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('revision.centrales.elementos.marcar-no-funciona', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger" title="Marcar como no funciona" onclick="return confirm('¿Marcar este elemento como NO FUNCIONA?')">
                                            <i class="fa-solid fa-times-circle"></i>
                                        </button>
                                    </form>
                                    <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-outline-dark" title="Eliminar elemento" onclick="return confirm('¿Estás seguro de que quieres eliminar este elemento?')">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        @if($sensores->count() == 0 && $modulos->count() == 0)
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>No hay elementos registrados en este lazo.
        </div>
        @endif
        </div>
    </div>
    </div>
@endforeach
</div>
@elseif(($vista ?? 'lazo') === 'zona')
<!-- Elementos agrupados por zonas -->
<div class="accordion" id="accordionZonas">
@foreach($elementosPorZona->sortKeys() as $numeroZona => $elementosZona)
<div class="card border-0 mb-3">
    <div class="card-header bg-light p-0" id="headingZona{{ $numeroZona }}">
        <h5 class="mb-0">
            @php
                $sensoresZona = $elementosZona->filter(function($elem) { 
                    return $elem->tipoElemento && $elem->tipoElemento->tipo == 1; 
                });
                $modulosZona = $elementosZona->filter(function($elem) { 
                    return $elem->tipoElemento && $elem->tipoElemento->tipo == 2; 
                });
                
                $funcionanZona = $elementosZona->filter(function($elem) use ($revision) {
                    return $elem->ultimaPrueba && $elem->ultimaPrueba->id_revision == $revision->id && $elem->ultimaPrueba->estado === 'funciona';
                })->count();

                $pendientesZona = $elementosZona->filter(function($elem) use ($revision) {
                    return $elem->ultimaPrueba && $elem->ultimaPrueba->id_revision == $revision->id && $elem->ultimaPrueba->estado === 'pendiente';
                })->count();

                $noFuncionanZona = $elementosZona->filter(function($elem) use ($revision) {
                    return $elem->ultimaPrueba && $elem->ultimaPrueba->id_revision == $revision->id && $elem->ultimaPrueba->estado === 'no funciona';
                })->count();
            @endphp
            <button class="btn btn-link w-100 text-start py-3 px-3 text-decoration-none d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseZona{{ $numeroZona }}" aria-expanded="false" aria-controls="collapseZona{{ $numeroZona }}">
                <div class="d-flex align-items-center">
                    <i class="fas fa-chevron-right me-2 text-primary transition-icon"></i>
                    <i class="fas fa-layer-group me-2 text-primary"></i>
                    Zona {{ $numeroZona }}: {{ optional($elementosZona->first()->zona)->nombre ?? 'Sin nombre' }}
                    <span class="badge bg-primary ms-2">{{ $elementosZona->count() }} Elementos</span>
                    <small class="text-muted ms-2">
                        ({{ $sensoresZona->count() }} sensores, {{ $modulosZona->count() }} módulos)
                    </small>
                </div>
                <div class="d-flex align-items-center">
                    @if($funcionanZona > 0)
                        <span class="badge bg-success me-1">{{ $funcionanZona }} funcionan</span>
                    @endif
                    @if($pendientesZona > 0)
                        <span class="badge bg-warning me-1">{{ $pendientesZona }} pendientes</span>
                    @endif
                    @if($noFuncionanZona > 0)
                        <span class="badge bg-danger">{{ $noFuncionanZona }} no funcionan</span>
                    @endif
                </div>
            </button>
        </h5>
    </div>
    <div id="collapseZona{{ $numeroZona }}" class="collapse" aria-labelledby="headingZona{{ $numeroZona }}" data-bs-parent="#accordionZonas">
        <div class="card-body">
        @php
            // Separar sensores de módulos usando el tipo de la base de datos
            $sensores = $elementosZona->filter(function($elemento) {
                return $elemento->tipoElemento && $elemento->tipoElemento->tipo == 1;
            })->sortBy('numero');
            
            $modulos = $elementosZona->filter(function($elemento) {
                return $elemento->tipoElemento && $elemento->tipoElemento->tipo == 2;
            })->sortBy('numero');
        @endphp

        <!-- Sensores -->
        @if($sensores->count() > 0)
        <div class="mb-4">
            <h6 class="text-muted mb-3">
                <i class="fas fa-search me-2"></i>Sensores 
                <span class="badge bg-info ms-2">{{ $sensores->count() }}</span>
            </h6>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th style="width: 10%;">Lazo</th>
                            <th style="width: 12%;">Número</th>
                            <th style="width: 15%;">Tipo</th>
                            <th style="width: 30%;">Nombre</th>
                            <th style="width: 12%;">Comprobado</th>
                            <th style="width: 12%;">Nº Zona</th>
                            <th style="width: 12%;">Nombre Zona</th>
                            <th style="width: 9%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sensores as $elemento)
                        <tr>
                            <td class="text-center"><code>{{ $elemento->lazoRelation->numero ?? $elemento->lazo }}</code></td>
                            <td class="text-center"><code>{{ $elemento->numero }}</code></td>
                            <td class="text-center">
                                @include('user.contra_incendios.elemento.partials.tipo_badge', ['elemento' => $elemento])
                            </td>
                            <td>{{ $elemento->nombre }}</td>
                            <td class="text-center">
                                @php $up = $elemento->ultimaPrueba; @endphp
                                @if($up && $up->estado)
                                    @if($up->estado === 'funciona')
                                        <span class="badge bg-success">Funciona</span>
                                    @elseif($up->estado === 'no funciona')
                                        <span class="badge bg-danger">No Funciona</span>
                                    @elseif($up->estado === 'pendiente')
                                        <span class="badge bg-warning">Pendiente</span>
                                    @endif
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $elemento->zona->numero ?? 'N/A' }}</span>
                            </td>
                            <td class="text-center">{{ $elemento->zona->nombre ?? 'Sin zona' }}</td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('revision.centrales.elementos.show', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-info" title="Ver detalles">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="{{ route('revision.centrales.elementos.edit', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-warning" title="Editar elemento">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <form action="{{ route('revision.centrales.elementos.marcar-pendiente', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-secondary" title="Marcar como pendiente" onclick="return confirm('¿Marcar este elemento como pendiente?')">
                                            <i class="fa-solid fa-clock"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('revision.centrales.elementos.marcar-no-funciona', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger" title="Marcar como no funciona" onclick="return confirm('¿Marcar este elemento como NO FUNCIONA?')">
                                            <i class="fa-solid fa-times-circle"></i>
                                        </button>
                                    </form>
                                    <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-outline-dark" title="Eliminar elemento" onclick="return confirm('¿Estás seguro de que quieres eliminar este elemento?')">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <!-- Módulos -->
        @if($modulos->count() > 0)
        <div class="mb-4">
            <h6 class="text-muted mb-3">
                <i class="fas fa-cogs me-2"></i>Módulos 
                <span class="badge bg-warning ms-2">{{ $modulos->count() }}</span>
            </h6>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th style="width: 10%;">Lazo</th>
                            <th style="width: 12%;">Número</th>
                            <th style="width: 15%;">Tipo</th>
                            <th style="width: 30%;">Nombre</th>
                            <th style="width: 12%;">Comprobado</th>
                            <th style="width: 12%;">Nº Zona</th>
                            <th style="width: 12%;">Nombre Zona</th>
                            <th style="width: 9%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($modulos as $elemento)
                        <tr>
                            <td class="text-center"><code>{{ $elemento->lazoRelation->numero ?? $elemento->lazo }}</code></td>
                            <td class="text-center"><code>{{ $elemento->numero }}</code></td>
                            <td class="text-center">
                                @include('user.contra_incendios.elemento.partials.tipo_badge', ['elemento' => $elemento])
                            </td>
                            <td>{{ $elemento->nombre }}</td>
                            <td class="text-center">
                                @php $up = $elemento->ultimaPrueba; @endphp
                                @if($up && $up->estado)
                                    @if($up->estado === 'funciona')
                                        <span class="badge bg-success">Funciona</span>
                                    @elseif($up->estado === 'no funciona')
                                        <span class="badge bg-danger">No Funciona</span>
                                    @elseif($up->estado === 'pendiente')
                                        <span class="badge bg-warning">Pendiente</span>
                                    @endif
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $elemento->zona->numero ?? 'N/A' }}</span>
                            </td>
                            <td class="text-center">{{ $elemento->zona->nombre ?? 'Sin zona' }}</td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('revision.centrales.elementos.show', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-info" title="Ver detalles">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="{{ route('revision.centrales.elementos.edit', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-warning" title="Editar elemento">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <form action="{{ route('revision.centrales.elementos.marcar-pendiente', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-secondary" title="Marcar como pendiente" onclick="return confirm('¿Marcar este elemento como pendiente?')">
                                            <i class="fa-solid fa-clock"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('revision.centrales.elementos.marcar-no-funciona', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger" title="Marcar como no funciona" onclick="return confirm('¿Marcar este elemento como NO FUNCIONA?')">
                                            <i class="fa-solid fa-times-circle"></i>
                                        </button>
                                    </form>
                                    <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-outline-dark" title="Eliminar elemento" onclick="return confirm('¿Estás seguro de que quieres eliminar este elemento?')">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
        </div>
    </div>
</div>
@endforeach
</div>
@elseif(($vista ?? 'lazo') === 'pendientes')
<!-- Elementos pendientes agrupados por zonas -->
<div class="accordion" id="accordionPendientes">
@foreach($elementosPendientesPorZona->sortKeys() as $numeroZona => $elementosZona)
<div class="card border-0 mb-3">
    <div class="card-header bg-light p-0" id="headingPendiente{{ $numeroZona }}">
        <h5 class="mb-0">
            @php
                $sensoresZona = $elementosZona->filter(function($elem) { 
                    return $elem->tipoElemento && $elem->tipoElemento->tipo == 1; 
                });
                $modulosZona = $elementosZona->filter(function($elem) { 
                    return $elem->tipoElemento && $elem->tipoElemento->tipo == 2; 
                });
            @endphp
            <button class="btn btn-link w-100 text-start py-3 px-3 text-decoration-none d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePendiente{{ $numeroZona }}" aria-expanded="false" aria-controls="collapsePendiente{{ $numeroZona }}">
                <div class="d-flex align-items-center">
                    <i class="fas fa-chevron-right me-2 text-warning transition-icon"></i>
                    <i class="fas fa-clock me-2 text-warning"></i>
                    Zona {{ $numeroZona }}: {{ optional($elementosZona->first()->zona)->nombre ?? 'Sin nombre' }}
                    <span class="badge bg-warning ms-2">{{ $elementosZona->count() }} Pendientes</span>
                    <small class="text-muted ms-2">
                        ({{ $sensoresZona->count() }} sensores, {{ $modulosZona->count() }} módulos)
                    </small>
                </div>
            </button>
        </h5>
    </div>
    <div id="collapsePendiente{{ $numeroZona }}" class="collapse" aria-labelledby="headingPendiente{{ $numeroZona }}" data-bs-parent="#accordionPendientes">
        <div class="card-body">
        @php
            // Separar sensores de módulos usando el tipo de la base de datos
            $sensores = $elementosZona->filter(function($elemento) {
                return $elemento->tipoElemento && $elemento->tipoElemento->tipo == 1;
            })->sortBy('numero');
            
            $modulos = $elementosZona->filter(function($elemento) {
                return $elemento->tipoElemento && $elemento->tipoElemento->tipo == 2;
            })->sortBy('numero');
        @endphp

        <!-- Sensores -->
        @if($sensores->count() > 0)
        <div class="mb-4">
            <h6 class="text-muted mb-3">
                <i class="fas fa-search me-2"></i>Sensores 
                <span class="badge bg-info ms-2">{{ $sensores->count() }}</span>
            </h6>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th style="width: 10%;">Lazo</th>
                            <th style="width: 12%;">Número</th>
                            <th style="width: 15%;">Tipo</th>
                            <th style="width: 30%;">Nombre</th>
                            <th style="width: 12%;">Comprobado</th>
                            <th style="width: 12%;">Nº Zona</th>
                            <th style="width: 12%;">Nombre Zona</th>
                            <th style="width: 9%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sensores as $elemento)
                        <tr>
                            <td class="text-center"><code>{{ $elemento->lazoRelation->numero ?? $elemento->lazo }}</code></td>
                            <td class="text-center"><code>{{ $elemento->numero }}</code></td>
                            <td class="text-center">
                                @include('user.contra_incendios.elemento.partials.tipo_badge', ['elemento' => $elemento])
                            </td>
                            <td>{{ $elemento->nombre }}</td>
                            <td class="text-center">
                                <span class="badge bg-warning">Pendiente</span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $elemento->zona->numero ?? 'N/A' }}</span>
                            </td>
                            <td class="text-center">{{ $elemento->zona->nombre ?? 'Sin zona' }}</td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('revision.centrales.elementos.show', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-info" title="Ver detalles">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="{{ route('revision.centrales.elementos.edit', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-warning" title="Editar elemento">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <form action="{{ route('revision.centrales.elementos.marcar-pendiente', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-secondary" title="Marcar como pendiente" onclick="return confirm('¿Marcar este elemento como pendiente?')">
                                            <i class="fa-solid fa-clock"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('revision.centrales.elementos.marcar-no-funciona', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger" title="Marcar como no funciona" onclick="return confirm('¿Marcar este elemento como NO FUNCIONA?')">
                                            <i class="fa-solid fa-times-circle"></i>
                                        </button>
                                    </form>
                                    <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-outline-dark" title="Eliminar elemento" onclick="return confirm('¿Estás seguro de que quieres eliminar este elemento?')">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <!-- Módulos -->
        @if($modulos->count() > 0)
        <div class="mb-4">
            <h6 class="text-muted mb-3">
                <i class="fas fa-cogs me-2"></i>Módulos 
                <span class="badge bg-warning ms-2">{{ $modulos->count() }}</span>
            </h6>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                        <tr class="text-center">
                            <th style="width: 10%;">Lazo</th>
                            <th style="width: 12%;">Número</th>
                            <th style="width: 15%;">Tipo</th>
                            <th style="width: 30%;">Nombre</th>
                            <th style="width: 12%;">Comprobado</th>
                            <th style="width: 12%;">Nº Zona</th>
                            <th style="width: 12%;">Nombre Zona</th>
                            <th style="width: 9%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($modulos as $elemento)
                        <tr>
                            <td class="text-center"><code>{{ $elemento->lazoRelation->numero ?? $elemento->lazo }}</code></td>
                            <td class="text-center"><code>{{ $elemento->numero }}</code></td>
                            <td class="text-center">
                                @include('user.contra_incendios.elemento.partials.tipo_badge', ['elemento' => $elemento])
                            </td>
                            <td>{{ $elemento->nombre }}</td>
                            <td class="text-center">
                                <span class="badge bg-warning">Pendiente</span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-secondary">{{ $elemento->zona->numero ?? 'N/A' }}</span>
                            </td>
                            <td class="text-center">{{ $elemento->zona->nombre ?? 'Sin zona' }}</td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <a href="{{ route('revision.centrales.elementos.show', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-info" title="Ver detalles">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a href="{{ route('revision.centrales.elementos.edit', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" class="btn btn-outline-warning" title="Editar elemento">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <form action="{{ route('revision.centrales.elementos.marcar-pendiente', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-secondary" title="Marcar como pendiente" onclick="return confirm('¿Marcar este elemento como pendiente?')">
                                            <i class="fa-solid fa-clock"></i>
                                        </button>
                                    </form>
                                    <form action="{{ route('revision.centrales.elementos.marcar-no-funciona', ['revision' => $revision->id, 'centrale' => $central->id, 'elemento' => $elemento->id]) }}" method="POST" style="display:inline">
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger" title="Marcar como no funciona" onclick="return confirm('¿Marcar este elemento como NO FUNCIONA?')">
                                            <i class="fa-solid fa-times-circle"></i>
                                        </button>
                                    </form>
                                    <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-outline-dark" title="Eliminar elemento" onclick="return confirm('¿Estás seguro de que quieres eliminar este elemento?')">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
        </div>
    </div>
</div>
@endforeach
</div>
@endif

@if($elementosPorLazo->count() == 0)
<div class="card border-0">
    <div class="card-body text-center">
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <strong>No hay elementos registrados</strong><br>
            <small>Comience añadiendo elementos a esta central.</small>
        </div>
        <a href="{{ route('revision.centrales.elementos.create', ['revision' => $revision->id, 'centrale' => $central->id]) }}" class="btn btn-primary">
            <i class="fa-solid fa-plus me-2"></i>Crear Primer Elemento
        </a>
    </div>
</div>
@endif

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Verificar si hay una zona específica que abrir automáticamente
    @if(isset($zonaIdAbrir) && $zonaIdAbrir)
        // Verificar que estamos en vista de zona
        if ('{{ $vista }}' !== 'zona') {
            return;
        }
        
        // Buscar la zona por ID en los elementos
        @foreach($elementosPorZona as $numeroZona => $elementosZona)
            @foreach($elementosZona as $elemento)
                @if($elemento->zona && $elemento->zona->id == $zonaIdAbrir)
                    // Abrir automáticamente esta zona
                    const zonaCollapse = document.getElementById('collapseZona{{ $numeroZona }}');
                    
                    if (zonaCollapse) {
                        // Usar Bootstrap para abrir el acordeón
                        const bsCollapse = new bootstrap.Collapse(zonaCollapse, {
                            show: true
                        });
                        
                        // Scroll suave hacia la zona abierta
                        setTimeout(() => {
                            zonaCollapse.scrollIntoView({ 
                                behavior: 'smooth', 
                                block: 'start' 
                            });
                        }, 300);
                    }
                    @break
                @endif
            @endforeach
        @endforeach
    @endif
});
</script>
@endsection