@php
    use Carbon\Carbon;
@endphp

@extends('layouts.root')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
@section('styles')

@endsection

@section('root-content')

<div class="dashboard-widg-bar d-block">


    <!-- Header Wrap -->
    <div class="row">
        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8">
            <div class="card">
                <div class="card-body">
                    <div class="jobstock-grid-blog">
                        <div class="jobstock-grid-blog-thumb">
                            <img src="{{ asset('storage/' . $article->image) }}" class="img-fluid" style="height: 300px;width:1200px;">
                        </div>
                        <div class="jobstock-grid-blog-body">
                            <div class="jobstock-grid-body-header">
                                <div class="jobstock-grid-posted"><span>{{ Carbon::parse($article->created)->diffForHumans() }}</span></div>
                                <div class="jobstock-grid-title">
                                    <div class="post-top-meta mb-2">
                                        <span class="pst-date label text-danger bg-light-primary">
                                            {{ $article->theme ? $article->theme->libelle : 'Thematique non défini' }}
                                        </span>
                                    </div>
                                    &nbsp;
                                    <h4>
                                        <a href="{{ route('root.edit_article', ['id' => $article->id]) }}">
                                            {{ $article->libelle }}
                                        </a>
                                    </h4>
                                </div>
                            </div>
                            <div class="jobstock-grid-body-middle">
                                <p>{!! $article->description !!}</p>
                                &nbsp;
                                <div class="post-top-meta mb-2">
                                    <span class="pst-date label text-danger bg-light-danger">
                                        <i class="fa-solid fa-clock"></i>
                                        {{ Carbon::parse($article->created)->diffForHumans() }}
                                    </span>
                                </div>
                            </div>

                            <br>

                            <div class="pst-foot-roiu">
                                <div class="post-share">
                                    <ul class="list">
                                        <li><i class="fa-solid fa-share-nodes"></i></li>
                                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                        <li><a href="#"><i class="fab fa-tumblr"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <!-- Blog Comment -->
                    <div class="blog-details single-post-item format-standard border">
                        <div class="post-details">

                            <div class="comment-area">
                                <div class="all-comments">
                                    <h4 class="comments-title">
                                        Commentaires récents
                                        <strong>
                                            ({{ $latest_commentaires->count() }})
                                        </strong>
                                    </h4>
                                    <div class="comment-list">
                                        <!-- row Start -->
					                    <div class="row justify-content-start gx-3 gy-4">
                                            @if($latest_commentaires->count() > 0)
                                                @foreach($latest_commentaires as $item)
                                                <!-- Single Item -->
                                                <div class="col-xl-12 col-lg-12 col-md-12">
                                                    <div class="jbs-list-box border">
                                                        <div class="jbs-list-head">
                                                            <div class="jbs-list-head-thunner">
                                                                <div class="jbs-list-emp-thumb">
                                                                    <a href="{{ route('root.edit_commentaire', ['id' => $item->id]) }}">
                                                                        <figure>
                                                                            <img src="{{ $item->user ? $item->user->avatar : URL::to('storage/avatars/avatar.png') }}" class="img-fluid" alt="">
                                                                        </figure>
                                                                    </a>
                                                                </div>
                                                                <div class="jbs-list-job-caption">
                                                                    <div class="jbs-job-types-wrap">
                                                                        <span class="label text-success bg-light-success">
                                                                            {{ $item->article ? $item->article->theme->libelle : 'Non défini' }}
                                                                        </span>
                                                                        &nbsp;
                                                                        <span class="label text-success bg-light-success">
                                                                            {{ $item->nom_complet ? $item->nom_complet : $item->user->name }}
                                                                        </span>
                                                                        &nbsp;
                                                                        <span class="label text-success bg-light-success">
                                                                            {{ $item->email ? $item->email : $item->user->email }}
                                                                        </span>
                                                                        &nbsp;
                                                                        <span class="label text-success bg-light-success">
                                                                            {{ $item->phone ? $item->phone : $item->user->phone }}
                                                                        </span>
                                                                    </div>
                                                                    <div class="jbs-job-mrch-lists">

                                                                        <div class="single-mrch-lists">
                                                                            <a href="{{ route('root.edit_commentaire', ['id' => $item->id]) }}" class="jbs-job-title">
                                                                                {{ $item->article ? $item->article->libelle : 'Non défini' }}
                                                                            </a>
                                                                        </div>
                                                                        <div class="single-mrch-lists">
                                                                            <span>{!! $item->message !!}</span>
                                                                        </div>
                                                                        <div class="single-mrch-lists text-primary">
                                                                            <i class="fa-solid fa-clock text-primary"></i>
                                                                            &nbsp;
                                                                            {{ Carbon::parse($item->created)->diffForHumans() }}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="jbs-list-head-last">
                                                                @if($item->active == 1)
                                                                <a href="{{ route('root.destroy_commentaire_article', ['id' => $item->id]) }}" class="btn btn-md btn-light-success px-3 me-2">
                                                                    <i class="fa-solid fa-trash"></i>
                                                                </a>
                                                                @else
                                                                <a href="{{ route('root.active_commentaire_article', ['id' => $item->id]) }}" class="btn btn-md btn-light-warning px-3 me-2">
                                                                    <i class="fa-solid fa-check"></i>
                                                                </a>
                                                                @endif

                                                                <a href="{{ route('root.edit_commentaire', ['id' => $item->id]) }}" target="_blank" class="btn btn-md btn-light-success px-3">
                                                                    <i class="fa-solid fa-edit"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                            @else
                                            <!-- Single Item -->
                                            <div class="col-xl-12 col-lg-12 col-md-12">
                                                <div class="jbs-list-box border">
                                                    <div class="jbs-list-head">
                                                        <div class="jbs-list-head-thunner">
                                                            <div class="jbs-list-emp-thumb">
                                                                <a href="#">
                                                                    <figure>
                                                                        <img src="{{ URL::to('storage/avatars/avatar.png') }}" class="img-fluid" alt="">
                                                                    </figure>
                                                                </a>
                                                            </div>
                                                            <div class="jbs-list-job-caption">
                                                                <div class="jbs-job-types-wrap">
                                                                    <span class="label text-success bg-light-success">
                                                                        BLOG JOBBO
                                                                    </span>
                                                                </div>
                                                                <div class="jbs-job-mrch-lists">

                                                                    <div class="single-mrch-lists">
                                                                        <a href="#" class="jbs-job-title">
                                                                            Quoi de neuf sur le blog JOBBO ?
                                                                        </a>
                                                                    </div>
                                                                    <div class="single-mrch-lists">
                                                                        <span>Visiblement aucun commentaire pour le moment !!!</span>
                                                                    </div>
                                                                    <div class="single-mrch-lists text-primary">
                                                                        <i class="fa-solid fa-clock text-primary"></i>
                                                                        &nbsp;
                                                                        {{ Carbon::now() }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <br><br>
                                <div class="comment-box submit-form">
                                    <h3 class="reply-title">Laisser un Commentaire</h3>
                                    <div class="comment-form">
                                        <form action="{{ route('root.store_commentaire_article') }}" method="POST">

                                            @csrf

                                            <input type="hidden" name="user_id" value="{{ Auth::user() ? Auth::user()->id : 1 }}" />
                                            <input type="hidden" name="article_id" value="{{ $article->id }}" />
                                            <input type="hidden" name="code" value="{{ Carbon::now()->timestamp }}" />
                                            <input type="hidden" name="active" value="1" />

                                            <div class="row">
                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" placeholder="Votre Nom Complet" name="nom_complet" value="{{ Auth::user() ? Auth::user()->name : old('nom_complet') }}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <input type="email" class="form-control" placeholder="Votre Email" name="email" value="{{ Auth::user() ? Auth::user()->email : old('email') }}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 col-md-6 col-sm-12">
                                                    <div class="form-group">
                                                        <input type="phone" class="form-control" placeholder="Votre Téléphone" name="phone" value="{{ Auth::user() ? Auth::user()->phone : old('phone') }}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        <textarea name="message" id="tinymce" class="form-control" cols="30" rows="6" placeholder="Votre message...."></textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        <button type="submit" class="btn btn-primary">Soumettre</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">


            <div class="pg-side-groups">

                <div class="pg-side-block">
                    <div class="pg-side-block-head">
                        <div class="pg-side-left">
                            <div class="pg-side-thumb">
                                <img src="{{ $article->user ? $article->user->avatar : 'storage/avatars/avatar.png' }}" class="img-fluid circle" alt="">
                            </div>
                        </div>
                        <div class="pg-side-right">
                            <div class="pg-side-right-caption">
                                <h4>{{ $article->user ? $article->user->name : 'Webmaster' }}</h4>
                                <span><i class="fa-solid fa-location-dot me-2"></i>{{ $article->user->adresse ? $article->user->adresse : 'Libreville, Gabon' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="pg-side-block-body">
                        <div class="pg-side-block-info">
                            <div class="vl-elfo-group">
                                <div class="vl-elfo-icon"><i class="fa-solid fa-phone-volume"></i></div>
                                <div class="vl-elfo-caption"><h6>Contact</h6><p>(+241) 74 83 56 31</p></div>
                            </div>
                            <div class="vl-elfo-group">
                                <div class="vl-elfo-icon"><i class="fa-regular fa-envelope"></i></div>
                                <div class="vl-elfo-caption"><h6>Email</h6><p>contact@jobbo.com</p></div>
                            </div>
                            <div class="vl-elfo-group">
                                <div class="vl-elfo-icon"><i class="fa-solid fa-globe"></i></div>
                                <div class="vl-elfo-caption"><h6>Site web</h6><p>https://www.jobbo.com</p></div>
                            </div>
                        </div>
                        <div class="pg-side-block-buttons">
                            <div class="single-button"><a href="{{ route('site.contact') }}" class="btn fw-medium btn-primary full-width">
                                <i class="fa-solid fa-comments me-2"></i>Laissez nous un Message</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>
    <!-- Header Wrap -->

</div>



@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->

<script>
    document.getElementById('imageUpload').addEventListener('change', function(event) {
        var reader = new FileReader();
        var file = event.target.files[0];

        if (file) {
            reader.onload = function(e) {
                document.getElementById('image').src = e.target.result;
            }

            reader.readAsDataURL(file);
        }
    });
</script>
@endsection