@include('custom_questions.custom_professional_service')

@extends ('body_content')


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

    {{--<link rel="stylesheet" href="css/custom/switchbutton.css">--}}

{{--@stop--}}

{{--@section('menu-sidebar')--}}
{{--@include('menu-sidebar.professional')--}}
{{--@stop--}}


@section ('body')

    <div  class="ng-cloak" ng-app="professionalServicessApp" ng-controller="professionalServicessCtrl as services" ng-cloak>

        <!-- main-container start -->
        <!-- ================ -->


        <div id="mdodalAddSub" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
             data-toggle="modal" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog ">
                <div class="modal-content">
                    {{--<div class="modal-header">--}}
                    {{--modal-header--}}

                    {{--</div>--}}
                    <div class="modal-body">


                        <div class=" ">


                            <div class="mb-20">
                                <h3 class="gray"><strong> @{{services.servicio.nombre}}. </strong></h3>
                            </div>

                            <div class="message-border">



                                <div class="message-border-srv"
                                     ng-repeat="innerServ in services.servicio.children">
                                    <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 class="message-border-btn">

                                    <div >
                                        <div class="pull-left">
                                            {{--<a href="javascript:void(0)" ng-click="service.beack()">regresar</a>--}}
                                            <button class="btn btn-info" ng-click="services.back($event)">Regresar
                                            </button>
                                        </div>

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

                            </div>

                            <div class="message-border-btn">

                                <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> Al menos seleccione un servicio </strong>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>


        <section style="margin-bottom: 10%;">


            <div id="banner" class="banner">

                <div class="row">
                    <div class="col-md-offset-3 col-md-6 text-center ">

                        <h1 class="t0ken"><strong>Selecciona un servicio</strong></h1>
                        <h4> Recibe notificaciones de los servicios que selecciones </h4>
                        <div class="input-group">
                            <input type="text" class="form-control form-control-hero"
                                   typeahead-on-select="services.setService($item)"
                                   ng-model="services.selectedservice"
                                   uib-typeahead=" srv.nombre for srv in services.serviceSeacrh($viewValue)"

                                   placeholder="Ingresa el nombre de tu servicio" aria-describedby="basic-addon2">
                            <span class="input-group-addon btn-search-home" id="basic-addon2">Comenzar</span>
                        </div>

                        <div id="errorSrvExist" class="alert alert-warning alert-dismissible buttons-hide" role="alert" >
                            <strong>Warning!</strong> El servicio se encuentra en su lista
                        </div>

                    </div>
                </div>

            </div>


            <div class="mt-40" >
                <div class="row">

                    <!-- main start -->
                    <!-- ================ -->


                    <div ng-show="!services.services.length">
                        <div class="separator"></div>
                        <h3 class="title text-center"> Agregue los servicios de su preferencia</h3>
                        <h3  class="title text-center">Escribiendolos en la barra de b&uacute;squeda</h3>
                        <div class="separator"></div>

                    </div>

         
                    <div class="col-md-12" ng-show="services.services.length">
                        <h3 class="title text-center">Mis servicios</h3>
                        <p class="text-center">Te enviaremos solicitudes de nuestros usuarios de acuerdo a
                            tus servicios activos</p>
                        <div class="separator-2"></div>

                    </div>
                    <br>

                    <div class="col-md-12" ng-show="services.services.length==0">
                        <h3 class="title text-center">No tiene servicios agregados</h3>
                        

                    </div>


                    <div  style="margin-top:12%" ng-show="services.services.length>0">

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

                                 <h3 class="title text-left t0ken media-heading" >Servicios Principales</h3>
                                 <p class="small text-left"> Seleccione un servicio de la lista </p>

                                {{--<div class="separator-2"></div>--}}
                            <hr>

                                    <ul id="ul_services" class="nav nav-pills nav-stacked list-style-icons">
                                        <li ng-repeat="model in services.services">
                                            <a href="javascript:void(0)" ng-click="services.setSetCurrentService(model)"><i class="fa fa-chevron-circle-right"></i> @{{model.nombre }} </a>
                                        </li>
                                    </ul>
                        </div>


                        <div class="pl-10 col-md-8 ng-cloak"  ng-cloak>
                             
                            <div>
                                <h2 class="margin-clear">@{{ services.current.nombre }}




                                </h2>

                                <div class="mt-10 mb-5">
                                    <div>
                                            Agrega informaci&oacute;n de tu <strong>negocio</strong>  
                                    </div>
                                    <div>
                                            <a href="#" class="btn btn-sm btn-default-transparent btn-animated ml-5"  ng-click="services.custom_professional(services.current.id,services.current.idprofessionalservice)">Agregar<i class="fa fa-plus-circle pl-20"></i></a>
                                    </div>
                                </div>


                                <div class="mt-20">
                                    <div ng-repeat="detail  in services.current.children"
                                         style="height: 40px; margin-bottom: 5px;">

                                        <label class="switch">
                                            <input type="checkbox" ng-model="detail.checkid"
                                                   ng-click="services.updateServieDetail(detail)">
                                            <div class="slider round"></div> 
 
                                        </label>
                                        <div class="text-z ">@{{ detail.nombre }}</div>
                                    </div>

                                </div>


                            </div>

                        </div>


                    </div>
                </div>


            </div>

        </section>
    
    @yield('questions')
    
    </div>

@stop


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

    {{--<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>--}}
    {{--<script src="{{asset('js/scripts/js/app/commonService.min.js')}}"></script>--}}
    {{--<script src="{{asset('js/scripts/js/app/professionalServicesApp.min.js')}}"></script>--}}

{{--@stop--}}