@extends('app')
@push('styles')
    <link rel="stylesheet" href="{{asset('css/post.css')}}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
@endpush



<div class="container">

    @if(session('success'))
        <br>
        <div class="alert alert-success">
            <ul>
                <li>{{ session('success') }}</li>
            </ul>
        </div>
    @endif


    @if(count($errors)>0)
        <br>
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>
                        {{$error}}
                    </li>
                @endforeach
            </ul>
        </div>
    @endif


            <br>
            <br>
            <br>
            <br>
        <div class="row">

        <div class="col-lg-6">
                <form method="post" class="form-horizontal" enctype="multipart/form-data">
                    @csrf
                    <div class="widget widget-shadow text" style="margin-top: 1em">
                        <div class="widget-body ">


                            <div class="form-group">
                                <label for="select" style="color: black; font-weight: normal">Select Platform</label>
                                <div class="col-sm-12">
                                    <select class="form-control select" id="select" name="channel[]" data-live-search="true" multiple>
                                        <option value="linkedin" {{empty(\Auth::user()->social()->first()->linkedin_access_token) ? 'disabled' :''}}>LinkedIn</option>
                                        <option value="twitter" {{empty(\Auth::user()->social()->first()->twitter_access_token) ? 'disabled' :''}}>Twitter</option>
                                        <option value="facebook" {{empty(\Auth::user()->social()->first()->fb_access_token) ? 'disabled' :''}}>Facebook</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label style="color: black; font-weight: normal">Media <em>(optional)</em></label>
                                <div class="col-sm-12">
                                    <input class="form-control" type="file" name="media">
                                </div>

                            </div>

                            <div class="input-group">
                                <textarea type="text" rows="6" id="post"  maxlength="1000" name="message" class="form-control" placeholder="Type your post" aria-describedby="basic-addon2"></textarea>
                                <span class="input-group-addon" id="basic-addon2">Message</span>
                            </div>

                            <div class="form-group" id="for_facebook_account">

                            </div>

                            <div class="form-group" id="for_linkedin_account">

                            </div>
                        </div>

                        <div class="widget-footer">
                            <div class="row no-space" style="height: 3em">
                                <button type="submit" class="btn btn-primary btn-outline" style="float:right;margin-right: 2em"> Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

        <div class="col-lg-6">
            {{--Simulate Facebook--}}
            <div class="col-xs-12 col-sm-12" id="new_status">
                <ul class="navbar-nav col-xs-12" id="post_header" role="navigation">
                    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span>Update Status</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-picture"></span>Add Photos/Video</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-th"></span>Create Photo Album</a></li>
                </ul>
                <div class="col-xs-12" id="post_content">
                    <img alt="profile picture" class="col-xs-1" src="{{asset('UI/5b072f20c08c1.png')}}">
                    <div class="textarea_wrap">
                        <label for="replace"></label><textarea class="col-xs-11 replace" name="message" id="replace" placeholder="What's on your mind?"></textarea>
                    </div>
                </div>
                <div class="col-xs-12" id="post_footer">
                    <ul class="navbar-nav col-xs-7">
                        <li><a href="#"><span class="fa fa-camera" style="color:#212121"></span></a></li>
                        <li><a href="#"><span class="fa fa-user"></span></a></li>
                        <li><a href="#"><span class="fa fa-edit" style="color:#212121"></span></a></li>
                        <li><a href="#"><span class="fa fa-map-marker"></span></a></li>
                    </ul>
                    <div class="col-xs-5">
                        <button class="btn btn-default"><span class="glyphicon glyphicon-cog"></span>Custom<span class="caret"></span></button>
                        <button class="btn btn-primary">Post</button>
                    </div>
                </div>
            </div>
            <br>

            {{--Simulate Linked In--}}
            <div class="col-xs-12 col-sm-12" id="new_status">
                <ul class="navbar-nav col-xs-12" id="post_header" role="navigation">
                    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span>Update Status</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-picture"></span>Add Photos/Video</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-th"></span>Create Photo Album</a></li>
                </ul>
                <div class="col-xs-12" id="post_content">
                    <img alt="profile picture" class="col-xs-1" src="{{asset('UI/5b072f20c08c1link.png')}}">
                    <div class="textarea_wrap">
                        <label for="replace"></label><textarea class="col-xs-11 replace" name="message" id="replace" placeholder="What's on your mind?"></textarea>
                    </div>
                </div>
                <div class="col-xs-12" id="post_footer">
                    <ul class="navbar-nav col-xs-7">
                        <li><a href="#"><span class="fa fa-camera" style="color:#212121"></span> Like</a></li>
                        <li><a href="#"><span class="fa fa-user"></span> Comment</a></li>
                        <li><a href="#"><span class="fa fa-edit" style="color:#212121"></span> Share</a></li>
                    </ul>
                </div>
            </div>
            {{----}}

            <br>

            {{--Simulate Twitter--}}
            <div class="col-xs-12 col-sm-12" id="new_status">
                <div class="col-xs-12" id="post_content">
                    <img alt="profile picture" class="col-xs-1" src="{{asset('UI/5b072f1c21cb2.png')}}">
                    <div class="textarea_wrap">
                        <label for="replace"></label><textarea class="col-xs-11 replace" name="message" id="replace" placeholder="What's on your mind?">

                                    </textarea>

                    </div>

                </div>

            </div>
            {{----}}

        </div>

    </div>




