@php
    use Carbon\Carbon;

    $auth = Auth::user();
@endphp

@extends('layouts.site')

@section('styles')

@endsection

@section('page-content')

<!-- ============================ Page Title Start================================== -->
<section class="bg-cover primary-bg-dark" style="background:url(assets/img/bg2.png)no-repeat;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">

                <h2 class="ipt-title text-light">Notre Boutique</h2>
                <span class="text-light opacity-75">Des Produits Exclusifs Rien Que Pour Vous !</span>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Page Title End ================================== -->


<!-- ============================ All List Wrap ================================== -->
<section class="gray-simple">
    <div class="container">



        @if(empty($auth))
        <!-- row Start -->
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="alert alert-warning text-center" role="alert">
                    Bonjour cher, Avez-vous déjà un compte ?  <a href="#" data-bs-toggle="collapse" data-bs-target="#login-frm">Veuillez vous connecter</a>
                </div>
            </div>

            <div class="col-lg-12 col-md-12">
                <div id="login-frm" class="collapse mb-5">
                    <div class="row">
                        <form method="POST" action="{{ route('login') }}">

                            @csrf

                            <div class="col-lg-4 col-md-4 col-sm-6">
                                <div class="form-group">
                                    <input type="email" class="form-control border" name="email" placeholder="Email">
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm-6">
                                <div class="form-group">
                                    <input type="password" class="form-control border" name="password" placeholder="Mot de Passe">
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary full-width">Soumettre</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!-- /row -->
        @endif


        <div class="row">
            <!-- Search Sidebar -->

            <div class="col-lg-12 col-md-12">
                <div class="text-center">
                    <h1 class="fs-6 text-primary">{{ $product->libelle }}</h1>
                    <a class="btn btn-primary" href="#">
                        {{ $product->category ? $product->category->libelle : 'Boutique JOBBO' }}
                    </a>
                </div>

                <br><br><br>

            </div>

            <br>

            <div class="col-lg-6 col-md-12">

                <div class="jbs-blocs style_03 b-0 mb-md-4 mb-sm-4">
                    <div class="jbs-blocs-body px-4 py-4">
                        <img src="{{ asset('storage/' . $product->image) }}" class="img-fluid" style="height: 400px;width:800px;">
                    </div>
                    <div class="jbs-blocs-body px-4 py-4">
                        <div class="jbs-content mb-4">
                            <h5 class="text-primary">{{ $product->category ? $product->category->libelle : '' }}</h5>
                            <p>{{ $product->libelle }}</p>
                        </div>
                        <div class="jbs-content mb-4">
                            <h5>Description</h5>
                            <p>{!! $product->description !!}</p>
                        </div>
                    </div>
                    <div class="jbs-blox-footer">
                        <div class="blox-first-footer">
                            <div class="ftr-share-block">
                                <ul>
                                    <li><strong>Partager sur vos reseaux:</strong></li>
                                    <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-facebook"></i></a></li>
                                    <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-linkedin"></i></a></li>
                                    <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-google-plus"></i></a></li>
                                    <li><a href="JavaScript:Void(0);"><i class="fa-brands fa-twitter"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <br>

            </div>

            <div class="col-lg-6 col-md-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="{{ $product->user ? $product->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>{{ $product->user ? $product->user->name : 'Webmaster' }}</h4>
                                    <span><i class="fa-solid fa-location-dot me-2"></i>{{ $product->user->adresse ? $product->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 moi un Message</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                &nbsp;

                <form id="add-to-cart" method="POST" action="{{ route('site.cart.add', $product->id) }}" style="margin-top: 10px;">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}" />
                    <div class="detail-side-block bg-white mb-4">
                        <div class="detail-side-heads mb-2">
                            <h3 class="text-primary">{{ $product->price . ' XAF' }}</h3>
                        </div>
                        <div class="detail-side-middle">
                            <div class="form-floating mb-3">
                                <input type="number" class="form-control" name="quantity" placeholder="Quantité" min="1" required>
                                <small class="text-primary">Saisir une quantité minimale de 1 !</small>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary full-width fw-medium font-sm">Ajouter au Panier</button>
                            </div>
                        </div>
                    </div>
                </form>




            </div>

        </div>
    </div>
</section>
<!-- ============================ All List Wrap ================================== -->


<!-- ============================ Good Reviews By Customers ================================== -->
<section>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-10 text-center">
                <div class="sec-heading center">
                    <h2 class="text-primary">Produits similaires</h2>
                    <p>Découvrez des produits qui rentrent dans la meme gamme de ce que vous cherchez !</p>
                </div>
            </div>
        </div>

        <div id="categoryCarousel" class="carousel slide" data-bs-ride="carousel">
            <iv class="carousel-inner">

                <div class="carousel-item active">



                    <div class="row justify-content-center gx-4 gy-4">
                        @if($products->count() > 0)
                            @foreach($products as $item)
                            <!-- Single Review -->
                            <div class="col-xl-4 col-lg-4 col-md-6">
                                <div class="jobstock-reviews-box">
                                    <div class="jobstock-reviews-desc">
                                        <h6 class="review-title-yui">"{{ $item->category->libelle }}"</h6>
                                        <p>{!! Str::limit($item->description, 80, $end='...') !!}</p>
                                    </div>
                                    <div class="jobstock-reviews-flex">
                                        <div class="jobstock-reviews-thumb">
                                            <div class="jobstock-reviews-figure">
                                                <img src="{{ asset('storage/' . $item->image) }}" class="img-fluid rounded" alt="" />
                                            </div>
                                        </div>
                                        <div class="jobstock-reviews-caption">
                                            <div class="jobstock-reviews-title"><h4>{{ $item->libelle }}</h4></div>
                                            <div class="jobstock-reviews-designation"><span>{{ $item->price }} XAF</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @else
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                            <center>
                                <br>
                                <img src="{{ URL::to('assets/img/empty-pana.svg') }}" height="400" width="400" class="align-items-center" />
                                <br><br>
                                <h3>Notre boutique est vide pour le moment !</h3>
                            </center>
                        </div>
                        @endif


                    </div>

                </div>

            </div>
        </div>


    </div>
</section>
<!-- ============================ Good Reviews By Customers ================================== -->




<!-- ============================ 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