@extends('layouts.app')

@section('title', 'Detalle Mantenimiento #' . $mantenimiento->prog_id)
@section('page-title', 'Detalle del Mantenimiento')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('web.mantenimientos.index') }}">Mantenimientos</a></li>
    <li class="breadcrumb-item active">#{{ $mantenimiento->prog_id }}</li>
@endsection

@push('styles')
    <link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="mant-detalle-container">
        {{-- Cabecera del mantenimiento --}}
        <div class="mant-header">
            <div class="mant-header-info">
                <div class="mant-titulo">
                    <h2>
                        <i class="fas fa-tools me-2"></i>
                        {{ $mantenimiento->centro->nombre_centro ?? 'N/A' }}
                    </h2>
                    <span class="mant-concesion">{{ $mantenimiento->centro->concesion->nombre ?? '' }}</span>
                </div>
                <div class="mant-meta">
                    <span class="meta-item">
                        <i class="fas fa-hashtag"></i>
                        {{ $mantenimiento->prog_id }}
                    </span>
                    <span class="meta-item">
                        <i class="fas fa-calendar"></i>
                        @if($mantenimiento->fecha_fin && $mantenimiento->fecha_fin->format('Y-m-d') !== $mantenimiento->fecha_programada->format('Y-m-d'))
                            {{ $mantenimiento->fecha_programada->format('d/m/Y') }} -
                            {{ $mantenimiento->fecha_fin->format('d/m/Y') }}
                        @else
                            {{ $mantenimiento->fecha_programada->format('d/m/Y') }}
                        @endif
                    </span>
                    @if($mantenimiento->tecnico)
                        <span class="meta-item">
                            <i class="fas fa-user-cog"></i>
                            {{ $mantenimiento->tecnico->usu_nombre }} {{ $mantenimiento->tecnico->usu_apellido }}
                        </span>
                    @endif
                </div>
            </div>
            <div class="mant-header-estado">
                <span class="estado-badge-lg"
                    style="--estado-color: {{ $mantenimiento->estadoMantenimiento->color_hex ?? '#9E9E9E' }}">
                    {{ $mantenimiento->estadoMantenimiento->estado_nombre ?? 'N/A' }}
                </span>
            </div>
        </div>

        {{-- Progreso General --}}
        <div class="progreso-general-card">
            <div class="progreso-header">
                <h5><i class="fas fa-chart-pie me-2"></i>Progreso General</h5>
            </div>
            <div class="progreso-body">
                <div class="progreso-circular">
                    <svg viewBox="0 0 36 36" class="circular-chart">
                        <path class="circle-bg"
                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <path class="circle" stroke-dasharray="{{ $progresoGeneral['porcentaje'] }}, 100"
                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <text x="18" y="20.35" class="percentage">{{ $progresoGeneral['porcentaje'] }}%</text>
                    </svg>
                </div>
                <div class="progreso-stats">
                    <div class="stat-item">
                        <span class="stat-numero">{{ $progresoGeneral['total_vias'] }}</span>
                        <span class="stat-label">Vías</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-numero">{{ $progresoGeneral['total_equipos'] }}</span>
                        <span class="stat-label">Equipos</span>
                    </div>
                    <div class="stat-item">
                        <span
                            class="stat-numero">{{ $progresoGeneral['items_respondidos'] }}/{{ $progresoGeneral['total_items'] }}</span>
                        <span class="stat-label">Items Revisados</span>
                    </div>
                    <div
                        class="stat-item {{ $progresoGeneral['evidencias'] >= $progresoGeneral['evidencias_minimo'] ? 'text-success' : 'text-warning' }}">
                        <span
                            class="stat-numero">{{ $progresoGeneral['evidencias'] }}/{{ $progresoGeneral['evidencias_minimo'] }}</span>
                        <span class="stat-label">Evidencias</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabs de contenido --}}
        <div class="mant-tabs-container">
            <ul class="nav nav-tabs mant-tabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-vias" type="button">
                        <i class="fas fa-road me-1"></i>
                        Vías y Equipos
                        <span
                            class="badge bg-primary ms-1">{{ $progresoGeneral['vias_con_revision'] }}/{{ $progresoGeneral['total_vias'] }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-historial" type="button">
                        <i class="fas fa-history me-1"></i>
                        Historial
                        <span class="badge bg-secondary ms-1">{{ $mantenimiento->historialEstados->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-evidencias" type="button">
                        <i class="fas fa-camera me-1"></i>
                        Evidencias
                        <span class="badge bg-secondary ms-1">{{ $mantenimiento->evidencias->count() }}</span>
                    </button>
                </li>
                @if($mantenimiento->aprobacion)
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-aprobacion" type="button">
                            <i class="fas fa-check-double me-1"></i>
                            Aprobación
                        </button>
                    </li>
                @endif
            </ul>

            <div class="tab-content mant-tab-content">
                {{-- Tab: Vías y Equipos --}}
                <div class="tab-pane fade show active" id="tab-vias">
                    {{-- Vías con equipos revisados --}}
                    @forelse($progresoVias as $viaData)
                        <div class="via-card">
                            <div class="via-header" data-bs-toggle="collapse"
                                data-bs-target="#via-{{ $viaData['via']->via_id }}">
                                <div class="via-info">
                                    <i class="fas fa-road via-icon"></i>
                                    <div class="via-nombre">
                                        <strong>{{ $viaData['via']->nombre }}</strong>
                                        <small>{{ $viaData['total_equipos'] }} equipos revisados</small>
                                    </div>
                                </div>
                                <div class="via-progreso">
                                    <div class="progreso-barra-via">
                                        <div class="progreso-fill" style="width: {{ $viaData['porcentaje'] }}%"></div>
                                    </div>
                                    <span class="progreso-texto">{{ $viaData['porcentaje'] }}%</span>
                                    <i class="fas fa-chevron-down collapse-icon"></i>
                                </div>
                            </div>

                            <div class="collapse show" id="via-{{ $viaData['via']->via_id }}">
                                <div class="via-body">
                                    @foreach($viaData['equipos'] as $equipoData)
                                        <div class="equipo-card estado-{{ $equipoData['estado'] }}">
                                            <div class="equipo-header" data-bs-toggle="collapse"
                                                data-bs-target="#equipo-{{ $viaData['via']->via_id }}-{{ $equipoData['equipo']->inventario_id }}">
                                                <div class="equipo-info">
                                                    <span class="equipo-tipo">
                                                        <i class="fas fa-microchip"></i>
                                                        {{ $equipoData['equipo']->tipoHardware->nombre ?? 'Equipo' }}
                                                    </span>
                                                    <span class="equipo-detalle">
                                                        {{ $equipoData['equipo']->marca->nombre ?? '' }}
                                                        {{ $equipoData['equipo']->modelo ?? '' }}
                                                    </span>
                                                    @if($equipoData['equipo']->serie)
                                                        <span class="equipo-serie">S/N: {{ $equipoData['equipo']->serie }}</span>
                                                    @endif
                                                </div>
                                                <div class="equipo-estado">
                                                    @if($equipoData['estado'] == 'completado')
                                                        <span class="badge bg-success"><i class="fas fa-check"></i> Completado</span>
                                                    @elseif($equipoData['estado'] == 'con_observaciones')
                                                        <span class="badge bg-warning"><i class="fas fa-exclamation-triangle"></i> Con
                                                            observaciones</span>
                                                    @elseif($equipoData['estado'] == 'en_progreso')
                                                        <span class="badge bg-info"><i class="fas fa-spinner"></i> En progreso</span>
                                                    @else
                                                        <span class="badge bg-secondary"><i class="fas fa-clock"></i> Pendiente</span>
                                                    @endif
                                                    <span
                                                        class="equipo-progreso">{{ $equipoData['items_respondidos'] }}/{{ $equipoData['total_items'] }}</span>
                                                    <i class="fas fa-chevron-down collapse-icon ms-2"></i>
                                                </div>
                                            </div>

                                            @if($equipoData['respuestas']->isNotEmpty())
                                                <div class="collapse"
                                                    id="equipo-{{ $viaData['via']->via_id }}-{{ $equipoData['equipo']->inventario_id }}">
                                                    <div class="equipo-checklist">
                                                        <table class="tabla-checklist">
                                                            <thead>
                                                                <tr>
                                                                    <th>Item</th>
                                                                    <th>Estado</th>
                                                                    <th>Medición</th>
                                                                    <th>Observación</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach($equipoData['respuestas'] as $respuesta)
                                                                    <tr>
                                                                        <td>{{ $respuesta->itemRevision->nombre ?? 'N/A' }}</td>
                                                                        <td>
                                                                            @if($respuesta->estadoEquipo)
                                                                                <span class="estado-equipo-badge"
                                                                                    style="--color: {{ $respuesta->estadoEquipo->color_hex ?? '#666' }}">
                                                                                    {{ $respuesta->estadoEquipo->nombre }}
                                                                                </span>
                                                                            @else
                                                                                -
                                                                            @endif
                                                                        </td>
                                                                        <td>{{ $respuesta->valor_medicion ?? '-' }}</td>
                                                                        <td>
                                                                            @if($respuesta->observacion)
                                                                                <span class="observacion-texto"
                                                                                    title="{{ $respuesta->observacion }}">
                                                                                    {{ Str::limit($respuesta->observacion, 40) }}
                                                                                </span>
                                                                            @else
                                                                                -
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @empty
                        {{-- No hay vías con equipos revisados --}}
                    @endforelse

                    {{-- Vías pendientes (sin equipos revisados) --}}
                    @if($viasPendientes->isNotEmpty())
                        <div class="vias-pendientes-card mt-3">
                            <div class="vias-pendientes-header">
                                <i class="fas fa-clock text-warning me-2"></i>
                                <span>Vías pendientes de revisión:</span>
                            </div>
                            <div class="vias-pendientes-body">
                                @foreach($viasPendientes as $via)
                                    <span class="badge bg-light text-secondary">
                                        <i class="fas fa-road me-1"></i>{{ $via->nombre }}
                                    </span>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    {{-- Si no hay ninguna revisión --}}
                    @if(count($progresoVias) == 0)
                        <div class="empty-state">
                            <i class="fas fa-clipboard-list"></i>
                            <p>No se han registrado revisiones de equipos aún</p>
                            <small class="text-muted">El técnico aún no ha iniciado el checklist de este mantenimiento</small>
                        </div>
                    @endif
                </div>

                {{-- Tab: Historial --}}
                <div class="tab-pane fade" id="tab-historial">
                    <div class="historial-timeline">
                        @forelse($mantenimiento->historialEstados as $historial)
                            <div class="timeline-item">
                                <div class="timeline-marker"
                                    style="background-color: {{ $historial->estadoNuevo->color_hex ?? '#666' }}"></div>
                                <div class="timeline-content">
                                    <div class="timeline-header">
                                        <span
                                            class="timeline-estado">{{ $historial->estadoNuevo->estado_nombre ?? 'N/A' }}</span>
                                        <span
                                            class="timeline-fecha">{{ $historial->fecha_cambio ? \Carbon\Carbon::parse($historial->fecha_cambio)->format('d/m/Y H:i') : '' }}</span>
                                    </div>
                                    <div class="timeline-body">
                                        @if($historial->usuarioEjecuta)
                                            <p class="timeline-usuario">
                                                <i class="fas fa-user"></i>
                                                {{ $historial->usuarioEjecuta->name }}
                                                {{ $historial->usuarioEjecuta->usu_apellido }}
                                            </p>
                                        @endif
                                        @if($historial->observaciones)
                                            <p class="timeline-obs">{{ $historial->observaciones }}</p>
                                        @endif
                                        @if($historial->latitud && $historial->longitud)
                                            <p class="timeline-gps">
                                                <i class="fas fa-map-marker-alt"></i>
                                                <a href="https://maps.google.com/?q={{ $historial->latitud }},{{ $historial->longitud }}"
                                                    target="_blank">
                                                    Ver ubicación
                                                </a>
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="empty-state">
                                <i class="fas fa-history"></i>
                                <p>No hay historial de cambios</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                {{-- Tab: Evidencias --}}
                <div class="tab-pane fade" id="tab-evidencias">
                    <div class="evidencias-grid">
                        @forelse($mantenimiento->evidencias as $evidencia)
                            <div class="evidencia-card">
                                @if(in_array($evidencia->tipo, ['imagen', 'foto']))
                                    <div class="evidencia-preview">
                                        <img src="{{ $evidencia->url ?? asset('assets/img/no-image.png') }}"
                                            alt="{{ $evidencia->nombre_archivo }}">
                                    </div>
                                @else
                                    <div class="evidencia-preview evidencia-file">
                                        <i class="fas fa-file-alt"></i>
                                    </div>
                                @endif
                                <div class="evidencia-info">
                                    <span class="evidencia-nombre" title="{{ $evidencia->nombre_archivo }}">
                                        {{ Str::limit($evidencia->nombre_archivo, 25) }}
                                    </span>
                                    @if($evidencia->descripcion)
                                        <span class="evidencia-desc">{{ $evidencia->descripcion }}</span>
                                    @endif
                                    <div class="evidencia-meta">
                                        @if($evidencia->latitud && $evidencia->longitud)
                                            <span class="meta-gps" title="Con GPS">
                                                <i class="fas fa-map-marker-alt text-success"></i>
                                            </span>
                                        @endif
                                        <span class="meta-size">{{ $evidencia->tamanio_formateado ?? '' }}</span>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="empty-state">
                                <i class="fas fa-camera"></i>
                                <p>No hay evidencias cargadas</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                {{-- Tab: Aprobación --}}
                @if($mantenimiento->aprobacion)
                    <div class="tab-pane fade" id="tab-aprobacion">
                        <div class="aprobacion-card">
                            <div
                                class="aprobacion-header {{ $mantenimiento->aprobacion->tipo == 'APROBADO' ? 'aprobado' : 'rechazado' }}">
                                @if($mantenimiento->aprobacion->tipo == 'APROBADO')
                                    <i class="fas fa-check-circle"></i>
                                    <span>Mantenimiento Aprobado</span>
                                @else
                                    <i class="fas fa-times-circle"></i>
                                    <span>Mantenimiento Rechazado</span>
                                @endif
                            </div>
                            <div class="aprobacion-body">
                                <div class="aprobacion-detalle">
                                    <label>Fecha de aprobación:</label>
                                    <span>{{ $mantenimiento->aprobacion->fecha_aprobacion ? \Carbon\Carbon::parse($mantenimiento->aprobacion->fecha_aprobacion)->format('d/m/Y H:i') : '-' }}</span>
                                </div>
                                <div class="aprobacion-detalle">
                                    <label>Jefe Operativo:</label>
                                    <span>{{ $mantenimiento->aprobacion->jefeOperativo->usu_nombre ?? '' }}
                                        {{ $mantenimiento->aprobacion->jefeOperativo->usu_apellido ?? '' }}</span>
                                </div>
                                @if($mantenimiento->aprobacion->observaciones)
                                    <div class="aprobacion-detalle">
                                        <label>Observaciones:</label>
                                        <span>{{ $mantenimiento->aprobacion->observaciones }}</span>
                                    </div>
                                @endif
                                @if($mantenimiento->aprobacion->motivo_rechazo)
                                    <div class="aprobacion-detalle rechazo">
                                        <label>Motivo de rechazo:</label>
                                        <span>{{ $mantenimiento->aprobacion->motivo_rechazo }}</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Botón volver --}}
        <div class="mant-footer">
            <a href="{{ route('web.mantenimientos.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i> Volver al listado
            </a>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Expandir primera vía automáticamente si hay pocas
            const vias = document.querySelectorAll('.via-card');
            if (vias.length <= 3) {
                vias.forEach(via => {
                    const collapse = via.querySelector('.collapse');
                    if (collapse) {
                        collapse.classList.add('show');
                    }
                });
            }

            // Rotar icono al expandir/colapsar
            document.querySelectorAll('.via-header').forEach(header => {
                header.addEventListener('click', function () {
                    const icon = this.querySelector('.collapse-icon');
                    icon.classList.toggle('rotated');
                });
            });
        });
    </script>
@endpush