@extends('adminlte::page')

@section('title', 'Nueva Compra')
@section('plugins.Select2', true)

@section('content_header')
    <h4>Registrar Nueva Compra</h4>
@stop

@section('content')
    <form action="{{ route('compras.store') }}" method="POST" id="formCompra">
        @csrf

        <!-- Datos Generales -->
        <div class="card">
            <div class="card-header bg-primary">
                <h3 class="card-title text-white">
                    <i class="fas fa-file-invoice mr-2"></i>Datos de la Compra
                </h3>
            </div>
            <div class="card-body">
                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <h5><i class="icon fas fa-ban"></i> Error!</h5>
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="row">
                    <!-- Proveedor -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="proveedor_id">Proveedor <span class="text-danger">*</span></label>
                            <select name="proveedor_id" id="proveedor_id" class="form-control select2" required>
                                <option value="">Seleccione un proveedor</option>
                                @foreach($proveedores as $proveedor)
                                    <option value="{{ $proveedor->id }}"
                                            {{ old('proveedor_id', $proveedorSeleccionado) == $proveedor->id ? 'selected' : '' }}>
                                        {{ $proveedor->razon_social }} - {{ $proveedor->ruc ?? 'Sin RUC' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Número de Factura -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="numero_factura">Nº Factura/Boleta <span class="text-danger">*</span></label>
                            <input type="text"
                                   name="numero_factura"
                                   id="numero_factura"
                                   class="form-control"
                                   value="{{ old('numero_factura') }}"
                                   placeholder="Ej: F001-00123"
                                   required>
                        </div>
                    </div>

                    <!-- Tipo de Documento -->
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="tipo_documento">Tipo <span class="text-danger">*</span></label>
                            <select name="tipo_documento" id="tipo_documento" class="form-control" required>
                                <option value="factura" {{ old('tipo_documento') == 'factura' ? 'selected' : '' }}>Factura</option>
                                <option value="boleta" {{ old('tipo_documento') == 'boleta' ? 'selected' : '' }}>Boleta</option>
                                <option value="nota_credito" {{ old('tipo_documento') == 'nota_credito' ? 'selected' : '' }}>Nota de Crédito</option>
                                <option value="nota_debito" {{ old('tipo_documento') == 'nota_debito' ? 'selected' : '' }}>Nota de Débito</option>
                            </select>
                        </div>
                    </div>

                    <!-- Fecha de Compra -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="fecha_compra">Fecha de Compra <span class="text-danger">*</span></label>
                            <input type="date"
                                   name="fecha_compra"
                                   id="fecha_compra"
                                   class="form-control"
                                   value="{{ old('fecha_compra', now()->format('Y-m-d')) }}"
                                   required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Fecha de Vencimiento -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="fecha_vencimiento">Fecha de Vencimiento</label>
                            <input type="date"
                                   name="fecha_vencimiento"
                                   id="fecha_vencimiento"
                                   class="form-control"
                                   value="{{ old('fecha_vencimiento') }}">
                        </div>
                    </div>

                    <!-- Observaciones -->
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="observaciones">Observaciones</label>
                            <input type="text"
                                   name="observaciones"
                                   id="observaciones"
                                   class="form-control"
                                   value="{{ old('observaciones') }}"
                                   placeholder="Notas adicionales sobre la compra">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Detalles de la Compra -->
        <div class="card">
            <div class="card-header bg-info">
                <h3 class="card-title text-white">
                    <i class="fas fa-list mr-2"></i>Detalles de la Compra
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-light btn-sm" id="btnAgregarDetalle">
                        <i class="fas fa-plus-circle mr-1"></i> Agregar Ítem
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="tablaDetalles">
                        <thead class="bg-light">
                            <tr>
                                <th width="30%">Concepto</th>
                                <th width="12%">Unidades</th>
                                <th width="12%">Kilos</th>
                                <th width="15%">Precio/Kilo</th>
                                <th width="18%">Importe</th>
                                <th width="8%">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="detallesBody">
                            <!-- Los detalles se agregan dinámicamente -->
                        </tbody>
                        <tfoot class="bg-light">
                            <tr>
                                <th colspan="4" class="text-right">Subtotal:</th>
                                <th class="text-right">
                                    <span id="subtotalDisplay">S/ 0.00</span>
                                    <input type="hidden" id="subtotal" name="subtotal" value="0">
                                </th>
                                <th></th>
                            </tr>
                            <tr>
                                <th colspan="4" class="text-right">IGV (18%):</th>
                                <th class="text-right">
                                    <span id="igvDisplay">S/ 0.00</span>
                                    <input type="hidden" id="igv" name="igv" value="0">
                                </th>
                                <th></th>
                            </tr>
                            <tr class="bg-primary text-white">
                                <th colspan="4" class="text-right">TOTAL:</th>
                                <th class="text-right">
                                    <span id="totalDisplay">S/ 0.00</span>
                                    <input type="hidden" id="total" name="total" value="0">
                                </th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle mr-2"></i>
                    <strong>Nota:</strong> El importe se calcula automáticamente: Precio/Kilo × Kilos
                </div>
            </div>
        </div>

        <!-- Botones -->
        <div class="card">
            <div class="card-footer">
                <button type="submit" class="btn btn-primary mr-2" id="btnGuardar">
                    <i class="fas fa-save mr-1"></i> Guardar Compra
                </button>
                <a href="{{ route('compras.index') }}" class="btn btn-warning">
                    <i class="fas fa-list mr-1"></i> Lista de Compras
                </a>
            </div>
        </div>
    </form>
@stop

@section('css')
<style>
    .select2-container--bootstrap4 .select2-selection {
        border: 1px solid #ced4da !important;
        min-height: 38px !important;
    }

    .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
    }

    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
</style>
@stop



@section('js')
<script>
$(document).ready(function() {
    // Inicializar Select2
    $('.select2').select2({
        theme: 'bootstrap4',
        width: '100%'
    });

    let detalleIndex = 0;

    // Agregar detalle
    $('#btnAgregarDetalle').click(function() {
        agregarDetalle();
    });

    // Agregar primer detalle automáticamente
    agregarDetalle();

    function agregarDetalle() {
        const html = `
            <tr data-index="${detalleIndex}">
                <td>
                    <input type="text"
                           name="detalles[${detalleIndex}][concepto]"
                           class="form-control form-control-sm"
                           placeholder="Ej: OLMOS, CARGA, etc."
                           required>
                </td>
                <td>
                    <input type="number"
                           name="detalles[${detalleIndex}][unidades]"
                           class="form-control form-control-sm text-right unidades"
                           step="0.01"
                           min="0"
                           value="0"
                           required>
                </td>
                <td>
                    <input type="number"
                           name="detalles[${detalleIndex}][kilos]"
                           class="form-control form-control-sm text-right kilos"
                           step="0.01"
                           min="0"
                           value="0"
                           required>
                </td>
                <td>
                    <input type="number"
                           name="detalles[${detalleIndex}][precio_unitario]"
                           class="form-control form-control-sm text-right precio"
                           step="0.01"
                           min="0"
                           value="0"
                           required>
                </td>
                <td>
                    <input type="text"
                           class="form-control form-control-sm text-right importe"
                           value="S/ 0.00"
                           readonly>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm btnEliminarDetalle">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;

        $('#detallesBody').append(html);
        detalleIndex++;
        calcularTotales();
    }

    // Eliminar detalle
    $(document).on('click', '.btnEliminarDetalle', function() {
        if ($('#detallesBody tr').length > 1) {
            $(this).closest('tr').remove();
            calcularTotales();
        } else {
            alert('Debe haber al menos un ítem en la compra');
        }
    });

    // Calcular importe al cambiar kilos o precio
    $(document).on('input', '.kilos, .precio', function() {
        const row = $(this).closest('tr');
        const kilos = parseFloat(row.find('.kilos').val()) || 0;
        const precio = parseFloat(row.find('.precio').val()) || 0;
        const importe = kilos * precio;

        row.find('.importe').val('S/ ' + importe.toFixed(2));
        calcularTotales();
    });

    function calcularTotales() {
        let subtotal = 0;

        $('#detallesBody tr').each(function() {
            const kilos = parseFloat($(this).find('.kilos').val()) || 0;
            const precio = parseFloat($(this).find('.precio').val()) || 0;
            subtotal += (kilos * precio);
        });

        const igv = subtotal * 0.18;
        const total = subtotal + igv;

        $('#subtotalDisplay').text('S/ ' + subtotal.toFixed(2));
        $('#igvDisplay').text('S/ ' + igv.toFixed(2));
        $('#totalDisplay').text('S/ ' + total.toFixed(2));

        $('#subtotal').val(subtotal.toFixed(2));
        $('#igv').val(igv.toFixed(2));
        $('#total').val(total.toFixed(2));
    }

    // Validar antes de enviar
    $('#formCompra').submit(function(e) {
        if ($('#detallesBody tr').length == 0) {
            e.preventDefault();
            alert('Debe agregar al menos un ítem a la compra');
            return false;
        }

        // Deshabilitar botón para evitar doble clic
        $('#btnGuardar').prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i> Guardando...');
    });
});
</script>
@stop