@extends('adminlte::page')

@section('title', 'Historial de Órdenes Pesaje')
@section('plugins.Select2', true)

@section('content_header')
    <h4><i class="fas fa-history"></i> Historial de Órdenes Pesaje</h4>
@stop

@section('content')
    <div class="card">
        <div class="card-header bg-primary">
            <h5 class="card-title mb-0"><i class="fas fa-filter"></i> Filtros de Búsqueda</h5>
        </div>
        <div class="card-body">
            <form id="filtroForm">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="serie_orden">Serie de Orden</label>
                            <input type="text" class="form-control" id="serie_orden" name="serie_orden" placeholder="Ej: OD01-4273">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="cliente_id">Cliente</label>
                            <select class="form-control select2" id="cliente_id" name="cliente_id" style="width: 100%;">
                                <option value="">Todos los clientes</option>
                                @foreach($clientes as $cliente)
                                    <option value="{{ $cliente->id }}">{{ $cliente->razon_social }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="fecha_inicio">Fecha Inicio</label>
                            <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="fecha_fin">Fecha Fin</label>
                            <input type="date" class="form-control" id="fecha_fin" name="fecha_fin">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="accion">Acción</label>
                            <input type="text" class="form-control" id="accion" name="accion" placeholder="Ej: Habilitó">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary mr-2" id="btnBuscar">
                            <i class="fas fa-search"></i> Buscar
                        </button>
                        <button type="button" class="btn btn-secondary mr-2" id="btnLimpiar">
                            <i class="fas fa-redo"></i> Limpiar
                        </button>
                        <button type="button" class="btn btn-danger mr-2" id="btnExportarPDF">
                            <i class="fas fa-file-pdf"></i> Exportar PDF
                        </button>
                        <button type="button" class="btn btn-info" id="btnExportarExcel">
                            <i class="fas fa-file-excel"></i> Exportar Excel
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0"><i class="fas fa-list"></i> Resultados</h5>
        </div>
        <div class="card-body">
            <div id="loadingIndicator" class="text-center" style="display: none;">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p>Cargando datos...</p>
            </div>
            <div id="resultsContainer">
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Serie Orden</th>
                            <th>Cliente</th>
                            <th>Acción</th>
                            <th>Motivo</th>
                            <th>Fecha y Hora</th>
                            <th>Fecha Registro</th>
                        </tr>
                    </thead>
                    <tbody id="resultsBody">
                        <tr>
                            <td colspan="7" class="text-center text-muted">
                                <i class="fas fa-info-circle"></i> Use los filtros y haga clic en "Buscar" para ver los resultados
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="paginationContainer" class="mt-3"></div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .select2-selection {
            height: 38px !important;
        }
        .select2-selection__rendered {
            line-height: 38px !important;
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Inicializar Select2
            $('.select2').select2({});

            var currentPage = 1;
            var perPage = 20;

            // Función para cargar datos
            function loadData(page = 1) {
                currentPage = page;
                $('#loadingIndicator').show();
                $('#resultsBody').html('<tr><td colspan="7" class="text-center"><i class="fas fa-spinner fa-spin"></i> Cargando...</td></tr>');

                $.ajax({
                    url: "{{ route('reportes.historial-ordenes-pesaje.search') }}",
                    type: 'POST',
                    data: {
                        serie_orden: $('#serie_orden').val(),
                        cliente_id: $('#cliente_id').val(),
                        fecha_inicio: $('#fecha_inicio').val(),
                        fecha_fin: $('#fecha_fin').val(),
                        accion: $('#accion').val(),
                        current_page: currentPage,
                        per_page: perPage,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        $('#loadingIndicator').hide();

                        if (response.data && response.data.length > 0) {
                            var html = '';
                            var startIndex = response.from || ((currentPage - 1) * perPage) + 1;

                            response.data.forEach(function(item, index) {
                                html += '<tr>';
                                html += '<td>' + (startIndex + index) + '</td>';
                                html += '<td>' + (item.serie_orden || 'N/A') + '</td>';
                                html += '<td>' + (item.cliente_nombre || 'N/A') + '</td>';
                                html += '<td>' + (item.accion || 'N/A') + '</td>';
                                html += '<td>' + (item.motivo || '-') + '</td>';
                                html += '<td>' + (item.fecha_hora || '-') + '</td>';
                                html += '<td>' + (item.created_at || '-') + '</td>';
                                html += '</tr>';
                            });

                            $('#resultsBody').html(html);

                            // Paginación
                            var paginationHtml = '<div class="d-flex justify-content-between align-items-center">';
                            paginationHtml += '<div>Mostrando ' + response.from + ' a ' + response.to + ' de ' + response.total + ' registros</div>';
                            paginationHtml += '<nav><ul class="pagination mb-0">';

                            // Botón Anterior
                            if (response.current_page > 1) {
                                paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + (response.current_page - 1) + '">Anterior</a></li>';
                            }

                            // Números de página
                            var startPage = Math.max(1, response.current_page - 2);
                            var endPage = Math.min(response.last_page, response.current_page + 2);

                            if (startPage > 1) {
                                paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>';
                                if (startPage > 2) {
                                    paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                                }
                            }

                            for (var i = startPage; i <= endPage; i++) {
                                paginationHtml += '<li class="page-item ' + (i === response.current_page ? 'active' : '') + '">';
                                paginationHtml += '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a>';
                                paginationHtml += '</li>';
                            }

                            if (endPage < response.last_page) {
                                if (endPage < response.last_page - 1) {
                                    paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                                }
                                paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + response.last_page + '">' + response.last_page + '</a></li>';
                            }

                            // Botón Siguiente
                            if (response.current_page < response.last_page) {
                                paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + (response.current_page + 1) + '">Siguiente</a></li>';
                            }

                            paginationHtml += '</ul></nav></div>';
                            $('#paginationContainer').html(paginationHtml);
                        } else {
                            $('#resultsBody').html('<tr><td colspan="7" class="text-center text-muted">No se encontraron registros</td></tr>');
                            $('#paginationContainer').html('');
                        }
                    },
                    error: function(xhr) {
                        $('#loadingIndicator').hide();
                        $('#resultsBody').html('<tr><td colspan="7" class="text-center text-danger">Error al cargar los datos</td></tr>');
                        console.error('Error:', xhr);
                    }
                });
            }

            // Botón Buscar
            $('#btnBuscar').click(function() {
                loadData(1);
            });

            // Botón Limpiar
            $('#btnLimpiar').click(function() {
                $('#filtroForm')[0].reset();
                $('.select2').val(null).trigger('change');
                $('#resultsBody').html('<tr><td colspan="7" class="text-center text-muted"><i class="fas fa-info-circle"></i> Use los filtros y haga clic en "Buscar" para ver los resultados</td></tr>');
                $('#paginationContainer').html('');
            });

            // Paginación (delegación de eventos)
            $(document).on('click', '.page-link', function(e) {
                e.preventDefault();
                var page = $(this).data('page');
                if (page) {
                    loadData(page);
                    $('html, body').animate({ scrollTop: 0 }, 300);
                }
            });

            // Botón Exportar PDF
            $('#btnExportarPDF').click(function() {
                var form = $('<form>', {
                    'method': 'POST',
                    'action': "{{ route('reportes.historial-ordenes-pesaje.export', ['format' => 'pdf']) }}",
                    'target': '_blank'
                });

                form.append($('<input>', { 'type': 'hidden', 'name': '_token', 'value': "{{ csrf_token() }}" }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'serie_orden', 'value': $('#serie_orden').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'cliente_id', 'value': $('#cliente_id').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'fecha_inicio', 'value': $('#fecha_inicio').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'fecha_fin', 'value': $('#fecha_fin').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'accion', 'value': $('#accion').val() }));

                $('body').append(form);
                form.submit();
                form.remove();
            });

            // Botón Exportar Excel
            $('#btnExportarExcel').click(function() {
                var form = $('<form>', {
                    'method': 'POST',
                    'action': "{{ route('reportes.historial-ordenes-pesaje.export', ['format' => 'excel']) }}"
                });

                form.append($('<input>', { 'type': 'hidden', 'name': '_token', 'value': "{{ csrf_token() }}" }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'serie_orden', 'value': $('#serie_orden').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'cliente_id', 'value': $('#cliente_id').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'fecha_inicio', 'value': $('#fecha_inicio').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'fecha_fin', 'value': $('#fecha_fin').val() }));
                form.append($('<input>', { 'type': 'hidden', 'name': 'accion', 'value': $('#accion').val() }));

                $('body').append(form);
                form.submit();
                form.remove();
            });
        });
    </script>
@stop