@if (empty($dossier) || $dossier->visible == 0)
  <div class="col-md-12 font15 text-center">-- @traducir('nodata', 'No se encuentra información') --</div>

<!-- http://bernii.github.io/gauge.js/#?currval=825&animationSpeed=50&angle=0&lineWidth=14&radiusScale=100&pointer.length=54&pointer.color=000000&pointer.strokeWidth=35&fontSize=32&colorStart=6FADCF&colorStop=8FC0DA&strokeColor=E0E0E0&divisions=0&divLength=59&divColor=333333&divWidth=11&subDivisions=3&subLength=50&subColor=666666&subWidth=6 -->

@else

<style>
  .text-fidelitas { color: #0F335A; } /* azul oscuro */
  .text-fidelitas2 { color: #7c9fc7; } /* celeste */
  
  .caja-dossier {
    border: 1px #c0c0c0 solid; 
    padding: 0px 0px 0px 0px; 
    text-align: center;
  }

  .titulo-caja {
    text-align:center; 
    background-color: #0f335a; 
    color: #FFFFFF; 
    font-size: 16px; 
    height: 24px;
  }

  .interior-caja {
    padding: 10px 10px 10px 10px; 
    text-align: center;
  }

  .texto-caja {
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    padding-top: 20px;
    color: #6DA1C6;
  }

  #nrLow {
    text-align: center; font-size: 14px; width:25%; border: #e0e0e0 1px solid; 
    background-color: #63b68c; color: #FFFFFF; float: left; height: 50px; margin-top: 55px;
    padding-top: 14px;
  }

  #nrStd {
    text-align: center; font-size: 14px; width:25%; border: #e0e0e0 1px solid; 
    background-color: #c0c0c0; color: #000000; float: left; height: 50px; margin-top: 55px;
    padding-top: 14px;
  }

  #nrMed {
    text-align: center; font-size: 14px; width:25%; border: #e0e0e0 1px solid; 
    background-color: #FFB81C; color: #FFFFFF; float: left; height: 50px; margin-top: 55px;
    padding-top: 14px;
  }

  #nrHigh {
    text-align: center; font-size: 14px; width:25%; border: #e0e0e0 1px solid; 
    background-color: #A72B2A; color: #FFFFFF; float: left; height: 50px; margin-top: 55px;
    padding-top: 14px;
  }

  .marker {
    position: relative;
    top: -18px; 
    left: 47%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .sfbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
  }

  .caja-analisis {
    background-color: #d0d1d3;
    color: #000000;
    border-right: #c0c1c7 3px solid;
    border-bottom: #c0c1c7 3px solid;
    border-top: #d9dadd 3px solid;
    border-left: #d9dadd 3px solid;
    padding: 12px;
    font-size: 14px;
  }

  .pdfbtn {
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #7b9ec4;
    border-right: #6084a8 4px solid;
    border-bottom: #6084a8 4px solid;
    border-top: #b4cbdd 4px solid;
    border-left: #b4cbdd 4px solid;
    width: 120px;
    height: 120px;
    position: relative;
    text-align: center;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    cursor: pointer;
  }

  .pdfbtn a { color: #FFFFFF; }
  .pdfbtn a:hover { color: #0F335A; }
  

  .anyClass {
    height:370px;
    overflow-y: scroll;
  }

</style>

<script type="text/javascript" src="{{ URL::asset('/js/gauge.js') }}"></script>

<div class="container" style="width: 100%;">

<div class="row">
  
  <!-- ROW 1 -->
  <div class="col-md-12">
    <!-- logo -->
    <div class="col-md-3 text-center caja-dossier">
      @if (!empty($logo_name))
      <div id="img_dossier_parent">
      <span style="height: 200px;line-height: 200px;"></span>
        <img src="{{env('RUTA_DOCUMENTOS')}}/logos/{{$logo_name}}" id="img_dossier" border="0" style="vertical-align:middle;max-width: 100%;">
      </div>
      @endif

      @if (!empty($dossier->mes_inicio))
      <div class="caja-dossier">
        <div class="titulo-caja">@traducir('inicio actividad', 'INICIO DE ACTIVIDAD')</div>
        <div style="padding: 15px 15px 15px 15px">
          <i class="fa fa-calendar fa-3x text-fidelitas2"></i><span class="h2 text-fidelitas"> {{$dossier->mes_inicio}}</span>
        </div>
      </div>
      @endif

      @if (!empty($dossier->empleados))
      <div class="caja-dossier">
        <div class="titulo-caja">@traducir('empleados', 'CANTIDAD DE EMPLEADOS')</div>
        <div style="padding: 15px 15px 15px 15px">
          <i class="fa fa-users fa-3x text-fidelitas2"></i><span class="h2 text-fidelitas"> {{$dossier->empleados}}</span>
        </div>
      </div>
      @endif
    </div>
    <!-- minuta -->
    <div class="col-md-6">
      <!-- <div class="titulo-caja ">MINUTA</div> -->
      <div class="titulo-caja">{{$qcontrap->nombre_persona}} - {{$qcontrap->abreviatura}} {{$qcontrap->numero}}</div>
        <div class="caja-dossier anyClass" style="text-align:left;">            
              {!! str_replace('<br />', ' ', $dossier->analisis) !!}
        </div>
    </div>
    <!-- diagnostico -->
    <div class="col-md-3">
      <div class="titulo-caja">@traducir('score', 'SCORE')</div>        
          @if (isset($score))
            <div class="caja-dossier" style="min-height: 100px;padding-top:10px;">
              <div class="col-md-6 text-right">
                <svg x="0px" y="0px" class="row" viewBox="0 0 301.605 301.605" style="enable-background:new 0 0 301.605 301.605;" xml:space="preserve" width="80px" height="80px">
                  <g>
                    <path d="M236.896,38.375v12.854h-49.808V38.375H236.896z M216.009,66.389h-28.921v12.854h28.921V66.389z M187.088,107.257h49.808   V94.404h-49.808V107.257z M216.009,122.425h-28.921v12.854h28.921V122.425z M187.088,163.293h49.808v-12.854h-49.808V163.293z    M194.852,236.533c0,35.881-29.191,65.072-65.072,65.072s-65.072-29.191-65.072-65.072c0-23.252,12.211-44.384,32.134-56.074   V32.938C96.843,14.775,111.618,0,129.78,0s32.938,14.775,32.938,32.938v147.522C182.641,192.137,194.852,213.275,194.852,236.533z    M181.998,236.533c0-19.73-10.964-37.565-28.619-46.53l-3.515-1.787V32.944c0-11.08-9.01-20.084-20.084-20.084   c-11.073,0-20.084,9.004-20.084,20.084v155.272l-3.515,1.787c-17.655,8.972-28.619,26.806-28.619,46.53   c0,28.792,23.426,52.218,52.218,52.218S181.998,265.325,181.998,236.533z M171.291,236.533c0,22.886-18.619,41.505-41.511,41.505    c-22.886,0-41.505-18.619-41.505-41.505c0-18.76,12.674-35.232,30.823-40.058l2.384-0.636v-79.275h16.601v79.269l2.384,0.643   C158.624,201.301,171.291,217.78,171.291,236.533z M131.837,208.866c-0.99-4.396-5.411-7.288-9.917-6.26   c-15.733,3.56-26.723,17.32-26.723,33.465c0,4.569,3.721,8.291,8.291,8.291s8.291-3.721,8.291-8.291   c0-8.207,5.797-15.482,13.798-17.288C130.024,217.76,132.839,213.313,131.837,208.866z" fill="@if (NULL != $score->color_personalizado) #{{$score->color_personalizado}} @else #{{$score->color}} @endif"/>
                  </g>
                </svg>
              </div>
              <div class="col-md-6">
                <div class="row text-left">
                  <span class="@if($score->valor < 100) h1 @else h2 @endif" style="color: @if (NULL != $score->color_personalizado) #{{$score->color_personalizado}} @else #{{$score->color}} @endif">{{ number_format($score->valor_numerico, 1, '.', ',') }}</span>
                  <br />
                  {{--<span class="h3" style="color: @if (NULL != $score->color_personalizado) #{{$score->color_personalizado}} @else #{{$score->color}} @endif">/100</span>--}}
                </div>
              </div>
            </div>
            @endif
          

        @if (!empty($pdfdossier))
        <div class="caja-dossier" style="padding-top: 10px; padding-bottom: 10px;">
          <div class="text-center" width="100%">
            <div class="pdfbtn"><br /><img src="/img/pdfnew.jpg" width="60px" border="0"><br />@traducir('ver dossier', 'Ver Dossier')</div>
          </div>
        </div>  
        @endif
    </div>

  </div>
</div> <!-- fin row -->
<div class="row" style="padding-top: 20px; padding-bottom: 40px;">
  @if(!empty($pdfdossier))
  <div  class="hidden text-center" id="object_pdf_dossier" width="100%">
    <object  class="text-center" style="width:50%;min-height: 700px; min-width: 500px;" data="{{env('RUTA_DOCUMENTOS')}}/dossier/{{$pdfdossier}}" type="application/pdf">
      <embed src="{{env('RUTA_DOCUMENTOS')}}/dossier/{{$pdfdossier}}" type="application/pdf" />
  </object>
  </div>
  @endif
</div>


</div>

<script language="javascript">
  $(document).on('click','.pdfbtn',function(){
    $('#object_pdf_dossier').removeClass('hidden');
  });
</script>

@endif