@extends ('body_content')

@section ('body')

<section ng-app="rankingProfessionalApp" ng-controller="rankingProfessionalCtrl as ranking"  ng-init="ranking.rating_professional()" ng-cloak>
	 
	<div class="row match-my-cols bordered">
       
		<div class="row">
			 <div class="col-xs-12 col-sm-5 col-md-5 col-lg-4 light-gray-bg "  ng-cloak>
					<div class="overlay-container">
						<h2>@{{ ranking.selected.professional.nombre}} @{{ ranking.selected.professional.apellido}}</h2>
						
						<img onerror="this.src='img/landing/photo-avatar.png'" style="width: 230px;height: 230px;margin-left:30px" ng-src="@{{ranking.selected.professional.avatar}}" class="img-circle">

					</div>	
					<br>
					<ul class="list-icons text-center">	
						<li><a class="ng-binding"><i class="fa fa-envelope-o pr-10"></i>
							@{{ranking.selected.professional.email}}</a></li>
					</ul>
					<div class="separator"></div>
					<h3 class="title text-center">Servicios Contratados</h3>
					</br>
					 <div class="text-center">
	                    <h5 class="title">@{{ ranking.selected.root_service.nombre }}</h5>
	                    <div class="text-left mt-10">
	                        <ul class="list-icons fix-text-list">
	                            <li ng-repeat="srv in ranking.selected.services" ng-show="srv.id_padre!=null"><i class="icon-check-1"></i> @{{srv.nombre}}</li>
	                        </ul>
	                    </div>

	                </div>

			   </div>	


			   <div class="col-xs-11 col-sm-7 col-md-7 col-lg-8" ng-cloak>
			   		<div id="rankingProfessional">
						<form role="form" id="rankingProfessionalForm" name="rankingProfessionalForm" class="form-horizontal" method="post"  novalidate>
							<div style="padding-left: 10px;padding-right: 20px;">
								<h2>Valoraci&oacute;n</h2>
								<hr class="mb-10">
								<p> Agrege una valoraci&oacute;n acorde al servicio prestado</p>
								
								<div class="form-group has-feedback">
									<div id="rating-new">
										<input id="valoracion" name="valoracion" class="rating rating-loading" ng-model="ranking.valoracion" data-show-clear="false" data-show-caption="true" required>
									</div>	

									<div id="rating" style="display:none">
										<input  name="rating" ng-value="ranking.valoracion || 0" class="valoracion rating-loading" > 	
									</div>
									 
									<em ng-show=" ( ranking.submit || !rankingProfessionalForm.valoracion.$pristine) && rankingProfessionalForm.valoracion.$invalid " class="error help-block em-error">Por favor ingrese una puntuaci&oacute;n</em>
								</div>

								<div class="row grid-space-10 col-md-12">	
									<div class="form-group has-feedback">
										{{-- ng-class="{'has-error has-feedback': ( ranking.submit || !rankingProfessionalForm.comentario.$pristine) && rankingProfessionalForm.comentario.$invalid }" --}}

										<label>Escriba una rese&ntilde;a</label>
										
										<textarea id='review' name="comentario" class="form-control" rows="5"  ng-model="ranking.comentario" placeholder="Agregue una rese&ntilde;a acerca del servicio prestado"></textarea>

										{{-- <em ng-show=" ( ranking.submit || !rankingProfessionalForm.comentario.$pristine) && rankingProfessionalForm.comentario.$invalid  " class="error help-block">Por favor ingrese una rese&ntilde;a</em>
	 --}}
									</div>

									<div class="col-md-12 text-right"></div>	
								</div>

								<div class="form-group elements-list pull-right clearfix" style="margin-right: 10px;">
									<div>
										<button type="submit" id="saveRanking" ng-click="ranking.saveRanking($event,rankingProfessionalForm.$valid)" class="margin-clear btn btn-group btn-default btn-animated">Guardar <i class="fa fa-check"></i></button>
									</div>
									<div id="btn-regresar" style="display: none">
										<a href="professional-hired" class="btn btn-default-transparent btn-lg">
	                                    Regresar  <i class="fa fa-chevron-right pr-10"></i></a>
                                    </div>
								</div>
							</div>
						</form>
					</div>
					<div id="succesRanking" style="display: none">
                        <div class="row mt-10">
                            <div class="col-md-12 text-center">
                                <h2 class="text-center">Su puntuaci&oacute;n ha sido <strong>enviada</strong></h2>
                                <div class="separator"></div>
                                <p class="large text-center">Gracias por darnos su puntuaci&oacute;n, su opini&oacute;n es importante para nosotros, ser&aacute; tomada en cuenta</p>
                                <br>
                                <a href="professional-hired" class="btn btn-default-transparent btn-lg">
                                    Continuar  <i class="fa fa-chevron-right pr-10"></i></a>
                            </div>
                        </div>
                    </div>
				</div>
			</div>
	</div>
	<br>

</section>


@stop