@extends ('index')
@section('head')
    <style>
        body{
            background-color: #fafafa
        }
    </style>
@stop
@include('custom_questions.custom_professional_service')
@section ('content')

    <div class="page-wrapper bg-lighgray-re pv-40" ng-app="stepApp" ng-controller="stepCtrl as services">

        <!-- scrollToTop -->
        <!-- ================ -->
        <!--<div class="scrollToTop circle"><i class="icon-up-open-big"></i></div>-->

        <!-- page wrapper start -->
        <!-- ================ -->
        <div class="container bg-lighgray-re">

            <div class="row">

                <div>


                    <div class="container ng-cloak" ng-cloak ng-show="services.step==1">

                    <!--{{-- {{servicio.servicio}} --}}-->
                        <div class="col-md-offset-3 col-md-8 ">
                            <h1 class="page-title title-color margin--bottom-clear">Qu&eacute; servicios provee Ud.?</h1>
                            <p>Luego Ud. puede modificar estas opciones.</p>
                            <div class="separator-2 mb-20"></div>
                        </div>

                        <div class="col-md-offset-3 col-md-6 ">
                            <h3 class="title-color"><strong> @{{services.services.nombre}}. @{{$index}} </strong></h3>
                        </div>

                        <div class="col-md-offset-3 col-md-6 box-one">

                            <div class="service-box" ng-repeat="innerServ in services.services.children"
                                 ng-init="services.stickyFooter($last)">
                                <div class="checkbox checkbox-primary">
                                    <input id="@{{innerServ.id}}" class="styled" type="checkbox"
                                           ng-model="innerServ.checkid">
                                    <label for="@{{innerServ.id}}">
                                        @{{innerServ.nombre}}
                                    </label>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-offset-3 col-md-6 select-error">

                            <div class="pull-left">
                                <a href="javascript:void(0)" ng-click="services.moveToHome()">regresar</a>
                            </div>

                            <div class="pull-right">
                                <button class="btn btn-info" ng-click="services.moveToProfile($event)">Siguiente
                                </button>
                            </div>

                        </div>


                        <div class="col-md-offset-3 col-md-6 select-error">
                        <p>

                            ** Si eres una empresa, registrate con tu correo corporativo y los datos de la persona encargada, luego completa los datos en t&uacute; perfil

                        </p>
                        </div>


                        <div class="col-md-offset-3 col-md-6 select-error">

                            <div id="errorService" class="alert alert-danger alert-dismissible buttons-hide" role="alert">
                                <!--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                                <a href="javascript:void(0)" class="close" onclick="$('#errorService').fadeOut('fast')"
                                   title="close">×</a>
                                <strong> Almenos seleccione un servicio </strong>
                            </div>


                        </div>


                    </div>

                    <!--  selecionar perfil-->


                    <form id="contactForm" name="contactForm" method="post" novalidate>
                        <div class="ng-cloak" ng-cloak ng-show="services.step==2">


                            <div class="col-md-offset-3 col-md-8 mt-50">
                                <h1 class="title-color margin--bottom-clear">Ingrese sus datos personales</h1>
                                <div class="separator-2 mb-20"></div>
                            </div>


                            <div id="errorMessage" class="col-md-offset-2 col-md-8 clearfix buttons-hide">

                                <div class="alert alert-danger alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                                aria-hidden="true">&times;</span></button>
                                    <strong>Error!</strong> Ocurrio un error al intentar guardar los datos
                                </div>
                            </div>


                            <div class="col-md-offset-3 col-md-6 box-two" >


                                <div class="row mt-20">

                                    <div class="col-md-6">
                                        <div class="form-group"
                                             ng-class="{'has-error has-feedback': ( services.submit || !contactForm.name.$pristine) && contactForm.name.$invalid , 'has-success has-feedback' : contactForm.name.$valid }">
                                            <label for="exampleInputEmail1">Nombre</label>
                                            <input type="text" class="form-control" placeholder="Nombre de entidad o persona" tabindex="1"
                                                   ng-model="services.user.name" required name="name" id="name">
                                            <i ng-show="( services.submit || !contactForm.name.$pristine) && contactForm.name.$invalid"
                                               class="fa fa-times form-control-feedback"></i>
                                            <i ng-show="contactForm.name.$valid"
                                               class="fa fa-check form-control-feedback"></i>
                                            <em ng-show=" ( services.submit || !contactForm.name.$pristine) && contactForm.name.$invalid  "
                                                class="error help-block">Por favor ingrese su nombre</em>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group"
                                             ng-class="{'has-error has-feedback': ( services.submit || !contactForm.lastname.$pristine) && contactForm.lastname.$invalid , 'has-success has-feedback' : contactForm.lastname.$valid}">
                                            <label for="exampleInputEmail1">Apellido</label>
                                            <input type="text" class="form-control" placeholder="Apellidos" tabindex="2"
                                                   ng-model="services.user.lastname" required name="lastname"
                                                   id="lastname">

                                            <i ng-show="( services.submit || !contactForm.lastname.$pristine) && contactForm.lastname.$invalid"
                                               class="fa fa-times form-control-feedback"></i>
                                            <i ng-show="contactForm.lastname.$valid"
                                               class="fa fa-check form-control-feedback"></i>

                                            <em ng-show=" ( services.submit || !contactForm.lastname.$pristine) && contactForm.lastname.$invalid  "
                                                class="error help-block">Por favor ingrese su apellido</em>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group"
                                             ng-class="{'has-error has-feedback':  services.submit && services.ciudad.id==-1, 'has-success has-feedback' : services.ciudad.id!=-1}">

                                            <label for="exampleInputEmail1">Ciudad</label>
                                            <select class="form-control" name="sciudad" id="sciudad"
                                                    ng-model="services.ciudad" required
                                                    ng-options=" ciudadx as ciudadx.ciudad for ciudadx in services.ciudades ">
                                            </select>


                                            <em ng-show=" (services.submit && services.ciudad.id==-1) "
                                                class="error help-block">Selecione
                                                la ciudad</em>
                                        </div>
                                    </div>
                                    <!--bogota cali Bucaramanga, barranquilla, armenia, santa marta.-->


                                    <div class="col-md-6">
                                        <div class="form-group"
                                             ng-class="{'has-error has-feedback': ( services.submit || !contactForm.phone.$pristine) && contactForm.phone.$invalid , 'has-success has-feedback' : contactForm.phone.$valid}">
                                            <label for="exampleInputEmail1">Telef&oacute;no</label>
                                            <input type="tel" class="form-control"
                                                   placeholder="N&uacute;mero de tel&eacute;fono"
                                                   id="phone" tabindex="4" required name="phone"
                                                   ng-model="services.user.phone">

                                            <i ng-show="( services.submit || !contactForm.phone.$pristine) && contactForm.phone.$invalid  "
                                               class="fa fa-times form-control-feedback"></i>
                                            <i ng-show="contactForm.phone.$valid"
                                               class="fa fa-check form-control-feedback"></i>

                                            <em ng-show=" ( services.submit || !contactForm.phone.$pristine) && contactForm.phone.$invalid  "
                                                class="error help-block">Por favor ingrese su tel&eacute;fono</em>
                                        </div>
                                    </div>

                                </div>


                                <div class="row">

                                    <div class="col-md-6">

                                        <div class="form-group"
                                             ng-class="{'has-error has-feedback': ( services.submit || !contactForm.email.$pristine) && (contactForm.email.$invalid || services.userexist), 'has-success has-feedback' : contactForm.email.$valid && !services.userexist }">
                                            <label for="exampleInputEmail1">Email</label>
                                            <input type="email" class="form-control"
                                                   placeholder="Correo el&eacute;ctronico"
                                                   name="email" id="email" tabindex="5" required
                                                   ng-model="services.user.email" ng-model-options="{ debounce: 500 }">


                                            <i ng-show="( services.submit || !contactForm.email.$pristine) && contactForm.email.$invalid  "
                                               class="fa fa-times form-control-feedback"></i>
                                            <i ng-show="contactForm.email.$valid && !services.userexist"
                                               class="fa fa-check form-control-feedback"></i>


                                            <em ng-show=" ( services.submit || !contactForm.email.$pristine) && contactForm.email.$invalid  "
                                                class="error help-block">Por favor ingrese un correo electr&oacute;nico
                                                v&aacute;lido</em>
                                            <em ng-show=" ( services.submit || !contactForm.email.$pristine) && services.userexist "
                                                class="error help-block"> Usuario ya se encuentra registrado </em>
                                            <!--<em  ng-show=" ( servicio.submit || !contactForm.email.$pristine) && contactForm.email.$error.email" class="error help-block">Correo el&eacute;ctronico invalido</em>-->
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group"
                                             ng-class="{'has-error has-feedback': ( services.submit || !contactForm.password.$pristine) && contactForm.password.$invalid , 'has-success has-feedback' : contactForm.password.$valid  }">
                                            <label for="exampleInputEmail1">Contrase&ntilde;a</label>
                                            <input type="password" name="password" tabindex="6" id="password"
                                                   tabindex="2" required
                                                   class="form-control" placeholder="Clave"
                                                   ng-model="services.user.password">

                                            <i ng-show="( services.submit || !contactForm.password.$pristine) && contactForm.password.$invalid  "
                                               class="fa fa-times form-control-feedback"></i>
                                            <i ng-show="contactForm.password.$valid "
                                               class="fa fa-check form-control-feedback"></i>

                                            <em ng-show=" ( services.submit || !contactForm.password.$pristine) && contactForm.password.$invalid  "
                                                class="error help-block">Por favor ingrese su contrase&ntilde;a</em>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-md-offset-3 col-md-6 select-error" >
                                <div class="pull-left">
                                    <a href="javascript:void(0)" ng-click="services.moveToServices($event)">regresar</a>
                                </div>
                                <div class="pull-right">
                                    <button id="registrate" type="submit" class="btn btn-info"
                                            ng-click="services.register($event,contactForm.$valid)">Registrarse
                                    </button>
                                </div>
                            </div>


                            <div class="col-md-offset-3 col-md-6 select-error">
                                <p>

                                    ** Si eres una empresa, registrate con tu correo corporativo y los datos de la persona encargada, luego completa los datos en t&uacute; perfil

                                </p>
                            </div>



                        </div>
                    </form>

                </div>


            </div>


        </div>


        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="alert-info-business" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    
                        <h4 class="modal-title" id="mySmallModalLabel">Informaci&oacute;n del negocio</h4>
                    </div>
                    <div class="modal-body">

                        <div class="alert alert-icon alert-success alert-business-register" role="alert" style=" margin-top: 0px;width: 90%;margin-left: 5%;">
                                <i class="fa fa-check"></i>
                                Sus datos han sigo guardados <a class="alert-link">exitosamente</a>.
                        </div>
                       
                        <h3 class="title text-center">Desea registrar informaci&oacute;n de su negocio?</h3>
                        <br>

                        <p class="text-center">**De igual manera en la configuraci&oacute;n de su perfil puede agregar sus negocios</p>
                     
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-gray" data-dismiss="modal" ng-click="services.noBusiness()">No</button>
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" ng-click="services.addBusiness()">Si</button>
                    </div>
                </div>
            </div>
        </div>

           @yield('questions')

    </div>


 

@stop

{{--@section('script')--}}


    {{--<script src="js/app/services/urlpath.js"></script>--}}
    {{--<script src="bower_components/angular/angular.min.js"></script>--}}
    {{--<script src="js/scripts/js/app/commonService.min.js"></script>--}}
    {{--<script src="js/scripts/js/app/professionalRegisterApp.min.js"></script>--}}
{{--@stop--}}