@extends('layouts.app')

@section('title', 'Mantenimientos')
@section('page-title', 'Gestión de Mantenimientos')

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

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

@section('content')
<div class="mantenimientos-container">
    {{-- Estadísticas --}}
    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-icon bg-primary-light">
                <i class="fas fa-clipboard-list"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $estadisticas['total'] }}</span>
                <span class="stat-label">Total</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-success-light">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value text-success">{{ $estadisticas['completados'] }}</span>
                <span class="stat-label">Completados</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-warning-light">
                <i class="fas fa-sync-alt"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value text-warning">{{ $estadisticas['en_proceso'] }}</span>
                <span class="stat-label">En Proceso</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon bg-info-light">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-info">
                <span class="stat-value text-info">{{ $estadisticas['pendientes'] }}</span>
                <span class="stat-label">Pendientes</span>
            </div>
        </div>
    </div>

    {{-- Filtros --}}
    <div class="filtros-card">
        <form action="{{ route('web.mantenimientos.index') }}" method="GET" class="filtros-form">
            <div class="filtro-grupo">
                <label class="filtro-label">Desde</label>
                <input type="date" name="fecha_desde" class="form-control form-control-sm"
                       value="{{ $filtros['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="{{ $filtros['fecha_hasta'] }}">
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Peaje</label>
                <select name="centro_id" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($centros as $centro)
                    <option value="{{ $centro->id_centro }}" {{ $filtros['centro_id'] == $centro->id_centro ? 'selected' : '' }}>
                        {{ $centro->nombre_centro }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Técnico</label>
                <select name="tecnico_id" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($tecnicos as $tecnico)
                    <option value="{{ $tecnico->usu_id }}" {{ $filtros['tecnico_id'] == $tecnico->usu_id ? 'selected' : '' }}>
                        {{ $tecnico->usu_nombre }} {{ $tecnico->usu_apellido }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Estado</label>
                <select name="estado_id" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($estados as $estado)
                    <option value="{{ $estado->estado_id }}" {{ $filtros['estado_id'] == $estado->estado_id ? 'selected' : '' }}>
                        {{ $estado->estado_nombre }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-acciones">
                <button type="submit" class="btn btn-sm btn-primary">
                    <i class="fas fa-search"></i>
                </button>
                <a href="{{ route('web.mantenimientos.index') }}" class="btn btn-sm btn-light">
                    <i class="fas fa-times"></i>
                </a>
            </div>
        </form>
    </div>

    {{-- Tabla de mantenimientos --}}
    <div class="tabla-card">
        <div class="tabla-responsive">
            <table class="tabla-mantenimientos">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Peaje</th>
                        <th>Fechas</th>
                        <th>Técnico</th>
                        <th>Estado</th>
                        <th>Progreso</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($mantenimientos as $mant)
                    @php
                        $fechaInicio = $mant->fecha_programada->format('d/m/Y');
                        $fechaFin = $mant->fecha_fin ? $mant->fecha_fin->format('d/m/Y') : $fechaInicio;
                        $esMultiDia = $fechaInicio !== $fechaFin;
                    @endphp
                    <tr>
                        <td>
                            <span class="mant-id">#{{ $mant->prog_id }}</span>
                        </td>
                        <td>
                            <div class="mant-peaje">
                                <span class="peaje-nombre">{{ $mant->centro->nombre_centro ?? 'N/A' }}</span>
                                <span class="peaje-concesion">{{ $mant->centro->concesion->nombre ?? '' }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="mant-fechas">
                                @if($esMultiDia)
                                    <i class="fas fa-calendar-week text-primary me-1"></i>
                                    {{ $fechaInicio }} - {{ $fechaFin }}
                                @else
                                    <i class="fas fa-calendar-day text-muted me-1"></i>
                                    {{ $fechaInicio }}
                                @endif
                            </div>
                        </td>
                        <td>
                            @if($mant->tecnico)
                            <div class="mant-tecnico">
                                <span class="tecnico-avatar">
                                    {{ strtoupper(substr($mant->tecnico->usu_nombre, 0, 1)) }}{{ strtoupper(substr($mant->tecnico->usu_apellido ?? '', 0, 1)) }}
                                </span>
                                <span class="tecnico-nombre">{{ $mant->tecnico->usu_nombre }} {{ $mant->tecnico->usu_apellido }}</span>
                            </div>
                            @else
                            <span class="text-muted fst-italic">Sin asignar</span>
                            @endif
                        </td>
                        <td>
                            <span class="estado-badge" style="--estado-color: {{ $mant->estadoMantenimiento->color_hex ?? '#9E9E9E' }}">
                                {{ $mant->estadoMantenimiento->estado_nombre ?? 'N/A' }}
                            </span>
                        </td>
                        <td>
                            @php
                                // Calcular progreso aproximado
                                $progreso = 0;
                                $estadoCodigo = $mant->estadoMantenimiento->estado_codigo ?? '';
                                if ($estadoCodigo == 'COMPLETADO' || $estadoCodigo == 'APROBADO') {
                                    $progreso = 100;
                                } elseif ($estadoCodigo == 'PEND_APROBACION' || $estadoCodigo == 'MANT_FINALIZADO') {
                                    $progreso = 90;
                                } elseif ($estadoCodigo == 'EN_MANTENIMIENTO') {
                                    $progreso = 50;
                                } elseif (in_array($estadoCodigo, ['CAMINO_PEAJE', 'LLEGADA_PEAJE'])) {
                                    $progreso = 20;
                                } elseif ($estadoCodigo == 'PROGRAMADO') {
                                    $progreso = 0;
                                }
                            @endphp
                            <div class="progreso-mini">
                                <div class="progreso-barra">
                                    <div class="progreso-fill" style="width: {{ $progreso }}%"></div>
                                </div>
                                <span class="progreso-texto">{{ $progreso }}%</span>
                            </div>
                        </td>
                        <td class="text-center">
                            <a href="{{ route('web.mantenimientos.show', $mant->prog_id) }}"
                               class="btn btn-sm btn-outline-primary" title="Ver detalle">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-4">
                            <div class="empty-state">
                                <i class="fas fa-tools text-muted"></i>
                                <p>No se encontraron mantenimientos</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Paginación --}}
        @if($mantenimientos->hasPages())
        <div class="tabla-footer">
            {{ $mantenimientos->links() }}
        </div>
        @endif
    </div>
</div>
@endsection