@php
$clientes_factura = App\Cliente_Factura::with([
    'contactos' => function ($q) {
        $q->select('id_cliente_contacto_factura', 'id_cliente_factura', 'nombre_contacto')
          ->where('delete', 1)
          ->where(function($w){
              $w->where('type_id', '1')
                ->orWhere('type_id', '["1"]')
                ->orWhere('type_id', 'like', '%["1",%')
                ->orWhere('type_id', 'like', '%,"1",%')
                ->orWhere('type_id', 'like', '%,"1"]%');
          })
          ->orderBy('nombre_contacto', 'ASC');
    }
])
->where('active', 1)
->where('prospecto', 0)
->orderBy('nombre_empresa', 'ASC')
->get(['id_cliente_factura', 'nombre_empresa']);
@endphp
<div id="errors"></div>

<div class="row">
    <label for="Cliente factura" class="col-sm-2 col-form-label">Cliente Factura</label>
    <div class="col-sm-10">
        <div class="form-group">
            <select id="select_cliente_factura" name="select_cliente_factura" 
                    class="selectpicker form-control" data-live-search="true" required>
                <option value="" selected disabled>--Seleccione--</option>
                @foreach ($clientes_factura as $cliente_factura)
                    <option value="{{$cliente_factura->id_cliente_factura}}">
                        @if($cliente_factura->nombre_empresa)
                            {{$cliente_factura->nombre_empresa}}
                        @else
                            Cliente sin empresa registrada
                        @endif
                    </option>
                @endforeach
            </select>
        </div>
    </div>
</div>

<div class="row">
    <label for="Contacto" class="col-sm-2 col-form-label">Contacto</label>
    <div class="col-sm-10">
        <div class="form-group">
            <select id="select_contacto_factura" name="select_contacto_factura" 
                    class="selectpicker form-control" data-live-search="true" required>
                <option value="" selected disabled>--Seleccione un cliente primero--</option>
            </select>
        </div>
    </div>
</div>

<div class="row ">
    <div class="col-lg-12">
        <button type="submit" id="btnEnviar" class="btn btn-primary float-right"><i class="save icon"></i>Guardar</button>
    </div>
</div>

<script>
    const clientes = @json($clientes_factura);

    $(document).ready(function () {

        $('#select_cliente_factura').on('changed.bs.select', function () {

            const clienteId = $(this).val();
            const cliente = clientes.find(c => c.id_cliente_factura == clienteId);

            let $select = $('#select_contacto_factura');
            $select.empty();

            let contactos = cliente ? cliente.contactos : null;
            if (!contactos) {
                contactos = [];
            } else if (!Array.isArray(contactos)) {
                contactos = [contactos];
            }

            if (contactos.length === 0) {
                $select.append(`<option value="" disabled selected>Sin contactos disponibles</option>`);
                $select.selectpicker('refresh');
                return;
            }

            contactos.forEach(c => {
                const val = String(c.id_cliente_contacto_factura ?? '');
                const label = c.nombre_contacto ?? 'Sin nombre';
                $select.append(`<option value="${val}">${label}</option>`);
            });

            const firstId = String(contactos[0].id_cliente_contacto_factura ?? '');

            $select.selectpicker('val', firstId);
            $select.selectpicker('refresh');
            $select.trigger('change');
        });

    });
</script>