@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css') }}">
<style>
    /* Estilos para los iconos circulares */
    .icon-circle {
        width: 65px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 auto 1rem auto;
        font-size: 1.75rem;
        transition: transform 0.3s ease;
    }

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

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

    .bg-light-danger {
        background-color: rgba(255, 62, 29, 0.16);
        color: #ff3e1d;
    }

    .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-dark {
        background-color: rgba(35, 36, 41, 0.16);
        color: #232429;
    }

    /* Corrección SlimSelect en BS5 */
    .ss-main {
        background-color: #fff !important;
        color: #495057 !important;
        border: 1px solid #d9dee3 !important;
        border-radius: 0.375rem !important;
        padding: 0.4rem 0.75rem !important;
    }

    .ss-main .ss-single-selected .placeholder {
        background-color: transparent !important;
        opacity: 1 !important;
        cursor: pointer !important;
        display: block !important;
    }
</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> Inventario y Artículos
    </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-clipboard-list"></i>
                    </div>
                    <h5 class="card-title text-uppercase fw-bold">Reporte General</h5>
                    <p class="card-text text-muted small mb-4">
                        Listado completo con precios de venta y capital total invertido (Vista Admin).
                    </p>
                    <div class="mt-auto">
                        <a target="_blank" href="{{route('articulo.repotesAll')}}" class="btn btn-primary w-100">
                            <i class="fa fa-print me-2"></i> Imprimir
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <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-exclamation-triangle"></i>
                    </div>
                    <h5 class="card-title text-uppercase fw-bold">Stock Bajo</h5>
                    <p class="card-text text-muted small mb-4">
                        Artículos que han alcanzado su stock mínimo. Refleja costos y ventas.
                    </p>
                    <div class="mt-auto">
                        <a target="_blank" href="{{route('articulo.repotesAllmin')}}" class="btn btn-danger w-100">
                            <i class="fa fa-print me-2"></i> Imprimir Alerta
                        </a>
                    </div>
                </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-boxes"></i>
                    </div>
                    <h5 class="card-title text-uppercase fw-bold">Toma de Inventario</h5>
                    <p class="card-text text-muted small mb-4">
                        Listado para conteo físico. Solo muestra nombre y cantidades (Sin precios de costo).
                    </p>
                    <div class="mt-auto">
                        <a target="_blank" href="{{route('articulo.stockControl')}}" class="btn btn-success w-100">
                            <i class="fa fa-print me-2"></i> Imprimir Hoja
                        </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">
                    <div class="icon-circle bg-light-info">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <h5 class="card-title text-uppercase fw-bold">Ventas por Periodo</h5>
                    <p class="card-text text-muted small mb-3">
                        Artículos vendidos filtrados por Mes y Año.
                    </p>

                    <form action="{{route('articulo.articulosvendidos')}}" method="get">
                        <div class="row g-2 mb-3 text-start">
                            <div class="col-6">
                                <select name="ano" class="form-select form-select-sm">
                                    <option value="">Año...</option>
                                    @for($i = 2026; $i < 2050; $i ++)
                                        <option value="{{$i}}">{{$i}}</option>
                                        @endfor
                                </select>
                            </div>
                            <div class="col-6">
                                <select name="mes" class="form-select form-select-sm">
                                    <option selected hidden>Mes</option>
                                    <option value="01">Ene</option>
                                    <option value="02">Feb</option>
                                    <option value="03">Mar</option>
                                    <option value="04">Abr</option>
                                    <option value="05">May</option>
                                    <option value="06">Jun</option>
                                    <option value="07">Jul</option>
                                    <option value="08">Ago</option>
                                    <option value="09">Sep</option>
                                    <option value="10">Oct</option>
                                    <option value="11">Nov</option>
                                    <option value="12">Dic</option>
                                </select>
                            </div>
                        </div>
                        <button class="btn btn-info text-white w-100">
                            <i class="fa fa-print me-2"></i> Generar
                        </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-history"></i>
                    </div>
                    <h5 class="card-title text-uppercase fw-bold">Historial Compras</h5>
                    <p class="card-text text-muted small mb-3">
                        Reporte de reabastecimiento por rango de fechas.
                    </p>

                    <form method="GET" action="{{route('articulo.compraReport')}}">
                        <div class="row g-2 mb-3 text-start">
                            <div class="col-6">
                                <label class="small fw-bold">Inicio</label>
                                <input type="date" name="inicio" class="form-control form-control-sm">
                            </div>
                            <div class="col-6">
                                <label class="small fw-bold">Fin</label>
                                <input type="date" name="fin" class="form-control form-control-sm">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning w-100 text-white">
                            <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-dark border-3">
                <div class="card-body text-center">
                    <div class="icon-circle bg-light-dark">
                        <i class="fas fa-search-dollar"></i>
                    </div>
                    <h5 class="card-title text-uppercase fw-bold">Análisis Individual</h5>
                    <p class="card-text text-muted small mb-3">
                        Ventas detalladas de un artículo específico.
                    </p>

                    <form action="{{route('articulo.ventasArt')}}" method="post">
                        @csrf
                        <div class="mb-2 text-start">
                            <select name="articulo_id" id="articulo_id">
                                <option data-placeholder="true"></option>
                                @foreach($articulo as $art)
                                <option value="{{$art->id}}"> {{$art->nombre}} </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row g-2 mb-3 text-start">
                            <div class="col-6">
                                <label class="small fw-bold">Inicio</label>
                                <input type="date" name="inicio" class="form-control form-control-sm">
                            </div>
                            <div class="col-6">
                                <label class="small fw-bold">Fin</label>
                                <input type="date" name="fin" class="form-control form-control-sm">
                            </div>
                        </div>

                        <button class="btn btn-dark w-100" type="submit">
                            <i class="fa fa-search me-2"></i> Analizar
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('scripts')
<script src="{{asset('plugins/slim-select/slimselect.min.js') }}"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
            new SlimSelect({
                select: '#articulo_id',
                placeholder: 'Buscar Artículo...',
                searchText: 'No encontrado',
                searchPlaceholder: 'Escribe para buscar',
                deselectLabel: '<span class="text-danger">×</span>',
                allowDeselect: true
            })
        }, 300);
    });
</script>
@endSection