@extends('layouts.app')

@section('title', 'Postes Registrados')

@section('page_title', 'Visualizador de Estructuras')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <form action="{{ route('operations.structures.index') }}" method="GET" class="row align-items-end g-3">
                    <div class="col-md-4">
                        <label for="project-filter" class="form-label text-muted fw-semibold" style="font-size:0.8rem;">Filtrar por Proyecto</label>
                        <select name="project_id" id="project-filter" class="form-select">
                            <option value="">Todos los proyectos</option>
                            @foreach($projects as $proj)
                                <option value="{{ $proj->id }}" {{ request('project_id') == $proj->id ? 'selected' : '' }}>{{ $proj->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="tramo-filter" class="form-label text-muted fw-semibold" style="font-size:0.8rem;">Filtrar por Tramo</label>
                        <select name="tramo" id="tramo-filter" class="form-select">
                            <option value="">Todos los tramos</option>
                            @foreach($tramos as $t)
                                <option value="{{ $t }}" {{ request('tramo') == $t ? 'selected' : '' }}>{{ $t }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100"><i class="fa-solid fa-filter me-1"></i> Filtrar</button>
                    </div>
                    @if(request('project_id') || request('tramo'))
                        <div class="col-md-2">
                            <a href="{{ route('operations.structures.index') }}" class="btn btn-light border w-100">Limpiar</a>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0 text-slate-800"><i class="fa-solid fa-tower-broadcast text-primary me-2"></i>Estructuras Levantadas</h5>
                    <p class="text-muted text-xs mb-0 mt-1">Revise los detalles técnicos recopilados y apruebe/rechace los registros de campo.</p>
                </div>
            </div>
            <div class="card-body">
                @if($structures->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="fa-solid fa-database fa-3x mb-3 opacity-20 text-secondary"></i>
                        <p class="mb-0">No se encontraron estructuras registradas para la consulta.</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table align-middle table-hover" style="font-size:0.9rem;">
                            <thead class="table-light">
                                <tr>
                                    <th width="80" class="text-center">Item</th>
                                    <th>Código</th>
                                    <th>Tramo / Ubicación</th>
                                    <th>Coordenadas (Lat, Lng)</th>
                                    <th>Elemento de Red</th>
                                    <th>Fotos</th>
                                    <th class="text-center">Estado</th>
                                    <th width="200" class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($structures as $struct)
                                    <tr>
                                        <td class="text-center fw-bold text-slate-700">#{{ $struct->item }}</td>
                                        <td>
                                            <span class="badge bg-light text-dark border border-secondary border-opacity-10 fw-semibold">{{ $struct->structureCode }}</span>
                                        </td>
                                        <td>
                                            <span class="fw-medium text-slate-800">{{ $struct->tramo }}</span><br>
                                            <span class="text-xs text-secondary"><i class="fa-solid fa-diagram-project me-1"></i>{{ $struct->project_name ?: 'Sin Proyecto' }}</span><br>
                                            <small class="text-muted"><i class="fa-solid fa-map-location-dot me-1"></i>Lado: {{ $struct->location ?: 'N/A' }}</small>
                                        </td>
                                        <td>
                                            @if($struct->latitude && $struct->longitude)
                                                <code class="text-secondary">{{ number_format($struct->latitude, 6) }}, {{ number_format($struct->longitude, 6) }}</code>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            {{ $struct->typeNetworkElement }}
                                        </td>
                                        <td>
                                            @php
                                                $fotos = json_decode($struct->fotos, true) ?? [];
                                            @endphp
                                            @if(!empty($fotos))
                                                <div class="d-flex gap-1 flex-wrap">
                                                    @foreach($fotos as $index => $foto)
                                                        @php
                                                            $tenantId = tenant('id');
                                                            $imageUrl = asset("storage/tenants/{$tenantId}/images/{$foto}");
                                                        @endphp
                                                        <a href="{{ $imageUrl }}" target="_blank" class="d-inline-block border rounded" style="width: 32px; height: 32px; overflow: hidden;" title="Ver Foto {{ $index + 1 }}">
                                                            <img src="{{ $imageUrl }}" style="width: 100%; height: 100%; object-fit: cover;" />
                                                        </a>
                                                    @endforeach
                                                </div>
                                            @else
                                                <span class="text-muted text-xs">Sin fotos</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if($struct->status == 'approved')
                                                <span class="badge bg-success-subtle text-success border border-success-subtle"><i class="fa-solid fa-circle-check me-1"></i>Aprobado</span>
                                            @elseif($struct->status == 'rejected')
                                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle"><i class="fa-solid fa-circle-xmark me-1"></i>Rechazado</span>
                                            @else
                                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle"><i class="fa-solid fa-circle-pause me-1"></i>Pendiente</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center gap-1">
                                                <!-- Detalle Modal Button -->
                                                <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#detailModal{{ $struct->id }}" title="Ver Detalles">
                                                    <i class="fa-solid fa-eye"></i>
                                                </button>

                                                @if($struct->status == 'pending')
                                                    <form action="{{ route('operations.structures.approve', $struct->id) }}" method="POST" class="m-0">
                                                        @csrf
                                                        <button type="submit" class="btn btn-sm btn-success" title="Aprobar">
                                                            <i class="fa-solid fa-check"></i>
                                                        </button>
                                                    </form>
                                                    <form action="{{ route('operations.structures.reject', $struct->id) }}" method="POST" class="m-0">
                                                        @csrf
                                                        <button type="submit" class="btn btn-sm btn-danger" title="Rechazar">
                                                            <i class="fa-solid fa-times"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>

                                            <!-- Modal Detalle -->
                                            <div class="modal fade" id="detailModal{{ $struct->id }}" tabindex="-1" aria-labelledby="detailModalLabel{{ $struct->id }}" aria-hidden="true">
                                                <div class="modal-dialog modal-md">
                                                    <div class="modal-content text-start">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="detailModalLabel{{ $struct->id }}"><i class="fa-solid fa-circle-info text-info me-2"></i>Estructura #{{ $struct->item }} ({{ $struct->structureCode }})</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p class="text-muted text-xs">Registrado por: <b>{{ $struct->tech_name }}</b></p>
                                                            
                                                            <h6 class="border-bottom pb-1 mb-2 text-slate-800">Datos Principales</h6>
                                                            <table class="table table-sm table-bordered" style="font-size:0.85rem;">
                                                                <tr><th>Latitud</th><td>{{ $struct->latitude }}</td></tr>
                                                                <tr><th>Longitud</th><td>{{ $struct->longitude }}</td></tr>
                                                                <tr><th>Altitud</th><td>{{ $struct->altitude ?: '0' }} m</td></tr>
                                                            </table>

                                                            <h6 class="border-bottom pb-1 mb-2 mt-4 text-slate-800">Campos Dinámicos (Formulario)</h6>
                                                            @php
                                                                $dynamicData = json_decode($struct->dynamic_data, true) ?? [];
                                                            @endphp
                                                            @if(!empty($dynamicData))
                                                                <table class="table table-sm table-striped table-bordered" style="font-size:0.85rem;">
                                                                    @foreach($dynamicData as $key => $val)
                                                                        <tr>
                                                                            <th class="text-capitalize">{{ str_replace('_', ' ', $key) }}</th>
                                                                            <td>
                                                                                @if(is_bool($val))
                                                                                    {{ $val ? 'Sí' : 'No' }}
                                                                                @elseif(is_array($val))
                                                                                    @if(empty($val))
                                                                                        <span class="text-muted">—</span>
                                                                                    @else
                                                                                        <div class="d-flex flex-wrap gap-1">
                                                                                            @foreach($val as $item)
                                                                                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle" style="font-size:0.75rem;">{{ $item }}</span>
                                                                                            @endforeach
                                                                                        </div>
                                                                                    @endif
                                                                                @else
                                                                                    {{ $val }}
                                                                                @endif
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                </table>
                                                            @else
                                                                <p class="text-muted text-xs">No se enviaron datos dinámicos.</p>
                                                            @endif
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection