<style>
  .form-group {margin-bottom: 2px}
  .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;
    text-align:left;
    padding: 5px;
  }

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

<div id="modalDossierContraparteLed" class="modal fade" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:900px" id="modal-contraparte">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close closeMDCL" aria-hidden="true">&times;</button>
                <h3 class="modal-title">Previsualización Dossier Led</h3>
            </div>
            <div class="modal-body" id="form_contraparte">
            <!-- <div class="container" style="width: 80%;"> -->

              <div class="row">
                
                <!-- ROW 1 -->
                <div class="col-md-12">
                  <!-- logo -->
                  <div class="col-md-8 text-center caja-dossier">
                    @if (!empty($logo_name))
                    <div style="padding: 10px 5px 10px 5px; height: 203px;">
                      <img src="{{env('RUTA_DOCUMENTOS')}}/logos/{{$logo_name}}?r={{rand(10000,99999)}}" border="0"  style="width: 100%; height:100%"   class="img img-fluid">
                    </div>
                    @endif

                    @if (!empty($dossier->mes_inicio))
                    <div class="caja-dossier">
                      <div class="titulo-caja">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">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 class="col-md-12">					
                      <div style="padding: 15px 15px 15px 0px">{!! $dossier->resenia !!}</div>
                    </div>
                  </div>
                  <!-- minuta -->
                  <div class="col-md-4">
                  <div class="caja-dossier">
                    <div class="titulo-caja">@traducir('status', 'STATUS')</div>
                    <table class="table table-striped table-condensed table-hover">
                      <thead></thead>
                      <tbody>
                        <tr>
                          <td><i class="far fa-folder-open no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('formales', 'Formales')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_formales)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_formales == 'V') #63b68c @elseif ($dossier->status_formales == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-users no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('relaciones', 'Relaciones')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_relaciones)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_relaciones == 'V') #63b68c @elseif ($dossier->status_relaciones == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-industry no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('comerciales', 'Comerciales')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_comerciales)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_comerciales == 'V') #63b68c @elseif ($dossier->status_comerciales == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-briefcase no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('fiscales', 'Fiscales')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_fiscales)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_fiscales == 'V') #63b68c @elseif ($dossier->status_fiscales == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-gavel no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('legales', 'Legales')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_legales)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_legales == 'V') #63b68c @elseif ($dossier->status_legales == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-university no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('bancos', 'Bancos')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_bancos)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_bancos == 'V') #63b68c @elseif ($dossier->status_bancos == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-globe no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('comex', 'Comex')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_comex)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_comex == 'V') #63b68c @elseif ($dossier->status_comex == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-chart-bar no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('contables', 'Contables')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_contables)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_contables == 'V') #63b68c @elseif ($dossier->status_contables == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="far fa-newspaper no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">@traducir('prensa', 'Prensa y otras fuentes')</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_prensa)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_prensa == 'V') #63b68c @elseif ($dossier->status_prensa == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>

                        <tr>
                          <td><i class="fa fa-certificate no-data fa-2x text-fidelitas"></i></td>
                          <td width="100%" class="text-left">
                            <span class="font17 h5 text-fidelitas">Fidecheck</span>
                          </td>
                          <td>
                            @if(null != $dossier->status_peps)<svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="@if ($dossier->status_peps == 'V') #63b68c @elseif ($dossier->status_peps == 'A') #FFB81C @else #A72B2A @endif" /></svg>@else <svg height="20" width="20" style="padding-bottom:1px"><circle cx="10" cy="10" r="9" stroke="black" stroke-width="0" fill="#c0c0c0" /></svg> @endif
                          </td>
                        </tr>


                      </tbody>
                      <tfoot></tfoot>
                    </table>

                  </div>
                </div>
                  {{--
                  <div class="col-md-6">
                    <!-- <div class="titulo-caja ">MINUTA</div> -->
                    <div class="titulo-caja">{{$info_t_contraparte->nombre_persona}} - {{$info_t_contraparte->abreviatura}} {{$info_t_contraparte->numero}}</div>
                      <div class="caja-dossier anyClass">            
                        {!! $dossier->analisis !!}
                      </div>
                  </div>
                    --}}
                  <!-- diagnostico -->
                </div>
              </div> <!-- fin row -->
              <div class="row">
              @if (!empty($score) || !empty($nivelr) || !empty($depecon))
              <br />

              <div class="row">
                <div class="col-md-12">
                  <div class="caja-dossier">
                    <div class="titulo-caja">@traducir('diagnostico', 'DIAGNOSTICO')</div>
                    <br />

                    <div class="row">
                      <div class="col-md-1"></div>
                      @if (!empty($score))
                      <div class="col-md-2">
                        <span class="font17 h5 text-center">@traducir('score', 'Score')</span>
                        <div class="caja-dossier" style="min-height: 160px;">

                          @if (isset($score))
                          <div class="sfbox">
                            <div style="padding: 5px 5px 5px 5px; float:left; width: 50%" align="right">
                              <svg x="0px" y="0px" 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="#{{$score->color}}"/>
                                </g>
                              </svg>
                            </div>
                            <div style="padding: 5px 5px 5px 5px; float:left;" align="left">
                              <div class="text-right">
                                <span class="@if($score->valor < 100) h1 @else h2 @endif" style="color: #{{$score->color}}">{{$score->valor}}</span>
                                <br />
                                <span class="h3" style="color: #{{$score->color}}">/100</span>
                              </div>
                            </div>
                          </div>
                          @endif

                        </div>
                    
                      </div>
                      @endif

                      @if (!empty($nivelr))
                      <div class="col-md-4">

                        <span class="font17 h5">@traducir('nivel riesgo', 'Nivel de Riesgo')</span>
                        <div class="caja-dossier" style="min-height: 160px">

                          @if (isset($nivelr))
                          <div id="nrHigh">
                            @if ($nivelr->valor == 'AR')
                            <svg class="marker" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                              viewBox="0 0 488.076 488.076" style="enable-background:new 0 0 488.076 488.076;" xml:space="preserve" width="16px" height="16px">
                              <g>
                                <path d="M0,49.017c0-13.824,11.207-25.03,25.03-25.03h438.017c13.824,0,25.029,11.207,25.029,25.03L262.81,455.745
                                  c0,0-18.772,18.773-37.545,0C206.494,436.973,0,49.017,0,49.017z"/>
                              </g>	
                            </svg>
                            @endif
                            @traducir('alto', 'ALTO')
                          </div>
                          @endif

                          @if (isset($nivelr))
                          <div id="nrMed">
                            @if ($nivelr->valor == 'MR')
                            <svg class="marker" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                              viewBox="0 0 488.076 488.076" style="enable-background:new 0 0 488.076 488.076;" xml:space="preserve" width="16px" height="16px">
                              <g>
                                <path d="M0,49.017c0-13.824,11.207-25.03,25.03-25.03h438.017c13.824,0,25.029,11.207,25.029,25.03L262.81,455.745
                                  c0,0-18.772,18.773-37.545,0C206.494,436.973,0,49.017,0,49.017z"/>
                              </g>	
                            </svg>
                            @endif
                            @traducir('medio', 'MEDIO')
                          </div>
                          @endif

                          @if (isset($nivelr))
                          <div id="nrStd">
                            @if ($nivelr->valor == 'SR')
                            <svg class="marker" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                              viewBox="0 0 488.076 488.076" style="enable-background:new 0 0 488.076 488.076;" xml:space="preserve" width="16px" height="16px">
                              <g>
                                <path d="M0,49.017c0-13.824,11.207-25.03,25.03-25.03h438.017c13.824,0,25.029,11.207,25.029,25.03L262.81,455.745
                                  c0,0-18.772,18.773-37.545,0C206.494,436.973,0,49.017,0,49.017z"/>
                              </g>	
                            </svg>
                            @endif
                            @traducir('standard', 'STANDARD')
                          </div>
                          @endif


                          @if (isset($nivelr))
                          <div id="nrLow">
                            @if ($nivelr->valor == 'BR')
                            <svg class="marker" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                              viewBox="0 0 488.076 488.076" style="enable-background:new 0 0 488.076 488.076;" xml:space="preserve" width="16px" height="16px">
                              <g>
                                <path d="M0,49.017c0-13.824,11.207-25.03,25.03-25.03h438.017c13.824,0,25.029,11.207,25.029,25.03L262.81,455.745
                                  c0,0-18.772,18.773-37.545,0C206.494,436.973,0,49.017,0,49.017z"/>
                              </g>	
                            </svg>
                            @endif
                            @traducir('BAJO', 'BAJO')
                          </div>
                          @endif

                        </div>

                      </div>
                      @endif


                      @if (!empty($depecon))
                      <div class="col-md-4">
                        <span class="font17 h5">@traducir('dependencia economica', 'Dependencia Económica')</span>
                        <div class="caja-dossier" style="height: 160px">

                          @if (!empty($depecon))
                          <div style="width: 300px; height: 160px; margin: 0 auto" id="gaugeContainer">
                            <div id="preview-textfield" style="font-size: 18px;" class="preview-textfield reset">{{$depecon->valor}}%</div>
                            <canvas id="gaugeDE" style="width: 100%; height: 80%"></canvas>
                          </div>
                          @else
                            <div class="text-center" style="padding-top: 67px">  -- @traducir('sin datos', 'Sin datos') -- </div>
                          @endif


                        </div>

                      </div>
                      @endif

                    </div>
                    <br />

                  </div>
                </div>
              </div>
              @endif
              </div>
              @if (!empty($dossier->analisis))
              <br />
              <div class="row">
                <div class="col-md-12">
                  <div class="caja-analisis">{!! $dossier->analisis !!}</div>
                </div>
              </div>
              @endif
              <div class="row" style="padding-top: 20px; padding-bottom: 40px;">
                @if(!empty($dossier_file))
                <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/{{$dossier_file}}" type="application/pdf">
                    <embed src="{{env('RUTA_DOCUMENTOS')}}/dossier/{{$dossier_file}}" type="application/pdf" />
                </object>
                </div>
                @endif
              </div>
              <!-- </div>fin container -->
            </div>
        </div>
    </div>
  </div>

<script language="javascript">

  $(document).on('click','.pdfbtn',function(){
    $('#object_pdf_dossier').removeClass('hidden');
  });
  $(document).on('click','.closeMDCL',function(){
    $('#modalDossierContraparteLed').modal('hide');
  });

</script>

