@extends('home::layouts.UserLayout')

@section('title')
    <title>{{env('WEBSITE_TITLE')}} | Competitive Analysis</title>
@endsection
@section('content')
    <style>

        #more0, #more1, #more2 {
            display: none;
        }

        .buttonToA {
            border: none;
            color: blue;
            border-radius: 10%;
        }

        .buttonToA:hover {
            color: black;
        }

    </style>
    <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 ">
                <!--begin::Profile-->
                <!--begin::Row-->
                <div class="row competitor-container">
                    <div class="col leftside-competitor">
                    </div>
                    <div class="col leftside-competitor" id="competitorDiv">
                        {{--                            <div class="card card-custom gutter-b text-center p-3">--}}
                        {{--                                <div class="add-competitor-section">--}}
                        {{--                                    <h3>Competitors List</h3>--}}
                        {{--                                    Here you'll see all the Competitors list filtered by Category--}}
                        {{--                                </div>--}}
                        {{--                                <button type="submit" class="btn font-weight-bolder add-competitor" data-toggle="modal"--}}
                        {{--                                        data-target="#addCompetitorModal">Add Competitor--}}
                        {{--                                </button>--}}
                        {{--                            </div>--}}

                        <div class="card card-custom gutter-b sticky">
                            <div class="competitive-list">
                                        <span class="nav-text">
                                            <i class="fab fa-facebook fa-2x mt-2"></i>
                                        </span>
                                <div class="competitive-list-block" id="facebookCompetitor">
                                    <div>
                                        <p>Competitor List</p>
                                    </div>
                                    <div class="d-flex" id="facebookLoading">
                                        <p>Loading ...</p>
                                    </div>
                                </div>
                            </div>

                            {{--            I'm commenting these becuase we don't want to show it in the Adding pannel                --}}
                            <hr>
                            <div class="competitive-list">
                                <span class="nav-text">
                                    <i class="fab fa-twitter fa-2x"></i>
                                </span>
                                <div class="competitive-list-block" id="twitterCompetitor">
                                    <div class="d-flex">
                                        <p>Competitor List</p>
                                    </div>
                                    <div class="d-flex" id="twitterLoading">
                                        <p>Loading ...</p>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="competitive-list">
                                        <span class="nav-text">
                                            <i class="fab fa-youtube fa-2x"></i>
                                        </span>
                                <div class="competitive-list-block" id="youtubeCompetitor">
                                    <div class="d-flex">
                                        <p> Competitor List</p>
                                    </div>
                                    <div class="d-flex" id="youtubeLoading">
                                        <p>Loading ...</p>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="competitive-list">
                                <span class="nav-text">
                                    <i class="fab fa-instagram fa-2x"></i>
                                </span>
                                <div class="competitive-list-block" id="instagramCompetitor">
                                    <div class="d-flex">
                                        <p> Competitor List</p>
                                    </div>
                                    <div class="d-flex" id="instagramLoading">
                                        <p>Loading ...</p>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="competitive-list">
                                        <span class="nav-text">
                                            <i class="fab fa-linkedin fa-2x"></i>
                                        </span>
                                <div class="competitive-list-block" id="linkedinCompetitor">
                                    <div class="d-flex">
                                        <p> Competitor List</p>
                                    </div>
                                    <div class="d-flex" id="linkedinLoading">
                                        <p>Loading ...</p>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="competitive-list">
                                        <span class="nav-text">
                                            <i class="fab fa-reddit fa-2x"></i>
                                        </span>
                                <div class="competitive-list-block" id="redditCompetitor">
                                    <div class="d-flex">
                                        <p> Competitor List</p>
                                    </div>
                                    <div class="d-flex" id="redditLoading">
                                        <p>Loading ...</p>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn font-weight-bolder add-competitor" data-toggle="modal"
                                    data-target="#addCompetitorModal">Add Competitor
                            </button>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card p-5 mb-8">
                            <form class="d-flex align-items-center">
                                <div class="inline-flex flex-wrap pr-5">
                                    <div class="competitor-overview">
                                        <button type="button" class="btn active fbButtonDIv" id="facebookTitle"
                                                onclick="activateMe('#facebookTitle')">
                                            <span><i class="fab fa-facebook"></i></span>
                                            <span>facebook</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="inline-flex flex-wrap px-5">
                                    <div class="competitor-overview">
                                        <button type="button" class="btn" id="twitterTitle"
                                                onclick="activateMe('#twitterTitle')">
                                            <span><i class="fab fa-twitter"></i></span>
                                            <span>Twitter</span>
                                        </button>
                                    </div>
                                </div>

                                <div class="inline-flex flex-wrap px-5">
                                    <div class="competitor-overview">
                                        <button type="button" class="btn" id="youTubeTitle"
                                                onclick="activateMe('#youTubeTitle')">
                                            <span><i class="fab fa-youtube"></i></span>
                                            <span>YouTube</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="inline-flex flex-wrap px-5">
                                    <div class="competitor-overview">
                                        <button type="button" class="btn" id="instagramTitle"
                                                onclick="activateMe('#instagramTitle')">
                                            <span><i class="fab fa-instagram"></i></span>
                                            <span>Instagram</span>
                                        </button>
                                    </div>
                                </div>

                                <div class="inline-flex flex-wrap px-5">
                                    <div class="competitor-overview">
                                        <button type="button" class="btn" id="linkedinTitle"
                                                onclick="activateMe('#linkedinTitle')">
                                            <span><i class="fab fa-linkedin"></i></span>
                                            <span>LinkedIn</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="inline-flex flex-wrap px-5">
                                    <div class="competitor-overview">
                                        <button type="button" class="btn" id="redditTitle"
                                                onclick="activateMe('#redditTitle')">
                                            <span><i class="fab fa-reddit"></i></span>
                                            <span>Reddit</span>
                                        </button>
                                    </div>
                                </div>
                                <!-- datepicker -->
                                <div class="ml-auto">
                                    <div class="input-icon analytics-date-range-input" id='analytics-date-range' style='width: 270px;'>
                                        <input class="form-control form-control-solid h-auto py-4 rounded-lg font-size-h6 "
                                               type="text" id="analytics-date-range-input"
                                               name="datepicker" autocomplete="off" placeholder="Select date range"/>
                                        <span><i class="far fa-calendar-alt"></i></span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card mb-5 p-5 competitor-filter-block" id="vsDiv">
                            <div class="text-bold text-center mb-5">Here You'll see only limited competitors whose data
                                is available to Make Analysis
                            </div>
                            <div class="text-bold text-center mb-5" id="updatingId" style="display: none"><h4>Updating
                                    content please wait ...</h4>
                            </div>
                            <div id="competitorSelectors">
                                <button type="button" class="rounded-pills mr-3 competitor-filter-btn"
                                        id="competitorVsLoader">
                                    <span><img src="../media/icons/user.png" alt="user-image"></span>
                                    <span>Loading .... </span>
                                </button>
                            </div>
                        </div>

                    </div>
                    <!--end::Row-->
                    <!--end::Profile-->
                </div>
                <!--end::Container-->
            </div>
            <!--end::Entry-->
        </div>
        <!--end::Content-->

    </div>

    <!-- begin::Add competitor modal-->
    <div class="modal fade" id="addCompetitorModal" tabindex="-1" role="dialog"
         aria-labelledby="addCompetitorModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCompetitorModalLabel">Add Competitor</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <!--begin::Form group-->
                    <div class="form-group">
                        <span>For Proper reference please change the platform and see the reference</span>
                        <div style="float: right; margin-bottom: 10px"><a id="referenceId"
                                                                          href="http://prntscr.com/1seyz0b"
                                                                          target="_blank" style="color: blue">Click For
                                Reference</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-icon">
                            <input class="form-control form-control-solid h-auto pl-7 py-7 rounded-lg font-size-h6"
                                   type="text" id="competitorId"
                                   name="" autocomplete="off" placeholder="Competitor Page Name"/>
                            <!-- <span><i class="fas fa-chalkboard-teacher"></i></span> -->
                        </div>
                    </div>
                    <!--end::Form group-->
                    <!--begin::Form group-->
                    <div class="form-group">
                        <select class="form-control form-control-solid form-control-lg h-auto py-7 rounded-lg font-size-h6"
                                id="networkTypes">
                            <option disabled>Social media platform list</option>
                            <option value="facebook" selected>Facebook</option>
                            <option value="instagram">Instagram</option>
                            <option value="twitter">Twitter</option>
                            <option value="youtube">YouTube</option>
                            <option value="linkedin">LinkedIn Public Account</option>
                            <option value="reddit">Reddit</option>
                        </select>
                    </div>
                    <!--end::Form group-->
                    <div class="d-flex justify-content-center">
                        <a onclick="addCompetitor()" type="button"
                           class="btn text-primary font-weight-bolder font-size-h6 px-4 py-4 mr-3 my-3"
                           data-dismiss="modal">Add</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end::add competitor modal-->

    <!-- begin:: Delete addCompetitorModal -->
    <div class="modal fade" id="deleteCompetitorModal" tabindex="-1" role="dialog"
         aria-labelledby="deleteCompetitorModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteCompetitorModalLabel">Delete Competitor</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center">
                        <span class="font-weight-bolder font-size-h4 ">Are you sure wanna delete this Competitor??</span>
                    </div>
                    <div class="d-flex justify-content-center">
                        <a onclick="deleteSelected()" type="button"
                           class="btn text-danger font-weight-bolder font-size-h6 px-4 py-4 mr-3 my-3"
                           data-dismiss="modal"
                        >Delete it!!</a>
                        <a href="javascript:" type="button"
                           class="btn font-weight-bolder font-size-h6 px-4 py-4 mr-3 my-3"
                           data-dismiss="modal">No thanks.</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--    If Competitor Data is there  Then this div  --}}

    <!-- end::Delete account modal-->
@endsection

@section('scripts')
    <script !src="">
        let RECENT_PLATFORM = '';
        let RECENT_ID = '';
        let userId = '