@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Despacho Pérdidas')
@section('plugins.Datatables', true)

@section('content_header')
    <h1><i class="fas fa-exclamation-triangle text-danger"></i> Despacho Pérdidas</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title">
                <i class="fas fa-list"></i> Lista de Pérdidas Registradas
            </h3>
        </div>
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha:</label>
                    <input type="date" id="searchDate" class="form-control">
                </div>
                <div class="col-md-2" style="margin-top: 30px">
                    <button id="filterButton" class="btn btn-primary">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                    <button id="clearFilterButton" class="btn btn-secondary ml-2">
                        <i class="fas fa-times"></i> Limpiar
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover" id="perdidas-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Serie Orden</th>
                            <th>Cliente</th>
                            <th>Tipo Pollo</th>
                            <th>Presentación</th>
                            <th>Tipo Pérdida</th>
                            <th>Cantidad Pollos</th>
                            <th>Peso (kg)</th>
                            <th>Fecha Pérdida</th>
                            <th>Fecha Registro</th>
                            <th>Usuario</th>
                            <th>Observaciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Los datos se cargan vía AJAX -->
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="6" class="text-right"><strong>TOTALES:</strong></th>
                            <th id="total-pollos" class="text-center">0</th>
                            <th id="total-peso" class="text-right">0.00</th>
                            <th colspan="4"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
@stop

@section('css')

@stop

@section('js')
    <script>
        var table;
        var base_url = "{{ route('despacho-perdidas.index') }}";

        $(document).ready(function() {
            table = $('#perdidas-table').DataTable({
                "responsive": true,
                "autoWidth": false,
                "language": {
                    "url": "/js/spanish.json"
                },
                "pageLength": 10,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
                "order": [[8, "desc"]], // Ordenar por fecha de pérdida descendente
                "searching": true,
                "info": true,
                "paging": true,
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": base_url,
                    "type": "GET",
                    "data": function(d) {
                        // Agregar el parámetro de fecha si existe
                        var fecha = $('#searchDate').val();
                        if (fecha) {
                            d.date = fecha;
                        }
                    }
                },
                "columns": [
                    { "data": "DT_RowIndex", "name": "DT_RowIndex", "orderable": false, "searchable": false, "width": "5%" },
                    { "data": "serie_orden", "name": "serie_orden", "width": "8%" },
                    { "data": "cliente", "name": "cliente", "width": "12%" },
                    { "data": "tipo_pollo", "name": "tipo_pollo", "width": "10%" },
                    { "data": "presentacion_pollo", "name": "presentacion_pollo", "width": "10%" },
                    { "data": "tipo_perdida_text", "name": "tipo_perdida", "orderable": false, "width": "10%" },
                    { "data": "cantidad_pollos_formatted", "name": "cantidad_pollos", "className": "text-center", "width": "8%" },
                    { "data": "peso_kg_formatted", "name": "peso_kg", "className": "text-right", "width": "8%" },
                    { "data": "fecha_perdida_formatted", "name": "fecha_perdida", "width": "8%" },
                    { "data": "fecha_registro", "name": "created_at", "width": "10%" },
                    { "data": "usuario", "name": "usuario", "width": "8%" },
                    {
                        "data": "observaciones",
                        "name": "observaciones",
                        "orderable": false,
                        "render": function(data, type, row) {
                            if (data && data.length > 50) {
                                return '<span title="' + data + '">' + data.substring(0, 50) + '...</span>';
                            }
                            return data || '-';
                        },
                        "width": "15%"
                    }
                ],
                "drawCallback": function(settings) {
                    // Calcular totales
                    var api = this.api();
                    var totalPollos = 0;
                    var totalPeso = 0;

                    api.rows({page: 'current'}).data().each(function(row) {
                        totalPollos += parseInt(row.cantidad_pollos || 0);
                        totalPeso += parseFloat(row.peso_kg || 0);
                    });

                    $('#total-pollos').text(totalPollos.toLocaleString());
                    $('#total-peso').text(totalPeso.toLocaleString('es-ES', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
                }
            });

            // Filtrar por fecha
            $('#filterButton').on('click', function() {
                table.ajax.reload();
            });

            // Limpiar filtro
            $('#clearFilterButton').on('click', function() {
                $('#searchDate').val('');
                table.ajax.reload();
            });

            // Permitir buscar con Enter en el campo de fecha
            $('#searchDate').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $('#filterButton').click();
                }
            });
        });
    </script>
@stop