@php
    $prospectos_factura = App\Cliente_Factura::with([
        'contactos' => function ($q) {
            $q->select('id_cliente_contacto_factura', 'id_cliente_factura', 'nombre_contacto', 'correo')
                ->where('delete', 1)
                ->orderBy('nombre_contacto', 'ASC');
        }
    ])
        ->where('prospecto', 1)
        ->where('active', 1)
        ->orderBy('nombre_empresa', 'ASC')
        ->get(['id_cliente_factura', 'nombre_empresa', 'rfc', 'telefono', 'descuento']);
@endphp
<div id="errors"></div>

<div class="container">
    <hr/>
    <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Empresa prospecto</label>

    <div class="form-row">
        <div class="form-group col-md-12">
            <label class="font-weight-bold" for="prospecto_modo">Tipo de registro</label>
            <select id="prospecto_modo" name="prospecto_modo" class="form-control" required>
                <option value="" selected disabled>--Seleccione--</option>
                <option value="existente">Empresa prospecto ya registrada</option>
                <option value="nuevo">Registrar nueva empresa prospecto</option>
            </select>
        </div>
    </div>

    <div id="prospecto_existente_panel" hidden>
        <div class="form-row">
            <div class="form-group col-md-12">
                <label class="font-weight-bold" for="select_prospecto_factura">Empresa prospecto</label>
                <select id="select_prospecto_factura" name="select_prospecto_factura" class="selectpicker form-control" data-live-search="true">
                    <option value="" selected disabled>--Seleccione--</option>
                    @foreach($prospectos_factura as $prospecto_factura)
                        <option value="{{$prospecto_factura->id_cliente_factura}}">
                            {{$prospecto_factura->nombre_empresa ?: 'Empresa sin nombre'}}{{$prospecto_factura->rfc ? ' | RFC: '.$prospecto_factura->rfc : ''}}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-12">
                <label class="font-weight-bold" for="select_contacto_prospecto_factura">Contacto</label>
                <select id="select_contacto_prospecto_factura" name="select_contacto_prospecto_factura" class="selectpicker form-control" data-live-search="true">
                    <option value="" selected disabled>--Seleccione una empresa primero--</option>
                </select>
            </div>
        </div>
    </div>

    <div id="prospecto_nuevo_panel" hidden>
        <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Datos empresa</label>
        <div class="form-row">
            <div class="form-group col-md-12">
                <label class="font-weight-bold" for="nombre_empresa_factura">Nombre de la empresa</label>
                <input type="text" class="form-control nuevo-prospecto-required" id="nombre_empresa_factura" name="nombre_empresa_factura" placeholder="Nombre comercial de la empresa">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label class="font-weight-bold" for="rfc_factura">RFC</label>
                <input type="text" class="form-control text-uppercase" id="rfc_factura" name="rfc_factura" placeholder="RFC de la empresa" maxlength="13" aria-describedby="rfc_factura_feedback">
                <small id="rfc_factura_feedback" class="form-text"></small>
            </div>
            <div class="form-group col-md-6">
                <label class="font-weight-bold" for="telefono_empresa_factura">Teléfono de la empresa</label>
                <input type="text" class="form-control" id="telefono_empresa_factura" name="telefono_empresa_factura" placeholder="Teléfono">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-12">
                <label class="font-weight-bold" for="descuento_factura">Porcentaje de descuento</label>
                <div class="input-group mb-3">
                    <input type="number" class="form-control" placeholder="Porcentaje de descuento" id="descuento_factura" name="descuento_factura" min="0" max="100">
                    <div class="input-group-append">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
            </div>
        </div>

        <hr/>
        <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Datos de contacto</label>
        <div id="contactos_edit">
            <div class="form-row">
                <div class="form-group col-md-12">
                    <label class="font-weight-bold" for="nombre_contacto_factura_1">Contacto</label>
                    <input type="text" class="form-control nuevo-prospecto-required" placeholder="Contacto" id="nombre_contacto_factura_1" name="nombre_contacto_factura_1" maxlength="80">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label class="font-weight-bold" for="telefono_contacto_1">Teléfono oficina</label>
                    <input type="text" class="form-control" placeholder="Teléfono oficina" id="telefono_contacto_1" name="telefono_contacto_1" maxlength="10">
                </div>
                <div class="form-group col-md-4">
                    <label class="font-weight-bold" for="extension_contacto_factura_1">Extensión</label>
                    <input type="text" class="form-control" placeholder="Extensión" id="extension_contacto_factura_1" name="extension_contacto_factura_1" maxlength="5">
                </div>
                <div class="form-group col-md-4">
                    <label class="font-weight-bold" for="celular_contacto_factura_1">Teléfono móvil</label>
                    <input type="text" class="form-control" placeholder="Teléfono móvil" id="celular_contacto_factura_1" name="celular_contacto_factura_1" maxlength="10">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label class="font-weight-bold" for="correo_contacto_factura_1">Email de contacto</label>
                    <input type="email" class="form-control nuevo-prospecto-required" placeholder="Email de contacto" id="correo_contacto_factura_1" name="correo_contacto_factura_1" maxlength="50">
                </div>
                <div class="form-group col-md-6">
                    <label class="font-weight-bold" for="correo_contacto_2_factura_1">Email opcional</label>
                    <input type="email" class="form-control" placeholder="Email opcional" id="correo_contacto_2_factura_1" name="correo_contacto_2_factura_1" maxlength="50">
                </div>
            </div>
        </div>
        <div id="contactos"></div>

        <a class="btn btn-outline-success mb-5" type="button" title="Agregar contacto" id="add_contacto">
            <i class="icon plus circle"></i>Agregar mas contactos
        </a>
    </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>
