@extends('layouts.simple')

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/colReorder.bootstrap5.min.css') }}">

    <style>
        /* Ajuste visual para alinear y estilar el buscador y select de DataTables */
        .dataTables_filter input {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            padding: 0.375rem 0.75rem;
            outline: none;
        }

        .dataTables_filter input:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        .dt-buttons .btn {
            margin-right: 0.25rem;
        }

        .btn-group>.btn-group:not(:first-child)>.btn,
        .btn-group>.btn:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            color: white;
        }

        .btn-group>.btn-group:not(:last-child)>.btn,
        .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            color: cornsilk;
        }
    </style>
@endsection


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <h4 class="card-title text-center display-4"><img src="{{ asset('logos/main.png') }}" class="img-fluid"
                        alt="{{ config('app.name', 'LIBRERIA ELY') }}"> <br>Articulos Registrados con Poca
                    Existencia</h4>
                <div class="card">
                    <div class="card-body">
                        <table class="table table-hover" id="table_id">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Descripcion </th>
                                    <th>Categoria</th>
                                    <th>Precio Venta</th>
                                    <th>Precio Costo</th>
                                    <th>Stock</th>
                                    <th>Stock_Maximo</th>
                                    <th>Fabricante</th>
                                    <th>Medida</th>
                                    <th>Estante</th>
                                    <th>Sub-estante</th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($articulos as $art)
                                    @if ($art->stock < $art->min_stock)
                                        <tr>
                                            <td>{{ $art->nombre }}</td>
                                            <td></td>
                                            <td>{{ $art->nomCat }}</td>
                                            <td>Q.{{ number_format($art->p_venta, 2) }}</td>
                                            <td>Q.{{ number_format($art->p_costo, 2) }}</td>
                                            <td>{{ $art->stock }}</td>
                                            <td>{{ $art->stock_maximo }}</td>
                                            <td>{{ $art->fabricante }}</td>
                                            <td>{{ $art->medida }}</td>
                                            <td>{{ $art->unidad }}</td>
                                            <td>{{ $art->ubicacion }}</td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>

                        <div class="text-right mx-4">
                            <h2>Total de Articulos: {{ $total }}</h2>
                        </div>



                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/datatablesb5/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.print.min.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/jszip.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/pdfmake.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/vfs_fonts.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/dataTables.colReorder.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.rowReorder.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/jquery.mark.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.searchHighlight.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            const table = $("#table_id").DataTable({
                // Paginación inicial de 15 como tenías en data-page-length
                pageLength: 15,
                lengthMenu: [10, 15, 25, 50, 100],

                // Layout para colocar los botones de exportación a la izquierda y la búsqueda a la derecha
                dom: "<'row mb-3'<'col-sm-12 col-md-6'B><'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>>",

                // Configuraciones DataTables
                autoFill: true,
                stateSave: true,
                colReorder: true,

                // Configuración de botones de exportación agrupados
                buttons: [{
                        extend: 'collection',
                        text: '<i class="fas fa-file-export me-1"></i> Exportar',
                        className: 'btn btn-outline-secondary btn-sm dropdown-toggle',
                        buttons: [{
                                extend: 'copy',
                                text: '<i class="fas fa-copy me-2"></i> Copiar',
                                className: 'dropdown-item'
                            },
                            {
                                extend: 'csv',
                                text: '<i class="fas fa-file-csv me-2"></i> CSV',
                                className: 'dropdown-item'
                            },
                            {
                                extend: 'excel',
                                text: '<i class="fas fa-file-excel me-2"></i> Excel',
                                className: 'dropdown-item'
                            },
                            {
                                extend: 'pdf',
                                text: '<i class="fas fa-file-pdf me-2"></i> PDF',
                                className: 'dropdown-item',
                                orientation: 'landscape'
                            },
                            {
                                extend: 'print',
                                text: '<i class="fas fa-print me-2"></i> Imprimir',
                                className: 'dropdown-item'
                            }
                        ]
                    },
                    {
                        extend: 'colvis',
                        text: '<i class="fas fa-columns me-1"></i> Columnas',
                        className: 'btn btn-outline-secondary btn-sm'
                    },
                    {
                        extend: 'pageLength',
                        className: 'btn btn-outline-secondary btn-sm'
                    }
                ],

                language: {
                    url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json"
                },

                // Resaltado del texto buscado
                drawCallback: function(settings) {
                    var api = this.api();
                    var search = api.search();
                    if (search) {
                        $(api.table().body()).unmark();
                        $(api.table().body()).mark(search, {
                            "caseSensitive": false
                        });
                    } else {
                        $(api.table().body()).unmark();
                    }
                }
            });
        });
    </script>
@endsection