@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 $key => $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">
                                    <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">
                                        @can('admin-post-communauty', $post)
                                            <a href="#!" class="black-text float-right" id="{{ $key }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                            </a>
                                            <div class="dropdown-menu pl-2" aria-labelledby="{{ $key }}">
                                                <a class="link-text-color-1 py-0"  onclick="event.preventDefault(); document.getElementById('{{ 'delete'.$key }}').submit();">
                                                    <i class="fa fa-trash" aria-hidden="true"></i> Supprimer
                                                </a>
                                            </div>
                                            {!! Form::open([ 'url' => route('supprimer-post', $post), 'method' => 'delete', 'id' => 'delete'.$key ]) !!}
                                                {{ csrf_field() }}
                                            {!! Form::close() !!}
                                        @endcan

                                        <a href="{{ route('membre', $post->user) }}" class="link-text-color-1 mt-0 font-weight-bold">{{ $post->user->prenom }} {{ $post->user->nom }}</a><br>
                                        <span class="grey-text" style="font-size: 12px;">
                                        {{ \Carbon\Carbon::createFromTimeStamp(strtotime($post->created_at))->diffForHumans() }}
                                        </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>
                            
                            <!-- Card footer -->
                            <div class="rgba-grey-slight text-left pb-0 pt-2 px-3">
                                <form id="formComment" method="POST" action="{{route('addcomment',$post)}}">
                                
                                    <div class="input-group mb-2">
                                        <div class="input-group-btn">
                                            <img class="d-flex rounded-circle avatar mb-0 mr-2" src="{{ Auth::user()->getPhoto() }}" alt="Avatar" style="width:40px; height:40px;">
                                        </div>
                                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                                        <input type="text" id="commenter" name="comment" class="form-control rounded py-0 added-margin white grey-text" placeholder="Ajouter un commentaire ...">
                                        <button type="submit" class="btn btn-2 my-0 mr-0 rounded px-3">
                                        <i class="fa fa-send" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                
                                </form>

                                @foreach($post->comments as $key1 => $comment)
                                    <div class="media d-block d-flex">
                                        <a href="{{ route('membre', $comment->user) }}">
                                        <img class="d-flex rounded-circle avatar mb-3 mx-auto" src="{{ $comment->user->getPhoto() }}" alt="Avatar" style="width:40px; height:40px;">
                                        </a>
                                        <div class="media-body text-left ml-2 ml-2 ml-0">
                                            <div class="row">
                                                <div class="col-md-11">
                                                    <a href="{{ route('membre', $comment->user) }}" class="link-text-color-1 mt-0 font-weight-bold">
                                                        {{ $comment->user->prenom }} {{ $comment->user->nom }}
                                                    </a>
                                                    <span class="text-left blue-grey-text" style="font-size:14px; padding-left:05px;">{{$comment->comment}}</span>
                                                    <div class="text-left blue-grey-text">
                                                        <span class="grey-text" style="font-size: 12px;">
                                                            {{ \Carbon\Carbon::createFromTimeStamp(strtotime($comment->created_at))->diffForHumans() }}
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-1 col-sm-1 col-md-1 text-right">
                                                    @can('admin-communauty-comment', $comment)
                                                        <a href="#!" class="black-text" id="{{ $key1 }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                                        </a>
                                                        <div class="dropdown-menu pl-2" aria-labelledby="{{ $key1 }}">
                                                            <a class="link-text-color-1 py-0"  onclick="event.preventDefault(); document.getElementById('{{ 'deletec'.$comment->id }}').submit();">
                                                                <i class="fa fa-trash" aria-hidden="true"></i> Supprimer
                                                            </a>
                                                        </div>
                                                        {!! Form::open([ 'url' => route('supprimer-commentaire', $comment), 'method' => 'delete', 'id' => 'deletec'.$comment->id ]) !!}
                                                            {{ csrf_field() }}
                                                        {!! Form::close() !!}
                                                    @endcan
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </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