@extends('panel.app')
@push('css')
<style>
   .highcharts-point-image {
      clip-path: circle(50%);
      display: none;
   }

   #container-1 {
      width: 100%;
      height: 700px;
      margin: 0 auto;
   }

   #controls {
      text-align: center;
      margin: 10px;
   }

   #controls label {
      margin-right: 10px;
      font-weight: bold;
   }

   .highcharts-figure,
   .highcharts-data-table table {
      min-width: 100%;
      max-width: 100%;
      margin: 1em auto;
   }

   .highcharts-data-table table {
      font-family: Verdana, sans-serif;
      border-collapse: collapse;
      border: 1px solid #ebebeb;
      margin: 10px auto;
      text-align: center;
      width: 100%;
      max-width: 500px;
   }

   .highcharts-data-table caption {
      padding: 1em 0;
      font-size: 1.2em;
      color: #555;
   }

   .highcharts-data-table th {
      font-weight: 600;
      padding: 0.5em;
   }

   .highcharts-data-table td,
   .highcharts-data-table th,
   .highcharts-data-table caption {
      padding: 0.5em;
   }

   .highcharts-data-table thead tr,
   .highcharts-data-table tbody tr:nth-child(even) {
      background: #f8f8f8;
   }

   .highcharts-data-table tr:hover {
      background: #f1f7ff;
   }

   .highcharts-description {
      margin: 0.3rem 10px;
   }

</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
@endpush

@section('content')
<div class="content-header justify-content-between">
   <div>
      <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('panel.index') }}">Inicio</a></li>
            <li class="breadcrumb-item active" aria-current="page">Monitoreo - Alcance Entorno Digital</li>
         </ol>
      </nav>
      <h4 class="content-title content-title-xs">Monitoreo - Alcance Entorno Digital Tiktok</h4>
   </div>
   <div class="d-none d-sm-flex">
      <a href="" class="btn btn-white"><i data-feather="share-2" class="svg-14"></i> Compartir</a>
      <a href="" class="btn btn-brand-01 mg-l-5"><i data-feather="save" class="svg-14"></i> Descargar PDF</a>
   </div>
</div><!-- content-header -->

