@php
    use Carbon\Carbon;
@endphp

@extends('layouts.site')

@section('scripts')

@endsection

@section('page-content')

<!-- ============================ Page Title Start================================== -->
<div class="page-bg">
    <div class="blog-thumb">
        <img src="{{ Storage::url($article->image) }}" style="width: 3200px;height: 900px;" alt="">
    </div>
</div>
<!-- ============================ Page Title End ================================== -->

<!-- ============================ Agency List Start ================================== -->
<section class="gray-simple">

    <div class="container">

        <!-- row Start -->
        <div class="row">

            <!-- Blog Detail -->
            <div class="col-lg-8 col-md-12 col-sm-12 col-12">
                <div class="blog-details single-post-item format-standard mb-4">
                    <div class="post-details">

                        <div class="post-top-meta mb-2">
                            <span class="pst-cats label text-success bg-light-success me-2">{{ $article->theme->libelle ?? 'JOBBO' }}</span>
                            <span class="pst-date label text-danger bg-light-danger">{{ \Carbon\Carbon::parse($article->created_at)->format('d M Y') }}</span>
                        </div>
                        <h3 class="post-title lh-base">{{ $article->libelle }}</h3>
                        <p>{!! $article->description !!}</p>

                    </div>

                    <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-vk"></i></a></li>
                                <li><a href="#"><i class="fab fa-tumblr"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Blog Comment -->
                <div class="blog-details single-post-item format-standard">
                    <div class="post-details">

                        <div class="comment-area">

                            @if($commentaires->count() > 0)
                            <div class="all-comments">
                                <h3 class="comments-title"> Commentaires [<b class="text-orange">{{ $commentaires->count() }}</b>]</h3>
                                <div class="comment-list">
                                    <ul>
                                        @foreach($commentaires as $item)
                                        <li class="single-comment">
                                            <article>
                                                <div class="comment-author">
                                                    <img src="{{ $item->user->avatar }}" class="img-fluid circle" alt="">
                                                </div>
                                                <div class="comment-details">
                                                    <div class="comment-meta">
                                                        <div class="comment-left-meta">
                                                            <h4 class="author-name">{{ $item->user->name }}</h4>
                                                            <div class="comment-date">{{ $item->user->role }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="comment-text">
                                                        <p>{!! $item->message !!}</p>
                                                    </div>
                                                </div>
                                            </article>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>

                            </div>
                            @endif

                            @if(Auth::user())
                            <div class="comment-box submit-form">
                                <h3 class="reply-title">Laisser un Commentaire</h3>



                                <div class="comment-form">
                                    <form method="POST" action="{{ route('site.blogcomment') }}">

                                        @csrf

                                        <input type="hidden" name="user_id" value="{{ Auth::user()->id  }}" />
                                        <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">
                                                @if ($errors->any())
                                                    <div class="alert alert-warning alert-dismissible alert-alt solid fade show">
                                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
                                                        </button>
                                                        <ul>
                                                            @foreach ($errors->all() as $error)
                                                                <li>{{ $error }}</li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endif

                                                @if (Session::get('success'))
                                                    <div class="alert alert-success alert-dismissible alert-alt solid fade show">
                                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
                                                        </button>
                                                        Succès : <strong>{{ ' ' . Session::get('success') }}</strong>
                                                    </div>
                                                @endif

                                                @if (Session::get('failed'))
                                                    <div class="alert alert-danger alert-dismissible alert-alt solid fade show">
                                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close">
                                                        </button>
                                                        Attention : <strong>{{ ' ' . Session::get('failed') }}</strong>
                                                    </div>
                                                @endif
                                            </div>

                                            <br>
                                            <div class="col-lg-6 col-md-6 col-sm-12">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" placeholder="Votre Nom Complet" name="nom_complet" value="{{ Auth::user()->name ? 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()->email ? Auth::user()->email : old('email') }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="form-group">
                                                    <input type="phone" class="form-control" placeholder="Votre Numero de Telephone" name="phone" value="{{ Auth::user()->phone ? 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" class="form-control" cols="30" rows="6" placeholder="Votre commentaire ici....">{{ old('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>
                            @else
                            <div class="comment-box submit-form">
                                <h3 class="reply-title">Laisser un Commentaire</h3>
                                <div class="comment-form">
                                    <form action="">

                                        @csrf

                                        <div class="row">

                                            <br>
                                            <div class="col-lg-6 col-md-6 col-sm-12">
                                                <div class="form-group">
                                                    <input type="text" readonly class="form-control" placeholder="Votre Nom Complet" name="nom_complet" value="{{ old('nom_complet') }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-12">
                                                <div class="form-group">
                                                    <input type="email" readonly class="form-control" placeholder="Votre Email" name="email" value="{{ old('email') }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="form-group">
                                                    <input type="email" readonly class="form-control" placeholder="Votre Email" name="email" value="{{ old('phone') }}">
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="form-group">
                                                    <textarea name="message" readonly class="form-control" cols="30" rows="6" placeholder="Votre commentaire ici....">{{ old('message') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <p>
                                                    <strong class="text-orange">NB : </strong> Vous devez etre connecter pour pouvoir laisser un commentaire !
                                                </p>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <div class="form-group">
                                                    <a href="#" class="btn btn-primary">Soumettre</a>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>


            </div>

            <!-- Single blog Grid -->
            <div class="col-lg-4 col-md-12 col-sm-12 col-12">
                <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->avatar }}" class="img-fluid circle" alt=""></div>
                            </div>
                            <div class="pg-side-right">
                                <div class="pg-side-right-caption">
                                    <h4>{{ $article->user->name ?? 'Webmaster' }}</h4>
                                    <span><i class="fa-solid fa-location-dot me-2"></i>{{ $article->user->adresse ?? 'Akanda, 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="bi bi-telephone"></i></div>
                                    <div class="vl-elfo-caption"><h6>Téléphone</h6><p>(+241) {{ $article->user->phone ?? '74 83 56 31' }}</p></div>
                                </div>
                                <div class="vl-elfo-group">
                                    <div class="vl-elfo-icon"><i class="bi bi-envelope"></i></div>
                                    <div class="vl-elfo-caption"><h6>Email</h6><p>{{ $article->user->email ?? 'contact@jobbo.com' }}</p></div>
                                </div>
                                <div class="vl-elfo-group">
                                    <div class="vl-elfo-icon"><i class="bi bi-globe"></i></div>
                                    <div class="vl-elfo-caption"><h6>Site</h6><p>https://www.jobbo.com</p></div>
                                </div>
                            </div>
                            <div class="pg-side-block-buttons">
                                <div class="single-button"><a href="JavaScript:Void(0);" class="btn fw-medium btn-primary full-width"><i class="fa-solid fa-comments me-2"></i>Laisser un Message</a></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!-- /row -->

    </div>

</section>
<!-- ============================ Agency List End ================================== -->



<!-- ============================ Call To Action ================================== -->
<section class="bg-cover primary-bg-dark" style="background:url(assets/img/footer-bg-dark.png)no-repeat;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-10 col-md-12 col-sm-12">

                <div class="call-action-wrap">
                    <div class="sec-heading center">
                        <h2 class="lh-base mb-3 text-light">Devenez un Partenaire<br>JOBBO</h2>
                        <p class="fs-6 text-light">Devenez Partenaire de JOBBO et Développez Votre Activité et Profitez d'une Visibilité Accrue, Accédez à
                            Des Opportunités de Qualité et Rejoignez Une Communauté Dynamique de Clients et de Collaborateurs.</p>
                    </div>
                    <div class="call-action-buttons mt-3">
                        <a href="{{ route('site.register_freelance') }}" class="btn btn-lg btn-dark fw-medium px-xl-5 px-lg-4 me-2">Freelance</a>
                        <a href="{{ route('site.register_entreprise') }}" class="btn btn-lg btn-whites fw-medium px-xl-5 px-lg-4 text-primary">Entreprise</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Call To Action End ================================== -->

@endsection

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