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

@push('css')
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
@endpush

<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">Administración</li>
            <li class="breadcrumb-item"><a href="{{ route('admin.candidates.index') }}">Listado de precandidatos presidenciales</a></li>
            <li class="breadcrumb-item active" aria-current="page">Detalles de los perfiles sociales de {{ $candidate->name }}</li>
         </ol>
      </nav>
      <h4 class="content-title content-title-xs mt-4">Detalles de los perfiles sociales de {{ $candidate->name }}</h4>
   </div>
</div><!-- content-header -->

<div class="px-3">
   <div class="content-body content-body-profile">
      <div class="profile-sidebar">
         <div class="profile-sidebar-header">
            <div class="avatar">
               <img style="width: 100%; height: 100%; object-fit: cover; border: 5px solid {{ $candidate->color }}; border-radius: 100%;" src="{{ asset($candidate->image) }}" class="rounded-circle" alt="{{ $candidate->name }}">
            </div>

            <h5>{{ $candidate->name }}</h5>
            <p>Precandidata Presidencial</p>

            {{-- <div class="d-flex align-self-stretch mg-t-30">
               <a href="" class="btn btn-brand-01 btn-sm btn-uppercase flex-fill">Follow</a>
               <a href="" class="btn btn-white btn-sm btn-uppercase flex-fill mg-l-5">Message</a>
            </div> --}}
         </div><!-- profile-sidebar-header -->
         <div class="profile-sidebar-body">

            <label class="content-label">Perfiles sociales</label>
            <ul class="list-unstyled profile-info-list">
               <li><i class='bx bxl-tiktok'></i> <a target="_blank" href="{{ $candidate->socialTiktok->profile_url }}">&#64;{{ $candidate->socialTiktok->username }}</a></li>
            </ul>

            <form action="{{ route('panel.candidate.instagram.update', $candidate) }}" method="POST">
               @csrf
               <button type="submit" class="btn btn-primary btn-sm">Actualizar instagram</button>
            </form>

            <form action="{{ route('panel.candidate.instagram.import.reels', $candidate) }}" method="POST">
               @csrf
               <button type="submit" class="btn btn-primary btn-sm">Obtener reels</button>
            </form>

            {{-- 

            <form action="{{ route('panel.candidate.videos.update', $candidate) }}" method="POST">
               @csrf
               <button type="submit" class="btn btn-primary btn-sm">Actualizar videos</button>
            </form> --}}

         </div><!-- profile-sidebar-body -->
      </div><!-- profile-sidebar -->
      <div class="profile-body">
         <div class="profile-body-header">
            <div class="nav-wrapper">
               <ul class="nav nav-line" id="profileTab" role="tablist">
                  <li class="nav-item">
                     <a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">TikTok</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" id="instagram-tab" data-toggle="tab" href="#instagram" role="tab" aria-controls="instagram" aria-selected="true">Instagram</a>
                  </li>
               </ul>
            </div><!-- nav-wrapper -->
         </div><!-- profile-body-header -->
         <div class="tab-content pd-15 pd-sm-20">
            <div id="overview" class="tab-pane active show">
               <div class="stat-profile">
                  <div class="stat-profile-body">
                     <div class="row row-xs">
                        <div class="col">
                           <div class="card card-body pd-10 pd-md-15 bd-0 shadow-none bg-primary-light">
                              <h1 class="tx-light tx-sans tx-spacing--4 tx-primary mg-b-5">{{ number_format($candidate->videos_count) }}</h1>
                              <p class="tx-13 tx-lg-14 tx-color-02 mg-b-0">Videos obtenidos de {{ number_format($candidate->socialTiktok->videos) }}.</p>
                           </div>
                        </div>
                        <div class="col">
                           <div class="card card-body pd-10 pd-md-15 bd-0 shadow-none bg-teal-light">
                              <h1 class="mg-b-5 tx-sans tx-spacing--2 tx-light tx-teal">{{ number_format($candidate->socialTiktok->follower_count) }}</h1>
                              <p class="tx-13 tx-lg-14 tx-color-03 mg-b-0">Seguidores. Y siguiendo a {{ number_format($candidate->socialTiktok->friend_count) }} cuentas.</p>
                           </div>
                        </div>
                        <div class="col">
                           <div class="card card-body pd-10 pd-md-15 bd-0 shadow-none bg-pink-light">
                              <h1 class="mg-b-5 tx-sans tx-spacing--2 tx-light tx-pink">{{ number_format($candidate->socialTiktok->likes) }}</h1>
                              <p class="tx-13 tx-lg-14 tx-color-03 mg-b-0">Me gusta recibidos</p>
                           </div>
                        </div>
                     </div><!-- row -->
                  </div><!-- stat-profile-body -->
               </div><!-- stat-profile -->

               <hr class="mg-y-15 op-0">

               <label class="content-label content-label-lg mg-b-15 tx-color-01">Biografía</label>
               <p class="tx-color-03">{{ $candidate->socialTiktok->bio }}</p>

               <hr class="mg-y-15 op-0">

               <label class="content-label content-label-lg mg-b-15 tx-color-01">Última actualización de los videos</label>
               <p>{{ $candidate->socialTiktok->last_videos_fetched_at }}</p>

               <hr class="mg-y-15 op-0">

               <label class="content-label content-label-lg mg-b-15 tx-color-01">Videos</label>

               @include('panel.partials._offcanvas')

               <div class="row">

                  <code>

                     UPDATE top_videos
                     SET thumbnail_url = CONCAT('https://data-brainstorm.s3.us-east-2.amazonaws.com/videos/{{ $candidate->socialTikTok->username }}/', video_id, '.png')
                     WHERE video_id IN (
                     @foreach ($candidate->videos->take(3) as $video)
                     "{{ $video->video_id }}",
                     @endforeach
                     );

                     SELECT top_videos.id, top_videos.thumbnail_url FROM top_videos WHERE top_videos.video_id IN (
                     @foreach ($candidate->videos as $video)
                     "{{ $video->video_id }}",
                     @endforeach
                     );
                  </code>

                  <br>
                  
                  {{-- <div class="col-sm-12">
                     @foreach ($candidate->videos as $video)
                     <p class="p-0 m-0">
                        <a href="{{ $video->video_url }}" target="_blank">{{ $video->video_url }}</a>
                        {{$loop->index + 1}} - {{ $video->video_id }}
                     </p>
                     <p>{{$loop->index + 1}} - {{ $video->video_id }}</p>
                     @endforeach
                  </div> --}}

                  @foreach ($candidate->videos as $video)
                  <div class="col-md-2 mb-4">
                     <div class="card border-0 shadow-sm h-100">
                        <img src="{{ $video->thumbnail_url }}" class="card-img-top" style="height: 300px; object-fit: cover;" alt="Miniatura del video">
                        <div class="card-body py-2">
                           <p class="card-text small text-muted">{{ $video->video_id }}</p>
                           {{-- <p class="card-text small text-muted">"{{ $video->video_id }}",</p> --}}
                        </div>
                     </div>

                     
                  </div>
                  @endforeach
               </div>
            </div>

            <div id="instagram" class="tab-pane">
               <p>Instagram</p>

               <h2>Paso 1. Importar videos</h2>
               
               <form action="{{ route('admin.instagram.import.reels.batch', $candidate) }}" method="POST">
                  @csrf
                  <div class="mb-3">
                     <label for="codes" class="form-label">Pega aquí los códigos de reels (uno por línea)</label>
                     <textarea name="codes" id="codes" rows="15" class="form-control" required></textarea>
                  </div>
                  <button type="submit" class="btn btn-primary">Importar en lote</button>
               </form>

               <hr>

               <h2 class="mt-4">Actualizar información de los videos</h2>

               <ul>
                  @foreach($instagramVideos as $video)
                  <li>
                     {{-- <a href="{{ route('admin.instagram.update.single.reel', $video) }}"> --}}
                        {{ $loop->iteration }} - Actualizar reel {{ $video->id }} ({{$video->video_url}})
                     {{-- </a> --}}
                  </li>
                  @endforeach
               </ul>
            </div>
         </div><!-- tab-content -->
      </div><!-- profile-body -->
   </div><!-- content-body -->
</div><!-- content -->
@stop