@extends('../padre.padre')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --premium-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .premium-header {
        background: var(--primary-gradient);
        color: white;
        padding: 0.75rem;
        border-radius: 10px;
        margin-bottom: 1rem;
        box-shadow: var(--premium-shadow);
        text-align: center;
    }

    .premium-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .filter-card {
        background: var(--card-bg);
        border: none;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: var(--premium-shadow);
    }

    .form-control, .form-select, select {
        border-radius: 8px;
        border: 1px solid var(--border-color);
        padding: 0.4rem;
        font-size: 0.85rem;
    }

    .btn-premium {
        border-radius: 8px;
        padding: 0.4rem 1.2rem;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s;
        text-transform: uppercase;
    }

    .btn-consultar {
        background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        border: none;
        color: #333;
    }

    .btn-exportar {
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        border: none;
        color: #333;
    }

    /* Tabla con encabezado fijo */
    .table-responsive-premium {
        max-height: 500px; /* Altura fija específica para asegurar el scroll interno */
        overflow: auto;
        border-radius: 10px;
        box-shadow: var(--premium-shadow);
        background: white;
        position: relative;
        border: 1px solid var(--border-color);
    }

    #tablaCostosInventario {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        margin-bottom: 0;
    }

    #tablaCostosInventario thead th {
        position: sticky;
        top: 0;
        background-color: #343a40 !important; /* Fondo oscuro sólido */
        color: white !important;
        z-index: 1020; /* Elevado para asegurar visibilidad */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        padding: 12px 30px 12px 10px !important; /* Más espacio a la derecha para iconos */
        font-size: 0.8rem;
        border: none;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Iconos de ordenamiento blancos para fondo oscuro */
    table.dataTable thead .sorting:before,
    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:before,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:before,
    table.dataTable thead .sorting_desc:after {
        color: white !important;
        opacity: 0.9 !important;
    }

    /* Panel de Totales por fuera */
    .totals-panel {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 1rem;
        box-shadow: var(--premium-shadow);
        border: 1px solid #dee2e6;
    }

    .total-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .total-label {
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: #6c757d;
        margin-bottom: 0.3rem;
    }

    .total-value {
        font-size: 1.15rem;
        font-weight: 900;
    }

    .dataTables_wrapper {
        padding: 5px;
        background: transparent;
    }

    [data-theme='dark'] .premium-header {
        background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    }

    [data-theme='dark'] .table-responsive-premium {
        background: #1a202c;
    }

    [data-theme='dark'] .totals-panel {
        background: #2d3748;
        border-color: #4a5568;
    }
</style>
@endsection

@section('contenido') 
<div class="container-fluid py-3">
    <div class="premium-header">
        <h1 class="fw-bold text-white">COSTOS DE INVENTARIO</h1>
        <p class="small opacity-75 mb-0 text-white">Reporte dinámico de valores en stock</p>
    </div>

    <div class="filter-card">
        <form action="InventarioCostos" method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="small fw-bold mb-1">Bodega</label>
                @include('../menu.bodegas')
            </div>

            <div class="col-md-3">
                <label class="small fw-bold mb-1">Marca</label>
                <select class="form-select" name="marca">
                    <option value="Todos">Todas</option>
                    @foreach ($marcas as $item)
                        <option value="{{$item->codmarca}}" {{ $marc == $item->codmarca ? 'selected' : '' }}>
                            {{$item->nommarca}}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label class="small fw-bold mb-1">Categoría</label>
                <select class="form-select" name="cate">
                    <option value="Todos">Todas</option>
                    @foreach ($categorias as $item)
                        <option value="{{$item->codcategoria}}" {{ $cate == $item->codcategoria ? 'selected' : '' }}>
                            {{$item->nomcategoria}}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3 col-lg-2">
                <label class="small fw-bold mb-1">Fecha Corte</label>
                <input type="date" value="{{ $fechaCorte ?? '' }}" name="fechacorte" class="form-control">
            </div>

            <div class="col-12 d-flex gap-2 justify-content-center mt-3">
                <button type="submit" name="Generar" value="1" class="btn btn-premium btn-consultar">CONSULTAR</button>
                <button type="submit" name="exportar" value="1" class="btn btn-premium btn-exportar">EXPORTAR</button>
                @include('menu.botonRegresar')
            </div>
        </form>
    </div>

    @if(isset($limiteAplicado) && $limiteAplicado > 0)
    <div class="alert alert-info py-2 px-3 mb-2 d-flex align-items-center justify-content-between shadow-sm border-0" style="border-radius: 8px; font-size: 0.85rem; background: rgba(13, 202, 240, 0.12); color: #055160;">
        <div>
            <strong>ℹ️ Vista previa optimizada:</strong> Mostrando los primeros {{ number_format($limiteAplicado) }} productos de {{ number_format($totalRegistros ?? count($productos)) }} para garantizar velocidad y fluidez en pantalla.
            <div class="small text-muted mt-1">Los <strong>totales inferiores</strong> reflejan el <strong>100%</strong> de todas las bodegas. Para consultar o descargar el catálogo completo de los {{ number_format($totalRegistros ?? count($productos)) }} registros, use el botón <strong>EXPORTAR</strong>.</div>
        </div>
    </div>
    @endif

    <div class="table-responsive-premium">
        @include('../menu/exportar.costosInventario')
    </div>

    @if($estado == 0)
    <div class="totals-panel mt-3">
        <div class="row g-3 justify-content-center">
            <div class="col-md-4">
                <div class="total-item">
                    <span class="total-label">COSTO PROMEDIO (CON IVA)</span>
                    <span class="total-value text-primary">$ {{ number_format($totalCostoPromedio ?? 0, 0) }}</span>
                    <div class="w-100 border-top my-2 opacity-50"></div>
                    <span class="total-label text-muted">COSTO PROMEDIO (SIN IVA)</span>
                    <span class="total-value text-secondary" style="font-size: 1.05rem;">$ {{ number_format($totalCostoPromedioSinIva ?? 0, 0) }}</span>
                </div>
            </div>
            <div class="col-md-4">
                <div class="total-item">
                    <span class="total-label">COSTO ÚLTIMA COMPRA (CON IVA)</span>
                    <span class="total-value text-warning">$ {{ number_format($totalCostoCompra ?? 0, 0) }}</span>
                    <div class="w-100 border-top my-2 opacity-50"></div>
                    <span class="total-label text-muted">COSTO ÚLTIMA COMPRA (SIN IVA)</span>
                    <span class="total-value text-secondary" style="font-size: 1.05rem;">$ {{ number_format($totalCostoCompraSinIva ?? 0, 0) }}</span>
                </div>
            </div>
            <div class="col-md-4">
                <div class="total-item">
                    <span class="total-label">VALOR VENTA (CON IVA)</span>
                    <span class="total-value text-success">$ {{ number_format($totalValor_Venta ?? 0, 0) }}</span>
                    <div class="w-100 border-top my-2 opacity-50"></div>
                    <span class="total-label text-muted">VALOR VENTA (SIN IVA)</span>
                    <span class="total-value text-secondary" style="font-size: 1.05rem;">$ {{ number_format($totalValor_VentaSinIva ?? 0, 0) }}</span>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@section('pie')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        if ($('#tablaCostosInventario').length) {
            $('#tablaCostosInventario').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
                },
                "pageLength": 50,
                "responsive": false,
                "order": [[ 1, "asc" ]],
                "dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
                       '<"row"<"col-sm-12"tr>>' +
                       '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            });
        }
    });
</script>
@endsection