@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('assets/images/logo.png')}}" class="img-fluid" alt="{{config('app.name', 'LIBRERIA ELY') }}"> <br>Control de Articulos 12-Nov-2026</h4>
            <div class="card">
                <div class="card-body">
                    <table class="table table-hover" id="table_id" data-page-length="15">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Descripcion </th>
                                <th>Categoria</th>
                                <th>Precio Venta</th>
                                <th>Stock</th>
                                <th>Stock_Maximo</th>
                                
                                

                            </tr>
                        </thead>
                        <tbody>
                            @foreach($articulos as $art)
                            <tr>
                                <td>{{$art->nombre}}</td>
                                <td></td>
                                <td>Codigo: {{$art->categoria_id}}</td>
                                <td>Q. {{number_format($art->p_venta, 2)}}</td>
                                <td>{{$art->stock}}</td>
                                <td>{{$art->stock_maximo}}</td>
                               
                                
                            </tr>
                            @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