@extends('layouts.app')
@section('titulo', 'Revisión en ' . $revision->lugar->nombre)
@section('contenido1')

<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4 mt-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('revision.index') }}"><i class="fas fa-list"></i> Revisiones</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ $revision->lugar->nombre }}</li>
    </ol>
</nav>

<!-- Header de la Revisión -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-light border-bottom">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h4 class="mb-1 text-dark"><i class="fas fa-fire me-2 text-primary"></i>{{ $revision->lugar->nombre }}</h4>

            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('revision.monitor', $revision->id) }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-play"></i> Comenzar Revisión
                </a>
                <a href="{{ route('revision.edit', $revision->id) }}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-edit"></i> Editar Revisión
                </a>
                
                <!-- Botón Unificado de Generar Documentos -->
                @if($plantillasInforme->count() > 0 || $plantillasCertificado->count() > 0)
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-file-alt"></i> Generar Documento
                        </button>
                        <ul class="dropdown-menu">
                            @if($plantillasInforme->count() > 0)
                                <li><h6 class="dropdown-header"><i class="fas fa-file-alt me-2"></i>Informes</h6></li>
                                @foreach($plantillasInforme as $plantilla)
                                    <li>
                                        <a class="dropdown-item" href="{{ route('revision.generar-informe', ['revisionId' => $revision->id, 'templateId' => $plantilla->id]) }}">
                                            <i class="fas fa-file-alt me-2 text-primary"></i>{{ $plantilla->name }}
                                        </a>
                                    </li>
                                @endforeach
                                @if($plantillasCertificado->count() > 0)
                                    <li><hr class="dropdown-divider"></li>
                                @endif
                            @endif
                            
                            @if($plantillasCertificado->count() > 0)
                                <li><h6 class="dropdown-header"><i class="fas fa-certificate me-2"></i>Certificados</h6></li>
                                @foreach($plantillasCertificado as $plantilla)
                                    <li>
                                        <a class="dropdown-item" href="{{ route('revision.generar-certificado', ['revisionId' => $revision->id, 'templateId' => $plantilla->id]) }}">
                                            <i class="fas fa-certificate me-2 text-success"></i>{{ $plantilla->name }}
                                        </a>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                @endif
                
                @if(!$revision->completada)
                    <button type="button" class="btn btn-outline-success btn-sm" onclick="marcarCompletada()">
                        <i class="fas fa-check"></i> Completar
                    </button>
                @endif
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <!-- Columna Izquierda: Información de la Revisión, Fechas y Estadísticas -->
            <div class="col-lg-8">
                <!-- Información de la Revisión y Fechas -->
                <div class="row mb-4">
                    <!-- Información Principal -->
                    <div class="col-md-6">
                        <div class="card border-0 bg-light h-100">
                            <div class="card-body">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>Información de la Revisión
                                </h6>
                                
                                <!-- Estado y Progreso -->
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-grow-1">
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="badge bg-{{ $revision->progreso_color }} fs-6 me-2">{{ $revision->porcentaje_revisado }}%</span>
                                            <span class="text-muted small">Completado</span>
                                        </div>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-{{ $revision->progreso_color }}" 
                                                 style="width: {{ $revision->porcentaje_revisado }}%" 
                                                 role="progressbar" 
                                                 aria-valuenow="{{ $revision->porcentaje_revisado }}" 
                                                 aria-valuemin="0" 
                                                 aria-valuemax="100">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Detalles de la Revisión -->
                                <div class="row g-2">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between align-items-center py-1">
                                            <span class="text-muted small">Tipo de Revisión:</span>
                                            <span class="badge bg-secondary">{{ $revision->tipo_revision_nombre }}</span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between align-items-center py-1">
                                            <span class="text-muted small">Duración:</span>
                                            <span class="fw-semibold">{{ number_format($revision->duracion, 0) }} días</span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between align-items-center py-1">
                                            <span class="text-muted small">Elementos Revisados:</span>
                                            <span class="fw-semibold">
                                                @php
                                                    $revisionId = $revision->id;
                                                    $elementosRevisados = $revision->centrales->sum(function($central) use ($revisionId) { 
                                                        return $central->elementos->filter(function($elemento) use ($revisionId) {
                                                            return $elemento->pruebasRealizadas()->where('id_revision', $revisionId)->exists();
                                                        })->count();
                                                    });
                                                    $totalElementos = $revision->centrales->sum(function($central) { 
                                                        return $central->elementos->count(); 
                                                    });
                                                @endphp
                                                {{ $elementosRevisados }} / {{ $totalElementos }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between align-items-center py-1">
                                            <span class="text-muted small">Estado:</span>
                                            @if($revision->completada)
                                                <span class="badge bg-success"><i class="fas fa-check me-1"></i>Completada</span>
                                            @else
                                                <span class="badge bg-warning"><i class="fas fa-clock me-1"></i>En Progreso</span>
                                            @endif
                                        </div>
                                    </div>
                        </div>
                        </div>
                        </div>
                    </div>

                    <!-- Fechas y Tiempo -->
                    <div class="col-md-6">
                        <div class="card border-0 bg-light h-100">
                            <div class="card-body">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-calendar-alt me-2"></i>Fechas y Tiempo
                                </h6>
                                
                                <div class="row g-2">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between align-items-center py-1">
                                            <span class="text-muted small">Fecha de Inicio:</span>
                                            <span class="fw-semibold">{{ $revision->fecha_inicio->format('d/m/Y') }}</span>
                                        </div>
                                    </div>
                                    @if($revision->fecha_fin)
                                        <div class="col-12">
                                            <div class="d-flex justify-content-between align-items-center py-1">
                                                <span class="text-muted small">Fecha de Fin:</span>
                                                <span class="fw-semibold">{{ $revision->fecha_fin->format('d/m/Y') }}</span>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between align-items-center py-1">
                                            <span class="text-muted small">Días Transcurridos:</span>
                                            <span class="fw-semibold">{{ number_format($revision->duracion, 0) }} días</span>
                                        </div>
                        </div>
                        @if($revision->fecha_fin)
                                        <div class="col-12">
                                            <div class="d-flex justify-content-between align-items-center py-1">
                                                <span class="text-muted small">Duración Total:</span>
                                                <span class="fw-semibold">{{ number_format(\Carbon\Carbon::parse($revision->fecha_inicio)->diffInDays($revision->fecha_fin), 0) }} días</span>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Estadísticas Generales -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm text-center">
                            <div class="card-body">
                                <i class="fas fa-server fa-2x text-primary mb-2"></i>
                                <h4 class="mb-0">{{ $revision->centrales->count() }}</h4>
                                <small class="text-muted">Centrales</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm text-center">
                            <div class="card-body">
                                <i class="fas fa-layer-group fa-2x text-info mb-2"></i>
                                <h4 class="mb-0">{{ $revision->centrales->sum(function($central) { return $central->zonas->count(); }) }}</h4>
                                <small class="text-muted">Zonas</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm text-center">
                            <div class="card-body">
                                <i class="fas fa-microchip fa-2x text-success mb-2"></i>
                                <h4 class="mb-0">{{ $revision->centrales->sum(function($central) { return $central->elementos->count(); }) }}</h4>
                                <small class="text-muted">Elementos</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm text-center">
                            <div class="card-body">
                                <i class="fas fa-check-circle fa-2x text-warning mb-2"></i>
                                <h4 class="mb-0">
                                    @php
                                        $revisionId = $revision->id;
                                        $elementosRevisados = $revision->centrales->sum(function($central) use ($revisionId) { 
                                            return $central->elementos->filter(function($elemento) use ($revisionId) {
                                                return $elemento->pruebasRealizadas()->where('id_revision', $revisionId)->exists();
                                            })->count();
                                        });
                                    @endphp
                                    {{ $elementosRevisados }}
                                </h4>
                                <small class="text-muted">Revisados</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Centrales de Alarma -->
                <div class="card border-0 shadow-sm mt-4">
                    <div class="card-header bg-light">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="fas fa-server me-2"></i>Centrales de Alarma</h5>
                            <a href="{{ route('revision.centrales.nueva', $revision->id) }}" class="btn btn-success btn-sm">
                                <i class="fas fa-plus"></i> Nueva Central
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        @if($revision->centrales->isEmpty())
                            <div class="text-center py-5">
                                <i class="fas fa-server fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">No hay centrales configuradas</h5>
                                <p class="text-muted">Comienza agregando una central de alarma para esta revisión.</p>
                                <a href="{{ route('revision.centrales.nueva', $revision->id) }}" class="btn btn-primary">
                                    <i class="fas fa-plus"></i> Agregar Primera Central
                                </a>
                            </div>
                        @else
                            <div class="row">
                                @foreach($revision->centrales as $central)
                                    <div class="col-md-6 col-lg-4 mb-4">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-header bg-light">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <h6 class="mb-0">
                                                        <i class="fas fa-server me-2"></i>{{ $central->nombre }}
                                                    </h6>
                                                    @if($central->en_red)
                                                        <span class="badge bg-info"><i class="fas fa-network-wired"></i> Red</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="row text-center mb-3">
                                                    <div class="col-4">
                                                        <div class="border-end">
                                                            <h6 class="mb-0 text-primary">{{ $central->zonas->count() }}</h6>
                                                            <small class="text-muted">Zonas</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="border-end">
                                                            <h6 class="mb-0 text-success">{{ $central->elementos->count() }}</h6>
                                                            <small class="text-muted">Elementos</small>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="mb-0 text-warning">
                                                            @php
                                                                $elementosRevisadosCentral = $central->elementos->filter(function($elemento) use ($revision) {
                                                                    return $elemento->pruebasRealizadas()->where('id_revision', $revision->id)->exists();
                                                                })->count();
                                                            @endphp
                                                            {{ $elementosRevisadosCentral }}
                                                        </h6>
                                                        <small class="text-muted">Revisados</small>
                                                    </div>
                                                </div>
                                                
                                                <div class="d-grid gap-2">
                                                    <a href="{{ route('revision.centrales.zonas.index', ['revision' => $revision->id, 'centrale' => $central->id]) }}" 
                                                       class="btn btn-outline-primary btn-sm">
                                                        <i class="fas fa-layer-group"></i> Gestionar Zonas
                                                    </a>
                                                    <a href="{{ route('revision.centrales.elementos.index', ['revision' => $revision->id, 'centrale' => $central->id]) }}" 
                                                       class="btn btn-outline-info btn-sm">
                                                        <i class="fas fa-microchip"></i> Ver Elementos
                                                    </a>
                                                    <a href="{{ route('revision.recuento', ['revision' => $revision->id]) }}" 
                                                       class="btn btn-outline-success btn-sm">
                                                        <i class="fas fa-calculator"></i> Recuento
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="card-footer bg-light">
                                                <div class="btn-group w-100" role="group">
                                                    <a href="{{ route('revision.centrales.edit', ['revision' => $revision->id, 'centrale' => $central->id]) }}" 
                                                       class="btn btn-outline-warning btn-sm">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <form action="{{ route('revision.centrales.destroy', ['revision' => $revision->id, 'centrale' => $central->id]) }}" 
                                                          method="POST" class="d-inline" 
                                                          onsubmit="return confirm('¿Estás seguro de que quieres eliminar esta central?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-outline-danger btn-sm">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Columna Derecha: Ubicación -->
            <div class="col-lg-4">
                
                <!-- Información de Ubicación -->
                <div class="card border-0 bg-light">
                    <div class="card-body">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-map-marker-alt me-2"></i>Información de Ubicación
                        </h6>
                        
                        <!-- Información de Contacto -->
                        <div class="mb-3">
                            <!-- Mapa de Ubicación -->
                            <div id="map" style="height: 300px;"></div>

                            <div class="d-flex align-items-start mb-2 mt-3">
                                <i class="fas fa-building text-muted me-2 mt-1"></i>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold small">Dirección:</div>
                                    <div class="text-muted small">{{ $revision->lugar->direccion }}</div>
                                </div>
                            </div>
                            
                            <div class="d-flex align-items-start mb-2">
                                <i class="fas fa-city text-muted me-2 mt-1"></i>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold small">Población:</div>
                                    <div class="text-muted small">{{ $revision->lugar->poblacion }}</div>
                                </div>
                            </div>

                            @if($revision->lugar->codigo_postal)
                                <div class="d-flex align-items-start mb-2">
                                    <i class="fas fa-mail-bulk text-muted me-2 mt-1"></i>
                                    <div class="flex-grow-1">
                                        <div class="fw-semibold small">Código Postal:</div>
                                        <div class="text-muted small">{{ $revision->lugar->codigo_postal }}</div>
                                    </div>
                                </div>
                            @endif

                            @if($revision->lugar->provincia)
                                <div class="d-flex align-items-start mb-2">
                                    <i class="fas fa-map text-muted me-2 mt-1"></i>
                                    <div class="flex-grow-1">
                                        <div class="fw-semibold small">Provincia:</div>
                                        <div class="text-muted small">{{ getNombreProvincia($revision->lugar->provincia) }}</div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Información de Contacto -->
                        @if($revision->lugar->telefono || $revision->lugar->sitio_web)
                            <div class="border-top pt-3">
                                <h6 class="text-muted small mb-2">Contacto</h6>
                                
                                @if($revision->lugar->telefono)
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-phone text-muted me-2"></i>
                                        <div class="flex-grow-1">
                                            <div class="fw-semibold small">Teléfono:</div>
                                            <a href="tel:{{ $revision->lugar->telefono }}" class="text-decoration-none small">
                                                {{ $revision->lugar->telefono }}
                                            </a>
                                        </div>
                                    </div>
                                @endif

                                @if($revision->lugar->sitio_web)
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-globe text-muted me-2"></i>
                                        <div class="flex-grow-1">
                                            <div class="fw-semibold small">Sitio Web:</div>
                                            <a href="{{ $revision->lugar->sitio_web }}" target="_blank" class="text-decoration-none small">
                                                {{ $revision->lugar->sitio_web }}
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif

                        <!-- Información Adicional -->
                        @if($revision->lugar->tipo || $revision->lugar->horario)
                            <div class="border-top pt-3 mt-3">
                                <h6 class="text-muted small mb-2">Información Adicional</h6>
                                
                                @if($revision->lugar->tipo)
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-tag text-muted me-2"></i>
                                        <div class="flex-grow-1">
                                            <div class="fw-semibold small">Tipo:</div>
                                            <div class="text-muted small">{{ getNombreTipoLugar($revision->lugar->tipo) }}</div>
                                        </div>
                                    </div>
                                @endif

                                @if($revision->lugar->horario)
                                    <div class="d-flex align-items-start mb-2">
                                        <i class="fas fa-clock text-muted me-2 mt-1"></i>
                                        <div class="flex-grow-1">
                                            <div class="fw-semibold small">Horario:</div>
                                            <div class="text-muted small">{{ $revision->lugar->horario }}</div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Documentos Generados -->
@if($documentosGenerados->count() > 0)
    <div class="card border-0 shadow-sm mt-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>Documentos Generados</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Documento</th>
                            <th>Tipo</th>
                            <th>Fecha</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($documentosGenerados as $documento)
                            <tr>
                                <td>{{ $documento->template->name }}</td>
                                <td>
                                    <span class="badge bg-{{ $documento->template->type == 'informe' ? 'primary' : 'success' }}">
                                        {{ ucfirst($documento->template->type) }}
                                    </span>
                                </td>
                                <td>{{ $documento->generated_at->format('d/m/Y H:i') }}</td>
                                <td>
                                    @if($documento->hasFile())
                                        <a href="{{ route('templates.responses.download', $documento->id) }}" 
                                           class="btn btn-outline-primary btn-sm" 
                                           title="Descargar">
                                            <i class="fas fa-download"></i>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endif

<!-- Botón de Volver -->
<div class="text-center mt-4">
    <a href="{{ route('revision.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Volver a Revisiones
    </a>
</div>

@endsection

@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
    .progress {
        border-radius: 10px;
    }
    .card {
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-2px);
    }
    
    /* Mejoras para el diseño responsive */
    @media (max-width: 768px) {
        .card-body {
            padding: 1rem;
        }
        .h-100 {
            height: auto !important;
        }
        .d-flex.justify-content-between {
            flex-direction: column;
            align-items: flex-start !important;
        }
        .d-flex.justify-content-between .badge,
        .d-flex.justify-content-between .fw-semibold {
            margin-top: 0.25rem;
        }
    }
    
    @media (max-width: 576px) {
        .col-lg-8, .col-lg-4 {
            margin-bottom: 1rem;
        }
        .card-body {
            padding: 0.75rem;
        }
        .mb-3 {
            margin-bottom: 1rem !important;
        }
    }
    
    /* Mejoras visuales */
    .bg-light {
        background-color: #f8f9fa !important;
    }
    .text-primary {
        color: #0d6efd !important;
    }
    .border-0 {
        border: 0 !important;
    }
    .shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }
    
    /* Iconos mejorados */
    .fas {
        font-size: 0.875rem;
    }
    
    /* Enlaces mejorados */
    a.text-decoration-none:hover {
        text-decoration: underline !important;
    }
</style>
@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
function marcarCompletada() {
    if (confirm('¿Estás seguro de que quieres marcar esta revisión como completada?')) {
        // Aquí podrías hacer una llamada AJAX para marcar como completada
        window.location.href = "{{ route('revision.edit', $revision->id) }}";
    }
}

// Inicializar el mapa
document.addEventListener('DOMContentLoaded', function() {
    var map = L.map('map').setView([{{ $revision->lugar->latitud }}, {{ $revision->lugar->longitud }}], 18);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(map);

    // Marcador en la posición del lugar
    L.marker([{{ $revision->lugar->latitud }}, {{ $revision->lugar->longitud }}]).addTo(map);
});
</script>
@endsection