@extends('layouts.app')

@section('content')
    <div class="container">



        <div class="card">

            <div class="card-header ">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="mt-2">
                            {{ __('CREAR ORDEN DE COMPRA') }}
                        </h6>
                    </div>
                    <div class="col-md-6 text-end">
                        <a class="btn btn-danger btn-sm" href="{{ route('inventarioingresos.index') }}">
                            {{ __('VOLVER') }}
                        </a>
                    </div>
                </div>

            </div>

            <div class="card-body">
                <form method="POST" action="{{ route('inventarioingresos.store') }}">
                    @csrf
                    <div class="row justify-content-between  mb-3" id="taskFormContainer">


                        <div class="col-md-2 text-center">
                            {{ __('CÓDIGO DE BARRAS') }}
                        </div>
                        <div class="col-md-2 text-center">
                            {{ __('PRODUCTO') }}
                        </div>
                        <div class="col-md-2 text-center">
                            {{ __('VALOR') }}
                        </div>
                        <div class="col-md-2 ">
                            {{ __('CANTIDAD') }}
                        </div>
                        <div class="col-md-2 text-center">
                            {{ __('SUBTOTAL') }}
                        </div>
                        <div class="col-md-2">
                            <button class="btn  btn-primary pull-right" type="button" id="addMoreButton">AÑADIR
                                MÁS</button>
                        </div>


                    </div>

                    <div class="product-box-extra" id="itemsInOrder">

                    </div>

                    <div class="product-box hidden">
                        <div class="row product-item justify-content-between m-4">


                            <div class="form-group col-md-2">

                                <input class="form-control barcode" id="barcode" type="text" name="barcode">
                            </div>

                            <div class="col-md-2 text-center">
                                <select name="products[]" class="form-control cart-product" style="max-width: 250px">
                                    <option selected disabled>{{ __('-- Seleccione una opción') }}</option>
                                    @foreach ($productos as $producto)
                                        <option value="{{ $producto->id }}"
                                            {{ old('producto_id') == $producto->id ? 'selected' : '' }}>
                                            {{ $producto->nombre_producto }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2 text-center">
                                <input id="product_price" name="product_price[]" class="product-price"
                                    value="0.0"></input>
                            </div>
                            <div class="col-md-2 text-center">
                                <input name="qty[]" type="number" step="0.01" placeholder=""
                                    class="form-control product-qty" value="1" style="max-width: 100px">
                            </div>
                            <div class="col-md-2 text-center">
                                <input id="item_total" name="item_total[]" class="product-total"></input>
                            </div>

                            <div class="col-md-2 text-center">
                                <button class="btn btn btn-danger pull-right remove-row" type="button">Quitar</button>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="form-group col-md-4 g-3">
                            <label for="documento_proveedor" class="text-success">
                                {{ __('RUC PROVEEDOR') }}
                            </label>
                            <div class="input-group">
                                <input type="text" name="documento_proveedor" id="documento_proveedor"
                                    class="form-control @error('documento_proveedor') is-invalid @enderror"
                                    value="{{ old('documento_proveedor') }}" placeholder="ingrese DNI ó RUC">
                                <button class="btn btn-primary" type="button" id="buscar_proveedor_btn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        viewBox="0 0 25 25" style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">
                                        <path
                                            d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                            @error('documento_proveedor')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="form-group col-md-8 g-3">
                            <label for="datos_proveedor" class="text-muted">
                                {{ __('NOMBRE Ó RAZÓN SOCIAL PROVEEDOR') }}
                            </label>
                            <input type="text" name="proveedor" id="datos_proveedor"
                                class="form-control @error('datos_proveedor') is-invalid @enderror"
                                value="{{ old('datos_proveedor') }}" placeholder="Datos obtenidos automáticamente...">
                            @error('datos_proveedor')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>



                    <div class="form-group col-md-3 g-3 mb-3">
                        <label for="tipomoneda">
                            {{ __('TIPO MONEDA') }}
                        </label>

                        <select name="tipomoneda" id="tipomoneda"
                            class="form-select @error('tipomoneda') is-invalid @enderror" aria-label="">
                            <option selected disabled>{{ __('-- Seleccione una opción') }}</option>

                            <option value="SOLES" {{ old('tipomoneda') == 'SOLES' ? 'selected' : '' }}>
                                SOLES
                            </option>
                            <option value="DOLARES" {{ old('tipomoneda') == 'DOLARES' ? 'selected' : '' }}>
                                DOLARES
                            </option>
                        </select>
                    </div>






                    <div class="form-group col-md-12 g-3">
                        <label for="descripcion">
                            {{ __('DESCRIPCIÓN') }}
                        </label>
                        <textarea name="descripcion" id="descripcion" class="form-control @error('descripcion') is-invalid @enderror"
                            placeholder="De ser el caso, ingrese una descripción o comentario...">{{ old('descripcion') }}</textarea>
                        @error('descripcion')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>



                    <div class="d-flex justify-content-end mt-5">

                        <div class="col-md-3 text-right">

                            <span><b>subtotal</b></span>
                            <input id="product_sub_total" name="product_sub_total" class="product-sub-total"
                                value="0.0"></input>

                        </div>

                        <div class="col-md-3 text-right">

                            <span><b>Total</b></span>

                            <input id="product_grand_total" name="product_grand_total" class="product-grand-total"
                                value="0.0"></input>


                        </div>


                        <div class="col-md-2">

                            <button class="btn btn btn-primary pull-right" type="submit" id="saveOrder">Guardar</button>
                        </div>
                    </div>
                </form>

            </div>







        </div>
    </div>
    @push('js')
        <script src="http://localhost/innova-app/public/js/packages/jquery.min.js"></script>
        <script>
            $("#addMoreButton").click(function() {
                var row = $(".product-box").html();
                $(".product-box-extra").append(row);
                $(".product-box-extra .remove-row").last().removeClass('hideit');
                $(".product-box-extra .product-price").last().text('0.0');
                $(".product-box-extra .product-qty").last().val('1');
                $(".product-box-extra .product-total").last().text('0.0');

                $(".product-box-extra .barcode").last().focus();
            });

            $(document).on("click", ".remove-row", function() {
                $(this).closest('.row').remove();
                calculateGrandTotal();
            });




            function updateRowTotal(row) {
                var price = parseFloat(row.find('.product-price').val()) || 0;
                var qty = parseInt(row.find('.product-qty').val()) || 1;
                var total = price * qty;
                row.find('.product-total').val(total.toFixed(2));
            }

            function calculateGrandTotal() {
                var subTotal = 0;
                var grandTotal = 0;
                $(".product-total").each(function() {
                    subTotal += parseFloat($(this).val()) || 0;
                });
                grandTotal = subTotal * 1.18
                $("#product_sub_total").val(subTotal.toFixed(2));
                $("#product_grand_total").val(grandTotal.toFixed(2));

            }


            $(document).on("change", ".cart-product, .product-qty, .product-price", function() {
                var row = $(this).closest('.row');
                updateRowTotal(row);
                calculateGrandTotal();
            });

            $(document).on("blur", ".barcode", function() {
                var barcode = $(this).val();
                var url = "{{ route('get.product.by.barcode', ['barcode' => ':barcode']) }}";
                url = url.replace(':barcode', barcode);
                var currentRow = $(this).closest('.row');

                $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            var product = response.product;
                            currentRow.find('.cart-product').val(product
                            .id); // Assuming 'id' is the product ID field
                            // You can also update other fields like product name, price, etc.
                        } else {
                            // Handle error: product not found
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle AJAX errors
                    }
                });
            });
        </script>
    @endpush
@endsection