{{--

<div class="modal fade" id="modalFacturar" tabindex="-1" aria-labelledby="modalFacturarLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
  
        <div class="modal-header">
          <h5 class="modal-title" id="modalFacturarLabel">Confirmar Facturación</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
  
        <div class="modal-body">
           <form action="{{route('facturacion.facturar')}}" method="post">
            @csrf
            <input type="hidden" value="{{$factura->id}}" name="factura1">
            <div class="row">
                <div class="col-md-12">
                    <label for=""><strong>Forma de pago</strong></label>
                    <select required name="pago" id="pagos" class="form-control">
                      <option value="" disabled selected>Seleccione...</option>
                      @foreach ($pagos as $item)
                          <option value="{{$item->codigo}}">{{$item->valor}}</option>
                      @endforeach
                    </select>
                </div>

                
            </div>
            <br>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-success">Confirmar Factura</button>
           </form>
          
        </div>
  
       
  
      </div>
    </div>
  </div>

--}}

{{--
      <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalFacturar">
          Facturar
      </button>
      --}}
@if ($factura->estado_id == 1)
    <div class="col-md-12 ">
        <div class="card">
            <div class="card-body">

                <form action="{{ route('facturacion.facturar') }}" method="post">
                    @csrf
                    <input type="hidden" value="{{ $factura->id }}" name="factura1">

                    <div class="row">
                        <div class="col-md-6">
                            <label for=""><strong>Forma de pago</strong></label>
                            
                            <select required name="pago" id="pagos" class="form-control">

                                @foreach ($pagos as $item)
                                   
                                    <option value="{{ $item->codigo }}">{{ $item->valor }}</option>
                                   
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for=""><strong>Condición de operación</strong></label>
                            <select required name="operacion" id="operacion" class="form-control">

                                @foreach ($condicion as $x)
                                    

                                     @if ($factura->tipo_documento == "11")
                                       @if($x->codigo == "1")
                                             <option value="{{ $x->codigo }}">{{ $x->valor }}</option>
                                       @endif
                                    @else 
                                   <option value="{{ $x->codigo }}">{{ $x->valor }}</option>  
                                    @endif

                                @endforeach

                                 
                            </select>
                        </div>
                        <div id="condicionales" style="display: none;">
                               <div class="col-md-6">
                                <label for=""><strong>Plazo</strong></label>
                                <select required name="plazo" id="plazo" class="form-control">
                                    @foreach ($plazos as $p)
                                        <option value="{{ $p->codigo }}">{{ $p->valor }}</option>
                                    @endforeach
                                    
                                 </select>
                            </div>

                            <div class="col-md-6">
                                <label for=""><strong>Periodo</strong></label>
                                <input type="number" min="1" step="1" name="periodo" class="form-control">
                            </div>
                        </div>

                        <script>
                         
    document.addEventListener('DOMContentLoaded', function () {
        const operacionSelect = document.getElementById('operacion');
        const condicionales = document.getElementById('condicionales');
        const plazo = document.getElementById('plazo');
        const periodo = document.querySelector('input[name="periodo"]');

        function toggleCondicionales() {
            if (operacionSelect.value === '2') {
                condicionales.style.display = 'flex'; // o 'block' según tu layout
                plazo.disabled = false;
                periodo.disabled = false;
                plazo.setAttribute('name', 'plazo');
                periodo.setAttribute('name', 'periodo');
            } else {
                condicionales.style.display = 'none';
                plazo.disabled = true;
                periodo.disabled = true;
                plazo.removeAttribute('name');
                periodo.removeAttribute('name');
            }
        }

        operacionSelect.addEventListener('change', toggleCondicionales);

        // Ejecutar al cargar por si ya está seleccionado 2
        toggleCondicionales();
    });

                        </script>

                     



                        <div class="col-md-12">
                            <label for=""><strong>Comentario</strong></label>
                            <textarea name="comentario" id=""  class="form-control" style="min-height: 60px; resize: none;"></textarea>
                        </div>


                    </div>

                    <br>
                    <button type="submit" class="btn btn-success"> Facturar</button>
                </form>


            </div>
        </div>
    </div>
@else
@endif