@php
    use App\Constants\ActiveUser;
    $estados = App\Estado::all();
    $regimenFiscales = App\RegimenFiscales::all();
    $tipoPersonas = App\TipoPersona::all();
    $cliente_tipos = App\Cliente_Tipo::all();
    $id_usuario = session('id_usuario');
    $permiso_cobranza = App\Usuarios_x_modulos::select('id_modulo')
        //->where('id_usuario',$id_usuario)
        ->where('id_modulo',19)
        ->where('altas',1)
        ->first();
    $contactTypes = App\CatBillingContactType::where('active',1)->get();
    $id_cliente = null;

$serviciosPrecios = DB::table('lista_precios_x_servicios as lps')
->join('lista_precios as lp','lp.id_precio','=','lps.id_precio')
->join('servicios as s','s.id_servicio','=','lps.id_servicio')
->select(
    'lps.id_precio_x_servicio',
    'lp.id_cliente',
    DB::raw("CONCAT(s.servicio,' - ',lp.tipo_producto) as nombre_completo")
)
->where('lp.delete',1)
->where('lps.estatus',1)
->where(function($q) use ($id_cliente){
    $q->whereNull('lp.id_cliente')
      ->orWhere('lp.id_cliente', $id_cliente);
})
->orderBy('s.servicio')
->get();

\Log::info('Consulta precios servicios', [
    'cliente_id' => $id_cliente,
    'todos' => $serviciosPrecios->pluck('id_precio_x_servicio'),
    'cliente' => $serviciosPrecios->where('id_cliente',$id_cliente)->pluck('id_precio_x_servicio'),
    'generales' => $serviciosPrecios->where('id_cliente',null)->pluck('id_precio_x_servicio')
]);

$preciosCliente = $serviciosPrecios->where('id_cliente', $id_cliente);
$preciosGenerales = $serviciosPrecios->where('id_cliente', null);
    //$executiveLevelUsers = App\Usuarios::where('activo','=',ActiveUser::ACTIVE)->where('id_tipo_usuario','=',32)->get();// 32 es el tipo de usuario ejecutivo de servicio a clientes