<div class="content-body">

   <script src="https://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/modules/networkgraph.js"></script>

   <div class="row row-sm">
      <div class="col-xl-8">
         @include('panel.partials.graphs._comparativeChart')
      </div><!-- col -->

      <div class="col-md-5 col-lg-6 col-xl-4 mg-t-15 mg-sm-t-20 mg-xl-t-0">
         @include('panel.partials.table._candidateTable')
      </div><!-- col -->
   </div>

   <div class="row">
      <div class="col-sm-12 mg-t-15 mg-sm-t-20 mg-xl-t-0 mt-4">
         {{-- <div class="col-sm-12 col-lg-6 mg-t-15 mg-sm-t-20 mg-xl-t-0 mt-4"> --}}
         @include('panel.partials.graphs._raceChart')
      </div>

      <div class="col-sm-6 col-md-4 mg-t-15 mg-sm-t-20">
         @include('panel.partials.counter._tikTokInsight', [
         'position' => 1,
         'name' => $leader['name'],
         'image' => $leader['image'],
         'viewsTotal' => $leader['periodViews'],
         'engagementAvg' => $leader['periodEngagement']
         ])
      </div><!-- col -->

      <div class="col-sm-6 col-md-4 mg-t-15 mg-sm-t-20">
         @include('panel.partials.counter._tikTokInsight', [
         'position' => 2,
         'name' => $secondCandidate['name'],
         'image' => $secondCandidate['image'],
         'viewsTotal' => $secondCandidate['periodViews'],
         'engagementAvg' => $secondCandidate['periodEngagement']
         ])
      </div><!-- col -->

      <div class="col-sm-6 col-md-4 mg-t-15 mg-sm-t-20">
         @include('panel.partials.counter._tikTokInsight', [
         'position' => 3,
         'name' => $thirdCandidate['name'],
         'image' => $thirdCandidate['image'],
         'viewsTotal' => $thirdCandidate['periodViews'],
         'engagementAvg' => $thirdCandidate['periodEngagement']
         ])
      </div><!-- col -->

      <div class="col-sm-12 mg-t-15 mg-sm-t-20 mg-xl-t-0 mt-4">
         @include('panel.partials.graphs._networkChart')
      </div>



      <div class="col-md-12 mg-t-15 mg-sm-t-20">
         @include('panel.partials.table._candidateRanking')
      </div><!-- col -->

      {{-- <div class="col-md-6 col-xl-4 mg-t-15 mg-sm-t-20 order-md-1 order-xl-0"> --}}
      {{-- @include('panel.partials.graphs._followerLikeRatio') --}}
      {{-- <p>Próxima actualización - Gráfico de barras
            
         </p> --}}
      {{-- @include('panel.partials.graphs._candidateEngagement') --}}

      {{-- </div><!-- col --> --}}

      <div class="col-sm-12 col-xl-4 mt-3">
         @include('panel.partials.graphs._videosPublishedChart')
      </div>

      <div class="col-md-12 col-xl-8 mt-3">
         @include('panel.partials.table._worldMap')
      </div><!-- col -->

      <div class="col-sm-12 col-xl-4 mt-3">
         <div class="card card-hover card-pie-one rounded-sm">
            <div class="card-header bg-transparent">
               <h6 class="card-title mg-b-0">En proceso</h6>
               <nav class="nav nav-card-icon">
                  <a href=""><i data-feather="help-circle"></i></a>
                  <a href=""><i data-feather="more-horizontal"></i></a>
               </nav>
            </div><!-- card-header -->
            <div class="card-body">
               <div class="chart-wrapper mg-b-25"><canvas id="chartDonut"></canvas></div>
               {{-- <div class="row row-sm">
                  <div class="col-6">
                    <p class="tx-12 mg-b-5">Organic Search</p>
                    <h4><span>3,104</span> <small>25%</small></h4>
                    <div class="progress">
                      <div class="progress-bar wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div><!-- col -->
                  <div class="col-6">
                    <p class="tx-12 mg-b-5">Email Campaign</p>
                    <h4><span>2,679</span> <small>20%</small></h4>
                    <div class="progress">
                      <div class="progress-bar bg-blue wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div><!-- col -->
                  <div class="col-6 mg-t-20">
                    <p class="tx-12 mg-b-5">Referral Links</p>
                    <h4><span>4,236</span> <small>30%</small></h4>
                    <div class="progress">
                      <div class="progress-bar bg-green wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div><!-- col -->
                  <div class="col-6 mg-t-20">
                    <p class="tx-12 mg-b-5">Social Media</p>
                    <h4><span>3,068</span> <small>27%</small></h4>
                    <div class="progress">
                      <div class="progress-bar bg-pink wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div><!-- col -->
                </div><!-- row --> --}}
            </div>
         </div><!-- card -->
      </div>

      <div class="col-sm-12 col-xl-4 mt-3">
         <div class="card card-hover card-pie-two rounded-sm">
            <div class="card-header bg-transparent">
               <h6 class="card-title mg-b-0">En proceso</h6>
               {{-- <nav class="nav nav-time-range">
                  <a href="">D</a>
                  <a href="">W</a>
                  <a href="" class="active">M</a>
                  <a href="">Y</a>
                </nav> --}}
            </div><!-- card-header -->
            <div class="card-body">
               {{-- <h3 class="card-value"><span>$</span>29,060<small>.00</small></h3>
                <p class="tx-12 mg-b-10">as of this month</p>

                <div class="row row-xs align-items-center mg-b-20">
                  <div class="col-6">
                    <ul class="list-unstyled mg-b-0">
                      <li>
                        <h6 class="tx-color-01 tx-numeric tx-normal mg-b-5">$3,011.20 <span class="bg-blue"></span></h6>
                        <p class="tx-11 tx-color-04 mg-b-0">Personal expense</p>
                      </li>
                      <li>
                        <h6 class="tx-color-01 tx-numeric tx-normal mg-b-5">$4,870.80 <span class="bg-green"></span></h6>
                        <p class="tx-11 tx-color-04 mg-b-0">Medical expense</p>
                      </li>
                      <li>
                        <h6 class="tx-color-01 tx-numeric tx-normal mg-b-5">$10,107.00 <span class="bg-purple"></span></h6>
                        <p class="tx-11 tx-color-04 mg-b-0">Other expense</p>
                      </li>
                    </ul>
                  </div><!-- col --> --}}
               <div class="col-6">
                  <div class="chart-wrapper"><canvas id="chartDonut2"></canvas></div>
               </div><!-- col -->
            </div><!-- row -->

            {{-- <label class="content-label mg-b-5">Recent Transactions</label>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">
                    <div>
                      <h6>School supplies</h6>
                      <span>Today, Jul 28, 2019</span>
                    </div>
                    <div class="tx-right">
                      <h6>$50.50</h6>
                      <span class="badge bg-purple tx-white">Other</span>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div>
                      <h6>Paracetamol</h6>
                      <span>Today, Jul 28, 2019</span>
                    </div>
                    <div>
                      <h6>$78.30</h6>
                      <span class="badge bg-green tx-white">Medical</span>
                    </div>
                  </li>
                </ul>
                <a href="" class="link-02 tx-12">View All Transactions <i class="icon ion-android-arrow-forward"></i></a> --}}
            {{-- </div> --}}
         </div><!-- card -->
      </div>

      <div class="col-sm-12 col-xl-4 mt-3">
         <div class="card card-hover card-overall-rating rounded-sm">
            <div class="card-header bg-transparent pd-t-15 pd-r-15 pd-b-2 bd-b-0">
               <h6 class="card-title mg-b-0">Calificación candidatos con mayor alcance</h6>

               <!--<nav class="nav nav-card-icon">
                  <button class="cursor-pointer help-circle btn btn-link p-0 pl-2" data-bs-toggle="tooltip" title="El cálculo se realiza teniendo en cuenta la cantidad de visualizaciones + me gusta + compartidos + comentarios + guardados.">
                     <i data-feather="help-circle"></i>
                  </button>
                  <a href=""><i data-feather="more-vertical"></i></a>
               </nav>-->
            </div><!-- card-header -->
            <div class="card-body pd-t-5 pd-b-15">

               <p><small>Visualizaciones + me gusta + compartidos + comentarios + guardados.</small></p>

               <div class="d-flex align-items-end mg-b-5 gap-2">
                  <img src="{{ $viewsLeader->image }}" alt="{{ $viewsLeader->name }}" style="width: 35px; height: 35px; object-fit: cover; border: 2px solid {{ $viewsLeader->color ?? '#000' }}; border-radius: 50%;">
                  <h1 class="card-value">{{ number_format($viewsLeader->reach_stars, 1) }}</h1>
                  <div class="stars mg-l-5">
                     @php
                     $fullStars = floor($viewsLeader->reach_stars);
                     $halfStar = ($viewsLeader->reach_stars - $fullStars) >= 0.5;
                     @endphp

                     @for ($i = 1; $i <= 5; $i++) @if ($i <=$fullStars) <i class="icon ion-ios-star active"></i>
                        @elseif ($i == $fullStars + 1 && $halfStar)
                        <i class="icon ion-ios-star-half active"></i>
                        @else
                        <i class="icon ion-ios-star"></i>
                        @endif
                        @endfor
                  </div>
               </div>

               <p class="tx-11 tx-color-03 mb-0 text-muted">{{ $viewsLeader->name }}</p>

               <ul class="list-group list-group-flush mg-b-20 shadow-0">
                  @foreach ($viewsRestTop->slice(0, 4) as $candidate)
                  <li class="list-group-item">
                     <div class="d-flex gap-3">
                        <img src="{{ $candidate->image }}" alt="{{ $candidate->name }}" style="width: 25px; height: 25px; object-fit: cover; border: 2px solid {{ $candidate->color ?? '#000' }}; border-radius: 50%;">
                        {{ number_format($candidate->reach_stars, 1) }}
                     </div>
                     <div class="stars" style="margin-left: 40px !important;">
                        @php
                        $fullStars = floor($candidate->reach_stars);
                        $halfStar = ($candidate->reach_stars - $fullStars) >= 0.5;
                        @endphp

                        @for ($i = 1; $i <= 5; $i++) @if ($i <=$fullStars) <i class="icon ion-ios-star active"></i>
                           @elseif ($i == $fullStars + 1 && $halfStar)
                           <i class="icon ion-ios-star-half active"></i>
                           @else
                           <i class="icon ion-ios-star"></i>
                           @endif
                           @endfor
                     </div>
                     <div>{{ short_number($candidate['reach_score']) }}</div>
                  </li>
                  @endforeach
               </ul>


               <div class="d-flex align-items-center justify-content-between mg-b-15">
                  <label class="content-label mg-b-0">Análisis</label>
                  {{-- <label class="tx-11 mg-b-0">O: <a href="" class="link-03">Most Recent <i class="icon ion-ios-arrow-down"></i></a></label> --}}
               </div>
               <div class="review-item mg-b-15">
                  <div class="media mg-b-10">
                     <div class="avatar avatar-sm">
                        <img src="{{ $viewsLeader['image'] }}" alt="{{ $viewsLeader['name'] }}" style="width: 35px; height: 35px; object-fit: cover; border: 2px solid {{ $viewsLeader['color'] }}; border-radius: 50%;">
                     </div>
                     <div class="media-body mg-l-10">
                        <h6 class="tx-13 mg-b-2">{{ $viewsLeader['name'] }}</h6>
                        <div class="stars">

                           @php
                           $fullStars = floor($viewsLeader->reach_stars);
                           $halfStar = ($viewsLeader->reach_stars - $fullStars) >= 0.5;
                           @endphp

                           @for ($i = 1; $i <= 5; $i++) @if ($i <=$fullStars) <i class="icon ion-ios-star active"></i>
                              @elseif ($i == $fullStars + 1 && $halfStar)
                              <i class="icon ion-ios-star-half active"></i>
                              @else
                              <i class="icon ion-ios-star"></i>
                              @endif
                              @endfor
                        </div>
                     </div><!-- media-body -->
                  </div><!-- media -->
                  <p class="tx-12 tx-color-03 mg-b-0">{{ $leader['name'] }} lidera en impacto digital al registrar la mayor suma de visualizaciones, me gusta, compartidos, comentarios y guardados. Este desempeño refleja un alto alcance y fuerte conexión con su audiencia en redes sociales.</p>
               </div>
               {{-- <a href="" class="tx-12 link-03 d-block tx-center bd-t pd-t-10">View All Reviews <i class="icon ion-android-arrow-forward"></i></a> --}}
            </div>
         </div><!-- card -->
      </div>

      <div class="col-md-6 col-xl-4 mg-t-15 mg-sm-t-20">
         <div class="col-md-12 col-xl-8 mg-t-15 mg-sm-t-20">

         </div><!-- col -->
      </div><!-- content-body -->
      @stop

      @include('panel.partials.scripts._general')

      @push('js')
      <script src="{{ asset('dashboard/assets/js/dashboard-one.js') }}"></script>
      {{-- <script src="{{ asset('dashboard/lib/morris.js/morris.min.js') }}"></script>
      --}}

      <!-- Morris.js -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>


      {{-- //Gráfico de nodos --}}
      @include('panel.graphs.node-stats', [
      'nodesData' => $nodesData,
      'appURL' => env('APP_URL'),
      'nodes' => $nodes,
      'parentNodes' => $parentNodes
      ])


      <!-- Scripts -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

      @include('panel.partials.scripts._videosPublishedScript')
      @endpush