@extends('layouts.app')

@section('title', 'Aprobaciones')
@section('page-title', 'Aprobaciones de Mantenimiento')

@section('breadcrumb')
<li class="breadcrumb-item active">Aprobaciones</li>
@endsection

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

    @media (max-width: 992px) {
        .aprob-stats {
            grid-template-columns: repeat(2, 1fr);
        }
    }

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

    .aprob-stat-card {
        background: #fff;
        border-radius: 8px;
        padding: 1.25rem;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .aprob-stat-card.pendientes {
        border-left: 4px solid #f59e0b;
    }

    .aprob-stat-card.aprobados {
        border-left: 4px solid #10b981;
    }

    .aprob-stat-card.rechazados {
        border-left: 4px solid #ef4444;
    }

    .aprob-stat-card.tiempo {
        border-left: 4px solid #6366f1;
    }

    .aprob-stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .aprob-stat-card.pendientes .aprob-stat-icon {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .aprob-stat-card.aprobados .aprob-stat-icon {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .aprob-stat-card.rechazados .aprob-stat-icon {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    .aprob-stat-card.tiempo .aprob-stat-icon {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
    }

    .aprob-stat-info h4 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: #1a3a5c;
    }

    .aprob-stat-info span {
        font-size: 0.8rem;
        color: #64748b;
    }

    .aprob-card {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        margin-bottom: 1rem;
        overflow: hidden;
        transition: box-shadow 0.2s;
    }

    .aprob-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .aprob-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1rem 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .aprob-card-info h5 {
        margin: 0 0 0.25rem;
        font-size: 1rem;
        font-weight: 600;
        color: #1a3a5c;
    }

    .aprob-card-info .concesion {
        font-size: 0.8rem;
        color: #64748b;
    }

    .aprob-card-meta {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .meta-fecha {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 0.85rem;
    }

    .meta-fecha strong {
        color: #1a3a5c;
    }

    .meta-fecha small {
        color: #64748b;
    }

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

    .aprob-detail-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }

    @media (max-width: 768px) {
        .aprob-detail-row {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .aprob-detail-item {
        display: flex;
        flex-direction: column;
    }

    .aprob-detail-item label {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 0.25rem;
    }

    .aprob-detail-item span {
        font-size: 0.9rem;
        color: #1a3a5c;
    }

    .aprob-progress-section {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 0.75rem 0;
        border-top: 1px solid #f1f5f9;
    }

    .progress-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .progress-bar-mini {
        width: 80px;
        height: 8px;
        background: #e2e8f0;
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-bar-mini .fill {
        height: 100%;
        background: #f57c00;
        border-radius: 4px;
    }

    .progress-bar-mini .fill.complete {
        background: #10b981;
    }

    .progress-label {
        font-size: 0.8rem;
        color: #64748b;
    }

    .aprob-card-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid #f1f5f9;
    }

    .empty-state-aprob {
        text-align: center;
        padding: 3rem;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .empty-state-aprob i {
        font-size: 3.5rem;
        color: #10b981;
        margin-bottom: 1rem;
    }

    .empty-state-aprob h4 {
        color: #1a3a5c;
        margin-bottom: 0.5rem;
    }

    .empty-state-aprob p {
        color: #64748b;
    }

    .tecnico-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

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

    .tiempo-espera {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        background: #fef3c7;
        color: #92400e;
    }

    .tiempo-espera.urgente {
        background: #fee2e2;
        color: #991b1b;
    }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    {{-- Estadísticas --}}
    <div class="aprob-stats">
        <div class="aprob-stat-card pendientes">
            <div class="aprob-stat-icon">
                <i class="fas fa-hourglass-half"></i>
            </div>
            <div class="aprob-stat-info">
                <h4>{{ $estadisticas['pendientes'] }}</h4>
                <span>Pendientes de Aprobación</span>
            </div>
        </div>

        <div class="aprob-stat-card aprobados">
            <div class="aprob-stat-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="aprob-stat-info">
                <h4>{{ $estadisticas['aprobados_hoy'] }}</h4>
                <span>Aprobados Hoy</span>
            </div>
        </div>

        <div class="aprob-stat-card rechazados">
            <div class="aprob-stat-icon">
                <i class="fas fa-times-circle"></i>
            </div>
            <div class="aprob-stat-info">
                <h4>{{ $estadisticas['rechazados_hoy'] }}</h4>
                <span>Rechazados Hoy</span>
            </div>
        </div>

        <div class="aprob-stat-card tiempo">
            <div class="aprob-stat-icon">
                <i class="fas fa-clock"></i>
            </div>
            <div class="aprob-stat-info">
                <h4>{{ $estadisticas['tiempo_promedio'] }}</h4>
                <span>Tiempo Promedio Aprobación</span>
            </div>
        </div>
    </div>

    {{-- Filtros --}}
    <div class="filtros-card mb-3">
        <form action="{{ route('web.aprobaciones.index') }}" method="GET" class="filtros-form">
            <div class="filtro-grupo">
                <label class="filtro-label">Concesión</label>
                <select name="concesion" class="form-select form-select-sm">
                    <option value="">Todas</option>
                    @foreach($concesiones as $concesion)
                    <option value="{{ $concesion->id_concesion }}" {{ request('concesion') == $concesion->id_concesion ? 'selected' : '' }}>
                        {{ $concesion->nombre }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Desde</label>
                <input type="date" name="fecha_desde" class="form-control form-control-sm" value="{{ request('fecha_desde') }}">
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Hasta</label>
                <input type="date" name="fecha_hasta" class="form-control form-control-sm" value="{{ request('fecha_hasta') }}">
            </div>

            <div class="filtro-acciones">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-search me-1"></i> Filtrar
                </button>
                <a href="{{ route('web.aprobaciones.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-times me-1"></i> Limpiar
                </a>
            </div>
        </form>
    </div>

    {{-- Listado de mantenimientos pendientes --}}
    @forelse($mantenimientos as $mant)
    <div class="aprob-card">
        <div class="aprob-card-header">
            <div class="aprob-card-info">
                <h5>
                    <i class="fas fa-road me-2 text-secondary"></i>
                    {{ $mant->centro->nombre_centro ?? 'N/A' }}
                </h5>
                <span class="concesion">{{ $mant->centro->concesion->nombre ?? '' }}</span>
            </div>
            <div class="aprob-card-meta">
                @php
                    $horasEspera = $mant->historialEstados->where('estado_nuevo_id', function() use ($mant) {
                        return $mant->estado_id;
                    })->first()?->fecha_cambio?->diffInHours(now()) ?? 0;
                @endphp
                @if($horasEspera > 24)
                <span class="tiempo-espera urgente">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    {{ round($horasEspera / 24) }} días esperando
                </span>
                @elseif($horasEspera > 4)
                <span class="tiempo-espera">
                    <i class="fas fa-clock me-1"></i>
                    {{ $horasEspera }} hrs esperando
                </span>
                @endif
                <div class="meta-fecha">
                    <strong>#{{ $mant->prog_id }}</strong>
                    <small>{{ $mant->fecha_programada->format('d/m/Y') }}</small>
                </div>
            </div>
        </div>

        <div class="aprob-card-body">
            <div class="aprob-detail-row">
                <div class="aprob-detail-item">
                    <label>Técnico</label>
                    <span class="tecnico-info">
                        @if($mant->tecnico)
                        <span class="tecnico-avatar">
                            {{ strtoupper(substr($mant->tecnico->usu_nombre ?? 'N', 0, 1)) }}{{ strtoupper(substr($mant->tecnico->usu_apellido ?? 'A', 0, 1)) }}
                        </span>
                        {{ $mant->tecnico->usu_nombre }} {{ $mant->tecnico->usu_apellido }}
                        @else
                        <span class="text-muted">Sin asignar</span>
                        @endif
                    </span>
                </div>

                <div class="aprob-detail-item">
                    <label>Equipos Revisados</label>
                    <span>{{ $mant->checklistRespuestas->pluck('inventario_id')->unique()->count() }} equipos</span>
                </div>

                <div class="aprob-detail-item">
                    <label>Items Checklist</label>
                    <span>{{ $mant->progreso['respondidos'] }} / {{ $mant->progreso['items'] }}</span>
                </div>

                <div class="aprob-detail-item">
                    <label>Evidencias</label>
                    <span class="{{ $mant->progreso['evidencias'] >= 3 ? 'text-success' : 'text-warning' }}">
                        <i class="fas fa-camera me-1"></i>
                        {{ $mant->progreso['evidencias'] }} fotos
                    </span>
                </div>
            </div>

            <div class="aprob-progress-section">
                <div class="progress-item">
                    <span class="progress-label">Completado:</span>
                    <div class="progress-bar-mini">
                        <div class="fill {{ $mant->progreso['porcentaje'] >= 100 ? 'complete' : '' }}" style="width: {{ $mant->progreso['porcentaje'] }}%"></div>
                    </div>
                    <span class="progress-label"><strong>{{ $mant->progreso['porcentaje'] }}%</strong></span>
                </div>

                @if($mant->progreso['porcentaje'] < 80)
                <span class="badge bg-warning text-dark">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    Checklist incompleto
                </span>
                @endif

                @if($mant->progreso['evidencias'] < 3)
                <span class="badge bg-warning text-dark">
                    <i class="fas fa-camera me-1"></i>
                    Faltan evidencias
                </span>
                @endif
            </div>

            <div class="aprob-card-actions">
                <a href="{{ route('web.aprobaciones.show', $mant->prog_id) }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-eye me-1"></i> Revisar y Aprobar
                </a>
            </div>
        </div>
    </div>
    @empty
    <div class="empty-state-aprob">
        <i class="fas fa-check-double"></i>
        <h4>No hay mantenimientos pendientes</h4>
        <p>Todos los mantenimientos han sido revisados y aprobados.</p>
    </div>
    @endforelse

    {{-- Paginación --}}
    @if($mantenimientos->hasPages())
    <div class="d-flex justify-content-center mt-3">
        {{ $mantenimientos->links() }}
    </div>
    @endif
</div>
@endsection