@extends('layouts.app')

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

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

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .aprob-container {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 1.5rem;
    }

    @media (max-width: 1200px) {
        .aprob-container {
            grid-template-columns: 1fr;
        }
    }

    .aprob-main {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .aprob-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .card-aprob {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }

    .card-aprob-header {
        padding: 1rem 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .card-aprob-header h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1a3a5c;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .card-aprob-body {
        padding: 1.25rem;
    }

    /* Header del mantenimiento */
    .mant-info-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .mant-titulo h3 {
        margin: 0 0 0.25rem;
        color: #1a3a5c;
        font-size: 1.25rem;
    }

    .mant-titulo .concesion {
        color: #64748b;
        font-size: 0.9rem;
    }

    .mant-badges {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    /* Validaciones */
    .validaciones-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .validacion-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 6px;
        background: #f8fafc;
    }

    .validacion-item.cumple {
        background: rgba(16, 185, 129, 0.1);
    }

    .validacion-item.no-cumple {
        background: rgba(239, 68, 68, 0.1);
    }

    .validacion-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }

    .validacion-item.cumple .validacion-icon {
        background: #10b981;
        color: #fff;
    }

    .validacion-item.no-cumple .validacion-icon {
        background: #ef4444;
        color: #fff;
    }

    .validacion-texto {
        flex: 1;
        font-size: 0.85rem;
        color: #334155;
    }

    /* Botones de acción */
    .acciones-aprob {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn-aprobar {
        background: #10b981;
        border-color: #10b981;
        color: #fff;
        padding: 0.75rem 1rem;
        font-weight: 600;
    }

    .btn-aprobar:hover {
        background: #059669;
        border-color: #059669;
        color: #fff;
    }

    .btn-aprobar:disabled {
        background: #94a3b8;
        border-color: #94a3b8;
    }

    .btn-rechazar {
        background: #fff;
        border-color: #ef4444;
        color: #ef4444;
        padding: 0.75rem 1rem;
        font-weight: 600;
    }

    .btn-rechazar:hover {
        background: #fef2f2;
        border-color: #dc2626;
        color: #dc2626;
    }

    /* Info cards */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .info-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-item label {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.5px;
    }

    .info-item span {
        font-size: 0.9rem;
        color: #1a3a5c;
        font-weight: 500;
    }

    /* Progress circular pequeño */
    .progress-circular-sm {
        width: 60px;
        height: 60px;
    }

    .progress-circular-sm .percentage {
        font-size: 0.4em;
    }

    /* Modal de rechazo */
    .modal-rechazo .modal-header {
        background: #fef2f2;
        border-bottom: 1px solid #fecaca;
    }

    .modal-rechazo .modal-title {
        color: #dc2626;
    }

    /* Tecnico card */
    .tecnico-card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: #f8fafc;
        border-radius: 6px;
    }

    .tecnico-avatar-lg {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #1a3a5c;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

    .tecnico-data {
        flex: 1;
    }

    .tecnico-data .nombre {
        font-weight: 600;
        color: #1a3a5c;
    }

    .tecnico-data .rol {
        font-size: 0.8rem;
        color: #64748b;
    }

    /* Resumen de progreso */
    .resumen-progreso {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;
    }

    .resumen-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        flex: 1;
    }

    .resumen-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .resumen-stat .numero {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1a3a5c;
    }

    .resumen-stat .label {
        font-size: 0.7rem;
        color: #64748b;
        text-transform: uppercase;
    }

    /* Sticky sidebar */
    @media (min-width: 1200px) {
        .aprob-sidebar {
            position: sticky;
            top: 1rem;
            max-height: calc(100vh - 2rem);
            overflow-y: auto;
        }
    }
</style>
@endpush

@section('content')
<div class="aprob-container">
    {{-- Columna principal --}}
    <div class="aprob-main">
        {{-- Header del mantenimiento --}}
        <div class="card-aprob">
            <div class="card-aprob-body">
                <div class="mant-info-header">
                    <div class="mant-titulo">
                        <h3>
                            <i class="fas fa-road me-2"></i>
                            {{ $mantenimiento->centro->nombre_centro ?? 'N/A' }}
                        </h3>
                        <span class="concesion">{{ $mantenimiento->centro->concesion->nombre ?? '' }}</span>
                    </div>
                    <div class="mant-badges">
                        <span class="badge bg-primary">#{{ $mantenimiento->prog_id }}</span>
                        <span class="badge" style="background-color: {{ $mantenimiento->estadoMantenimiento->color_hex ?? '#666' }}">
                            {{ $mantenimiento->estadoMantenimiento->estado_nombre ?? 'N/A' }}
                        </span>
                    </div>
                </div>

                <hr class="my-3">

                <div class="info-grid">
                    <div class="info-item">
                        <label>Fecha Programada</label>
                        <span>
                            <i class="fas fa-calendar me-1 text-secondary"></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>
                    </div>
                    <div class="info-item">
                        <label>Vías del Peaje</label>
                        <span>{{ $progresoGeneral['total_vias'] }} vías</span>
                    </div>
                </div>

                @if($mantenimiento->tecnico)
                <div class="tecnico-card mt-3">
                    <div class="tecnico-avatar-lg">
                        {{ strtoupper(substr($mantenimiento->tecnico->usu_nombre ?? 'N', 0, 1)) }}{{ strtoupper(substr($mantenimiento->tecnico->usu_apellido ?? 'A', 0, 1)) }}
                    </div>
                    <div class="tecnico-data">
                        <div class="nombre">{{ $mantenimiento->tecnico->usu_nombre }} {{ $mantenimiento->tecnico->usu_apellido }}</div>
                        <div class="rol">Técnico Asignado</div>
                    </div>
                </div>
                @endif
            </div>
        </div>

        {{-- Resumen de Progreso --}}
        <div class="card-aprob">
            <div class="card-aprob-header">
                <h5><i class="fas fa-chart-pie"></i> Resumen del Trabajo</h5>
            </div>
            <div class="card-aprob-body">
                <div class="resumen-progreso">
                    <div class="progreso-circular progress-circular-sm">
                        <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="resumen-stats">
                        <div class="resumen-stat">
                            <span class="numero">{{ $progresoGeneral['vias_con_revision'] }}/{{ $progresoGeneral['total_vias'] }}</span>
                            <span class="label">Vías Revisadas</span>
                        </div>
                        <div class="resumen-stat">
                            <span class="numero">{{ $progresoGeneral['total_equipos'] }}</span>
                            <span class="label">Equipos</span>
                        </div>
                        <div class="resumen-stat">
                            <span class="numero">{{ $progresoGeneral['items_respondidos'] }}/{{ $progresoGeneral['total_items'] }}</span>
                            <span class="label">Items Checklist</span>
                        </div>
                        <div class="resumen-stat">
                            <span class="numero {{ $progresoGeneral['cumple_evidencias'] ? 'text-success' : 'text-warning' }}">{{ $progresoGeneral['evidencias'] }}</span>
                            <span class="label">Evidencias</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Vías y Equipos --}}
        <div class="card-aprob">
            <div class="card-aprob-header">
                <h5>
                    <i class="fas fa-road"></i> Detalle por Vías
                    <span class="badge bg-primary ms-2">{{ $progresoGeneral['vias_con_revision'] }}/{{ $progresoGeneral['total_vias'] }}</span>
                </h5>
            </div>
            <div class="card-aprob-body">
                @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">
                            @if($viaData['tiene_observaciones'])
                            <span class="badge bg-warning text-dark me-2">
                                <i class="fas fa-exclamation-triangle"></i>
                            </span>
                            @endif
                            <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" 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></span>
                                        @elseif($equipoData['estado'] == 'con_observaciones')
                                            <span class="badge bg-warning"><i class="fas fa-exclamation-triangle"></i></span>
                                        @else
                                            <span class="badge bg-secondary"><i class="fas fa-clock"></i></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 text-warning" title="{{ $respuesta->observacion }}">
                                                            <i class="fas fa-exclamation-circle me-1"></i>
                                                            {{ Str::limit($respuesta->observacion, 40) }}
                                                        </span>
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @empty
                <div class="empty-state">
                    <i class="fas fa-clipboard-list"></i>
                    <p>No hay revisiones registradas</p>
                </div>
                @endforelse

                @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 sin revisar:</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
            </div>
        </div>

        {{-- Evidencias --}}
        <div class="card-aprob">
            <div class="card-aprob-header">
                <h5>
                    <i class="fas fa-camera"></i> Evidencias Fotográficas
                    <span class="badge {{ $progresoGeneral['cumple_evidencias'] ? 'bg-success' : 'bg-warning' }} ms-2">
                        {{ $progresoGeneral['evidencias'] }}/{{ $progresoGeneral['evidencias_minimo'] }}
                    </span>
                </h5>
            </div>
            <div class="card-aprob-body">
                <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, 20) }}
                            </span>
                            @if($evidencia->descripcion)
                            <span class="evidencia-desc">{{ Str::limit($evidencia->descripcion, 30) }}</span>
                            @endif
                        </div>
                    </div>
                    @empty
                    <div class="empty-state" style="grid-column: 1 / -1;">
                        <i class="fas fa-camera"></i>
                        <p>No hay evidencias cargadas</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Sidebar con acciones --}}
    <div class="aprob-sidebar">
        {{-- Validaciones --}}
        <div class="card-aprob">
            <div class="card-aprob-header">
                <h5><i class="fas fa-clipboard-check"></i> Validaciones</h5>
            </div>
            <div class="card-aprob-body">
                <div class="validaciones-list">
                    <div class="validacion-item {{ $validaciones['checklist']['cumple'] ? 'cumple' : 'no-cumple' }}">
                        <div class="validacion-icon">
                            <i class="fas fa-{{ $validaciones['checklist']['icono'] }}"></i>
                        </div>
                        <span class="validacion-texto">{{ $validaciones['checklist']['mensaje'] }}</span>
                    </div>

                    <div class="validacion-item {{ $validaciones['evidencias']['cumple'] ? 'cumple' : 'no-cumple' }}">
                        <div class="validacion-icon">
                            <i class="fas fa-{{ $validaciones['evidencias']['icono'] }}"></i>
                        </div>
                        <span class="validacion-texto">{{ $validaciones['evidencias']['mensaje'] }}</span>
                    </div>

                    <div class="validacion-item {{ $validaciones['vias']['cumple'] ? 'cumple' : 'no-cumple' }}">
                        <div class="validacion-icon">
                            <i class="fas fa-{{ $validaciones['vias']['icono'] }}"></i>
                        </div>
                        <span class="validacion-texto">{{ $validaciones['vias']['mensaje'] }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Acciones --}}
        <div class="card-aprob">
            <div class="card-aprob-header">
                <h5><i class="fas fa-gavel"></i> Decisión</h5>
            </div>
            <div class="card-aprob-body">
                <div class="acciones-aprob">
                    @if($mantenimiento->aprobacion)
                        {{-- Ya fue procesado --}}
                        <div class="alert {{ $mantenimiento->aprobacion->tipo == 'APROBADO' ? 'alert-success' : 'alert-danger' }} mb-0">
                            <strong>
                                <i class="fas fa-{{ $mantenimiento->aprobacion->tipo == 'APROBADO' ? 'check-circle' : 'times-circle' }} me-1"></i>
                                {{ $mantenimiento->aprobacion->tipo == 'APROBADO' ? 'Aprobado' : 'Rechazado' }}
                            </strong>
                            <br>
                            <small>
                                Por: {{ $mantenimiento->aprobacion->jefeOperativo->usu_nombre ?? '' }} {{ $mantenimiento->aprobacion->jefeOperativo->usu_apellido ?? '' }}
                                <br>
                                {{ $mantenimiento->aprobacion->fecha_aprobacion ? $mantenimiento->aprobacion->fecha_aprobacion->format('d/m/Y H:i') : '' }}
                            </small>
                            @if($mantenimiento->aprobacion->motivo_rechazo)
                            <hr class="my-2">
                            <small><strong>Motivo:</strong> {{ $mantenimiento->aprobacion->motivo_rechazo }}</small>
                            @endif
                        </div>
                    @else
                        {{-- Formulario de aprobación --}}
                        <form action="{{ route('web.aprobaciones.aprobar', $mantenimiento->prog_id) }}" method="POST" id="form-aprobar">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Observaciones (opcional)</label>
                                <textarea name="observaciones" class="form-control" rows="2" placeholder="Agregar comentarios..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-aprobar w-100" {{ !$validaciones['puede_aprobar'] ? 'disabled' : '' }}>
                                <i class="fas fa-check-circle me-1"></i> Aprobar Mantenimiento
                            </button>
                            @if(!$validaciones['puede_aprobar'])
                            <small class="text-muted d-block mt-2 text-center">
                                <i class="fas fa-info-circle me-1"></i>
                                No cumple requisitos mínimos
                            </small>
                            @endif
                        </form>

                        <hr class="my-2">

                        <button type="button" class="btn btn-rechazar w-100" data-bs-toggle="modal" data-bs-target="#modalRechazo">
                            <i class="fas fa-times-circle me-1"></i> Rechazar
                        </button>
                    @endif
                </div>
            </div>
        </div>

        {{-- Botón volver --}}
        <a href="{{ route('web.aprobaciones.index') }}" class="btn btn-outline-secondary w-100">
            <i class="fas fa-arrow-left me-1"></i> Volver al Listado
        </a>
    </div>
</div>

{{-- Modal de Rechazo --}}
<div class="modal fade modal-rechazo" id="modalRechazo" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-times-circle me-2"></i>
                    Rechazar Mantenimiento
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('web.aprobaciones.rechazar', $mantenimiento->prog_id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <p class="text-muted mb-3">
                        El técnico será notificado del rechazo y deberá corregir los problemas indicados.
                    </p>
                    <div class="mb-3">
                        <label class="form-label">Motivo del rechazo <span class="text-danger">*</span></label>
                        <textarea name="motivo_rechazo" class="form-control" rows="4" required
                                  placeholder="Explique detalladamente el motivo del rechazo..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-times-circle me-1"></i> Confirmar Rechazo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

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

    // Confirmar aprobación
    document.getElementById('form-aprobar')?.addEventListener('submit', function(e) {
        if (!confirm('¿Está seguro de aprobar este mantenimiento?')) {
            e.preventDefault();
        }
    });
});
</script>
@endpush