@extends('web.layouts.main')
@section('content')
 
 
<body>

    <!--Contents-->
    <main>
        <!-- ---------- side_menu ----------- -->
        <section class="side_menu">
            <div class="links_content">
                <ul class="nav">
                    <li class="nav-item">
                        <a href="#" class="active" id="pills-one-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-one" type="button" role="tab" aria-controls="pills-one"
                            aria-selected="true">
                            <i class="bi bi-house"></i>
                            <!-- <span>home</span> -->
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" id="pills-two-tab" data-bs-toggle="pill" data-bs-target="#pills-two"
                            type="button" role="tab" aria-controls="pills-two" aria-selected="false">
                            <i class="bi bi-briefcase"></i>
                            <!-- <span>home</span> -->
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" id="pills-three-tab" data-bs-toggle="pill" data-bs-target="#pills-three"
                            type="button" role="tab" aria-controls="pills-three" aria-selected="false">
                            <i class="bi bi-people"></i>
                            <!-- <span>home</span> -->
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" id="pills-five-tab" data-bs-toggle="pill" data-bs-target="#pills-five"
                            type="button" role="tab" aria-controls="pills-five" aria-selected="false">
                            <i class="bi bi-camera-video"></i>
                            <!-- <span>home</span> -->
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" id="pills-four-tab" data-bs-toggle="pill" data-bs-target="#pills-four"
                            type="button" role="tab" aria-controls="pills-four" aria-selected="false">
                            <i class="bi bi-patch-check"></i>
                            <!-- <span>home</span> -->
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- ---------- content ----------- -->
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
                <section class="pages_content p-0">
                    <div class="hero">
                        <div class="row gx-0 align-items-center">
                            <div class="col-lg-6">
                                <div class="img">
                                    <img src="{{asset($main->image)}}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="info">
                                    <div class="section_title mb-3">
                                        <h2 class="mainColor">{{settings('influencer')}}</h2>
                                    </div>
                                    <div class="text">
                                        {!! pagedescription($main->id,'description') !!}
                                    </div>
                                    <div class="socail_icons">
                                        <a target="_blank" href="{{settings('facebook')}}">
                                            <img src="{{url('')}}/assets/web/images/icons/face.svg" alt="">
                                        </a>
                                        <a target="_blank" href="{{settings('twitter')}}">
                                            <img src="{{url('')}}/assets/web/images/icons/twitter.svg" alt="">
                                        </a>
                                        <a target="_blank" href="{{settings('instagram')}}">
                                            <img src="{{url('')}}/assets/web/images/icons/instagram.svg" alt="">
                                        </a>
                                        <a target="_blank" href="{{settings('linkedin')}}">
                                            <img src="{{url('')}}/assets/web/images/icons/linkedin.svg" alt="">
                                        </a>
                                        <a target="_blank" href="{{settings('tiktok')}}">
                                            <img src="{{url('')}}/assets/web/images/icons/tiktok.svg" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fade_effect_top"></div> -->
                    <!-- <div class="fade_effect_bottom"></div> -->
                </section>
            </div>
            <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
                <section class="pages_content">
                    <div class="container">
                        <div class="education">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="info">
                                        <div class="section_title">
                                            <h2 class="mainColor mb-3">{{pagedescription($page->id,'name')}}</h2>
                                        </div>
                                        @foreach($galleries as $row)
                                        <div class="edu_card">
                                            <div class="icon me-3">
                                                <i class="bi bi-briefcase"></i>
                                            </div>
                                            <div class="inf">
                                                <small class="year">
                                                    {{gallerydescription($row->id,'title')}}
                                                </small>
                                                <h6>
                                                    {!! gallerydescription($row->id,'name') !!}
                                                </h6>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="img">
                                        <img src="{{asset($page->image)}}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fade_effect_top"></div> -->
                    <!-- <div class="fade_effect_bottom"></div> -->
                </section>
            </div>
            <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
                <section class="pages_content">
                    <div class="container">
                        <div class="statistics">
                            <div class="section_title">
                                <h2 class="mainColor mb-3">Social Media Statistics</h2>
                            </div>
                            <div class="row">
                                <div class="col-lg-3">
                                    <a href="#" class="stat_card">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/tik-tok.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h2><span class="counter">{{$product->tiktokNum}}</span>{{$product->tiktokT}}</h2>
                                            <h6>{{$product->tiktok}}</h6>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-lg-3">
                                    <a href="#" class="stat_card">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/snapchat.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h2><span class="counter">{{$product->sanpchatNum}}</span>{{$product->sanpchatT}}</h2>
                                            <h6>{{$product->sanpchat}}</h6>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-lg-3">
                                    <a href="#" class="stat_card">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/instagram.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h2><span class="counter">{{$product->instagramNum}}</span>{{$product->instagramT}}</h2>
                                            <h6>{{$product->instagram}}</h6>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-lg-3">
                                    <a href="#" class="stat_card">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/youtube.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h2><span class="counter">{{$product->youtubeNum}}</span>{{$product->youtubeT}}</h2>
                                            <h6>{{$product->youtube}}</h6>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="section_title mt-5">
                                <h2 class="mainColor mb-3">tiktok Statistics</h2>
                            </div>
                            <div class="row">
                                <div class="col-lg-4">
                                    <a href="#" class="stat_card">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/follower.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h2><span class="counter">{{$product->followers}}</span>{{$product->followersT}}</h2>
                                            <h5>Number Of Followers</h5>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-lg-4">
                                    <a href="#" class="stat_card">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/likes.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h2><span class="counter">{{$product->total}}</span>{{$product->totalT}}</h2>
                                            <h5>total likes</h5>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-lg-4">
                                    <a href="#" class="stat_card">
                                        <div class="icon">
                                            <img src="{{url('')}}/assets/web/images/icons/views.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h2><span class="counter">{{$product->views}}</span>{{$product->viewsT}}</h2>
                                            <h5>total video views</h5>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fade_effect_top"></div> -->
                    <!-- <div class="fade_effect_bottom"></div> -->
                </section>
            </div>
            <div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab">
                <section class="pages_content">
                    <div class="container">
                        <div class="brands">
                            <div class="section_title">
                                <h2 class="mainColor mb-3">brands collaborated with</h2>
                            </div>
                            <div class="row">
                                
                                @foreach($partners as $row)
                                <div class="col-lg-3">
                                    <a @if(!is_null($row->link)) href="{{$row->link}}" @endif>
                                    <div class="brand_img">
                                        <img src="{{asset($row->image)}}" alt="">
                                    </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fade_effect_top"></div> -->
                    <!-- <div class="fade_effect_bottom"></div> -->
                </section>
            </div>
            <div class="tab-pane fade top__50" id="pills-five" role="tabpanel" aria-labelledby="pills-five-tab">
                <section class="pages_content p-0 bg-transparent pt-5">
                    <div class="container">
                        <div class="imgs_videos">
                            <div class="text-center">
                                <div class="section_title d-inline-block">
                                    <h2 class="mainColor mb-3">tiktok hightest videos views</h2>
                                </div>
                            </div>
                            <div class="content">
                                <div class="row">
                                    @foreach($sliders as $row)
                                    <div class="col-lg-4">
                                        <div class="img">
                                            <img src="{{asset($row->image)}}" alt="">
                                            <a href="{{$row->link}}" class="icon" data-fancybox="gallery">
                                                <i class="bi bi-play-circle-fill"></i>
                                            </a>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="fade_effect_top"></div> -->
                    <!-- <div class="fade_effect_bottom"></div> -->
                </section>
            </div>
        </div>

    </main>
    
  @push('js')
  
   <script>
        // <!-- ------- chart js pie script -------------- -->
        var myData = [{!! json_encode($women) !!}, {!! json_encode($men) !!}];
        let primary = {!! json_encode(settings('primary')) !!};
        let secondary = {!! json_encode(settings('secondary')) !!};
        var ctx = document.getElementById('myChart');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                // labels: ['Category1', 'Category2', 'Category3'],
                datasets: [{
                    data: myData,
                    backgroundColor: [
                        primary,
                        secondary
                    ],
                    borderWidth: 5
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: false,
                    // text: 'Chart.js Line Chart'
                },
                // tooltips: {
                //     mode: 'index',
                //     intersect: false,
                // },
                // hover: {
                //     mode: 'nearest',
                //     intersect: true
                // }
            }
        });
    </script>
  
  
  <script>
        function percentage(elem){
            let target = $(elem).attr('data-id');
            
      $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/percentage')) !!}+'/'+target,
          type: 'GET',              
          data: 'dataform',
          success:function(data)
          {
           $('#per').html('show');
              
               
             
          }
        })
        }
      
        function contacts(elem){
        event.preventDefault(); 
       var action = $(elem).attr('action');
       var urls = action;
       var dataform = $(elem).serialize();
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#confirmModal').modal('show');
              
                 setTimeout(
  function()
  {
      location.reload();
  }, 1000);
             
          }
          ,error:function(data) {
             $('#cancelModal').modal('show');
              $('#error').html('');
   
   $.each(data.responseJSON.errors, function(key,value) {
       console.log(key);
     $('#error').append('<h4 class="title text-center mt-3">'+value+'</h4>');
     
     
 }); 
 
}
        })
        }
  </script>
  @endpush
@stop