@extends('adminlte::page')

@section('content_header')
    <h1>Dashboard de Solicitudes</h1>
@stop

@section('content')
<div class="container-fluid">
    <!-- Filtro por Fechas -->
    <div class="row">
        <div class="col-12">
            <div class="card card-info">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-filter mr-2"></i>Filtrar por Rango de Fechas
                    </h3>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.index') }}">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="fecha_inicio">Fecha Inicio</label>
                                    <input type="date" 
                                           class="form-control" 
                                           id="fecha_inicio" 
                                           name="fecha_inicio" 
                                           value="{{ $fecha_inicio }}"
                                           max="{{ now()->format('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="fecha_fin">Fecha Fin</label>
                                    <input type="date" 
                                           class="form-control" 
                                           id="fecha_fin" 
                                           name="fecha_fin" 
                                           value="{{ $fecha_fin }}"
                                           max="{{ now()->format('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-search mr-2"></i>Filtrar
                                        </button>
                                        <a href="{{ route('admin.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-sync mr-2"></i>Limpiar
                                        </a>
                                        @if($fecha_inicio && $fecha_fin)
                                        <small class="form-text text-muted mt-2">
                                            Mostrando datos del {{ \Carbon\Carbon::parse($fecha_inicio)->format('d/m/Y') }} al {{ \Carbon\Carbon::parse($fecha_fin)->format('d/m/Y') }}
                                        </small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Tarjetas de Estadísticas -->
    <div class="row">
        <div class="col-lg-2 col-6">
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>{{ $total_solicitudes }}</h3>
                    <p>Total Solicitudes</p>
                </div>
                <div class="icon">
                    <i class="fas fa-clipboard-list"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ $solicitudes_pendientes }}</h3>
                    <p>Pendientes</p>
                </div>
                <div class="icon">
                    <i class="fas fa-clock"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ $solicitudes_en_proceso }}</h3>
                    <p>En Proceso</p>
                </div>
                <div class="icon">
                    <i class="fas fa-spinner"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{ $solicitudes_finalizadas }}</h3>
                    <p>Finalizadas</p>
                </div>
                <div class="icon">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-secondary">
                <div class="inner">
                    <h3>{{ $solicitudes_atendidas }}</h3>
                    <p>Atendidas</p>
                </div>
                <div class="icon">
                    <i class="fas fa-users"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-6">
            <div class="small-box bg-dark">
                <div class="inner">
                    @if($total_solicitudes > 0)
                        <h3>{{ number_format(($solicitudes_atendidas / $total_solicitudes) * 100, 1) }}%</h3>
                    @else
                        <h3>0%</h3>
                    @endif
                    <p>Tasa de Atención</p>
                </div>
                <div class="icon">
                    <i class="fas fa-chart-line"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas por Usuario -->
    @if($usuariosTop->count() > 0)
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-info">
                    <h3 class="card-title">
                        <i class="fas fa-trophy mr-2"></i>Top Usuarios por Solicitudes Atendidas
                        @if($fecha_inicio && $fecha_fin)
                        <small>({{ \Carbon\Carbon::parse($fecha_inicio)->format('d/m/Y') }} - {{ \Carbon\Carbon::parse($fecha_fin)->format('d/m/Y') }})</small>
                        @endif
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($usuariosTop as $index => $usuarioStat)
                        <div class="col-md-3 col-6 mb-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-success">
                                    @if($index == 0)
                                        <i class="fas fa-crown"></i>
                                    @elseif($index == 1)
                                        <i class="fas fa-medal"></i>
                                    @elseif($index == 2)
                                        <i class="fas fa-award"></i>
                                    @else
                                        <i class="fas fa-user-check"></i>
                                    @endif
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">
                                        @if($usuarioStat->usuarioAsignado)
                                            {{ $usuarioStat->usuarioAsignado->name }}
                                        @else
                                            Usuario No Encontrado
                                        @endif
                                    </span>
                                    <span class="info-box-number">{{ $usuarioStat->total }} solicitudes</span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Tabla de Solicitudes -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-dark">
                    <h3 class="card-title">
                        <i class="fas fa-list mr-2"></i>Solicitudes Registradas 
                        @if($fecha_inicio && $fecha_fin)
                        <small class="text-light">({{ $total_solicitudes }} resultados del {{ \Carbon\Carbon::parse($fecha_inicio)->format('d/m/Y') }} al {{ \Carbon\Carbon::parse($fecha_fin)->format('d/m/Y') }})</small>
                        @else
                        <small class="text-light">({{ $total_solicitudes }} resultados - Todas las fechas)</small>
                        @endif
                    </h3>
                    <div class="card-tools">
                        <span class="badge badge-light">Página {{ $solicitudes->currentPage() }} de {{ $solicitudes->lastPage() }}</span>
                    </div>
                </div>
                <div class="card-body">
                    @if($solicitudes->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>Usuario</th>
                                    <th>Gerencia</th>
                                    <th>Tipo de Falla</th>
                                    <th>Incidencia</th>
                                    <th>Estado</th>
                                    <th>Asignado a</th>
                                    <th>Fecha</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($solicitudes as $solicitud)
                                <tr>
                                    <td>{{ $solicitud->id }}</td>
                                    <td>
                                        <strong>{{ $solicitud->nombres }} {{ $solicitud->apellidos }}</strong>
                                    </td>
                                    <td>
                                        <span class="badge badge-secondary">{{ $solicitud->gerencia }}</span>
                                    </td>
                                    <td>
                                        <span class="badge badge-warning">{{ $solicitud->falla }}</span>
                                    </td>
                                    <td>
                                        <small data-toggle="tooltip" title="{{ $solicitud->incidencia }}">
                                            {{ Str::limit($solicitud->incidencia, 30) }}
                                        </small>
                                    </td>
                                    <td>
                                        @if($solicitud->estado == 'pendiente')
                                            <span class="badge badge-warning">Pendiente</span>
                                        @elseif($solicitud->estado == 'en_proceso')
                                            <span class="badge badge-info">En Proceso</span>
                                        @else
                                            <span class="badge badge-success">Finalizado</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($solicitud->usuarioAsignado)
                                            <small>{{ $solicitud->usuarioAsignado->name }}</small>
                                        @else
                                            <small class="text-muted">No asignado</small>
                                        @endif
                                    </td>
                                    <td>
                                        <small>{{ $solicitud->created_at->format('d/m/Y H:i') }}</small>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            
                                            
                                            @if($solicitud->estado == 'pendiente')
                                                <form action="{{ route('admin.solicitudes.tomar', $solicitud->id) }}" 
                                                      method="POST" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="btn btn-success" 
                                                            title="Tomar solicitud" onclick="return confirm('¿Estás seguro de tomar esta solicitud?')">
                                                        <i class="fas fa-hand-paper"></i>
                                                    </button>
                                                </form>
                                            @elseif($solicitud->estado == 'en_proceso')
                                                @if($solicitud->usuario_asignado_id == Auth::id())
                                                    <form action="{{ route('admin.solicitudes.finalizar', $solicitud->id) }}" 
                                                          method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="btn btn-success" 
                                                                title="Finalizar solicitud" onclick="return confirm('¿Estás seguro de finalizar esta solicitud?')">
                                                            <i class="fas fa-check"></i>
                                                        </button>
                                                    </form>
                                                    <form action="{{ route('admin.solicitudes.liberar', $solicitud->id) }}" 
                                                          method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="btn btn-warning" 
                                                                title="Liberar solicitud" onclick="return confirm('¿Estás seguro de liberar esta solicitud?')">
                                                            <i class="fas fa-undo"></i>
                                                        </button>
                                                    </form>
                                                @else
                                                    <button class="btn btn-secondary" disabled title="Solicitud en proceso por otro usuario">
                                                        <i class="fas fa-lock"></i>
                                                    </button>
                                                @endif
                                            @else
                                                <button class="btn btn-secondary" disabled title="Solicitud finalizada">
                                                    <i class="fas fa-check-double"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Paginación -->
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="dataTables_info">
                                Mostrando {{ $solicitudes->firstItem() }} a {{ $solicitudes->lastItem() }} de {{ $solicitudes->total() }} registros
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="float-right">
                                {{ $solicitudes->appends(request()->query())->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                    
                    @else
                    <div class="text-center py-4">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No hay solicitudes</h5>
                        <p class="text-muted">
                            @if($fecha_inicio && $fecha_fin)
                                No hay solicitudes en el rango de fechas seleccionado.
                            @else
                                No hay solicitudes registradas.
                            @endif
                        </p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .info-box {
            cursor: default;
            min-height: 80px;
        }
        .info-box-icon {
            height: 80px;
            width: 80px;
            font-size: 30px;
        }
        .table td {
            vertical-align: middle;
        }
        .badge {
            font-size: 85%;
        }
    </style>
@stop

@section('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Validación de fechas
        const fechaInicio = document.getElementById('fecha_inicio');
        const fechaFin = document.getElementById('fecha_fin');

        fechaInicio.addEventListener('change', function() {
            fechaFin.min = this.value;
        });

        fechaFin.addEventListener('change', function() {
            if (fechaInicio.value && this.value < fechaInicio.value) {
                alert('La fecha fin no puede ser menor a la fecha inicio');
                this.value = fechaInicio.value;
            }
        });

        // Establecer min/max inicial
        const today = new Date().toISOString().split('T')[0];
        fechaInicio.max = today;
        fechaFin.max = today;
        
        if (fechaInicio.value) {
            fechaFin.min = fechaInicio.value;
        }

        // Tooltips para las incidencias
        $('[data-toggle="tooltip"]').tooltip({
            placement: 'top',
            trigger: 'hover'
        });
    });
</script>
@stop