@extends ('body_level_tow')

@section ('body')

    <div class="breadcrumb-simple" style="margin-top: -40px">
        <div >
            <ol class="breadcrumb">
                <li><i class="fa fa-home pr-10"></i><a href="usuario-solicitud">Mis Proyectos</a></li>
                <li class="active">Ver presupuesto</li>
            </ol>
        </div>
    </div>

    <section id="sectionUserBudget" ng-app="userBudgetApp" ng-controller="userBudgetCtrl as budget" ng-init="budget.onBuget()">




      <form id="budgetForm" name="budgetForm" class="form-horizontal" method="post"  novalidate>

        <div class="row match-my-cols " ng-cloak>
            <div class="col-xs-12 col-sm-5 col-md-5 col-lg-4">


                <div class="media margin-clear pv-20 text-center" style="background-color: #f5f5f5">
                    <div class="media-body" >
                        <h5 class="media-heading">

                            <a class="collapsed" data-toggle="collapse" href=""  aria-expanded="false" aria-controls="collapseContent"> @{{ budget.root_service.nombre }} </a>
                            <span class="badge" ng-class="{'default-bg' : budget.numpropuestas != 0 }" >  @{{ budget.numpropuestas}} </span>


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


                <div >
                    <div id="pro_@{{ request.id}}_@{{ professional.id}}" class="media margin-clear pv-20" style="border-bottom: 1px solid #f1f1f1;cursor: pointer"  ng-class="{'light-gray-bg':quote.id==budget.selected.id}" ng-repeat="quote in budget.listQuotes.quotes" ng-click="budget.setQuote(quote)" >

                        <div class="media-right">
                            <div class="overlay-container ">
                                <img class="img-circle" ng-src="@{{quote.professional.avatar }}" onerror="this.src='img/landing/photo-avatar.png'" style="height: 50px;width: 50px">
                            </div>
                        </div>
                        <div class="media-body">

                            <div style="margin-left: 15px">
                                <h6 class="media-heading"><a href="">@{{quote.professional.nombre}} @{{quote.professional.apellido}}</a></h6>

                                <div class="mt-10 pr-promedio_@{{quote.professional.id}}" id="pr-promedio_@{{quote.professional.id}}"><input name="rating" ng-value="quote.professional.rating_promedio || 0" class="valoracion rating-loading" data-size="xsss"></div>
                                {{--<p class="small margin-clear" >  <i class="fa fa-envelope-o pr-10"></i>@{{quote.professional.email}}</p>--}}
                                <i class="fa fa-bell text-default"  aria-hidden="true" ng-show="!quote.visto"></i>
                                <i class="fa fa-certificate text-default" ng-show="quote.contratado==1" aria-hidden="true" style="margin-left: 18%;"></i>
                                <i class="fa fa-thumbs-down text-default" ng-show="quote.rechazado==1" aria-hidden="true" style="margin-left: 18%;"></i>
                            </div>
                        </div>

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

                    </div>

                </div> <!-- end collapse-->


            </div>
             <div class="col-xs-12  col-sm-7 col-md-7 col-lg-8">
                
                  <!-- accordion start -->
            <!-- ================ -->
                  <div class="panel-group collapse-contextual" id="accordion-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="accordion-2"  href="" data-target="#collapseOne-2">
                                <i class="fa fa-usd pr-10"></i>Propuesta
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne-2" class="panel-collapse collapse in" ng-cloak>
                        <div class="panel-body">


                            <div id="box_propuesta" class="row"> 

                                <div style="width: 100%; text-align: center" ng-show=" budget.selected.contratado || budget.selected.rechazado">
                                     <h3 class="margin-clear" ng-show="budget.selected.contratado==1">Ud. ha   <span class="text-default">contratado</span> a:  <!-- este profesional -->
                                         <br> <span class="t0ken">  <strong> @{{ budget.selected.professional.nombre}} @{{ budget.selected.professional.apellido }} </strong></span>  <hr></h3>
                                     <h3 class="margin-clear" ng-show="budget.selected.rechazado==1">Ud. ha  <span class="text-default">descartado</span> a: <!-- este profesional -->
                                         <br> <span class="t0ken"> <strong > @{{ budget.selected.professional.nombre}} @{{ budget.selected.professional.apellido }} </strong> </span>
                                           <hr>
                                     </h3>

                                </div>


                                <div class="col-md-5">
                                    <div class="col-md-11 text-center mt-5" >
                                     <div class="text-center" style="min-height: 20px;">
                                         <h5 class="title"> @{{ budget.selected.creado }}</h5>
                                      </div> 

                                     <div class="feature-box shadow-narrow bordered pv-20 light-gray-bg object-non-visible animated object-visible fadeIn" data-animation-effect="fadeIn" data-effect-delay="300">
                                            <span class="icon without-bg text-center"><i class="text-default fa fa-usd"></i></span>
                                            <h3>Precio</h3>
                                            <span class="counter counting" data-to="1525" data-speed="5000">$@{{  budget.selected.costo}}.00</span>
                                        </div>
                                    </div>

                                    <div class="row text-center" id="buttons_budget">

                                        <div  class="gold-medal" ng-show="budget.selected.contratado==1" >
                                            <i class="fa fa-certificate fa-4x" aria-hidden="true"></i>
                                        </div>

                                        <div  ng-show="budget.selected.rechazado==1">
                                            <i class="fa fa-thumbs-down fa-4x" aria-hidden="true"></i>
                                        </div>


                                        <div  ng-show="budget.selected.rechazado==0 && budget.selected.contratado==0" >
                                            <button type="button" id="hire" ng-click="budget.setHire(budget.selected)" class="btn btn-sm  btn-animated btn-success">Contratar <i class="fa fa-check"></i></button>

                                            <button type="button" id="rejected" ng-click="budget.setRejected(budget.selected)" class="btn btn-sm  btn-animated btn-danger">Descartar <i class="fa fa-times"></i></button>
                                        </div>

                                    </div>
                                           
                                </div>
                                <div class="col-md-7">
                                    <h4 class="title">Descripcion del servicio</h4>
                                    <div class="separator-2"></div>
                                    <p>@{{ budget.selected.descripcion}}</p>
                                </div>
                                
                            </div>

                            <div id="box_contratado" style="display:none" >
                                <div class="row mt-10">
                                    <div class="col-md-12 text-center">
                                        <h3 class="text-center"> <strong> @{{ budget.selected.professional.nombre}} @{{ budget.selected.professional.apellido }} </strong>ha sido <strong>contratado (a) </strong> para el servicio: </h3>

                                         <div class="mt-10 col-md-6 col-md-offset-3">
                                            <h4 class="title"><strong>@{{ budget.selected.profesionalService.nombre}}</strong></h4>
                                       
                                             <div class="text-left" style="margin-left: 15%;">
                                                <ul class="list-icons"
                                                    ng-repeat="srv in budget.selected.profesionalService.children" ng-show="srv.id_padre!=null && srv.selected==1">
                                                    <li><i class="icon-check-1 pr-10"></i> @{{srv.nombre}}
                                                    </li>
                                                </ul>
                                            </div>
                                         </div>
                                        <br>
                                    </div>
                                </div>
                            </div>

                            <div id="box_rechazado" style="display:none">
                                <div class="row mt-10">
                                    <div class="col-md-12 text-center">


                                        <h3 class="text-center"> <strong> @{{ budget.selected.professional.nombre}} @{{ budget.selected.professional.apellido }} </strong>ha sido <strong>descartado (a) </strong> para el servicio: </h3>
                      
                                          <div class="mt-10 col-md-6 col-md-offset-3">
                                            <h4 class="title"><strong>@{{ budget.selected.profesionalService.nombre}}</strong></h4>
                                       
                                             <div class="text-left" style="margin-left: 15%;">
                                                <ul class="list-icons"
                                                    ng-repeat="srv in budget.selected.profesionalService.children" ng-show="srv.id_padre!=null && srv.selected==1">
                                                    <li><i class="icon-check-1 pr-10"></i> @{{srv.nombre}}
                                                    </li>
                                                </ul>
                                            </div>
                                         </div>
                                      
                                        <br>
                                        
                                    </div>
                                </div>
                            </div>
                         
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-2" class="" href="" data-target="#collapseBudget-0">
                                <i class="fa fa-info-circle pr-10"></i>Perfil del usuario
                            </a>
                        </h4>
                    </div>  
                    <div id="collapseBudget-0" class="panel-collapse collapse in" ng-cloak>

                        <div class="panel-body">
                            <div class="col-md-12 space-top">
                             
                                <div class="listing-item mb-20">
                                    <div class="row grid-space-0">
                                        <div class="col-sm-12 col-md-12 col-lg-12">
                                            <div class="overlay-container">
                                                <img class="img-circle" style="width: 185px;height: 165px;margin: 0 auto;" ng-src="@{{budget.selected.professional.avatar }}" onerror="this.src='img/landing/photo-avatar.png'" >
                                            </div>
                                         </div>
                                         <div class="row mt-20">

                                            <div class="text-center mt-5">

                                                <h2 class="margin-clear" style="text-transform: capitalize">@{{ budget.selected.professional.nombre}} @{{ budget.selected.professional.apellido}}</h2>
                                                <div class="mt-5"></div>
                                                <h2 class="margin-clear" style="text-transform: capitalize" ng-show=" budget.selected.professional.id_tipo_identificacion==9" >Empresa: @{{ budget.selected.professional.empresa}} </h2>

                                                <div class="mt-10 mb-10" id="promedio_@{{budget.selected.professional.id}}"><input name="rating" ng-value="budget.selected.professional.rating_promedio || 0" class="valoracion rating-loading" data-size="xss"></div>
                                            </div>
                                                                             
                                            <div class="separator-2"> </div>

                                            <div class="col-md-6">  
                                                <h4 style="text-decoration:underline">Informaci&oacute;n de contacto: </h4>

                                                <ul class="list-icons">
                                                    <li ng-hide="budget.selected.professional.ciudad.nombre == null">
                                                        <i class="fa fa-home pr-10"></i>@{{ budget.selected.professional.ciudad.nombre}}<br>
                                                    </li>
                                                    <li ng-hide="budget.selected.professional.direccion == null">
                                                        <i class="fa fa-map-marker pr-10 "></i>@{{ budget.selected.professional.direccion}}
                                                    </li>
                                                    <li ng-hide="budget.selected.professional.telefono == null">
                                                        <i class="fa fa-phone pr-10 "></i>@{{ budget.selected.professional.telefono}}
                                                    </li>
                                                    <li ng-hide="budget.selected.professional.identificacion == null">
                                                        <i class="fa fa-info pr-10 "></i>@{{ budget.selected.professional.identificacion}}
                                                    </li>
                                                    <li ng-hide="budget.selected.professional.facebook == null">
                                                        <i class="fa fa-facebook pr-10"></i> @{{ budget.selected.professional.facebook}}
                                                    </li>
                                                    <li ng-hide="budget.selected.professional.website == null">
                                                        <i class="fa fa-link pr-10"></i> @{{ budget.selected.professional.website}}
                                                    </li>
                                                    <li ng-hide="budget.selected.professional.email == null">
                                                        <i class="fa fa-envelope-o pr-10"></i> @{{budget.selected.professional.email}}
                                                    </li>
                                                </ul>
                                                <div>




                                                      <a ng-show="budget.selected.img.length>0" href="@{{budget.selected.img[0]}}" class="text-center popup-img">Ver im&aacute;genes del negocio <i class="fa fa-search"></i></a>
                                                     <div class="owl-carousel content-slider-with-controls"  >
                                                         <div ng-if="!$first" class="overlay-container overlay-visible" ng-repeat="image in budget.selected.img track by $index" ng-init="budget.fireJquery($last)">
                                                                <img src="@{{image}}" alt="">
                                                                <div class="overlay-bottom hidden-xs">
                                                                    <div class="text">
                                                                       {{--  <h3 class="title">You Can Trust Us</h3> --}}
                                                                    </div>
                                                                </div>
                                                                <a href="@{{image}}" class="popup-img overlay-link"><i class="icon-plus-1"></i></a>
                                                            </div>
                                                        </div>
                                                  </div> 
                                            </div> 
                                            <div class="col-md-6">
                                                <h4 style="text-decoration:underline">Servicio: </h4>
                                                <div class="">
                                                    <h5 class="title">@{{ budget.selected.profesionalService.nombre }}</h5>

                                                    <div class="text-left mt-10">
                                                        <ul class="list-icons fix-text-list">
                                                            <li ng-repeat="srv in budget.selected.profesionalService.children" ng-show="srv.id_padre!=null && srv.selected==1"> <div>  <i class="icon-check-1"></i> @{{srv.nombre}} </div></li>
                                                        </ul>
                                                    </div>

                                                </div>                                        
                                            </div> 

                                         </div>

                                        </div>
                                         
                                         <div class="row mt-20" style="margin-left: 15px;">

                                            <div class="separator"></div>

                                            <div class="text-center" >
                                                <a class="collapsed " data-toggle="collapse" href="javascript:void(0)"  ng-click="budget.ratingProfesional(budget.selected)" data-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent">Ver rese&ntilde;as <i class="fa fa-plus"></i></a>
                                            </div>

                                            <div class="collapse" id="collapseContent">
                                                <div ng-show="budget.selected.listRanking.length==0">
                                                    <h4 class="text-center">El profesional no tiene rese&ntilde;as</h4>
                                                </div>

                                                <div ng-show="budget.selected.listRanking.length>0">
                                                    <h4 class="text-center">Rese&ntilde;as</h4>
                                                    <div class="row">
                                                        <div class="footer-content">
                                                            <div class="media margin-clear" ng-repeat="rank in budget.selected.listRanking">
                                                                <div class="media-left">
                                                                    <div class="overlay-container">
                                                                        <img  ng-src="@{{rank.people.avatar }}" onerror="this.src='img/landing/photo-avatar.png'"  class="img-circle" style="width: 50px;height: 50px;">

                                                                    </div>
                                                                </div>
                                                                <div class="media-body">

                                                                    <h6 class="media-heading"><a >@{{rank.people.nombre}} @{{rank.people.apellido}}</a></h6>
                                                                    <input name="rating" ng-value="rank.valoracion || 0" class="valoracion rating-loading" data-size="xsss">
                                                                    <p class="small margin-clear">@{{rank.comentario}}</p>
                                                                </div>
                                                                <hr>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </div>
                                </div>



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


                    <div id="custom_panel" class="panel panel-default" ng-hide="budget.selected.personalizado==null">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion-2" class="collapsed" href="" data-target="#collapseTwo-2">
                                    <i class="fa fa-info-circle pr-10"></i>Informaci&oacute;n del negocio
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo-2" class="panel-collapse collapse" ng-cloak>
                            <div class="panel-body"> 
                            
                                <div class="col-md-12 space-top">
                                <div class="feature-box-2 object-non-visible left animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="100"> 
                                    <span class="icon without-bg"><i class="icon-info"></i></span>
                                    <div class="body">
                                        <h4 class="title">Nombre del negocio</h4>
                                        <p>@{{ budget.selected.personalizado.nombre_negocio || "Sin especificar"}}</p>
         
                                        <div class="separator-2"></div>
                                    </div>
                                </div>
                                <div class="feature-box-2 object-non-visible right animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="200">
                                    <span class="icon without-bg"><i class="icon-megaphone"></i></span>
                                    <div class="body">
                                        <h4 class="title">¿Qu&eacute; hace el servicio?</h4>
                                        <p>@{{ budget.selected.personalizado.descripcion_detallada || "Sin especificar" }}</p>
                                        <div class="separator-3"></div>
                                    </div>
                                </div>
                                <div class="feature-box-2 object-non-visible left animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="300">
                                    <span class="icon without-bg"><i class="icon-calendar"></i></span>
                                    <div class="body">
                                        <h4 class="title">Año fundado</h4>
                                        <p> @{{ budget.selected.personalizado.fecha_fundado || "Sin especificar" }} </p>
                                        <div class="separator-2"></div>
                                    </div>
                                      
                                </div>
                                <div class="feature-box-2 object-non-visible right animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="300">
                                    <span class="icon without-bg"><i class="icon-info"></i></span>
                                    <div class="body">
                                        <h4 class="title">N° Empleados</h4>
                                        <p> @{{ budget.selected.personalizado.numero_empleados || "Sin especificar" }} Empleados </p>
                                        <div class="separator-3"></div>
                                    </div>
                                      
                                </div>
                                <div class="feature-box-2 object-non-visible left animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="300">
                                    <span class="icon without-bg"><i class="icon-info"></i></span>
                                    <div class="body">
                                        <h4 class="title">Disponibildad de viaje</h4>
                                        <p> @{{ budget.selected.personalizado.distancia_viaje || "Sin especificar" }}</p>
                                        <div class="separator-2"></div>
                                    </div>
                                      
                                </div>
                                 <div class="feature-box-2 object-non-visible right animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="300">
                                    <span class="icon without-bg"><i class="fa fa-map-marker"></i></span>
                                    <div class="body">
                                        <h4 class="title">Ubicaci&oacute;n</h4>
                                        <p> @{{ budget.selected.personalizado.ubicacion || "Sin especificar" }}</p>
                                        <div class="separator-3"></div>
                                    </div>
                                      
                                </div>
                                    <div class="feature-box-2 object-non-visible left animated object-visible fadeInDownSmall" data-animation-effect="fadeInDownSmall" data-effect-delay="300">
                                    <span class="icon without-bg"><i class="icon-pencil"></i></span>
                                    <div class="body">
                                        <h4 class="title">¿Qu&eacute; beneficios aporta el servicio?</h4>
                                          <p> 
                                            @{{ budget.selected.personalizado.beneficios_detallado || "Sin especificar" }}
                                        </p>
                                          <div class="separator-2"></div>
                                    </div>
                                      
                                </div>


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

                </div> <!-- accordion end -->
  
            </div>
           
            </div>   
           
        </div>
        </form>
    </section>

                    

@stop

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

    {{--<script src="{{asset('bower_components/moment/moment.js')}}"></script>--}}
    {{--<script src="{{asset('bower_components/moment/locale/es.js')}}"></script>--}}
    {{--<script src="js/scripts/js/app/commonService.min.js"></script>--}}
     {{--<script src="js/scripts/js/app/userBudgetApp.min.js"></script>--}}
   {{----}}
{{--@stop--}}