@extends('layouts.admin')

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

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

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

        .bg-light-success {
            background-color: rgba(113, 221, 55, 0.16);
            color: #71dd37;
        }

        .bg-light-info {
            background-color: rgba(3, 195, 236, 0.16);
            color: #03c3ec;
        }

        .bg-light-warning {
            background-color: rgba(255, 171, 0, 0.16);
            color: #ffab00;
        }

        .bg-light-secondary {
            background-color: rgba(133, 146, 163, 0.16);
            color: #8592a3;
        }

        .bg-light-danger {
            background-color: rgba(255, 62, 29, 0.16);
            color: #ff3e1d;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid py-4">

        <h4 class="fw-bold py-3 mb-4">
            <span class="text-muted fw-light">Reportes /</span> Ventas y Estadísticas
        </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">
                        <div class="icon-circle bg-light-primary">
                            <i class="fas fa-file-invoice-dollar"></i>
                        </div>
                        <h5 class="card-title text-uppercase fw-bold">Todas las Ventas</h5>
                        <p class="card-text text-muted small mb-4">Listado general filtrado por fechas</p>

                        <form action="{{ route('venta.reportesAll') }}" method="get">
                            <div class="row g-2 mb-3 text-start">
                                <div class="col-6">
                                    <label class="form-label small fw-bold">Inicio</label>
                                    <input type="date" name="inicio" class="form-control" required>
                                </div>
                                <div class="col-6">
                                    <label class="form-label small fw-bold">Fin</label>
                                    <input type="date" name="fin" class="form-control" required>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fa fa-search me-2"></i> Buscar
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="card h-100 shadow-sm border-top border-success border-3">
                    <div class="card-body text-center">
                        <div class="icon-circle bg-light-success">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                        <h5 class="card-title text-uppercase fw-bold">Ventas del Día</h5>
                        <p class="card-text text-muted small mb-4">Reporte rápido de movimientos de hoy</p>

                        <div class="mt-4 pt-2">
                            <a class="btn btn-success w-100" href="{{ route('venta.diaReport') }}">
                                <i class="fa fa-print me-2"></i> Imprimir Reporte
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- NUEVA CARD: Ventas de un Día Específico -->
            <div class="col-md-6 col-lg-4">
                <div class="card h-100 shadow-sm border-top border-danger border-3">
                    <div class="card-body text-center">
                        <div class="icon-circle bg-light-danger">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <h5 class="card-title text-uppercase fw-bold">Ventas por Fecha</h5>
                        <p class="card-text text-muted small mb-4">Reporte detallado de un día específico</p>

                        <form action="{{ route('venta.ventasDiaEspecifico') }}" method="GET">
                            <div class="mb-3 text-start">
                                <label class="form-label small fw-bold">Seleccionar Día</label>
                                <input type="date" name="fecha" class="form-control" value="{{ date('Y-m-d') }}"
                                    required>
                            </div>
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="fa fa-print me-2"></i> Imprimir
                            </button>
                        </form>
                    </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">
                        <div class="icon-circle bg-light-info">
                            <i class="fas fa-chart-pie"></i>
                        </div>
                        <h5 class="card-title text-uppercase fw-bold">Estadísticas</h5>
                        <p class="card-text text-muted small mb-4">Gráficas anuales de rendimiento</p>

                        <form action="{{ route('venta.estadistica') }}" method="get">
                            <div class="mb-3 text-start">
                                <label class="form-label small fw-bold">Seleccionar Año</label>
                                <select name="anio" class="form-select">
                                    @for ($year = 2026; $year <= 2045; $year++)
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endfor
                                </select>
                            </div>
                            <button type="submit" class="btn btn-info text-white w-100">
                                <i class="fas fa-chart-line me-2"></i> Ver Gráficas
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="card h-100 shadow-sm border-top border-secondary border-3">
                    <div class="card-body text-center">
                        <div class="icon-circle bg-light-secondary">
                            <i class="fas fa-list-alt"></i>
                        </div>
                        <h5 class="card-title text-uppercase fw-bold">Ventas Simples</h5>
                        <p class="card-text text-muted small mb-4">Listado comprimido por fechas</p>

                        <form action="{{ route('venta.fucturasSimples') }}" method="POST">
                            @csrf()
                            <div class="row g-2 mb-3 text-start">
                                <div class="col-6">
                                    <label class="form-label small fw-bold">Inicio</label>
                                    <input type="date" class="form-control" name="desde" required>
                                </div>
                                <div class="col-6">
                                    <label class="form-label small fw-bold">Fin</label>
                                    <input type="date" class="form-control" name="hasta" required>
                                </div>
                            </div>
                            <button class="btn btn-secondary w-100" type="submit">
                                <i class="fa fa-print me-2"></i> Imprimir
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="card h-100 shadow-sm border-top border-warning border-3">
                    <div class="card-body text-center">
                        <div class="icon-circle bg-light-warning">
                            <i class="fas fa-wallet"></i>
                        </div>
                        <h5 class="card-title text-uppercase fw-bold">Tipos de Pago</h5>
                        <p class="card-text text-muted small mb-4">Filtrar por método de pago y fecha</p>

                        <form action="{{ route('ventas.reportVentasToTipoAndDate') }}" method="POST">
                            @csrf()
                            <div class="row g-2 mb-2 text-start">
                                <div class="col-6">
                                    <label class="form-label small fw-bold">Inicio</label>
                                    <input type="date" class="form-control" name="inicio" required>
                                </div>
                                <div class="col-6">
                                    <label class="form-label small fw-bold">Fin</label>
                                    <input type="date" class="form-control" name="fin" required>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small fw-bold">Método de Pago</label>
                                    <select class="form-select" name="tipo">
                                        <option value="EFECTIVO">EFECTIVO</option>
                                        <option value="CREDITO">CREDITO</option>
                                        <option value="DEPOSITO">DEPOSITO</option>
                                        <option value="TARJETA">TARJETA</option>
                                        <option value="OTROS">OTROS</option>
                                    </select>
                                </div>
                            </div>
                            <button class="btn btn-warning w-100 mt-2" type="submit">
                                <i class="fa fa-filter me-2"></i> Imprimir
                            </button>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection