@extends('adminlte::page')

@section('title', 'Reporte Pérdidas de Despacho')
@section('plugins.Select2', true)

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

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-filter"></i> Filtros de Búsqueda</h5>
        </div>
        <div class="card-body">
            <form id="form-reporte" method="POST" action="{{ route('reportes.perdidas-despacho.search') }}">
                @csrf
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="date_init">Fecha Inicio <span class="text-danger">*</span></label>
                            <input type="date"
                                   class="form-control"
                                   id="date_init"
                                   name="date_init"
                                   value="{{ date('Y-m-d', strtotime('-30 days')) }}"
                                   required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="date_end">Fecha Fin <span class="text-danger">*</span></label>
                            <input type="date"
                                   class="form-control"
                                   id="date_end"
                                   name="date_end"
                                   value="{{ date('Y-m-d') }}"
                                   required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="tipo_perdida">Tipo de Pérdida</label>
                            <select class="form-control select2" id="tipo_perdida" name="tipo_perdida" style="width: 100%;">
                                <option value="">Todos</option>
                                <option value="muerto">Pollos Muertos</option>
                                <option value="merma">Merma de Peso</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button type="submit" class="btn btn-primary btn-block">
                                    <i class="fas fa-search"></i> Buscar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Resultados -->
    <div class="card mt-3" id="resultados-card" style="display: none;">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="fas fa-list"></i> Resultados</h5>
        </div>
        <div class="card-body">
            <div id="loading" class="text-center" style="display: none;">
                <i class="fas fa-spinner fa-spin fa-3x"></i>
                <p>Cargando resultados...</p>
            </div>
            <div id="resultados-content"></div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .select2-selection {
            height: 40px !important;
        }
        .table-responsive {
            max-height: 600px;
            overflow-y: auto;
        }
    </style>
@stop

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

            $('#form-reporte').on('submit', function(e) {
                e.preventDefault();

                $('#loading').show();
                $('#resultados-content').html('');
                $('#resultados-card').show();

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#loading').hide();
                        mostrarResultados(response);
                    },
                    error: function(xhr) {
                        $('#loading').hide();
                        $('#resultados-content').html(
                            '<div class="alert alert-danger">' +
                            '<i class="fas fa-exclamation-circle"></i> Error al cargar los resultados.' +
                            '</div>'
                        );
                    }
                });
            });

            function mostrarResultados(data) {
                let html = '<div class="row mb-3">';
                html += '<div class="col-md-12">';
                html += '<div class="alert alert-info">';
                html += '<strong>Total de Registros:</strong> ' + data.totals.total_registros + ' | ';
                html += '<strong>Total Pollos:</strong> ' + parseFloat(data.totals.total_pollos).toLocaleString() + ' | ';
                html += '<strong>Total Peso:</strong> ' + parseFloat(data.totals.total_peso).toFixed(2) + ' kg | ';
                html += '<strong>Muertos:</strong> ' + parseFloat(data.totals.total_muertos).toLocaleString() + ' | ';
                html += '<strong>Merma:</strong> ' + parseFloat(data.totals.total_merma).toLocaleString();
                html += '</div>';
                html += '</div>';
                html += '</div>';

                html += '<div class="table-responsive">';
                html += '<table class="table table-bordered table-striped table-hover">';
                html += '<thead>';
                html += '<tr>';
                html += '<th>#</th>';
                html += '<th>Serie Orden</th>';
                html += '<th>Cliente</th>';
                html += '<th>Tipo Pollo</th>';
                html += '<th>Presentación</th>';
                html += '<th>Tipo Pérdida</th>';
                html += '<th>Cantidad Pollos</th>';
                html += '<th>Peso (kg)</th>';
                html += '<th>Fecha Pérdida</th>';
                html += '<th>Usuario</th>';
                html += '<th>Observaciones</th>';
                html += '</tr>';
                html += '</thead>';
                html += '<tbody>';

                if (data.data.length === 0) {
                    html += '<tr><td colspan="11" class="text-center">No se encontraron registros</td></tr>';
                } else {
                    data.data.forEach(function(item, index) {
                        html += '<tr>';
                        html += '<td>' + (index + 1) + '</td>';
                        html += '<td>' + (item.orden_despacho?.serie_orden || 'N/A') + '</td>';
                        html += '<td>' + (item.orden_despacho?.cliente?.razon_social || 'N/A') + '</td>';
                        html += '<td>' + (item.tipo_pollo?.descripcion || 'N/A') + '</td>';
                        html += '<td>' + (item.presentacion_pollo?.descripcion || 'N/A') + '</td>';
                        html += '<td>';
                        if (item.tipo_perdida === 'muerto') {
                            html += '<span class="badge badge-danger">Pollos Muertos</span>';
                        } else {
                            html += '<span class="badge badge-warning">Merma de Peso</span>';
                        }
                        html += '</td>';
                        html += '<td class="text-center">' + parseFloat(item.cantidad_pollos).toLocaleString() + '</td>';
                        html += '<td class="text-right">' + parseFloat(item.peso_kg).toFixed(2) + '</td>';
                        html += '<td>' + new Date(item.fecha_perdida).toLocaleDateString('es-ES') + '</td>';
                        html += '<td>' + (item.user?.name || 'N/A') + '</td>';
                        html += '<td>' + (item.observaciones || '-') + '</td>';
                        html += '</tr>';
                    });
                }

                html += '</tbody>';
                html += '</table>';
                html += '</div>';

                // Botones de exportación
                html += '<div class="row mt-3">';
                html += '<div class="col-md-12 text-right">';
                html += '<form method="POST" action="{{ route("reportes.perdidas-despacho.export", ["format" => "pdf"]) }}" target="_blank" style="display: inline;">';
                html += '@csrf';
                html += '<input type="hidden" name="date_init" value="' + $('#date_init').val() + '">';
                html += '<input type="hidden" name="date_end" value="' + $('#date_end').val() + '">';
                html += '<input type="hidden" name="tipo_perdida" value="' + $('#tipo_perdida').val() + '">';
                html += '<button type="submit" class="btn btn-danger">';
                html += '<i class="fas fa-file-pdf"></i> Exportar PDF';
                html += '</button>';
                html += '</form>';
                html += '</div>';
                html += '</div>';

                $('#resultados-content').html(html);
            }
        });
    </script>
@stop