@extends('layouts.app')

@section('title', $communaute->name)

@section('content')
    <div class="container-fluid background-r">
        <div class="page-top"></div>
        <div class="container py-3">
            <div class="row">
                <div class="col-md-8">
                    
                    <div class="mb-3">
                        @include('communauty.nav')
                    </div>

                    <div>
                        <!-- Exprimez-vous -->
                        <div class="card border border-light mb-3 px-3 pt-3">
                            
                            {!! Form::open([ 'url' => route('post.communaute', $communaute), 'method' => 'post', 'enctype' => 'multipart/form-data' ] ) !!}
                            
                                <div class="md-form mt-2">
                                    <textarea name="contenu" class="form-control added-padding-2 md-textarea pt-1 contenu" rows="3" placeholder="Exprimez-vous ..." required></textarea>
                                </div>
                                <div class="md-form mt-0 mb-2">
                                
                                    {!! Form::hidden('user_id', Auth::id(), []) !!}
                                    {!! Form::hidden('communauty_id', $communaute->id, []) !!}
                                
                                    <div class="row">
                                        <div class="col-md-8 col-sm-8 col-8 pl-2">
                                            <div class="file-field">
                                                <div class="btn btn-3 rounded btn-sm float-left">
                                                    <span><i class="fa fa-camera" aria-hidden="true"></i></span>
                                                    <input type="file" name="photo" class="photo">
                                                </div>
                                                <div class="file-path-wrapper">
                                                <input class="file-path validate" type="text" placeholder="Téléchargez une image">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-sm-4 col-4 pr-2">
                                            <button type="submit" disabled class="btn btn-3 rounded p-2 px-3 float-right publier">
                                                <span>Publier</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            
                            {!! Form::close() !!}
                        </div>

                        @forelse($posts as $post)
                        <div class="card border border-light mb-3">
                            <div class="card-body px-0">
                                <div class="media d-block d-flex px-3">
                                    <a href="{{ route('membre', $post->user) }}" class="link-text-color-1 mt-0 font-weight-bold waaye-text-color">
                                    <img class="d-flex rounded-circle avatar mb-3 mx-auto" src="{{ $post->user->getPhoto() }}" alt="Avatar" style="width:40px; height:40px;">
                                    </a>
                                    <div class="media-body text-left ml-2 ml-2 ml-0">
                                        <a href="{{ route('membre', $post->user) }}" class="link-text-color-1 mt-0 font-weight-bold waaye-text-color">{{ $post->user->prenom }} {{ $post->user->nom }}</a><br>
                                        <span class="grey-text" style="font-size: 12px;">{{ "Il y'a 10mn" }}</span>
                                    </div>
                                </div>
                                <div class="text-left grey-text px-3 mb-2" style="font-size:14px;">{{ $post->contenu }}</div>
                                @if($post->photo)
                                <div class="view overlay">
                                    <img class="card-img-top rounded-0" src="{{ asset('img/communauties/posts/'.$post->photo) }}" alt="Card image cap">
                                    <div class="mask rgba-white-slight"></div>
                                </div>
                                @endif
                            </div>

                            <div class="rounded-bottom pt-2 pl-3 pr-3 text-left ">
                                <ul class="list-unstyled list-inline font-small mb-2">
                                    <li class="list-inline-item pr-2"><a href="#!" class="grey-text">14 j'aime</a></li>
                                    <li class="list-inline-item pr-2"><a href="#!" id="commentsLink" onclick="showComments('#comments')" class="grey-text">4 commentaires</a></li>
                                </ul>
                                <hr class="my-0">
                            </div>
                            <div class="rounded-bottom pt-2 b-0 pl-3 text-left">
                                <ul class="list-unstyled list-inline mb-2">
                                    <li class="list-inline-item pr-1">
                                        <a href="#!" class="grey-text">
                                            <label for="commenter"><i class="fa fa-comment" aria-hidden="true"></i> Commenter</label>
                                        </a>
                                        
                                    </li>
                                    <li class="list-inline-item pr-1"><a href="#!" class="grey-text"><i class="fa fa-thumbs-up" aria-hidden="true"></i> {{ "J'aime" }}</a></li>
                                </ul>
                            </div>
                            <!-- Card footer -->
                            <div class="rgba-grey-slight text-left pb-0 pt-2 px-3">
                                <form>
                                    <div class="input-group mb-2">
                                        <div class="input-group-btn">
                                            <img class="d-flex rounded-circle avatar mb-0 mr-2" src="{{ $post->user->getPhoto() }}" alt="Avatar" style="width:40px; height:40px;">
                                        </div>
                                        <input type="text" id="commenter" class="form-control rounded py-0 added-margin white grey-text" placeholder="Ajouter un commentaire ...">
                                    </div>
                                </form>
                                <div id="comments" class="" style="display: none">
                                    <div class="media d-block d-flex mb-2">
                                        <img class="d-flex rounded-circle avatar mb-3 mx-auto" src="{{ file_exists(asset('img/profil/'.$communaute->user->photo)) ? asset('img/profil/'.$communaute->user->photo) : asset('img/profil/user-default.png') }}" alt="Avatar" style="width:40px; height:40px;">
                                        <div class="media-body text-left text-md-left ml-2 ml-0">
                                            <a href="" class="mt-0 font-weight-bold waaye-text-color">Caroline Horwitz</a>
                                            <span style="font-size: 12px;" class="grey-tex">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            </span>
                                            <br><span class="grey-text" style="font-size: 12px;">{{ "Il y'a 10mn" }}</span>
                                        </div>
                                    </div>
                                    <div class="media d-block d-flex mb-2">
                                        <img class="d-flex rounded-circle avatar mb-3 mx-auto" src="{{ file_exists(asset('img/profil/'.$communaute->user->photo)) ? asset('img/profil/'.$communaute->user->photo) : asset('img/profil/user-default.png') }}" alt="Avatar" style="width:40px; height:40px;">
                                        <div class="media-body text-left text-md-left ml-2 ml-0">
                                            <a href="" class="mt-0 font-weight-bold waaye-text-color">Caroline Horwitz</a>
                                            <span style="font-size: 12px;" class="grey-tex">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                            </span>
                                            <br><span class="grey-text" style="font-size: 12px;">{{ "Il y'a 10mn" }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                            <p>Soyez le premier à publier dans cette communauté !</p>
                        @endforelse
                        @if($posts)
                            <div class="col-lg-12 col-md-12 mb-4 ">
                                {{ $posts->links() }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="col-md-4">
                    
                    @include('communauty.details')

                    {{--<a class="btn btn-3 rounded p-2 px-3 float-right" href="{{ route('communaute.info', $communaute) }}">
                        <i class="fa fa-info" aria-hidden="true"></i> Informations de la communauté
                    </a>--}}

                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        function showComments(comments){
            //$("commentsLink").click(function(){
                $(comments).fadeIn("slow");
            //});
        }
        
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

        $( ".contenu" ).keyup(function() {
            if($($( ".photo" ).val() != '' || ".contenu" ).val().trim() != ''){
                $('.publier').removeAttr('disabled');
            }else {
                $('.publier').attr('disabled', 'disabled');
            }
        });

        $( ".photo" ).change(function() {
            if($( ".photo" ).val() != '' || $(".contenu" ).val().trim() != ''){
                $('.publier').removeAttr('disabled');
            }else {
                $('.publier').attr('disabled', 'disabled');
            }
        });
    </script>
@endsection