@extends('layouts.app')

@section('title', 'Alertas del Sistema')
@section('page-title', 'Alertas y Notificaciones')

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

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

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

    @media (max-width: 576px) {
        .alertas-stats {
            grid-template-columns: 1fr;
        }
    }

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

    .alert-stat-card.criticas {
        border-left: 4px solid #dc2626;
        background: linear-gradient(to right, rgba(220, 38, 38, 0.05), #fff);
    }

    .alert-stat-card.activas {
        border-left: 4px solid #f59e0b;
    }

    .alert-stat-card.proceso {
        border-left: 4px solid #3b82f6;
    }

    .alert-stat-card.resueltas {
        border-left: 4px solid #10b981;
    }

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

    .alert-stat-card.criticas .alert-stat-icon {
        background: rgba(220, 38, 38, 0.1);
        color: #dc2626;
    }

    .alert-stat-card.activas .alert-stat-icon {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .alert-stat-card.proceso .alert-stat-icon {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    .alert-stat-card.resueltas .alert-stat-icon {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .alert-stat-info h4 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: #1a3a5c;
    }

    .alert-stat-info span {
        font-size: 0.8rem;
        color: #64748b;
    }

    .alerta-card {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        margin-bottom: 0.75rem;
        overflow: hidden;
        transition: all 0.2s;
    }

    .alerta-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .alerta-card.prioridad-ALTA {
        border-left: 4px solid #dc2626;
    }

    .alerta-card.prioridad-MEDIA {
        border-left: 4px solid #f59e0b;
    }

    .alerta-card.prioridad-BAJA {
        border-left: 4px solid #6366f1;
    }

    .alerta-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1rem 1.25rem;
        gap: 1rem;
    }

    .alerta-tipo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .alerta-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .alerta-card.prioridad-ALTA .alerta-icon {
        background: rgba(220, 38, 38, 0.1);
        color: #dc2626;
    }

    .alerta-card.prioridad-MEDIA .alerta-icon {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .alerta-card.prioridad-BAJA .alerta-icon {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
    }

    .alerta-titulo h5 {
        margin: 0 0 0.25rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a3a5c;
    }

    .alerta-titulo .subtitulo {
        font-size: 0.8rem;
        color: #64748b;
    }

    .alerta-badges {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .badge-prioridad {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .badge-prioridad.ALTA {
        background: #fee2e2;
        color: #991b1b;
    }

    .badge-prioridad.MEDIA {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-prioridad.BAJA {
        background: #e0e7ff;
        color: #3730a3;
    }

    .badge-estado {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 500;
    }

    .badge-estado.ACTIVA {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-estado.EN_PROCESO {
        background: #dbeafe;
        color: #1e40af;
    }

    .alerta-body {
        padding: 0 1.25rem 1rem;
    }

    .alerta-mensaje {
        background: #f8fafc;
        padding: 0.75rem;
        border-radius: 6px;
        font-size: 0.85rem;
        color: #475569;
        margin-bottom: 0.75rem;
    }

    .alerta-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        font-size: 0.8rem;
        color: #64748b;
    }

    .alerta-meta-item {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .alerta-meta-item i {
        color: #94a3b8;
    }

    .alerta-footer {
        padding: 0.75rem 1.25rem;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tiempo-activa {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
    }

    .tiempo-activa.urgente {
        background: #fee2e2;
        color: #991b1b;
    }

    .tiempo-activa.warning {
        background: #fef3c7;
        color: #92400e;
    }

    .tiempo-activa.normal {
        background: #f1f5f9;
        color: #64748b;
    }

    .tipos-resumen {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tipo-chip {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        background: #f1f5f9;
        border-radius: 20px;
        font-size: 0.75rem;
        color: #475569;
    }

    .tipo-chip .count {
        background: #dc2626;
        color: #fff;
        padding: 0.125rem 0.375rem;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.7rem;
    }
</style>
@endpush

@section('content')
<div class="mantenimientos-container">
    {{-- Estadísticas --}}
    <div class="alertas-stats">
        <div class="alert-stat-card criticas">
            <div class="alert-stat-icon">
                <i class="fas fa-exclamation-circle"></i>
            </div>
            <div class="alert-stat-info">
                <h4>{{ $estadisticas['criticas'] }}</h4>
                <span>Alertas Críticas</span>
            </div>
        </div>

        <div class="alert-stat-card activas">
            <div class="alert-stat-icon">
                <i class="fas fa-bell"></i>
            </div>
            <div class="alert-stat-info">
                <h4>{{ $estadisticas['activas'] }}</h4>
                <span>Alertas Activas</span>
            </div>
        </div>

        <div class="alert-stat-card proceso">
            <div class="alert-stat-icon">
                <i class="fas fa-spinner"></i>
            </div>
            <div class="alert-stat-info">
                <h4>{{ $estadisticas['en_proceso'] }}</h4>
                <span>En Proceso</span>
            </div>
        </div>

        <div class="alert-stat-card resueltas">
            <div class="alert-stat-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="alert-stat-info">
                <h4>{{ $estadisticas['resueltas_hoy'] }}</h4>
                <span>Resueltas Hoy</span>
            </div>
        </div>
    </div>

    {{-- Resumen por tipo --}}
    @if(count($estadisticas['por_tipo']) > 0)
    <div class="filtros-card mb-3">
        <label class="filtro-label mb-2">Alertas Activas por Tipo</label>
        <div class="tipos-resumen">
            @foreach($estadisticas['por_tipo'] as $tipo => $count)
            <span class="tipo-chip">
                <i class="fas fa-{{ $tipo == 'NO_INICIO_11AM' ? 'clock' : ($tipo == 'GPS_PERDIDO' ? 'map-marker-alt' : 'exclamation-triangle') }}"></i>
                {{ $tiposAlerta[$tipo] ?? $tipo }}
                <span class="count">{{ $count }}</span>
            </span>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Filtros --}}
    <div class="filtros-card mb-3">
        <form action="{{ route('web.alertas.index') }}" method="GET" class="filtros-form">
            <div class="filtro-grupo">
                <label class="filtro-label">Tipo</label>
                <select name="tipo" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    @foreach($tiposAlerta as $key => $nombre)
                    <option value="{{ $key }}" {{ request('tipo') == $key ? 'selected' : '' }}>
                        {{ $nombre }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Prioridad</label>
                <select name="prioridad" class="form-select form-select-sm">
                    <option value="">Todas</option>
                    <option value="ALTA" {{ request('prioridad') == 'ALTA' ? 'selected' : '' }}>Alta</option>
                    <option value="MEDIA" {{ request('prioridad') == 'MEDIA' ? 'selected' : '' }}>Media</option>
                    <option value="BAJA" {{ request('prioridad') == 'BAJA' ? 'selected' : '' }}>Baja</option>
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Estado</label>
                <select name="estado" class="form-select form-select-sm">
                    <option value="">Activas/En Proceso</option>
                    <option value="ACTIVA" {{ request('estado') == 'ACTIVA' ? 'selected' : '' }}>Solo Activas</option>
                    <option value="EN_PROCESO" {{ request('estado') == 'EN_PROCESO' ? 'selected' : '' }}>Solo En Proceso</option>
                    <option value="RESUELTA" {{ request('estado') == 'RESUELTA' ? 'selected' : '' }}>Resueltas</option>
                    <option value="IGNORADA" {{ request('estado') == 'IGNORADA' ? 'selected' : '' }}>Ignoradas</option>
                </select>
            </div>

            <div class="filtro-grupo">
                <label class="filtro-label">Fecha</label>
                <input type="date" name="fecha" class="form-control form-control-sm" value="{{ request('fecha') }}">
            </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.alertas.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-times me-1"></i> Limpiar
                </a>
            </div>
        </form>
    </div>

    {{-- Listado de alertas --}}
    @forelse($alertas as $alerta)
    <div class="alerta-card prioridad-{{ $alerta->prioridad }}">
        <div class="alerta-header">
            <div class="alerta-tipo">
                <div class="alerta-icon">
                    @switch($alerta->tipo_alerta)
                        @case('NO_INICIO_11AM')
                            <i class="fas fa-clock"></i>
                            @break
                        @case('SIN_MOVIMIENTO')
                            <i class="fas fa-pause-circle"></i>
                            @break
                        @case('GPS_PERDIDO')
                            <i class="fas fa-map-marker-alt"></i>
                            @break
                        @case('PEND_APROBACION')
                            <i class="fas fa-hourglass-half"></i>
                            @break
                        @case('CHECKLIST_INCOMPLETO')
                            <i class="fas fa-clipboard-list"></i>
                            @break
                        @case('FOTOS_INSUFICIENTES')
                            <i class="fas fa-camera"></i>
                            @break
                        @default
                            <i class="fas fa-exclamation-triangle"></i>
                    @endswitch
                </div>
                <div class="alerta-titulo">
                    <h5>{{ $alerta->titulo }}</h5>
                    <span class="subtitulo">{{ $tiposAlerta[$alerta->tipo_alerta] ?? $alerta->tipo_alerta }}</span>
                </div>
            </div>
            <div class="alerta-badges">
                <span class="badge-prioridad {{ $alerta->prioridad }}">{{ $alerta->prioridad }}</span>
                <span class="badge-estado {{ $alerta->estado }}">{{ str_replace('_', ' ', $alerta->estado) }}</span>
            </div>
        </div>

        <div class="alerta-body">
            <div class="alerta-mensaje">
                {{ $alerta->mensaje }}
            </div>
            <div class="alerta-meta">
                @if($alerta->programacion)
                <div class="alerta-meta-item">
                    <i class="fas fa-road"></i>
                    <span>{{ $alerta->programacion->centro->nombre_centro ?? 'N/A' }}</span>
                </div>
                @endif
                @if($alerta->usuarioAfectado)
                <div class="alerta-meta-item">
                    <i class="fas fa-user"></i>
                    <span>{{ $alerta->usuarioAfectado->usu_nombre }} {{ $alerta->usuarioAfectado->usu_apellido }}</span>
                </div>
                @endif
                <div class="alerta-meta-item">
                    <i class="fas fa-calendar"></i>
                    <span>{{ $alerta->fecha_genera ? $alerta->fecha_genera->format('d/m/Y H:i') : 'N/A' }}</span>
                </div>
            </div>
        </div>

        <div class="alerta-footer">
            @php
                $minutos = $alerta->minutos_activa ?? 0;
                $tiempoClase = $minutos > 120 ? 'urgente' : ($minutos > 60 ? 'warning' : 'normal');
            @endphp
            <span class="tiempo-activa {{ $tiempoClase }}">
                @if($minutos > 60)
                    <i class="fas fa-clock me-1"></i>
                    {{ round($minutos / 60) }}h activa
                @else
                    {{ $minutos }} min activa
                @endif
            </span>
            <div>
                <a href="{{ route('web.alertas.show', $alerta->alerta_id) }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-eye me-1"></i> Ver Detalle
                </a>
                @if($alerta->estado == 'ACTIVA')
                <form action="{{ route('web.alertas.tomar', $alerta->alerta_id) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-hand-pointer me-1"></i> Tomar
                    </button>
                </form>
                @endif
            </div>
        </div>
    </div>
    @empty
    <div class="empty-state">
        <i class="fas fa-check-circle text-success"></i>
        <h4>Sin alertas pendientes</h4>
        <p>No hay alertas activas en este momento.</p>
    </div>
    @endforelse

    {{-- Paginación --}}
    @if($alertas->hasPages())
    <div class="d-flex justify-content-center mt-3">
        {{ $alertas->links() }}
    </div>
    @endif
</div>
@endsection