@if ($item)

    <form action="{{ route('documento.storeServiciosLibre') }}" method="post">
        @csrf
        <input type="hidden" name="tipo" value="{{ $div[1] }}">
        <input type="hidden" name="doc" value="{{ $documentoId }}">
        <input type="hidden" name="ordenVentaId" value="{{ $OrdenVenta->id }}">
        <input type="hidden" name="clienteId" value="{{ $cliente->id }}">
        <input type="hidden" name="servicio" value="{{ $item->id }}">

        <div class="row">
            <div class="col-md-12">
                <strong>Codigo:</strong> {{ $item->codigo }} <br>
                <strong>Producto:</strong> {{ $item->producto }}
                <br>

                <ul class="list-group list-group-horizontal">

                    @if (count($item->categorias) > 0)
                        <strong>categorias:&nbsp; </strong>
                        @foreach ($item->categorias as $i)
                            <span class="badge bg-secondary" style="color: white">{{ $i->categoria }}</span>&nbsp;&nbsp;
                        @endforeach
                    @else
                        <div class="alert alert-danger mt-2">
                            <strong>¡Opps! Parece que no tienes ninguna categoria registrada.</strong>
                        </div>
                    @endif
                </ul>
            </div>



            @include('documento.libre.descuentos')




            <div class="col-md-4 mt-2">
                <label for=""><strong>Cantidad</strong></label>
                <input required placeholder="Unidades" name="unidad" value="1" type="number" step="0.01"
                    class="form-control">
            </div>
            @if ($cliente->factura=="FAX")
             <input type="hidden" name="iva" value="0">
            @else
            <div class="col-md-3 mt-2">
                <label for=""><strong>IVA</strong></label>
                <select required name="iva" id="iva" class="form-control">

                    <option value="1">Si</option>
                    <option value="0">No</option>
                </select>
            </div>
            @endif
        <div class="col-md-5  mt-2">
            <label for="Bodega">Bodegas</label>
            <select disabled name="bodega" class="form-control" id="" >
                @foreach ($bodegas as $item)
                    <option @if($OrdenVenta->bodega_id ==$item->id ) selected @endif value="{{ $item->id }}">{{ $item->bodega }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-md-5  mt-2">
            <label for="Bodega">Unidades</label>
            <select name="unidad_req" class="form-control" id="" data-control="select2">
                @foreach ($unidades as $uni)
                    <option value="{{ $uni->id }}">{{ $uni->unidad }}</option>
                @endforeach
            </select>
        </div>


        {{-- Check box --}}
        <div class="col-md-2" id="checksujetas" style="display: none;">
            <label for="sujetas" class="mt-2"><strong>Ventas Sujetas</strong></label>
            <input type="checkbox" name="sujetas" id="sujetas" class="d-flex mt-2" value="1">
        </div>


        <div class="col-md-12">
            <button type="submit" class="btn btn-warning mt-2"> Agregar </button>
        </div>

            <div class="col-md-12 mt-2">
                @php
                    $url = 'default.png';
                    if ($item?->imagen != null) {
                        $url = $item?->imagen;
                    }
                    if ($url == null) {
                        $url = 'default.png';
                    }
                @endphp

                <img width="200" height="270" class="img-thumbnail" src="{{ asset('productos/' . $url) }}"
                    alt="">
            </div>

            <div class="col-md-12">
                @if ($item?->tiposPrecios)
                    @if (count($item?->tiposPrecios->where('pivot.estado', 1)) > 0)
                        <button type="submit" class="btn btn-warning mt-2"> Agregar </button>
                    @else
                        <div class="alert alert-danger mt-2">
                            <strong>¡Opps! Parece que no tienes ningun registro de precios para el producto
                                seleccionado</strong>
                        </div>
                    @endif

                @endif

            </div>


        </div>
    </form>

@endif
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ivaSelect = document.getElementById('iva');
        const sujetasCheckbox = document.getElementById('sujetas');
        const checksujetasDiv = document.getElementById('checksujetas');

        /* Mostramos o escondemos el checkbox basado en el valor de IVA */
        function toggleCheckboxVisibility() {
            if (ivaSelect.value == "0") {
                checksujetasDiv.style.display = "block";
            } else {
                checksujetasDiv.style.display = "none";
                sujetasCheckbox.checked = false;
            }
        }

        /* Inicializamos la visibilidad del checkbox */
        toggleCheckboxVisibility();

        /* Cambiamos la visibilidad del checkbox al cambiar el select de IVA */
        ivaSelect.addEventListener('change', toggleCheckboxVisibility);
    });
</script>