@extends('layouts.admin')

@section('styles')
<style>
    /* Estilos para los iconos circulares */
    .icon-circle {
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 auto 1.5rem auto;
        font-size: 2rem;
        transition: transform 0.3s ease;
    }

    .card:hover .icon-circle {
        transform: scale(1.1);
    }

    /* Fondos suaves */
    .bg-light-primary {
        background-color: rgba(105, 108, 255, 0.16);
        color: #696cff;
    }

    .bg-light-dark {
        background-color: rgba(35, 36, 41, 0.16);
        color: #232429;
    }

    .bg-light-info {
        background-color: rgba(3, 195, 236, 0.16);
        color: #03c3ec;
    }
</style>
@endsection

@section('content')

<div class="container-fluid py-4">

    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Servicios /</span> Reportes Generales
    </h4>

    <div class="row g-4">

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-top border-primary border-3">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-light-primary">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h5 class="card-title fw-bold text-primary">Servicios Activos</h5>
                    <p class="card-text text-muted small mb-4">
                        Genera un listado completo de todos los servicios que se encuentran actualmente en proceso o taller.
                    </p>

                    <div class="mt-auto">
                        <a href="{{route('servi.activosprint')}}" class="btn btn-primary w-100">
                            <i class="fas fa-print me-2"></i> Imprimir Activos
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-top border-dark border-3">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-light-dark">
                        <i class="fas fa-calendar-day"></i>
                    </div>
                    <h5 class="card-title fw-bold text-dark">Servicios del Día</h5>
                    <p class="card-text text-muted small mb-4">
                        Reporte rápido de los servicios ingresados y movimientos realizados durante el día de hoy.
                    </p>

                    <div class="mt-auto">
                        <a href="{{route('servi.reportdayservice')}}" class="btn btn-dark w-100">
                            <i class="fas fa-gem me-2"></i> Reporte Diario
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm border-top border-info border-3">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-light-info">
                        <i class="fas fa-history"></i>
                    </div>
                    <h5 class="card-title fw-bold text-info">Historial Entregados</h5>
                    <p class="card-text text-muted small mb-3">
                        Consulta servicios finalizados filtrando por fecha.
                    </p>

                    <form action="{{route('servi.entregadosReport')}}" method="post">
                        @csrf()
                        <div class="row g-2 mb-3 text-start">
                            <div class="col-6">
                                <label class="form-label small fw-bold">Año</label>
                                <select class="form-select" name="ano" id="ano" required>
                                    @for($an = 2026; $an <= 2040; $an++)
                                        <option value="{{$an}}" {{ $an == date('Y') ? 'selected' : '' }}>{{$an}}</option>
                                        @endfor
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label small fw-bold">Mes</label>
                                <select class="form-select" name="mes" id="mes" required>
                                    <option value="" selected disabled>Mes...</option>
                                    <option value="1">Enero</option>
                                    <option value="2">Febrero</option>
                                    <option value="3">Marzo</option>
                                    <option value="4">Abril</option>
                                    <option value="5">Mayo</option>
                                    <option value="6">Junio</option>
                                    <option value="7">Julio</option>
                                    <option value="8">Agosto</option>
                                    <option value="9">Septiembre</option>
                                    <option value="10">Octubre</option>
                                    <option value="11">Noviembre</option>
                                    <option value="12">Diciembre</option>
                                </select>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-info text-white w-100">
                            <i class="fas fa-search me-2"></i> Generar Historial
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection