@extends('panel.app')
@section('content')

<div class="content-header">
   <div class="col-sm-12 col-xl-8">
      <nav aria-label="breadcrumb" class="w-100 bg-white">
         <ol class="breadcrumb bg-white">
            <li class="breadcrumb-item"><a href="{{ route('panel.index') }}">Inicio</a></li>
            <li class="breadcrumb-item"><a href="{{ route('panel.index') }}">Panel</a></li>
            <li class="breadcrumb-item active" aria-current="page">Análisis de {{ $precandidate->name }}</li>
         </ol>
      </nav>
      <h4 class="content-title content-title-xs my-2">{{ $precandidate->name }} - TikTok</h4>

      @include('panel.partials.counter._profile-stats')
   </div>
</div><!-- content-header -->

<div class="content-body">

   <div class="component-section no-code px-3">
      <h5 id="section5" class="tx-semibold">Line Variation</h5>
      <p class="mg-b-25">The tab component that display line indicator for active item.</p>

      <ul class="nav nav-line" id="myTab5" role="tablist">
         <li class="nav-item">
            <a class="nav-link active" id="home-tab5" data-toggle="tab" href="#home5" role="tab" aria-controls="home" aria-selected="true">Home</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" id="profile-tab5" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" id="contact-tab5" data-toggle="tab" href="#contact5" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
         </li>
      </ul>

      <div class="tab-content mg-t-20" id="myTabContent5">
         <div class="tab-pane fade show active" id="home5" role="tabpanel" aria-labelledby="home-tab5">
            <h6>Home</h6>
            <p class="mg-b-0">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore.</p>
         </div>
         <div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab5">
            <h6>Profile</h6>
            <p class="mg-b-0">Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat.</p>
         </div>
         <div class="tab-pane fade" id="contact5" role="tabpanel" aria-labelledby="contact-tab5">
            <h6>Contact</h6>
            <p class="mg-b-0">Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
         </div>
      </div>

   </div><!-- component-section -->


   <div class="row row-sm">
      @include('panel.partials.counter._followers')
      @include('panel.partials.counter._videos')
      @include('panel.partials.counter._likes')

      <div class="col-sm-6 col-xl-4 mg-t-15 mg-sm-t-20 mg-xl-t-0">
      </div>

      @include('panel.partials.graphs._views')
      @include('panel.partials.graphs._likes')
      @include('panel.partials.graphs._engagement')

   </div>

   <h4 class="content-title content-title-xs mt-3 ml-3">Otra sección - Poner nombre</h4>
   <div class="row row-sm">
      <div class="col-sm-6 col-xl-4 mg-t-15 mg-sm-t-20">
         @include('panel.partials.graphs._accountGrowthChart')
      </div>

      <div class="col-sm-6 col-xl-4 mg-t-15 mg-sm-t-20">
         <div style="height: 300px;">
            @include('panel.partials.graphs._score')
         </div>
         <div class="mt-5" style="margin-top: 40px !important;">
            @include('panel.partials.general._popularVideos')
         </div>
      </div>

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

      @include('panel.partials._offcanvas')

      <div class="col-sm-12 col-md-8 col-xl-5 mg-t-15 mg-sm-t-20 order-md-1 order-xl-0">
         @include('panel.partials.graphs._viewsOrigin')
      </div>

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

               <div style="height: 300px; overflow: auto;">
                  @include('panel.partials.counter._followersQuality')
               </div>

               <div style="height: 300px;">
                  @include('panel.partials.graphs._growthChart')
               </div>
            </div>

            <div class="col-sm-12 col-md-6">
               <div class="card" style="height: 300px;">
                  @include('panel.partials.graphs._accountPerformanceIndex')
               </div>

               <div class="card mt-2" style="height: 355px;">
                  @include('panel.partials.graphs._videoEngagement')
               </div><!-- card -->
            </div>
         </div>
      </div>
   </div><!-- row -->

   <div class="row row-sm mg-t-15 mg-sm-t-20">
      <div class="col-sm-6 col-xl-4">
         @include('panel.partials.graphs._videoCorrelationChart')
      </div><!-- col -->

      <div class="col-sm-6 col-xl-4">
         @include('panel.partials.graphs._weeklyVideos')
      </div><!-- col -->

      <div class="col-sm-6 col-xl-4">
         @include('panel.partials.graphs._postingFrecuency')
      </div><!-- col -->

      <div class="col-sm-6 col-xl-4">
         @include('panel.partials.graphs._bestTimes')
      </div><!-- col -->

      <div class="col-sm-6 col-xl-4">
         @include('panel.partials.counter._mostLikedAndViewed')
      </div><!-- col -->

      <div class="col-sm-6 col-xl-4">
         Gráfica de sentimientos: Positivo, negativo y neutral
      </div><!-- col -->
   </div><!-- row -->
</div><!-- content-body -->
@stop

@push('js')



<script>
   $(function() {

      'use strict'

      var flotSeries = {
         series: {
            stack: 0
            , bars: {
               show: true
               , lineWidth: 0
               , barWidth: .6
               , fill: 1
            }
         }
         , grid: {
            labelMargin: 0
            , borderWidth: 0
         }
         , yaxis: {
            show: false
         }
         , xaxis: {
            show: false
         }
      };

      $.plot('#flotChart1', [{
         data: [
            [0, 0]
            , [1, 0]
            , [2, 0]
            , [3, 70]
            , [4, 0]
         ]
         , color: '#5556fd'
      }, {
         data: [
            [0, 30]
            , [1, 20]
            , [2, 50]
            , [3, 0]
            , [4, 30]
         ]
         , color: '#d9dfe7'
      }], flotSeries);

      $.plot('#flotChart2', [{
         data: [
            [0, 0]
            , [1, 70]
            , [2, 0]
            , [3, 0]
            , [4, 0]
         ]
         , color: '#e83e8c'
      }, {
         data: [
            [0, 30]
            , [1, 0]
            , [2, 50]
            , [3, 60]
            , [4, 30]
         ]
         , color: '#d9dfe7'
      }], flotSeries);

      $.plot('#flotChart3', [{
         data: [
            [0, 0]
            , [1, 0]
            , [2, 0]
            , [3, 0]
            , [4, 70]
         ]
         , color: '#2bcb9c'
      }, {
         data: [
            [0, 30]
            , [1, 50]
            , [2, 40]
            , [3, 50]
            , [4, 0]
         ]
         , color: '#d9dfe7'
      }], flotSeries);

      $.plot('#flotChart4', [{
         data: df1
         , color: '#38c4fa'
      }], {
         series: {
            shadowSize: 0
            , lines: {
               show: true
               , lineWidth: 1.5
               , fill: false
            }
            , points: {
               show: true
               , radius: 2
               , lineWidth: 1.5
            }
         }
         , grid: {
            borderWidth: 0
            , labelMargin: 10
         , }
         , yaxis: {
            show: false
         }
         , xaxis: {
            show: true
            , color: '#d6f3fe'
            , min: 9
            , max: 21
            , ticks: [
               [10, 'Lunes']
               , [12, 'Aug 10']
               , [14, 'Aug 15']
               , [16, 'Aug 20']
               , [18, 'Aug 25']
               , [20, 'Aug 30']
            ]
         }
      });

      $.plot('#flotChart5', [{
         data: df1
         , color: '#22d273'
      }], {
         series: {
            shadowSize: 0
            , lines: {
               show: true
               , lineWidth: 1.5
               , fill: true
               , fillColor: {
                  colors: [{
                     opacity: 0
                  }, {
                     opacity: 0.5
                  }]
               }
            }
            , points: {
               show: true
               , radius: 2
               , lineWidth: 1.5
            }
         }
         , grid: {
            borderWidth: 0
            , labelMargin: 10
         , }
         , yaxis: {
            show: false
         }
         , xaxis: {
            show: true
            , color: '#d8f8e6'
            , min: 19
            , max: 31
            , ticks: [
               [20, 'Lunes']
               , [22, 'Martes']
               , [24, 'Miércoles']
               , [26, 'Jueves']
               , [28, 'Viernes']
               , [30, 'Sábado']
               , [70, 'Domingo']
            ]
         }
      });

      $.plot('#flotChart6', [{
         data: df1
         , color: '#5b8ef9'
      }], {
         series: {
            shadowSize: 0
            , bars: {
               show: true
               , lineWidth: 0
               , align: 'center'
               , barWidth: .3
               , fill: 1
            }
         }
         , grid: {
            borderWidth: 0
            , labelMargin: 10
         , }
         , yaxis: {
            show: false
         }
         , xaxis: {
            show: true
            , color: '#f2f2ff'
            , min: 49.3
            , max: 60.8
            , ticks: [
               [50, 'Lunes']
               , [52, 'Martes']
               , [54, 'Miércoles']
               , [56, 'Jueves']
               , [58, 'Viernes']
               , [60, 'Sábado']
               , [50, 'Domingo']
            ]
         }
      });

   })

</script>
@endpush