@extends('layouts.app')

@section('title', 'Dashboard Gerencia')
@section('page-title', 'Dashboard Gerencia')

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

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .dashboard-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .dashboard-title-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: #fff;
        background: #1a3a5c;
    }

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

    .periodo-badge {
        font-size: 0.8rem;
        color: #64748b;
        background: #f1f5f9;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

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

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

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

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

    .kpi-icon.primary { background: rgba(26, 58, 92, 0.1); color: #1a3a5c; }
    .kpi-icon.success { background: rgba(5, 150, 105, 0.1); color: #059669; }
    .kpi-icon.warning { background: rgba(245, 158, 11, 0.1); color: #d97706; }
    .kpi-icon.info { background: rgba(59, 130, 246, 0.1); color: #2563eb; }

    .kpi-content { flex: 1; }
    .kpi-value { font-size: 1.75rem; font-weight: 700; color: #1a3a5c; line-height: 1; margin-bottom: 0.25rem; }
    .kpi-label { font-size: 0.8rem; color: #64748b; }

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

    .chart-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .chart-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 0.5rem; }
    .chart-card-header h5 { margin: 0; font-size: 0.95rem; font-weight: 600; color: #1a3a5c; }
    .chart-card-body { padding: 1.25rem; }

    .estado-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid #f1f5f9; }
    .estado-item:last-child { border-bottom: none; }
    .estado-info { display: flex; align-items: center; gap: 0.75rem; }
    .estado-color { width: 12px; height: 12px; border-radius: 3px; }
    .estado-nombre { font-size: 0.85rem; color: #475569; }
    .estado-valor { font-size: 0.9rem; font-weight: 600; color: #1a3a5c; }

    .concesion-bar { margin-bottom: 0.875rem; }
    .concesion-bar:last-child { margin-bottom: 0; }
    .concesion-info { display: flex; justify-content: space-between; margin-bottom: 0.375rem; }
    .concesion-nombre { font-size: 0.8rem; color: #475569; }
    .concesion-valor { font-size: 0.8rem; font-weight: 600; color: #1a3a5c; }
    .concesion-progress { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
    .concesion-progress-bar { height: 100%; background: #1a3a5c; border-radius: 4px; }

    .tendencia-table { width: 100%; border-collapse: collapse; }
    .tendencia-table th { text-align: left; font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; padding: 0.625rem 0.5rem; border-bottom: 1px solid #e2e8f0; }
    .tendencia-table td { padding: 0.625rem 0.5rem; font-size: 0.85rem; color: #475569; border-bottom: 1px solid #f1f5f9; }
    .tendencia-table td.numero { font-weight: 600; color: #1a3a5c; }
    .tasa-alta { color: #059669; }
    .tasa-media { color: #d97706; }
    .tasa-baja { color: #dc2626; }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    <div class="dashboard-header">
        <div class="dashboard-title">
            <div class="dashboard-title-icon"><i class="fas fa-chart-line"></i></div>
            <h2>Dashboard Gerencia</h2>
        </div>
        <div class="d-flex gap-2 align-items-center">
            <span class="periodo-badge">
                <i class="fas fa-calendar"></i>
                {{ $fechaInicio->format('d/m/Y') }} - {{ $fechaFin->format('d/m/Y') }}
            </span>
            <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>
    </div>

    <div class="filtros-card mb-4">
        <form action="{{ route('web.reportes.gerencia') }}" 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-acciones">
                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-sync-alt me-1"></i> Actualizar</button>
            </div>
        </form>
    </div>

    <div class="kpi-grid">
        <div class="kpi-card">
            <div class="kpi-icon primary"><i class="fas fa-calendar-check"></i></div>
            <div class="kpi-content">
                <div class="kpi-value">{{ number_format($totalProgramados) }}</div>
                <div class="kpi-label">Programados</div>
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon success"><i class="fas fa-check-circle"></i></div>
            <div class="kpi-content">
                <div class="kpi-value">{{ number_format($completados) }}</div>
                <div class="kpi-label">Completados</div>
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon warning"><i class="fas fa-percentage"></i></div>
            <div class="kpi-content">
                <div class="kpi-value">{{ $tasaCumplimiento }}%</div>
                <div class="kpi-label">Tasa Cumplimiento</div>
            </div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon info"><i class="fas fa-clock"></i></div>
            <div class="kpi-content">
                <div class="kpi-value">{{ $tiempoPromedio ? round($tiempoPromedio, 1) : '-' }}</div>
                <div class="kpi-label">Días Prom. Resolución</div>
            </div>
        </div>
    </div>

    <div class="charts-grid">
        <div class="chart-card">
            <div class="chart-card-header">
                <i class="fas fa-chart-bar text-muted"></i>
                <h5>Tendencia Mensual (Últimos 6 meses)</h5>
            </div>
            <div class="chart-card-body">
                @if($tendenciaMensual->count() > 0)
                <table class="tendencia-table">
                    <thead>
                        <tr><th>Mes</th><th>Programados</th><th>Completados</th><th>Tasa</th></tr>
                    </thead>
                    <tbody>
                        @foreach($tendenciaMensual as $mes)
                        @php
                            $tasa = $mes->programados > 0 ? round(($mes->completados / $mes->programados) * 100, 1) : 0;
                            $tasaClass = $tasa >= 80 ? 'tasa-alta' : ($tasa >= 50 ? 'tasa-media' : 'tasa-baja');
                        @endphp
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($mes->mes . '-01')->translatedFormat('M Y') }}</td>
                            <td class="numero">{{ $mes->programados }}</td>
                            <td class="numero">{{ $mes->completados }}</td>
                            <td class="{{ $tasaClass }}" style="font-weight: 600;">{{ $tasa }}%</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <p class="text-muted text-center py-3">No hay datos en el período seleccionado</p>
                @endif
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-card-header">
                <i class="fas fa-chart-pie text-muted"></i>
                <h5>Por Estado</h5>
            </div>
            <div class="chart-card-body">
                @forelse($porEstado as $estado)
                <div class="estado-item">
                    <div class="estado-info">
                        <span class="estado-color" style="background: {{ $estado->color_hex }};"></span>
                        <span class="estado-nombre">{{ $estado->estado_nombre }}</span>
                    </div>
                    <span class="estado-valor">{{ $estado->total }}</span>
                </div>
                @empty
                <p class="text-muted text-center py-3">Sin datos</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="chart-card">
        <div class="chart-card-header">
            <i class="fas fa-road text-muted"></i>
            <h5>Distribución por Concesión</h5>
        </div>
        <div class="chart-card-body">
            @if($porConcesion->count() > 0)
                @php $maxTotal = $porConcesion->max('total'); @endphp
                @foreach($porConcesion as $concesion)
                <div class="concesion-bar">
                    <div class="concesion-info">
                        <span class="concesion-nombre">{{ $concesion->nombre }}</span>
                        <span class="concesion-valor">{{ $concesion->total }} mantenimientos</span>
                    </div>
                    <div class="concesion-progress">
                        <div class="concesion-progress-bar" style="width: {{ $maxTotal > 0 ? ($concesion->total / $maxTotal) * 100 : 0 }}%"></div>
                    </div>
                </div>
                @endforeach
            @else
            <p class="text-muted text-center py-3">Sin datos de concesiones</p>
            @endif
        </div>
    </div>
</div>
@endsection