@extends('layouts.app')

@section('title', 'Reporte Administrativo')
@section('page-title', 'Reporte Administrativo')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.reportes.index') }}">Reportes</a></li>
<li class="breadcrumb-item active">Administrativo</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .reporte-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
    .reporte-title { display: flex; align-items: center; gap: 0.75rem; }
    .reporte-title-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; background: #2563eb; }
    .reporte-title h2 { margin: 0; font-size: 1.25rem; font-weight: 600; color: #1a3a5c; }

    .resumen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
    @media (max-width: 992px) { .resumen-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 576px) { .resumen-grid { grid-template-columns: 1fr; } }

    .resumen-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.25rem; text-align: center; }
    .resumen-valor { font-size: 1.5rem; font-weight: 700; color: #1a3a5c; }
    .resumen-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }

    .tabla-container { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .tabla-mantenimientos { width: 100%; border-collapse: collapse; }
    .tabla-mantenimientos thead { background: #f8fafc; }
    .tabla-mantenimientos th { padding: 0.875rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; }
    .tabla-mantenimientos td { padding: 0.75rem 1rem; font-size: 0.85rem; color: #475569; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
    .tabla-mantenimientos tbody tr:hover { background: #fafbfc; }
    .tabla-mantenimientos tbody tr:last-child td { border-bottom: none; }

    .estado-badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; display: inline-block; }
    .fecha-col { white-space: nowrap; }
    .tabla-footer { padding: 1rem; border-top: 1px solid #e2e8f0; background: #fafbfc; }
    .empty-state { text-align: center; padding: 3rem 2rem; color: #94a3b8; }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    <div class="reporte-header">
        <div class="reporte-title">
            <div class="reporte-title-icon"><i class="fas fa-clipboard-list"></i></div>
            <h2>Reporte Administrativo</h2>
        </div>
        <a href="{{ route('web.reportes.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Volver
        </a>
    </div>

    {{-- Filtros --}}
    <div class="filtros-card mb-4">
        <form action="{{ route('web.reportes.admin') }}" method="GET" class="filtros-form">
            <div class="filtro-grupo">
                <label class="filtro-label">Fecha Inicio</label>
                <input type="date" name="fecha_inicio" class="form-control form-control-sm" value="{{ $fechaInicio->format('Y-m-d') }}">
            </div>
            <div class="filtro-grupo">
                <label class="filtro-label">Fecha Fin</label>
                <input type="date" name="fecha_fin" class="form-control form-control-sm" value="{{ $fechaFin->format('Y-m-d') }}">
            </div>
            <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 }}" {{ $concesionId == $concesion->id_concesion ? 'selected' : '' }}>
                        {{ $concesion->nombre }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="filtro-grupo">
                <label class="filtro-label">Estado</label>
                <select name="estado" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($estados as $estado)
                    <option value="{{ $estado->estado_id }}" {{ $estadoId == $estado->estado_id ? 'selected' : '' }}>
                        {{ $estado->estado_nombre }}
                    </option>
                    @endforeach
                </select>
            </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.reportes.admin') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times me-1"></i> Limpiar</a>
            </div>
        </form>
    </div>

    {{-- Resumen --}}
    <div class="resumen-grid">
        <div class="resumen-card">
            <div class="resumen-valor">{{ $resumen['total'] }}</div>
            <div class="resumen-label">Total</div>
        </div>
        <div class="resumen-card">
            <div class="resumen-valor" style="color: #d97706;">{{ $resumen['pendientes'] }}</div>
            <div class="resumen-label">Pendientes</div>
        </div>
        <div class="resumen-card">
            <div class="resumen-valor" style="color: #2563eb;">{{ $resumen['en_proceso'] }}</div>
            <div class="resumen-label">En Proceso</div>
        </div>
        <div class="resumen-card">
            <div class="resumen-valor" style="color: #059669;">{{ $resumen['completados'] }}</div>
            <div class="resumen-label">Completados</div>
        </div>
    </div>

    {{-- Tabla --}}
    <div class="tabla-container">
        @if($mantenimientos->count() > 0)
        <table class="tabla-mantenimientos">
            <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Concesión</th>
                    <th>Peaje</th>
                    <th>Estado</th>
                    <th>Técnico</th>
                    <th>Últ. Modificación</th>
                </tr>
            </thead>
            <tbody>
                @foreach($mantenimientos as $mant)
                <tr>
                    <td class="fecha-col">{{ $mant->fecha_programada ? $mant->fecha_programada->format('d/m/Y') : '-' }}</td>
                    <td>{{ $mant->centro->concesion->nombre ?? '-' }}</td>
                    <td><strong>{{ $mant->centro->nombre_centro ?? '-' }}</strong></td>
                    <td>
                        <span class="estado-badge" style="background: {{ $mant->estadoMantenimiento->color_hex ?? '#e2e8f0' }}20; color: {{ $mant->estadoMantenimiento->color_hex ?? '#475569' }};">
                            {{ $mant->estadoMantenimiento->estado_nombre ?? '-' }}
                        </span>
                    </td>
                    <td>{{ $mant->tecnico ? $mant->tecnico->usu_nombre . ' ' . $mant->tecnico->usu_apellido : '-' }}</td>
                    <td class="fecha-col">{{ $mant->fecha_modifica ? \Carbon\Carbon::parse($mant->fecha_modifica)->format('d/m/Y H:i') : '-' }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @if($mantenimientos->hasPages())
        <div class="tabla-footer">{{ $mantenimientos->links() }}</div>
        @endif
        @else
        <div class="empty-state">
            <i class="fas fa-clipboard-list" style="font-size: 2.5rem; color: #e2e8f0; margin-bottom: 1rem;"></i>
            <h4 style="color: #64748b;">No hay mantenimientos</h4>
            <p>No se encontraron registros con los filtros seleccionados.</p>
        </div>
        @endif
    </div>
</div>
@endsection