@extends('layouts.app')

@section('title', 'Reportes')
@section('page-title', 'Centro de Reportes')

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

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .reportes-header {
        margin-bottom: 2rem;
    }

    .reportes-header h2 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1a3a5c;
        margin: 0;
    }

    .reportes-header p {
        color: #64748b;
        font-size: 0.9rem;
        margin: 0.5rem 0 0 0;
    }

    .reportes-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 1.5rem;
    }

    .reporte-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
    }

    .reporte-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        transform: translateY(-3px);
    }

    .reporte-card-header {
        padding: 1.75rem;
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .reporte-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #fff;
        flex-shrink: 0;
    }

    .reporte-info {
        flex: 1;
    }

    .reporte-info h4 {
        margin: 0 0 0.5rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a3a5c;
    }

    .reporte-info p {
        margin: 0;
        font-size: 0.85rem;
        color: #64748b;
        line-height: 1.5;
    }

    .reporte-features {
        padding: 1rem 1.75rem;
        background: #fafbfc;
        border-top: 1px solid #f1f5f9;
        flex: 1;
    }

    .feature-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .feature-list li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: #475569;
        padding: 0.375rem 0;
    }

    .feature-list li i {
        color: #059669;
        font-size: 0.7rem;
    }

    .reporte-card-footer {
        padding: 1.25rem 1.75rem;
        border-top: 1px solid #f1f5f9;
    }

    .btn-reporte {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.15s;
        border: none;
    }

    .btn-reporte.primary {
        background: #1a3a5c;
        color: #fff;
    }

    .btn-reporte.primary:hover {
        background: #0f2942;
        color: #fff;
    }

    .section-divider {
        margin: 2.5rem 0 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .section-divider span {
        font-size: 0.8rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .section-divider::before,
    .section-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e8f0;
    }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    <div class="reportes-header">
        <h2>Centro de Reportes</h2>
        <p>Acceda a los diferentes reportes del sistema para análisis y toma de decisiones.</p>
    </div>

    <div class="reportes-grid">
        {{-- Dashboard Gerencia --}}
        <div class="reporte-card">
            <div class="reporte-card-header">
                <div class="reporte-icon" style="background: #1a3a5c;">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="reporte-info">
                    <h4>Dashboard Gerencia</h4>
                    <p>KPIs ejecutivos y visión general del rendimiento de mantenimientos.</p>
                </div>
            </div>
            <div class="reporte-features">
                <ul class="feature-list">
                    <li><i class="fas fa-check"></i> Tasa de cumplimiento</li>
                    <li><i class="fas fa-check"></i> Tendencias mensuales</li>
                    <li><i class="fas fa-check"></i> Distribución por concesión</li>
                    <li><i class="fas fa-check"></i> Gráficos interactivos</li>
                </ul>
            </div>
            <div class="reporte-card-footer">
                <a href="{{ route('web.reportes.gerencia') }}" class="btn-reporte primary">
                    <i class="fas fa-external-link-alt"></i> Ver Dashboard
                </a>
            </div>
        </div>

        {{-- Reporte Administrativo --}}
        <div class="reporte-card">
            <div class="reporte-card-header">
                <div class="reporte-icon" style="background: #2563eb;">
                    <i class="fas fa-clipboard-list"></i>
                </div>
                <div class="reporte-info">
                    <h4>Reporte Administrativo</h4>
                    <p>Detalle operativo de mantenimientos con filtros avanzados.</p>
                </div>
            </div>
            <div class="reporte-features">
                <ul class="feature-list">
                    <li><i class="fas fa-check"></i> Listado detallado</li>
                    <li><i class="fas fa-check"></i> Filtros por fecha, estado, concesión</li>
                    <li><i class="fas fa-check"></i> Resumen de estados</li>
                    <li><i class="fas fa-check"></i> Paginación</li>
                </ul>
            </div>
            <div class="reporte-card-footer">
                <a href="{{ route('web.reportes.admin') }}" class="btn-reporte primary">
                    <i class="fas fa-external-link-alt"></i> Ver Reporte
                </a>
            </div>
        </div>

        {{-- Reporte Consolidado --}}
        <div class="reporte-card">
            <div class="reporte-card-header">
                <div class="reporte-icon" style="background: #059669;">
                    <i class="fas fa-file-excel"></i>
                </div>
                <div class="reporte-info">
                    <h4>Reporte Consolidado</h4>
                    <p>Información consolidada por peaje y técnico, ideal para exportar.</p>
                </div>
            </div>
            <div class="reporte-features">
                <ul class="feature-list">
                    <li><i class="fas fa-check"></i> Resumen por peaje</li>
                    <li><i class="fas fa-check"></i> Rendimiento por técnico</li>
                    <li><i class="fas fa-check"></i> Exportación a CSV</li>
                    <li><i class="fas fa-check"></i> Tablas consolidadas</li>
                </ul>
            </div>
            <div class="reporte-card-footer">
                <a href="{{ route('web.reportes.consolidado') }}" class="btn-reporte primary">
                    <i class="fas fa-external-link-alt"></i> Ver Reporte
                </a>
            </div>
        </div>
    </div>
</div>
@endsection