</div>





@push('scripts')

    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script>
        let site = "{{!empty(\Illuminate\Support\Facades\Auth::user()->website_url) ? \Illuminate\Support\Facades\Auth::user()->website_url : 'https://mtnmessenger.com' }}";
        $('.select').selectpicker();
        const local = '{{route('social.facebook.accounts')}}';


        $(document).ready(function () {

            $('#select').on('change',function () {
                let value = $(this).val();
                let contents =  value.indexOf('facebook');
                let linkedIn = value.indexOf('linkedin');
                if(contents !== -1){
                  $.get(local,function (data) {
                      console.log(data.length);
                      if (data.length > 0) {
                          $('#for_facebook_account').html(
                              '<label for="acct" style="color: black; font-weight: normal">Select Facebook Account to post</label>' +
                              ' <div class="col-sm-12">' +
                              '  <select class="form-control" id="acct" name="f_acct[]" multiple required>' +
                              '  </select>' +
                              '</div>');

                      }
                      $.each(data, function (i) {
                          console.log(data[i].id);
                          $('#acct').append('<option value="' + data[i].fb_access_token + '">' + data[i].facebook_name + '</option>');
                      })
                  })
                }
                else {
                    $('#for_facebook_account').html("");
                }

                if(linkedIn !== -1){
                  $.get('{{route('social.linkedin.accounts')}}',function (data) {
                      console.log(data.length);
                      if (data.length > 0) {
                          $('#for_linkedin_account').html(
                              '<label for="acct" style="color: black; font-weight: normal">Select LinkedIn Account </label>' +
                              ' <div class="col-sm-12">' +
                              '  <select class="form-control" id="l_acct" name="l_acct[]" multiple required>' +
                              '  </select>' +
                              '</div>');

                      }
                      $.each(data, function (i) {
                          console.log(data);
                          $('#l_acct').append('<option value="' + data[i].linkedin_person_id + '">' + data[i].linkedin_name + '</option>');
                          $('#l_acct').append('<option value="' + data[i].linked_in_page_id + '">' + data[i].linked_page_name + '</option>');
                      })
                  })
                }
                else {
                    $('#for_linkedin_account').html("");
                }
            });


            $('#post').on('keyup',function () {
                let value = $(this).val();
                $('.replace').html(value);
            })


        });
    </script>
    <script>
        let td = '{{ !empty($trial) ? \Carbon\Carbon::parse($trial->created_at)->addDays(7) : (!empty($expiry) ? $expiry->expiry_date : date('Y-m-d h:i:s')) }}';

        let countDownDate = new Date(td).getTime();

        let x = setInterval(function () {

            const now = new Date().getTime();

            const distance = countDownDate - now;
            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s <br><small style='color:#ffc107;font-size: 0.5em'>until expiration</small>";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
            }
        }, 1000);
    </script>

@endpush