@extends('home::layouts.UserLayout')
@section('title')
    <title>{{env('WEBSITE_TITLE')}} | TikTok Feeds</title>
@endsection
@section('links')
    <link rel="stylesheet" type="text/css" href="/plugins/custom/dropify/dist/css/dropify.min.css"/>
    <link rel="stylesheet" type="text/css" href="{{asset('plugins/custom/emojionearea/css/emojionearea.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="/css/images-grid.css"/>
@endsection
@section('content')
    <div class="content  d-flex flex-column flex-column-fluid" id="Sb_content">

        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class=" container-fluid ">

                <div class="card p-10 mb-10 d-flex">
                    <!--begin::Profile-->
                    <div class="">
                                                <div class="row">
                            <div class="col-md-4" id="tiktokProfileDiv">
                                @if($message != 'No Tik-tok Account has been  added yet! or Account has locked' )
                                <div class="card p-5 position-relative overflow-hidden rounded  ribbon ribbon-top ribbon-ver">
                                    <div class="ribbon-target bg-tiktok" style="top: -2px; right: 20px;">
                                        <i class="fab fa-tiktok"></i>
                                    </div>
                                    <!--begin::User-->
                                        <div class="d-flex align-items-center">
                                            <div class="symbol symbol-60 symbol-xxl-100 mr-5 align-self-start align-self-xxl-center">
                                                <div class="symbol-label" style="background-image:url('{{$accounts[0]->profile_pic_url}}')">
                                                </div>
                                                <i class="symbol-badge bg-success"></i>
                                            </div>
                                            <div>
                                                <a
                                                   class="font-weight-bolder font-size-h5 text-hover-primary" target="_blank">
                                                    {{$accounts[0]->user_name}}
                                                </a>
                                            </div>
                                        </div>

                                    <!--end::User-->
                                </div>
                                @endif
                            </div>
                            <div class="col-md-4">

                            </div>
                            <div class="col-md-4">
                                <div class="sticky ml-auto" data-sticky="true" data-margin-top="140px" data-sticky-for="1023"
                                     data-sticky-class="kt-sticky">
                                    <!-- begin:Accounts list -->
                                    <div class="form-group">
                                        <select
                                                class="form-control form-control-solid form-control-lg h-auto py-4 rounded-lg font-size-h6"
                                                onchange="call(this)">
                                            @if($message=== 'success')
                                                <script>
                                                    var accounId = ;
                                                </script>
                                                <option disabled>Select Account</option>
                                                @foreach($accounts as $data)
                                                    <option
                                                            value="{{$data->account_id}}">{{$data->user_name}}
                                                    </option>
                                                @endforeach
                                            @elseif($message=== 'failed')
                                                <option selected value="failed"> Sorry some error ,occurred please reload page
                                                </option>
                                            @elseif($message=== 'No Tik-tok Account has been  added yet! or Account has locked')
                                                <option selected value="failed">No TikTok Account has been added yet! or
                                                    Account has locked
                                                </option>
                                            @else
                                                <option selected value="failed"> {{$message}}
                                                </option>
                                            @endif
                                        </select>
                                    </div>
                                    <!-- end:Accounts list -->

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" id="tiktokFeeds">
                                                @if($message=== 'success')
                    @if(count($accounts)>0)
                        @if($feeds['code']=== 200)
                            <!--begin::Text-->

                                @if(isset($feeds['data']->videos))
                                    <script>
                                        var feedsLength =