@extends('layouts.app')

@section('title', 'Mantenimientos Realizados')
@section('page-title', 'Mantenimientos Realizados')

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

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

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

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

    .stat-icon.completados { background: rgba(16, 185, 129, 0.1); color: #059669; }
    .stat-icon.aprobados { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
    .stat-icon.pendientes { background: rgba(245, 158, 11, 0.1); color: #d97706; }

    .stat-info h4 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #1a3a5c; }
    .stat-info p { margin: 0; font-size: 0.8rem; color: #64748b; }

    .mant-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .mant-table th {
        background: #f8fafc;
        padding: 0.875rem 1rem;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid #e2e8f0;
    }

    .mant-table td {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .mant-table tbody tr:hover {
        background: #f8fafc;
    }

    .mant-code {
        font-weight: 600;
        color: #1a3a5c;
    }

    .mant-ubicacion {
        font-size: 0.85rem;
    }

    .mant-ubicacion .concesion {
        font-size: 0.7rem;
        color: #64748b;
        display: block;
    }

    .badge-aprobado {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
        padding: 0.375rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-pendiente {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        padding: 0.375rem 0.75rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .btn-reporte {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }

    @media (max-width: 768px) {
        .stats-row { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
{{-- Estadísticas --}}
<div class="stats-row">
    <div class="stat-card">
        <div class="stat-icon completados">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="stat-info">
            <h4>{{ $estadisticas['total_completados'] }}</h4>
            <p>Total Completados</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon aprobados">
            <i class="fas fa-clipboard-check"></i>
        </div>
        <div class="stat-info">
            <h4>{{ $estadisticas['aprobados'] }}</h4>
            <p>Aprobados</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon pendientes">
            <i class="fas fa-clock"></i>
        </div>
        <div class="stat-info">
            <h4>{{ $estadisticas['pendientes_aprobacion'] }}</h4>
            <p>Pendientes de Aprobación</p>
        </div>
    </div>
</div>

{{-- Filtros --}}
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('web.mantenimientos-realizados.index') }}" class="row g-3">
            <div class="col-md-2">
                <label class="form-label small text-muted">Desde</label>
                <input type="date" name="desde" class="form-control" value="{{ request('desde') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label small text-muted">Hasta</label>
                <input type="date" name="hasta" class="form-control" value="{{ request('hasta') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label small text-muted">Concesión</label>
                <select name="concesion" class="form-select">
                    <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="col-md-2">
                <label class="form-label small text-muted">Estado</label>
                <select name="aprobado" class="form-select">
                    <option value="">Todos</option>
                    <option value="1" {{ request('aprobado') === '1' ? 'selected' : '' }}>Aprobados</option>
                    <option value="0" {{ request('aprobado') === '0' ? 'selected' : '' }}>Pendientes</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search me-1"></i> Buscar
                </button>
                <a href="{{ route('web.mantenimientos-realizados.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{{-- Tabla de resultados --}}
<div class="card">
    <div class="card-body p-0">
        @if($mantenimientos->count() > 0)
        <table class="mant-table">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Fecha</th>
                    <th>Ubicación</th>
                    <th>Técnico</th>
                    <th>Estado</th>
                    <th>Aprobación</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($mantenimientos as $mant)
                <tr>
                    <td>
                        <span class="mant-code">M-{{ str_pad($mant->prog_id, 4, '0', STR_PAD_LEFT) }}</span>
                    </td>
                    <td>{{ $mant->fecha_programada?->format('d/m/Y') }}</td>
                    <td class="mant-ubicacion">
                        <span class="concesion">{{ $mant->centro->concesion->nombre ?? '' }}</span>
                        {{ $mant->centro->nombre_centro ?? 'N/A' }}
                        @if($mant->via)
                        - {{ $mant->via->nombre }}
                        @endif
                    </td>
                    <td>
                        @if($mant->tecnico)
                        {{ $mant->tecnico->usu_nombre }} {{ $mant->tecnico->usu_apellido }}
                        @else
                        <span class="text-muted">N/A</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge" style="background-color: {{ $mant->estadoMantenimiento->color_hex ?? '#666' }}20; color: {{ $mant->estadoMantenimiento->color_hex ?? '#666' }}">
                            {{ $mant->estadoMantenimiento->estado_nombre ?? 'N/A' }}
                        </span>
                    </td>
                    <td>
                        @if($mant->aprobado)
                        <span class="badge-aprobado">
                            <i class="fas fa-check me-1"></i>Aprobado
                        </span>
                        @else
                        <span class="badge-pendiente">
                            <i class="fas fa-clock me-1"></i>Pendiente
                        </span>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('web.mantenimientos-realizados.show', $mant->prog_id) }}" class="btn btn-outline-primary btn-sm btn-reporte">
                            <i class="fas fa-eye me-1"></i>Ver
                        </a>
                        @if($mant->aprobado && $mant->aprobacion)
                        <a href="{{ route('web.mantenimientos-realizados.reporte', $mant->prog_id) }}" class="btn btn-outline-success btn-sm btn-reporte">
                            <i class="fas fa-file-pdf me-1"></i>PDF
                        </a>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="p-3">
            {{ $mantenimientos->links() }}
        </div>
        @else
        <div class="empty-state p-5 text-center">
            <i class="fas fa-clipboard-list d-block mb-3" style="font-size: 3rem; color: #cbd5e1;"></i>
            <h5 class="text-muted">No hay mantenimientos realizados</h5>
            <p class="text-muted small">Ajusta los filtros o espera a que se completen mantenimientos.</p>
        </div>
        @endif
    </div>
</div>
@endsection