@extends('adminlte::page')

@section('title', 'Detalles de la Orden de Despacho')
@section('plugins.Sweetalert2', true)
@section('plugins.Datatables', true)

@section('content_header')
    <h1>Generar descuento de Orden</h1>
@stop

@section('content')
    @include('partials.validaciones')

    <!-- Primer Card: Información de la Orden -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-info-circle text-primary"></i>
                        Información de la Orden
                    </h3>
                </div>
                <div class="card-body">
                    <!-- Información básica en una fila -->
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <p class="mb-1"><strong><i class="fas fa-user text-primary"></i> Cliente:</strong></p>
                            <p class="text-muted mb-0">{{ $orden->cliente->razon_social }}</p>
                        </div>
                        <div class="col-md-4">
                            <p class="mb-1"><strong><i class="fas fa-barcode text-primary"></i> Serie de Orden:</strong></p>
                            <p class="text-muted mb-0">{{ $orden->serie_orden }}</p>
                        </div>
                        <div class="col-md-4">
                            <p class="mb-1"><strong><i class="fas fa-calendar text-primary"></i> Fecha de Despacho:</strong></p>
                            <p class="text-muted mb-0">{{ \Carbon\Carbon::parse($orden->fecha_despacho)->format('d/m/Y') }}</p>
                        </div>
                    </div>

                    <hr>

                    <!-- Info Boxes -->
                    <div class="row">
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-info"><i class="fas fa-weight"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Peso Total Bruto</span>
                                    <span class="info-box-number">{{ number_format($orden->peso_total_bruto, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-warning"><i class="fas fa-box"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Cantidad de Jabas</span>
                                    <span class="info-box-number">{{ $orden->cantidad_jabas }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-danger"><i class="fas fa-weight"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Tara</span>
                                    <span class="info-box-number">{{ number_format($orden->tara, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-success"><i class="fas fa-weight"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Peso Total Neto</span>
                                    <span class="info-box-number">{{ number_format($orden->peso_total_neto - ($orden->descuento_peso ?? 0), 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($orden->comentario)
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="alert alert-info mb-0">
                                <strong><i class="fas fa-comment"></i> Comentario:</strong> {{ $orden->comentario }}
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Segundo Card: Tabla de Detalles -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h3 class="card-title">
                        <i class="fas fa-table"></i>
                        Detalles de la Orden
                    </h3>
                </div>
                <div class="card-body">
                    <!-- Botones de acción arriba de la tabla -->
                    <div class="row mb-3">
                        <div class="col-6">
                            <button type="button" class="btn btn-primary mr-2" data-toggle="modal" data-target="#modalDescuento">
                                <i class="fas fa-percentage"></i> Aplicar Descuento
                            </button>
                            <a href="{{ route('ordenes-de-despacho.index') }}" class="btn btn-warning">
                                <i class="fas fa-list"></i> Lista de Órdenes
                            </a>

                        </div>

                    </div>

                    <!-- Tabla DataTable -->
                    <table class="table table-bordered table-striped" id="table-detalles">
                        <thead>
                            <tr>
                                <th>Presentación</th>
                                <th>Tipo</th>
                                <th>C. Pollos</th>
                                <th>C. Jabas</th>
                                <th>P. Bruto</th>
                                <th>Tara</th>
                                <th>P. Neto</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($orden->detalles as $detalle)
                                <tr>
                                    <td>{{ $detalle->presentacion_pollo_descripcion }}</td>
                                    <td>{{ $detalle->tipo_pollo_descripcion }}</td>
                                    <td class="text-center">{{ number_format($detalle->cantidad_pollos) }}</td>
                                    <td class="text-center">{{ $detalle->cantidad_jabas }}</td>
                                    <td class="text-right">{{ number_format($detalle->peso_bruto, 2) }}</td>
                                    <td class="text-right">{{ number_format($detalle->tara, 2) }}</td>
                                    <td class="text-right">{{ number_format($detalle->peso_neto, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="tfoot-order">
                            <tr>
                                <td colspan="2" class="font-weight-bold">TOTALES ORDEN</td>
                                <td class="text-center font-weight-bold">{{ number_format($orden->cantidad_pollos) }}</td>
                                <td class="text-center font-weight-bold">{{ $orden->cantidad_jabas }}</td>
                                <td class="text-right font-weight-bold">{{ number_format($orden->peso_total_bruto, 2) }}</td>
                                <td class="text-right font-weight-bold">{{ number_format($orden->tara, 2) }}</td>
                                <td class="text-right font-weight-bold">{{ number_format($orden->peso_total_neto, 2) }}</td>
                            </tr>
                            <tr class="tfoot-descuento">
                                <td colspan="2" class="font-weight-bold text-danger">DESCUENTOS</td>
                                <td class="text-center font-weight-bold text-danger">{{ number_format($orden->descuento_pollos ?? 0) }}</td>
                                <td class="text-center font-weight-bold">-</td>
                                <td class="text-right font-weight-bold">-</td>
                                <td class="text-right font-weight-bold">-</td>
                                <td class="text-right font-weight-bold text-danger">{{ number_format($orden->descuento_peso ?? 0, 2) }}</td>
                            </tr>
                            <tr class="tfoot-total">
                                <td colspan="2" class="font-weight-bold">TOTAL CON DESCUENTOS</td>
                                <td class="text-center font-weight-bold">{{ number_format($orden->cantidad_pollos - ($orden->descuento_pollos ?? 0)) }}</td>
                                <td class="text-center font-weight-bold">{{ $orden->cantidad_jabas }}</td>
                                <td class="text-right font-weight-bold">{{ number_format($orden->peso_total_bruto, 2) }}</td>
                                <td class="text-right font-weight-bold">{{ number_format($orden->tara, 2) }}</td>
                                <td class="text-right font-weight-bold">{{ number_format($orden->peso_total_neto - ($orden->descuento_peso ?? 0), 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para aplicar descuento -->
    <div class="modal fade" id="modalDescuento" tabindex="-1" role="dialog" aria-labelledby="modalDescuentoLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title" id="modalDescuentoLabel">
                        <i class="fas fa-calculator"></i> Aplicar Descuento a la Orden
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('ordenes-de-despacho.store-discount', $orden) }}" method="POST" id="form-discount">
                    @csrf
                    <div class="modal-body">
                        <!-- Resumen de la Orden -->
                        <div class="card border-primary mb-3">
                            <div class="card-header bg-primary text-white py-2">
                                <h6 class="mb-0"><strong>Resumen de la Orden</strong></h6>
                            </div>
                            <div class="card-body py-2">
                                <div class="row text-center">
                                    <div class="col-md-4">
                                        <div class="border-right">
                                            <small class="text-muted d-block">Total de la Orden</small>
                                            <strong class="text-primary">{{ number_format($orden->cantidad_pollos) }} pollos</strong><br>
                                            <strong class="text-primary">{{ number_format($orden->peso_total_neto, 2) }} kg</strong>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="border-right">
                                            <small class="text-muted d-block">Descontado (Total)</small>
                                            <strong class="text-danger" id="descuentoPollosResumen">{{ number_format($orden->descuento_pollos ?? 0) }}</strong> pollos<br>
                                            <strong class="text-danger" id="descuentoPesoResumen">{{ number_format($orden->descuento_peso ?? 0, 2) }}</strong> kg
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <small class="text-muted d-block">Disponible para Descontar</small>
                                        <strong class="text-info" id="disponiblePollos">{{ number_format($orden->cantidad_pollos - ($orden->descuento_pollos ?? 0)) }}</strong> pollos<br>
                                        <strong class="text-info" id="disponiblePeso">{{ number_format($orden->peso_total_neto - ($orden->descuento_peso ?? 0), 2) }}</strong> kg
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Formulario de descuento -->
                        <div class="card border-secondary mb-3">
                            <div class="card-header bg-light py-2">
                                <h6 class="mb-0"><strong>Ingrese el Descuento</strong></h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-0">
                                            <label for="descuentoPollosInput" class="font-weight-bold">
                                                Cantidad de Pollos Descontados
                                            </label>
                                            <input type="number"
                                                   class="form-control form-control-lg"
                                                   id="descuentoPollosInput"
                                                   name="descuentoPollosInput"
                                                   value="0"
                                                   min="0"
                                                   max="{{ $orden->cantidad_pollos - ($orden->descuento_pollos ?? 0) }}"
                                                   step="1"
                                                   required>
                                            <small class="form-text text-muted">
                                                Máximo disponible: {{ number_format($orden->cantidad_pollos - ($orden->descuento_pollos ?? 0)) }} pollos
                                                @if($orden->descuento_pollos > 0)
                                                    <br><span class="text-danger">Ya descontado: {{ number_format($orden->descuento_pollos) }} pollos</span>
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-0">
                                            <label for="descuentoPesoInput" class="font-weight-bold">
                                                Peso Neto Descontado (kg)
                                            </label>
                                            <input type="number"
                                                   class="form-control form-control-lg"
                                                   id="descuentoPesoInput"
                                                   name="descuentoPesoInput"
                                                   value="0"
                                                   min="0"
                                                   max="{{ $orden->peso_total_neto - ($orden->descuento_peso ?? 0) }}"
                                                   step="0.001"
                                                   required>
                                            <small class="form-text text-muted">
                                                Máximo disponible: {{ number_format($orden->peso_total_neto - ($orden->descuento_peso ?? 0), 2) }} kg
                                                @if($orden->descuento_peso > 0)
                                                    <br><span class="text-danger">Ya descontado: {{ number_format($orden->descuento_peso, 2) }} kg</span>
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Opciones de Descuento -->
                        <div class="card border-info mb-3">
                            <div class="card-header bg-light py-2">
                                <h6 class="mb-0"><strong>Opciones de Descuento</strong></h6>
                            </div>
                            <div class="card-body">
                                <!-- Selección de tipo de pollo para descuento -->
                                <div id="tipoPolloSection" style="display: none;">
                                    <div class="form-group mb-3">
                                        <label for="tipoPolloDescuento" class="font-weight-bold">
                                            Tipo de Pollo para Aplicar Descuento
                                        </label>
                                        <select class="form-control" id="tipoPolloDescuento" name="tipo_pollo_descuento">
                                            <option value="">Seleccione un tipo de pollo</option>
                                        </select>
                                        <small class="form-text text-muted">Seleccione a qué tipo de pollo aplicar el descuento</small>
                                    </div>
                                </div>

                                <!--check descuento fuera de horario-->
                                <div class="form-check mb-2 p-2 border rounded">
                                    <input class="form-check-input" type="checkbox" name="descuento_fuera_de_horario" id="descuento_fuera_de_horario">
                                    <label class="form-check-label" for="descuento_fuera_de_horario">
                                        <strong>¿DESCUENTO FUERA DE HORARIO?</strong>
                                        <small class="d-block text-muted ml-4">Marcar si ya existe stock en almacén (regresa a stock diarios)</small>
                                    </label>
                                </div>

                                <!--check es pérdida (solo visible si fuera de horario está marcado)-->
                                <div class="form-check p-2 border rounded bg-light" id="esPerdidaSection" style="display: none;">
                                    <input class="form-check-input" type="checkbox" name="es_perdida" id="es_perdida">
                                    <label class="form-check-label" for="es_perdida">
                                        <strong class="text-danger">¿ES PÉRDIDA?</strong>
                                        <small class="d-block text-muted ml-4">Pollos muertos o merma - NO regresa al inventario</small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Campos adicionales para pérdidas (solo visible si es pérdida está marcado) -->
                        <div id="perdidaFieldsSection" style="display: none;">
                            <div class="card border-warning mb-3">
                                <div class="card-header bg-warning text-dark py-2">
                                    <h6 class="mb-0"><strong>Información de la Pérdida</strong></h6>
                                </div>
                                <div class="card-body">
                                    <div class="alert alert-warning mb-3">
                                        <strong>Importante:</strong> Esta información se guardará en el registro de pérdidas y NO regresará al inventario.
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="tipo_perdida" class="font-weight-bold">
                                                    Tipo de Pérdida <span class="text-danger">*</span>
                                                </label>
                                                <select class="form-control" id="tipo_perdida" name="tipo_perdida">
                                                    <option value="">Seleccione...</option>
                                                    <option value="muerto">Pollos Muertos</option>
                                                    <option value="merma">Merma de Peso</option>
                                                </select>
                                                <small class="form-text text-muted">Seleccione el tipo de pérdida</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="fecha_perdida" class="font-weight-bold">
                                                    Fecha de la Pérdida <span class="text-danger">*</span>
                                                </label>
                                                <input type="date"
                                                       class="form-control"
                                                       id="fecha_perdida"
                                                       name="fecha_perdida"
                                                       value="{{ date('Y-m-d') }}"
                                                       max="{{ date('Y-m-d') }}">
                                                <small class="form-text text-muted">Fecha en que ocurrió la pérdida</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <label for="observaciones_perdida" class="font-weight-bold">
                                            Observaciones
                                        </label>
                                        <textarea class="form-control"
                                                  id="observaciones_perdida"
                                                  name="observaciones_perdida"
                                                  rows="2"
                                                  placeholder="Ingrese observaciones sobre la pérdida (opcional)"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Historial de Descuentos -->
                        @if($orden->historialDescuentos && $orden->historialDescuentos->count() > 0)
                        <div class="card border-warning mb-3">
                            <div class="card-header bg-warning text-dark py-2">
                                <h6 class="mb-0"><strong><i class="fas fa-history"></i> Historial de Descuentos</strong></h6>
                            </div>
                            <div class="card-body p-2">
                                <div class="table-responsive" style="max-height: 200px; overflow-y: auto;">
                                    <table class="table table-sm table-bordered mb-0">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Tipo</th>
                                                <th>Pollos</th>
                                                <th>Peso (kg)</th>
                                                <th>Usuario</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($orden->historialDescuentos as $historial)
                                            <tr id="historial-row-{{ $historial->id }}">
                                                <td>{{ $historial->fecha_descuento->format('d/m/Y H:i') }}</td>
                                                <td>
                                                    @if($historial->tipo_descuento == 'normal')
                                                        <span class="badge badge-primary">Normal</span>
                                                    @elseif($historial->tipo_descuento == 'fuera_horario')
                                                        <span class="badge badge-info">Fuera Horario</span>
                                                    @else
                                                        <span class="badge badge-danger">Pérdida</span>
                                                    @endif
                                                </td>
                                                <td class="text-center">{{ number_format($historial->cantidad_pollos) }}</td>
                                                <td class="text-right">{{ number_format($historial->peso_kg, 2) }}</td>
                                                <td><small>{{ $historial->user->name ?? 'N/A' }}</small></td>
                                                <td class="text-center">
                                                    <button type="button"
                                                            class="btn btn-sm btn-danger btn-eliminar-descuento"
                                                            data-id="{{ $historial->id }}"
                                                            data-pollos="{{ $historial->cantidad_pollos }}"
                                                            data-peso="{{ $historial->peso_kg }}"
                                                            data-tipo="{{ $historial->tipo_descuento }}"
                                                            data-orden-id="{{ $orden->id }}"
                                                            title="Eliminar descuento">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        @endif

                        <input type="hidden" name="descuento_pollos" id="descuento_pollos">
                        <input type="hidden" name="descuento_peso" id="descuento_peso">
                        <input type="hidden" name="tipo_pollo_seleccionado" id="tipo_pollo_seleccionado">
                        <input type="hidden" name="presentacion_pollo_seleccionado" id="presentacion_pollo_seleccionado">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save"></i> Guardar Descuento
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('js')
    @if (session()->has('success'))
        <script>
            Swal.fire('Mensaje informativo', '{{ session()->get('success') }}', 'success');
        </script>
    @endif
    @if (session()->has('info'))
        <script>
            Swal.fire('Mensaje informativo', '{{ session()->get('info') }}', 'info');
        </script>
    @endif

    <script>
        $(document).ready(function () {
            // Array para almacenar los tipos de pollo de la orden
            let tiposPollo = [];

            // Capturar los tipos de pollo de la tabla
            $('#table-detalles tbody tr').each(function() {
                const presentacion = $(this).find('td:eq(0)').text().trim();
                const tipo = $(this).find('td:eq(1)').text().trim();
                const cantidadPollos = parseInt($(this).find('td:eq(2)').text().replace(/,/g, ''));
                const pesoNeto = parseFloat($(this).find('td:eq(6)').text().replace(/,/g, ''));

                // Buscar si ya existe este tipo
                const existingTipo = tiposPollo.find(t => t.tipo === tipo && t.presentacion === presentacion);
                if (existingTipo) {
                    existingTipo.cantidadPollos += cantidadPollos;
                    existingTipo.pesoNeto += pesoNeto;
                } else {
                    tiposPollo.push({
                        presentacion: presentacion,
                        tipo: tipo,
                        cantidadPollos: cantidadPollos,
                        pesoNeto: pesoNeto
                    });
                }
            });

            console.log('Tipos de pollo encontrados:', tiposPollo);

            // Inicializar DataTable
            $('#table-detalles').DataTable({
                "responsive": true,
                "autoWidth": false,
                "language": {
                    "url": "/js/spanish.json"
                },
                "pageLength": 10,
                "lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "Todos"]],
                "order": [[0, "asc"]],
                "searching": true,
                "info": true,
                "paging": false,
                "dom": 'Bfrtip',
                "buttons": []
            });

            // Variables para cálculos
            const totalPollos = {{ $orden->cantidad_pollos }};
            const totalPesoNeto = {{ $orden->peso_total_neto }};
            const descuentoPollosActual = {{ $orden->descuento_pollos ?? 0 }};
            const descuentoPesoActual = {{ $orden->descuento_peso ?? 0 }};
            const disponiblePollos = totalPollos - descuentoPollosActual;
            const disponiblePeso = totalPesoNeto - descuentoPesoActual;
            const descuentoPollosInput = document.querySelector('#descuentoPollosInput');
            const descuentoPesoInput = document.querySelector('#descuentoPesoInput');

            // Función para formatear números
            function formatNumber(num, decimals = 2) {
                return parseFloat(num).toFixed(decimals);
            }

            // Función para validar inputs
            function validateInputs() {
                // Validar pollos descontados (no puede exceder lo disponible)
                if (parseInt(descuentoPollosInput.value) > disponiblePollos) {
                    descuentoPollosInput.value = disponiblePollos;
                }
                if (parseInt(descuentoPollosInput.value) < 0) {
                    descuentoPollosInput.value = 0;
                }

                // Validar peso descontado (no puede exceder lo disponible)
                if (parseFloat(descuentoPesoInput.value) > disponiblePeso) {
                    descuentoPesoInput.value = disponiblePeso;
                }
                if (parseFloat(descuentoPesoInput.value) < 0) {
                    descuentoPesoInput.value = 0;
                }
            }

            // Función para calcular y actualizar todo
            function calculateDiscounts() {
                validateInputs();

                const pollosDescontadosNuevo = parseInt(descuentoPollosInput.value) || 0;
                const pesoDescontadoNuevo = parseFloat(descuentoPesoInput.value) || 0;

                // Calcular totales acumulados
                const pollosDescontadosTotal = descuentoPollosActual + pollosDescontadosNuevo;
                const pesoDescontadoTotal = descuentoPesoActual + pesoDescontadoNuevo;

                // Calcular disponible después del nuevo descuento
                const pollosDisponible = disponiblePollos - pollosDescontadosNuevo;
                const pesoDisponible = disponiblePeso - pesoDescontadoNuevo;

                // Actualizar campos ocultos (lo que se enviará al backend - solo el nuevo descuento)
                document.querySelector('#descuento_pollos').value = pollosDescontadosNuevo;
                document.querySelector('#descuento_peso').value = formatNumber(pesoDescontadoNuevo);

                // Actualizar resumen en la card superior (mostrar totales acumulados)
                document.querySelector('#descuentoPollosResumen').textContent = pollosDescontadosTotal.toLocaleString();
                document.querySelector('#descuentoPesoResumen').textContent = formatNumber(pesoDescontadoTotal);
                document.querySelector('#disponiblePollos').textContent = pollosDisponible.toLocaleString();
                document.querySelector('#disponiblePeso').textContent = formatNumber(pesoDisponible);

                // Actualizar selector de tipos
                toggleTipoPolloSelector();
            }

            // Event listeners para cálculos en tiempo real
            descuentoPollosInput.addEventListener('input', calculateDiscounts);
            descuentoPesoInput.addEventListener('input', calculateDiscounts);

            // Función para mostrar/ocultar selector de tipos
            function toggleTipoPolloSelector() {
                const pollosDescuento = parseInt(document.querySelector('#descuento_pollos').value) || 0;
                const pesoDescuento = parseFloat(document.querySelector('#descuento_peso').value) || 0;
                const tipoPolloSection = document.querySelector('#tipoPolloSection');
                const tipoPolloSelect = document.querySelector('#tipoPolloDescuento');

                if (pollosDescuento > 0 || pesoDescuento > 0) {
                    // Si hay descuentos, mostrar selector solo si hay múltiples tipos
                    if (tiposPollo.length > 1) {
                        tipoPolloSection.style.display = 'block';

                        // Llenar el select con los tipos disponibles
                        tipoPolloSelect.innerHTML = '<option value="">Seleccione un tipo de pollo</option>';
                        tiposPollo.forEach(tipo => {
                            const option = document.createElement('option');
                            option.value = JSON.stringify(tipo);
                            option.textContent = `${tipo.presentacion} - ${tipo.tipo} (${tipo.cantidadPollos} pollos, ${tipo.pesoNeto.toFixed(2)} kg)`;
                            tipoPolloSelect.appendChild(option);
                        });

                        // Hacer el campo requerido
                        tipoPolloSelect.required = true;
                    } else {
                        tipoPolloSection.style.display = 'none';
                        tipoPolloSelect.required = false;

                        // Si solo hay un tipo, seleccionarlo automáticamente
                        if (tiposPollo.length === 1) {
                            document.querySelector('#tipo_pollo_seleccionado').value = tiposPollo[0].tipo;
                            document.querySelector('#presentacion_pollo_seleccionado').value = tiposPollo[0].presentacion;
                        }
                    }
                } else {
                    // Si no hay descuentos, ocultar selector
                    tipoPolloSection.style.display = 'none';
                    tipoPolloSelect.required = false;
                }
            }

            // Event listener para el cambio de selección de tipo
            document.querySelector('#tipoPolloDescuento').addEventListener('change', function() {
                if (this.value) {
                    const tipoSeleccionado = JSON.parse(this.value);
                    document.querySelector('#tipo_pollo_seleccionado').value = tipoSeleccionado.tipo;
                    document.querySelector('#presentacion_pollo_seleccionado').value = tipoSeleccionado.presentacion;
                } else {
                    document.querySelector('#tipo_pollo_seleccionado').value = '';
                    document.querySelector('#presentacion_pollo_seleccionado').value = '';
                }
            });


            // Manejar mostrar/ocultar checkbox "¿Es pérdida?" según "fuera de horario"
            function toggleEsPerdidaSection() {
                const fueraDeHorario = document.querySelector('#descuento_fuera_de_horario');
                const esPerdidaSection = document.querySelector('#esPerdidaSection');

                if (fueraDeHorario.checked) {
                    esPerdidaSection.style.display = 'block';
                } else {
                    esPerdidaSection.style.display = 'none';
                    // Si se desmarca "fuera de horario", también desmarcar "es pérdida" y ocultar campos
                    document.querySelector('#es_perdida').checked = false;
                    togglePerdidaFields();
                }
            }

            // Manejar mostrar/ocultar campos de pérdidas según "¿Es pérdida?"
            function togglePerdidaFields() {
                const esPerdida = document.querySelector('#es_perdida');
                const perdidaFieldsSection = document.querySelector('#perdidaFieldsSection');
                const tipoPerdida = document.querySelector('#tipo_perdida');
                const fechaPerdida = document.querySelector('#fecha_perdida');

                if (esPerdida.checked) {
                    perdidaFieldsSection.style.display = 'block';
                    // Hacer campos requeridos
                    if (tipoPerdida) tipoPerdida.required = true;
                    if (fechaPerdida) fechaPerdida.required = true;
                } else {
                    perdidaFieldsSection.style.display = 'none';
                    // Quitar requeridos y limpiar campos
                    if (tipoPerdida) {
                        tipoPerdida.required = false;
                        tipoPerdida.value = '';
                    }
                    if (fechaPerdida) {
                        fechaPerdida.required = false;
                        fechaPerdida.value = '{{ date('Y-m-d') }}';
                    }
                    const observaciones = document.querySelector('#observaciones_perdida');
                    if (observaciones) observaciones.value = '';
                }
            }

            // Event listeners
            document.querySelector('#descuento_fuera_de_horario').addEventListener('change', toggleEsPerdidaSection);
            document.querySelector('#es_perdida').addEventListener('change', togglePerdidaFields);

            // Inicializar cálculos
            calculateDiscounts();
            toggleTipoPolloSelector();

            // Validación y confirmación de envío
            document.querySelector('#form-discount').addEventListener('submit', (e) => {
                e.preventDefault();

                const pollosDescuentoNuevo = parseInt(document.querySelector('#descuento_pollos').value) || 0;
                const pesoDescuentoNuevo = parseFloat(document.querySelector('#descuento_peso').value) || 0;
                const tipoPolloSeleccionado = document.querySelector('#tipo_pollo_seleccionado').value;
                const esPerdida = document.querySelector('#es_perdida').checked;

                // Calcular totales después del nuevo descuento
                const pollosDescuentoTotal = descuentoPollosActual + pollosDescuentoNuevo;
                const pesoDescuentoTotal = descuentoPesoActual + pesoDescuentoNuevo;
                const pollosDisponibleFinal = totalPollos - pollosDescuentoTotal;
                const pesoDisponibleFinal = totalPesoNeto - pesoDescuentoTotal;

                // Validar campos de pérdida si está marcado
                if (esPerdida) {
                    const tipoPerdida = document.querySelector('#tipo_perdida').value;
                    const fechaPerdida = document.querySelector('#fecha_perdida').value;

                    if (!tipoPerdida) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error de validación',
                            text: 'Debe seleccionar el tipo de pérdida (Muerto o Merma)'
                        });
                        return;
                    }

                    if (!fechaPerdida) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error de validación',
                            text: 'Debe seleccionar la fecha de la pérdida'
                        });
                        return;
                    }
                }

                // Construir mensaje según tipo de descuento
                let mensaje = '';
                let titulo = '';
                let icon = 'warning';

                if (esPerdida) {
                    const tipoPerdida = document.querySelector('#tipo_perdida').value;
                    const tipoPerdidaTexto = tipoPerdida === 'muerto' ? 'Pollos Muertos' : 'Merma de Peso';

                    titulo = '¿Confirmar registro de pérdida?';
                    mensaje = `Se registrará una PÉRDIDA de ${pollosDescuentoNuevo.toLocaleString()} pollos y ${formatNumber(pesoDescuentoNuevo)} kg.\n\n`;
                    mensaje += `<br>Tipo: ${tipoPerdidaTexto}\n\n`;
                    mensaje += `<br>Total acumulado: ${pollosDescuentoTotal.toLocaleString()} pollos y ${formatNumber(pesoDescuentoTotal)} kg\n\n`;
                    mensaje += `<br>IMPORTANTE: Esta pérdida NO regresará al inventario.`;
                    icon = 'error';
                } else if (pollosDescuentoNuevo > 0 || pesoDescuentoNuevo > 0) {
                    let tipoInfo = '';
                    if (tiposPollo.length > 1 && tipoPolloSeleccionado) {
                        tipoInfo = ` al tipo: ${tipoPolloSeleccionado}`;
                    } else if (tiposPollo.length === 1) {
                        tipoInfo = ` al tipo: ${tiposPollo[0].tipo}`;
                    }

                    const tipoDescuentoTexto = document.querySelector('#descuento_fuera_de_horario').checked
                        ? 'Fuera de Horario'
                        : 'Normal';

                    titulo = '¿Confirmar descuento?';
                    mensaje = `Nuevo descuento (${tipoDescuentoTexto}): ${pollosDescuentoNuevo.toLocaleString()} pollos y ${formatNumber(pesoDescuentoNuevo)} kg${tipoInfo}\n\n`;
                    if (descuentoPollosActual > 0 || descuentoPesoActual > 0) {
                        mensaje += `<br>Ya descontado: ${descuentoPollosActual.toLocaleString()} pollos y ${formatNumber(descuentoPesoActual)} kg\n\n`;
                    }
                    mensaje += `<br>Total acumulado: ${pollosDescuentoTotal.toLocaleString()} pollos y ${formatNumber(pesoDescuentoTotal)} kg\n\n`;
                    mensaje += `<br>Disponible después: ${pollosDisponibleFinal.toLocaleString()} pollos y ${formatNumber(pesoDisponibleFinal)} kg`;
                    icon = 'warning';
                } else {
                    titulo = 'Confirmar';
                    mensaje = 'No se aplicarán descuentos. ¿Desea continuar?';
                    icon = 'info';
                }

                Swal.fire({
                    title: titulo,
                    html: mensaje,
                    icon: icon,
                    showCancelButton: true,
                    confirmButtonColor: esPerdida ? '#dc3545' : '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sí, confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        e.target.submit();
                    }
                });
            });

            // Manejar eliminación de descuento del historial
            $(document).on('click', '.btn-eliminar-descuento', function() {
                const button = $(this);
                const historialId = button.data('id');
                const pollos = button.data('pollos');
                const peso = button.data('peso');
                const tipo = button.data('tipo');
                const ordenId = button.data('orden-id');

                let tipoTexto = '';
                if (tipo === 'normal') {
                    tipoTexto = 'Normal';
                } else if (tipo === 'fuera_horario') {
                    tipoTexto = 'Fuera de Horario';
                } else {
                    tipoTexto = 'Pérdida';
                }

                Swal.fire({
                    title: '¿Eliminar descuento?',
                    html: `Se eliminará el siguiente descuento:<br><br>
                           <strong>Tipo:</strong> ${tipoTexto}<br>
                           <strong>Pollos:</strong> ${pollos.toLocaleString()}<br>
                           <strong>Peso:</strong> ${parseFloat(peso).toFixed(2)} kg<br><br>
                           <span class="text-danger">Los totales e inventario serán revertidos automáticamente.</span>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        const url = `/ordenes-de-despacho/descuento/historial/${historialId}`;
                        return fetch(url, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (!data.success) {
                                throw new Error(data.message || 'Error al eliminar el descuento');
                            }
                            return data;
                        })
                        .catch(error => {
                            Swal.showValidationMessage(error.message);
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Descuento eliminado',
                            text: result.value.message,
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            // Recargar la página para actualizar los totales
                            window.location.reload();
                        });
                    }
                });
            });
        });
    </script>
@stop

@section('css')
    <style>
        .tfoot-order {
            background: #cddcec;
        }

        .tfoot-peso {
            background: #dcdfed;
        }

        .tfoot-descuento {
            background: #ffe6e6;
            border-top: 2px solid #dc3545;
        }

        .tfoot-total {
            background: #e8f5e8;
            border-top: 2px solid #28a745;
            font-weight: bold;
        }

        .tfoot-total td {
            font-size: 1.1em;
        }

        #tipoPolloSection {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            background-color: #f8f9fa;
            margin-top: 15px;
        }

        #tipoPolloDescuento {
            border: 2px solid #007bff;
        }

        #tipoPolloDescuento:focus {
            border-color: #0056b3;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .modal-lg {
            max-width: 800px;
        }

        .btn-block {
            width: 100%;
        }

        .alert {
            border-radius: 8px;
        }

        .form-group label {
            font-weight: 600;
            color: #495057;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        /* Estilos para el modal mejorado */
        .modal-lg {
            max-width: 900px;
        }

        .card-header {
            font-size: 0.95rem;
        }

        .card-body {
            font-size: 0.9rem;
        }

        .form-control-lg {
            font-size: 1.1rem;
            padding: 0.6rem 0.75rem;
        }

        /* Resumen de orden */
        .border-right {
            border-right: 1px solid #dee2e6 !important;
        }

        @media (max-width: 768px) {
            .border-right {
                border-right: none !important;
                border-bottom: 1px solid #dee2e6 !important;
                padding-bottom: 10px;
                margin-bottom: 10px;
            }
        }

        /* Estilos para la información básica */
        .card-body .row.mb-3 p {
            margin-bottom: 0.5rem;
        }

        .card-body .row.mb-3 strong {
            font-size: 0.9rem;
            color: #495057;
        }

        .card-body .row.mb-3 .text-muted {
            font-size: 1rem;
            font-weight: 500;
        }

        /* Espaciado entre cards */
        .row + .row {
            margin-top: 1.5rem;
        }

    </style>
@stop