</div>

<script>
    var prospectosCotizacion = @json($prospectos_factura);

    $(document).ready(function () {
        var $modo = $('#prospecto_modo');
        var $prospecto = $('#select_prospecto_factura');
        var $contacto = $('#select_contacto_prospecto_factura');
        var $rfc = $('#rfc_factura');
        var $rfcFeedback = $('#rfc_factura_feedback');
        var rfcBloqueado = false;
        var validacionRfc = 0;

        if ($.fn.selectpicker) {
            $('.selectpicker').selectpicker();
        }

        function refreshPicker($select) {
            if ($.fn.selectpicker) {
                $select.selectpicker('refresh');
            }
        }

        function actualizarModo() {
            var modo = $modo.val();
            var existente = modo === 'existente';
            var nuevo = modo === 'nuevo';

            $('#prospecto_existente_panel').prop('hidden', !existente);
            $('#prospecto_nuevo_panel').prop('hidden', !nuevo);
            $prospecto.prop('required', existente);
            $contacto.prop('required', existente);
            $('.nuevo-prospecto-required').prop('required', nuevo);

            if (nuevo) {
                validarRfc();
            } else {
                mostrarEstadoRfc('', '');
            }
        }

        function mostrarEstadoRfc(estado, mensaje) {
            var bloqueados = ['cliente_activo', 'prospecto_inactivo', 'invalido'];
            var clase = estado === 'disponible'
                ? 'text-success'
                : (estado === 'prospecto_existente' ? 'text-warning' : 'text-danger');

            rfcBloqueado = bloqueados.indexOf(estado) !== -1;
            $rfcFeedback.removeClass('text-success text-warning text-danger').addClass(clase).text(mensaje);
            $('#btnEnviar').prop('disabled', $modo.val() === 'nuevo' && rfcBloqueado);
        }

        function validarRfc() {
            var rfc = $.trim($rfc.val());
            var numeroValidacion = ++validacionRfc;

            if ($modo.val() !== 'nuevo' || rfc === '') {
                mostrarEstadoRfc('', '');
                return;
            }

            $.get('{{ url("cotizaciones/prospectos/validar_rfc") }}', { rfc: rfc })
                .done(function (response) {
                    if (numeroValidacion === validacionRfc) {
                        mostrarEstadoRfc(response.estado, response.mensaje);
                    }
                })
                .fail(function () {
                    if (numeroValidacion === validacionRfc) {
                        mostrarEstadoRfc('', 'No fue posible validar el RFC en este momento. Se validara al guardar.');
                    }
                });
        }

        function actualizarContactos() {
            var seleccionado = prospectosCotizacion.find(function (item) {
                return String(item.id_cliente_factura) === String($prospecto.val());
            });

            $contacto.empty();

            if (!seleccionado || !seleccionado.contactos || seleccionado.contactos.length === 0) {
                $contacto.append('<option value="" selected disabled>Sin contactos disponibles</option>');
                refreshPicker($contacto);
                return;
            }

            $contacto.append('<option value="" selected disabled>--Seleccione--</option>');

            seleccionado.contactos.forEach(function (item) {
                var etiqueta = item.nombre_contacto || 'Sin nombre';
                if (item.correo) {
                    etiqueta += ' | ' + item.correo;
                }
                $contacto.append(new Option(etiqueta, item.id_cliente_contacto_factura));
            });

            refreshPicker($contacto);
        }

        $modo.on('change', actualizarModo);
        $prospecto.on('changed.bs.select change', actualizarContactos);
        $rfc.on('change blur', validarRfc);
        actualizarModo();
    });
</script>