@extends('adminlte::page')
@section('plugins.Select2', true)
@section('title', 'Nueva venta directa')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>Nueva venta directa</h1>
    </div>
@stop

@section('content')
    <form id="formVentaDirecta" action="{{ route('ventas.venta-directa.store') }}" method="POST">
        @csrf

        @if(isset($cajaActiva) && $cajaActiva)
            @php
                $fechaApertura = $cajaActiva->fecha_apertura;
                $esHoy = $fechaApertura && $fechaApertura->format('Y-m-d') === now()->format('Y-m-d');
            @endphp
            <div class="alert {{ $esHoy ? 'alert-success' : 'alert-warning' }} border-0 mb-3 franja-caja" role="alert">
                <i class="fas fa-cash-register mr-2"></i>
                <strong>Registrando en:</strong> Caja #{{ $cajaActiva->id }}
                — Aperturada el {{ $fechaApertura ? $fechaApertura->format('d/m/Y') : 'N/A' }}
                @if(!$esHoy)
                    <span class="d-block mt-1 small">Si las ventas son de hoy, considere aperturar una nueva caja.</span>
                @endif
            </div>
        @else
            <div class="alert alert-danger border-0 mb-3 franja-caja" role="alert">
                <i class="fas fa-exclamation-triangle mr-2"></i>
                <strong>No hay caja abierta.</strong> Debe aperturar una caja para registrar ventas.
            </div>
        @endif

        <!-- CARD 1: Datos de la Venta -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="card-title mb-0"><i class="fas fa-shopping-cart"></i> Datos de la Venta</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group mb-2">
                            <label class="small font-weight-bold">
                                <i class="fas fa-hashtag text-primary"></i> Serie de Venta
                            </label>
                            <input type="text" class="form-control" value="{{ $serie->number }}-{{ $serie->serie }}" readonly>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group mb-2">
                            <label for="fecha_venta" class="small font-weight-bold">
                                <i class="fas fa-calendar text-primary"></i> Fecha de Venta
                            </label>
                            <input type="date" id="fecha_venta" name="fecha_venta" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group mb-2">
                            <label for="cliente_id" class="small font-weight-bold">
                                <i class="fas fa-user text-primary"></i> Cliente <span class="text-danger">*</span>
                            </label>
                            <select id="cliente_id" name="cliente_id" class="form-control select2" style="width:100%" required>
                                <option value="">Seleccione un cliente</option>
                                @foreach($clientes as $c)
                                    <option value="{{ $c->id }}">{{ $c->nombre_comercial }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group mb-2">
                            <label class="small font-weight-bold">
                                <i class="fas fa-piggy-bank text-success"></i> Saldo a Favor <small class="text-muted">(se descontará del total)</small>
                            </label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-success text-white">
                                        <i class="fas fa-dollar-sign"></i>
                                    </span>
                                </div>
                                <input type="text" id="saldo_favor_display" class="form-control font-weight-bold" value="0.00" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- CARD 2: Detalles de la Venta -->
        <div class="card mt-3">
            <div class="card-header bg-info text-white">
                <h3 class="card-title mb-0"><i class="fas fa-list"></i> Detalles de la Venta</h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover mb-0" id="tablaDetalles">
                        <thead class="thead-light">
                            <tr>
                                <th>Presentación</th>
                                <th>Tipo</th>
                                <th class="text-center" style="width:90px">Cantidad</th>
                                <th class="text-center" style="width:130px">Peso</th>
                                <th class="text-center">Precio S/</th>
                                <th class="text-center">Subtotal S/</th>
                                <th class="text-center" style="width:60px">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyDetalles">
                            <tr id="filaTemplate" style="display:none;">
                                <td>
                                    <select name="detalles[][presentacion_pollo_id]" class="form-control form-control-sm presentacion_pollo">
                                        <option value="">-- Presentación --</option>
                                        @foreach($presentacionPollos as $p)
                                            <option value="{{ $p->id }}">{{ $p->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select name="detalles[][tipo_pollo_id]" class="form-control form-control-sm tipo_pollo">
                                        <option value="">-- Tipo --</option>
                                        @foreach($tipoPollos as $t)
                                            <option value="{{ $t->id }}">{{ $t->descripcion }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td><input type="number" name="detalles[][cantidad_pollos]" class="form-control form-control-sm input_cantidad" step="0.01" min="0" placeholder="0"></td>
                                <td><input type="number" name="detalles[][peso]" class="form-control form-control-sm input_peso" step="0.01" min="0" placeholder="0.00"></td>
                                <td><input type="number" name="detalles[][precio]" class="form-control form-control-sm input_precio" step="0.01" min="0" placeholder="0.00"></td>
                                <td><input type="text" name="detalles[][subtotal]" class="form-control form-control-sm input_subtotal" readonly placeholder="0.00"></td>
                                <td class="text-center"><button type="button" class="btn btn-sm btn-danger btn-quitar"><i class="fa fa-times"></i></button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="p-2">
                    <button type="button" class="btn btn-secondary btn-sm" id="btnAgregarFila"><i class="fa fa-plus"></i> Agregar línea</button>
                </div>
            </div>
        </div>

        <!-- CARD 3: Resumen de Transacción -->
        <div class="card mt-3">
            <div class="card-header bg-success text-white">
                <h3 class="card-title mb-0"><i class="fas fa-calculator"></i> Resumen de Transacción</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-0">
                            <label class="text-muted"><i class="fas fa-comment text-info"></i> Observaciones (Opcional)</label>
                            <textarea class="form-control" placeholder="Notas adicionales sobre la venta..." rows="4" id="comentario" name="comentario" style="resize: none;"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <table class="table mb-0" style="background-color: white;">
                            <tbody>
                                <tr>
                                    <td class="align-middle pl-4 py-3" width="65%">
                                        <i class="fas fa-tags text-success"></i>
                                        <strong class="ml-2">TOTAL DE VENTA:</strong>
                                    </td>
                                    <td class="text-right text-success align-middle font-weight-bold pr-4 py-3" id="totalVenta" style="font-size: 1.3rem;">S/ 0.00</td>
                                </tr>
                                <tr>
                                    <td class="align-middle pl-4 py-3">
                                        <i class="fas fa-piggy-bank text-warning"></i>
                                        <strong class="ml-2">SALDO A FAVOR APLICADO:</strong>
                                    </td>
                                    <td class="text-right text-warning align-middle font-weight-bold pr-4 py-3" id="saldoAplicarDisplay" style="font-size: 1.1rem;">S/ 0.00</td>
                                </tr>
                                <tr class="bg-gradient-primary text-white">
                                    <td class="align-middle pl-4 py-3">
                                        <i class="fas fa-money-bill-wave text-white"></i>
                                        <strong class="text-white ml-2">TOTAL A PAGAR:</strong>
                                    </td>
                                    <td class="text-right text-white align-middle font-weight-bold pr-4 py-3" id="pendienteDisplay" style="font-size: 1.4rem;">S/ 0.00</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-12 text-right">
                        <a href="{{ route('ventas.index') }}" class="btn btn-secondary btn-lg mr-2">
                            <i class="fas fa-times"></i> Cancelar
                        </a>
                        <button type="submit" class="btn btn-success btn-lg" id="btnGuardar">
                            <i class="fas fa-save"></i> Registrar Venta Directa
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@stop

@section('css')
<style>
    .franja-caja { border-left: 4px solid #856404; }
    .alert-success.franja-caja { border-left-color: #28a745; }
    .alert-danger.franja-caja { border-left-color: #dc3545; }
    /* Select2 height 35px en venta directa */
    #formVentaDirecta .select2-container--default .select2-selection--single {
        height: 35px;
    }
    #formVentaDirecta .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 33px;
    }
    #formVentaDirecta .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 33px;
    }
</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(function () {
    $('.select2').select2({ width: '100%' });
    let saldoAFavor = 0;

    $('#cliente_id').on('change', function () {
        const id = $(this).val();
        if (!id) {
            saldoAFavor = 0;
            $('#saldo_favor_display').val('0.00');
            actualizarResumen();
            return;
        }
        $.get('{{ url("pagos/buscar-deuda-cliente") }}/' + id).done(function (r) {
            saldoAFavor = parseFloat(r.saldo_a_favor || 0) || 0;
            $('#saldo_favor_display').val(saldoAFavor.toFixed(2));
            actualizarResumen();
        }).fail(function () {
            saldoAFavor = 0;
            $('#saldo_favor_display').val('0.00');
            actualizarResumen();
        });
    });

    function agregarFila() {
        const $tpl = $('#filaTemplate').clone().attr('id', '').show();
        $('#tbodyDetalles').append($tpl);
        $tpl.find('.input_cantidad, .input_peso, .input_precio').on('input', calcularSubtotal);
        $tpl.find('.btn-quitar').on('click', function () { $(this).closest('tr').remove(); actualizarResumen(); });
    }

    function redondear2Decimales(num) {
        return Math.round(parseFloat(num) * 100) / 100;
    }

    function calcularSubtotal() {
        const $tr = $(this).closest('tr');
        const peso = parseFloat($tr.find('.input_peso').val()) || 0;
        const precio = parseFloat($tr.find('.input_precio').val()) || 0;
        const subtotal = redondear2Decimales(peso * precio);
        $tr.find('.input_subtotal').val(subtotal.toFixed(2));
        actualizarResumen();
    }

    $(document).on('input', '.input_cantidad, .input_peso, .input_precio', function () {
        const $tr = $(this).closest('tr');
        const peso = parseFloat($tr.find('.input_peso').val()) || 0;
        const precio = parseFloat($tr.find('.input_precio').val()) || 0;
        const subtotal = redondear2Decimales(peso * precio);
        $tr.find('.input_subtotal').val(subtotal.toFixed(2));
        actualizarResumen();
    });

    $(document).on('click', '.btn-quitar', function () {
        $(this).closest('tr').remove();
        actualizarResumen();
    });

    function actualizarResumen() {
        let total = 0;
        $('#tbodyDetalles tr').not('#filaTemplate').each(function () {
            total += parseFloat($(this).find('.input_subtotal').val()) || 0;
        });
        total = redondear2Decimales(total);
        const aplicar = redondear2Decimales(Math.min(saldoAFavor, total));
        const pendiente = redondear2Decimales(total - aplicar);
        $('#totalVenta').text('S/ ' + total.toFixed(2));
        $('#saldoAplicarDisplay').text('S/ ' + aplicar.toFixed(2));
        $('#pendienteDisplay').text('S/ ' + pendiente.toFixed(2));
    }

    $('#btnAgregarFila').on('click', agregarFila);
    agregarFila();

    $('#formVentaDirecta').on('submit', function (e) {
        e.preventDefault();
        const detalles = [];
        let total = 0;
        $('#tbodyDetalles tr').not('#filaTemplate').each(function () {
            const subtotal = parseFloat($(this).find('.input_subtotal').val()) || 0;
            if (subtotal <= 0) return;
            const subRedondeado = redondear2Decimales(subtotal);
            detalles.push({
                tipo_pollo_id: $(this).find('.tipo_pollo').val() || null,
                presentacion_pollo_id: $(this).find('.presentacion_pollo').val() || null,
                cantidad_pollos: $(this).find('.input_cantidad').val(),
                peso: $(this).find('.input_peso').val(),
                precio: $(this).find('.input_precio').val(),
                subtotal: subRedondeado
            });
            total += subRedondeado;
        });
        total = redondear2Decimales(total);
        if (detalles.length === 0) {
            Swal.fire({ icon: 'warning', title: 'Detalle requerido', text: 'Agregue al menos un detalle con peso y precio.' });
            return;
        }
        const clienteId = $('#cliente_id').val();
        if (!clienteId) {
            Swal.fire({ icon: 'warning', title: 'Cliente requerido', text: 'Seleccione un cliente.' });
            return;
        }
        $('#btnGuardar').prop('disabled', true);
        Swal.fire({
            title: 'Registrando venta...',
            allowOutsideClick: false,
            didOpen: function () { Swal.showLoading(); }
        });
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                cliente_id: clienteId,
                fecha_venta: $('#fecha_venta').val(),
                detalles: detalles
            },
            success: function (r) {
                Swal.close();
                if (r.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Venta registrada',
                        text: r.message
                    }).then(function () {
                        window.location.href = r.redirect || '{{ route("ventas.index") }}';
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: r.message || 'No se pudo guardar la venta.'
                    });
                    $('#btnGuardar').prop('disabled', false);
                }
            },
            error: function (xhr) {
                Swal.close();
                let msg = 'Error al registrar la venta';
                if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const err = xhr.responseJSON.errors;
                    msg = Object.keys(err).map(function(k) { return err[k][0]; }).join('\n');
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: msg
                });
                $('#btnGuardar').prop('disabled', false);
            }
        });
    });
});
</script>
@stop