@endphp
<div id="errors"></div>

            <div class="stepwizard">
                <div class="stepwizard-row setup-panel">
                    <div class="stepwizard-step">
                        <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
                        <p>Tipo Cliente</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-2" type="button" class="btn btn-default btn-circle disabled" disabled="disabled">2</a>
                        <p>Datos Facturación</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-3" type="button" class="btn btn-default btn-circle disabled" disabled="disabled">3</a>
                        <p>Contactos</p>
                    </div>
                    {{--<div class="stepwizard-step">
                        <a href="#step-3" type="button" class="btn btn-default btn-circle disabled" disabled="disabled">3</a>
                        <p>Datos Credito</p>
                    </div>--}}
                </div>
            </div>
            <hr>
            <div class="container">
                <div class=" setup-content " id="step-1">

                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold" for="id_cliente_tipo">Tipo Cliente</label>

                            <select class="custom-select" id="id_cliente_tipo" name="id_cliente_tipo" required>
                                <option value="" disabled selected>--Selecciona--</option>
                                @foreach ($cliente_tipos as $cliente_tipo)
                                    <option value="{{$cliente_tipo->id_cliente_tipo}}">{{$cliente_tipo->tipo}}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold" for="id_usuario_sc">Ejecutivo de Servicio a cliente</label>
                            <select
                                class="custom-select selectNotSearch"
                                id="id_usuario_sc"
                                name="id_usuario_sc"
                            >
                                <option value="">--Selecciona--</option>
                            </select>

                        </div>

                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <a class="btn btn-primary nextBtn float-right" id="btn-sig" type="button" href="#step-2">Siguiente</a>
                        </div>
                    </div>
                    {{--<script>
                        function btnchange() {
                          var element = document.getElementById("btn-sig");
                          element.classList.remove("disabled");
                        }
                    </script>--}}

                </div>

                <div class="setup-content" id="step-2">
                    <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-6">
                            <label class="font-weight-bold" for="nombre_factura" class="">Razón social</label>
                            <input type="text" class="form-control" id="nombre_factura" name="nombre_factura" placeholder="Nombre de la empresa" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold" for="rfc_factura">RFC</label>
                            <input type="text" class="form-control" placeholder="RFC" id="rfc_factura" name="rfc_factura" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold" for="id_tipo_persona" class="">Tipo de persona</label>
                            <select class="custom-select selectNotSearch" id="id_tipo_persona" name="id_tipo_persona">
                                <option></option>
                                @foreach ($tipoPersonas as $tipoPersona)
                                    <option value="{{$tipoPersona->id_tipo_persona}}">{{$tipoPersona->tipo}}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    <div class="form-row">

                        <div class="form-group col-md-12">
                            <label class="font-weight-bold" for="idRegimenFiscal" class="">Régimen Fiscal</label>
                            <select class="custom-select liveSearchJquery" id="idRegimenFiscal" name="idRegimenFiscal" required>
                                <option></option>
                                @foreach ($regimenFiscales as $regimenFiscal)
                                    <option value="{{$regimenFiscal->idRegimenFiscal}}">{{$regimenFiscal->clave}} - {{$regimenFiscal->descripcion}}</option>
                                @endforeach
                            </select>
                        </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>
                            <input type="number" class="form-control" aria-label="" placeholder="Porcentaje de descuento" id="descuento_factura" name="descuento_factura" min="0" max="100" value="0"><br>
                            {{-- <div class="input-group"> --}}
                                {{-- <div class="input-group-append">
                                  <span class="input-group-text">%</span>
                                </div> --}}
                            {{-- </div> --}}
                        </div>
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold">Productos a los que no se aplica descuento</label>
                            <select name="precios_sin_descuento[]" class="custom-select liveSearchJquery" multiple>

                                @if($preciosCliente->count())
                                    <optgroup label="Precios del Cliente">
                                        @foreach ($preciosCliente as $item)
                                            <option value="{{ $item->id_precio_x_servicio }}">
                                                {{ $item->nombre_completo }}
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endif

                                <optgroup label="Precios Generales">
                                    @foreach ($preciosGenerales as $item)
                                        <option value="{{ $item->id_precio_x_servicio }}">
                                            {{ $item->nombre_completo }}
                                        </option>
                                    @endforeach
                                </optgroup>

                            </select>
                            <small class="text-muted">Puedes seleccionar uno o varios conceptos</small>
                        </div>
                    </div>
                    <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Datos para facturar</label>

                    <div class="form-row">
                        <div class="form-group col-md-3">
                            <div class="ui checkbox">
                                <input type="checkbox" name="marca" id="marca" checked value="1">
                                <label for="marca">Marca</label>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <div class="ui checkbox">
                                <input type="checkbox" name="modelo" id="modelo" checked value="1">
                                <label for="modelo">Modelo</label>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <div class="ui checkbox">
                                <input type="checkbox" name="norma" id="norma" checked value="1">
                                <label for="norma">Norma</label>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <div class="ui checkbox">
                                <input type="checkbox" name="producto" id="producto" checked value="1">
                                <label for="producto">Producto</label>
                            </div>
                        </div>
                    </div>
                    @if (!empty($permiso_cobranza))
                        <hr/>
                        <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Datos Crédito</label>

                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label class="font-weight-bold" for="dias_credito">Días de crédito</label>
                                <input type="number" class="form-control" id="dias_credito" name="dias_credito" placeholder="Días de crédito" value="0" min="0">
                            </div>

                            <div class="form-group col-md-4">
                                <label class="font-weight-bold" for="monto_limite_credito">Monto límite de crédito</label>
                                <input type="number" class="form-control" id="monto_limite_credito" name="monto_limite_credito" placeholder="Monto límite de crédito" value="" min="0" step="0.01">
                            </div>

                            <div class="form-group col-md-4">
                                <label class="font-weight-bold" for="fecha_limite_credito">Fecha límite de crédito</label>
                                <input type="date" class="form-control" id="fecha_limite_credito" name="fecha_limite_credito" value="">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label class="font-weight-bold" for="estatus_credito">Estatus de crédito</label>
                                <input type="text" class="form-control" id="estatus_credito" name="estatus_credito" value="Inactivo" readonly>
                                <small class="text-muted">
                                    Activo: cuando hay crédito y no hay conflicto con monto/fecha límite.<br>
                                    Inactivo: cuando no hay días de crédito.<br>
                                    Suspendido: cuando se supera monto límite y/o fecha límite de crédito.
                                </small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label class="font-weight-bold" for="comentario_credito">Comentario sobre el crédito</label>
                                <textarea class="form-control" id="comentario_credito" name="comentario_credito" rows="2" placeholder="Escribe un comentario sobre el crédito del cliente..."></textarea>
                            </div>
                        </div>
                    @endif

                    <hr/>
                    <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Dirección</label>

                    <div class="form-row">

                        <div class="form-group">
                            <div class="ui checkbox">
                                <input type="checkbox" id="direccion_mayus" name="direccion_mayus" checked value="1">
                                <label class=" font-weight-bold" for="direccion_mayus" >Dirección en mayúscula</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">

                        <div class="form-group col-md-4">
                            <label class="font-weight-bold" for="calle_factura">Calle</label>
                            <input type="text" class="form-control" placeholder="Calle" id="calle_factura" name="calle_factura" required>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="font-weight-bold" for="numero_exterior_factura">Número exterior</label>
                            <input type="text" class="form-control" placeholder="Número Exterior" id="numero_exterior_factura" name="numero_exterior_factura">
                        </div>
                        <div class="form-group col-md-4">
                            <label class="font-weight-bold" for="numero_interior_factura">Número interior</label>
                            <input type="text" class="form-control" placeholder="Número interior" id="numero_interior_factura" name="numero_interior_factura">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold" for="codigo_postal_factura" class="">Código postal</label>
                            <input type="text" class="form-control" placeholder="Código postal" id="codigo_postal_factura" name="codigo_postal_factura" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold" for="colonia_factura" class="">Colonia</label>
                            <input type="text" class="form-control" placeholder="Colonia" id="colonia_factura" name="colonia_factura" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold" for="delegacion_factura" class="">Municipio/Delegación</label>
                            <input type="text" class="form-control" placeholder="Municipio/Delegacion" id="delegacion_factura" name="delegacion_factura" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold" for="id_estado_factura" class="">Estado</label>
                            <select class="custom-select" id="id_estado_factura" name="id_estado_factura" required>
                                <option value="" selected disabled>Selecciona estado...</option>
                                @foreach ($estados as $estado)
                                    <option value="{{$estado->id_estado}}" class="text-uppercase">{{ $estado->estado }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div id="otro" class="form-group col-md-6"></div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold" for="pais" class="">País</label>
                            <input type="text" class="form-control" placeholder="País" id="pais" name="pais" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <a class="btn btn-outline-danger backBtn" type="button" href="#step-1">Atrás</a>
                            <a class="btn btn-primary nextBtn float-right" id="btn-sig" type="button" href="#step-3">Siguiente</a>
                        </div>
                    </div>

                </div>

                <div class=" setup-content " id="step-3">

                    <hr/>
                    <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Datos de contacto</label>

                    <div id="contactos_edit">
                        <div id="accordion">
                            <div class="card">
                                <div class="card-header" id="heading1">
                                    <h5 class="mb-0">
                                        <a class="btn btn-link" href="#" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                        Contacto 1
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
                                    <div class="card-body" id="contactos_edit_1">
                                        <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" placeholder="Contacto" id="nombre_contacto_factura_1" name="contactos[0][nombre]" required>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold" for="telefono_contacto_1" class="">Teléfono oficina</label>
                                                <input type="text" class="form-control" placeholder="Teléfono oficina" id="telefono_contacto_1" name="contactos[0][telefono]">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold" for="extension_contacto_factura_1" class="">Extensión</label>
                                                <input type="text" class="form-control" placeholder="Extensión" id="extension_contacto_factura_1" name="contactos[0][extension]">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold" for="celular_contacto_factura_1" class="">Teléfono móvil</label>
                                                <input type="text" class="form-control" placeholder="Teléfono móvil" id="celular_contacto_factura_1" name="contactos[0][celular]">
                                            </div>

                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label class="font-weight-bold" for="correo_contacto_factura_1">Email de contacto</label>
                                                <input type="email" class="form-control" placeholder="Email de contacto" id="correo_contacto_factura_1" name="contactos[0][email]" required>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label class="font-weight-bold" for="correo_contacto_2_factura_1">Email de contacto opcional</label>
                                                <input type="text" class="form-control" placeholder="Email de contacto" id="correo_contacto_2_factura_1" name="contactos[0][correo_opcional]">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label class="font-weight-bold" for="comision_contacto_factura_1">Porcentaje de comisión (%)</label>
                                                <input type="number" class="form-control" aria-label="" placeholder="Porcentaje de comisión de contacto" id="comision_contacto_factura_1" name="contactos[0][comision]" min="0" max="100" value="0">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label class="font-weight-bold" for="type_id_1">Formatos para enviar</label>
                                                <select
                                                    class="custom-select"
                                                    id="type_id_1"
                                                    name="contactos[0][type_id][]"
                                                    multiple
                                                >
                                                    @foreach ($contactTypes as $type)
                                                        <option value="{{ $type->id }}" class="text-uppercase">
                                                            {{ $type->type }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <small class="text-muted">
                                                    Puedes seleccionar uno o varios formatos (Ctrl o Shift)
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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 más contactos</a>

                    <div class="row ">
                        <div class="col-lg-12">
                            <a class="btn btn-outline-danger backBtn" type="button" href="#step-1">Atrás</a>
                    </div>

                </div>