@component('fragments.modal')
        @slot('idmodal')
            ModalCliente
        @endslot

        @slot('title')
            Agregar Cliente
        @endslot

        @slot('action')
            
            <form id="nuevo_cliente" class="" method="POST" action="{{url('cliente_controller/create')}}" role="form" enctype="multipart/form-data">
        @endslot

        @slot('form')
            {{ csrf_field() }}
            <div id="insert_cliente">
            <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>Step 1</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-2" type="button" class="btn btn-default btn-circle disabled" disabled="disabled">2</a>
                        <p>Step 2</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-3" type="button" class="btn btn-default btn-circle disabled" disabled="disabled">3</a>
                        <p>Step 3</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="tipo_cliente">Tipo Cliente</label>
                                    <select class="custom-select" id="tipo_cliente" name="tipo_cliente" required>
                                        <option selected disabled>Elegir tipo cliente...</option>
                                        <option value="Directo">Directo</option>
                                        <option value="Gestor">Gestor</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    
                                    <a class="btn btn-primary nextBtn float-right" type="button" href="#step-2">Siguiente</a>
                                </div>
                            </div>
                           
                </div>
                <div class="setup-content" id="step-2">
    
                            <div class="form-row change_directo_modify" hidden="true">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="nombre_comercial" class="">Nombre de la empresa</label>
                                    <input type="text" class="form-control" id="nombre_comercial" name="nombre_comercial" placeholder="Nombre comercial de la empresa">
                                </div>
                            </div>
                            <div class="change_gestor_modify" hidden>
                                <div class="ui divider"></div>
                                <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Datos de contacto</label>
                            </div>

                            <div class="change_directo_modify" hidden>
                                <div class="ui divider"></div>
                                <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Respresentante legal</label>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="nombre" class="">Nombres</label>
                                    <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="apaterno" class="">Apellido paterno</label>
                                    <input type="text" class="form-control" placeholder="apaterno" id="apaterno" name="apaterno">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="amaterno" class="">Apellido materno</label>
                                    <input type="text" class="form-control" placeholder="amaterno" id="amaterno" name="amaterno">
                                </div>
                            </div>
                            <div class="change_gestor_modify" hidden>
                                <div class="form-row ">
                                    <div class="form-group col-md-12">
                                        <label class="font-weight-bold" for="alias" class="">Alias</label>
                                        <input type="text" class="form-control" placeholder="Alias" id="alias" name="alias">
                                    </div>
                                </div>
                            </div>

                            <div class="form-row change_gestor_modify" hidden="hidden">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="email" class="">Email</label>
                                    <input type="text" class="form-control" placeholder="Email" id="email" name="email">
                                </div>
                            </div>

                            <div class="form-row change_gestor_modify" hidden="hidden">
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="tel_oficina" class="">Teléfono oficina</label>
                                    <input type="text" class="form-control" placeholder="Teléfono oficina" id="tel_oficina" name="tel_oficina">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="ext" class="">Extensión</label>
                                    <input type="text" class="form-control" placeholder="Extensión" id="ext" name="ext">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="tel_movil" class="">Teléfono móvil</label>
                                    <input type="text" class="form-control" placeholder="Teléfono móvil" id="tel_movil" name="tel_movil">
                                </div>
                            </div>

                            <div class="form-row change_gestor_modify" hidden="hidden">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="notas" class="">Notas</label>
                                    <textarea type="text" class="form-control" placeholder="Notas" id="notas" name="notas"></textarea>
                                </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" type="button" href="#step-2">Siguiente</a>
                                </div>
                            </div>
                </div>
                <div class="setup-content" id="step-3">
                    <div class="change_gestor_modify" hidden="true">
                        <div class="ui divider"></div>
                        <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Datos Fiscales</label>

                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label class="font-weight-bold" for="rfc">RFC</label>
                                <input type="text" class="form-control" placeholder="RFC" id="rfc" name="rfc">
                            </div>
                            <div class="form-group col-md-4">
                                <label class="font-weight-bold" for="razon_social">Razón social</label>
                                <input type="text" class="form-control" placeholder="Razón social" id="razon_social" name="razon_social">
                            </div>
                            <div class="form-group col-md-4">
                                <label class="font-weight-bold" for="email_facturacion">Email de facturación</label>
                                <input type="text" class="form-control" placeholder="Email de facturación" id="email_facturacion" name="email_facturacion">
                            </div>
                        </div>
                    </div>

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

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

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

                    

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold" for="nombre" class="">IFE o INE</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" name="url_ine" id="url_ine" lang="es">
                                <label class="custom-file-label" for="url_ine">Seleccionar Archivo</label>
                            </div>
                        </div>

                        <div class="form-group col-md-6">
                            <label class="font-weight-bold" for="nombre" class="">Alta hacienda</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" name="url_alta_hacienda" id="url_alta_hacienda" lang="es">
                                <label class="custom-file-label" for="url_alta_hacienda">Seleccionar Archivo</label>
                            </div>
                        </div>
                    </div>

                    
                        <div class="form-group col-md-6">
                            <label class="font-weight-bold" for="descuento" class="">Porcentaje de descuento</label>
                            <input type="text" class="form-control" placeholder="Porcentaje de descuento" id="descuento" name="descuento">
                        </div>
                    

                    <div class="row">
                        <div class="col-lg-12">
                            <a class="btn btn-outline-danger backBtn" type="button" href="#step-2">Atrás</a>
                            <button type="submit" id="btnEnviar" class="btn btn-primary float-right"><i class="save icon"></i>Guardar</button>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        @endslot

        @slot('button')
            <!--<button type="submit" class="btn btn-primary">
                <i class="save icon"></i>Guardar
            </button>-->
        @endslot
    @endcomponent