@extends('layouts.site.site')

@section('content')
<main class="main">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-9 col-xxl-10 offset-xl-3 offset-xxl-2">
                <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
                    <div class="container d-flex align-items-center">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home-site')}}">Accueil</a></li>
                            <li class="breadcrumb-item"><a href="{{route('cat-site')}}">Catalogues</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Detail du catalogue</li>
                        </ol>
                    </div><!-- End .container -->
                </nav><!-- End .breadcrumb-nav -->

                <div class="page-content">
                    <div >
                        <div class="product-details-top">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="product-details-top">
                                        <div class="row">
                                            <div class="col-md-7 col-lg-7">
                                                <div class="product-gallery">
                                                    <figure class="product-main-image">
                                                        <!-- <span class="product-label label-sale">Sale</span> -->
                                                        <a href=""><span class="product-label label-sale"><i class="icon-heart-o"></i> ajouter aux favories</span></a>
                                                        <img id="product-zoom" src="{{asset(\App\Classes\Constant::CATALOGUE_PATH).'/'.$datas[\App\Classes\Constant::CATALOGUE]->images[0]->url}}" data-zoom-image="assets/images/products/single/fullwidth/3-big.jpg" alt="product image">

                                                        <a href="#" id="btn-product-gallery" class="btn-product-gallery">
                                                            <i class="icon-arrows"></i>
                                                        </a>
                                                    </figure><!-- End .product-main-image -->

                                                    <div id="product-zoom-gallery" class="product-image-gallery max-col-6">
                                                        @foreach($datas[\App\Classes\Constant::CATALOGUE]->images as $image)
                                                        <a class="product-gallery-item active" href="#" data-image="assets/images/products/single/fullwidth/1.jpg" data-zoom-image="assets/images/products/single/fullwidth/1-big.jpg">
                                                            <img src="{{asset(\App\Classes\Constant::CATALOGUE_PATH).'/'.$image->url}}" alt="product side">
                                                        </a>
                                                        @endforeach
                                                    </div><!-- End .product-image-gallery -->
                                                </div><!-- End .product-gallery -->
                                            </div><!-- End .col-lg-7 -->

                                            <div class="col-md-5 col-lg-5">
                                                <div class="product-details">
                                                    <h1 class="product-title">La Rentrée "moins chère !"</h1><!-- End .product-title -->

                                                    <div class="ratings-container">
                                                        <p>Enseigne : <a class="ratings-text" href="#product-accordion" id="review-link">{{$datas[\App\Classes\Constant::CATALOGUE]->titre}}</a></p>
                                                    </div><!-- End .rating-container -->

                                                    <div class="product-price">
                                                        <span class="new-price">Valide jusqu'au : </span>{{$datas[\App\Classes\Constant::CATALOGUE]->datePublication}}
                                                    </div><!-- End .product-price -->

                                                    <div class="mb-2" style="text-align:center">
                                                        <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('catalogue.favorite.add', $datas[\App\Classes\Constant::CATALOGUE]->id.'&catalogue&'.$datas[\App\Classes\Constant::CATALOGUE]->id) : '#signin-modal'}}"
                                                           data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                                           class="btn btn-outline-primary-2 btn-lg btn-block" title="voir l'offre">
                                                            <span>{{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $datas[\App\Classes\Constant::CATALOGUE]->preferenceUserId ? 'Retirer des favories' : 'Ajouter aux favories'}}</span>
                                                            <i class="icon-heart-o"></i>
                                                        </a>
                                                    </div><!-- End .product-action -->

                                                    <!-- <div class="product-details-action">
                                                        <a href="#" class="btn-product btn-cart"><span>add to cart</span></a>

                                                        <div class="details-action-wrapper">
                                                            <a href="#" class="btn-product btn-wishlist" title="Wishlist"><span>Add to Wishlist</span></a>
                                                            <a href="#" class="btn-product btn-compare" title="Compare"><span>Add to Compare</span></a>
                                                        </div>
                                                    </div> -->

                                                    <div class="product-details-footer">
                                                        <div class="product-cat">
                                                            <span>Categorie:</span>
                                                            <a href="#">accessoires</a>
                                                        </div><!-- End .product-cat -->

                                                        <div class="social-icons social-icons-sm">
                                                            <span class="social-label">Partager:</span>
                                                            <a href="https://www.facebook.com/sharer/sharer.php?u={{url('offer/'.$datas[\App\Classes\Constant::CATALOGUE]->id)}}" class="social-icon" title="Facebook" target="_blank"><i class="icon-facebook-f"></i></a>
                                                            <a href="https://twitter.com/intent/tweet?text=Learnt+to+cook+Nasi+Lemak&url={{url('offer/'.$datas[\App\Classes\Constant::CATALOGUE]->id)}}" class="social-icon" title="Twitter" target="_blank"><i class="icon-twitter"></i></a>
                                                            <a href="http://www.linkedin.com/shareArticle?mini=true&url={{url('offer/'.$datas[\App\Classes\Constant::CATALOGUE]->id)}}&title=my share text&summary=dit est de résumé linkedin" class="social-icon" title="Pinterest" target="_blank"><i class="icon-linkedin"></i></a>
                                                            <a href="https://wa.me/?text={{url('offer/'.$datas[\App\Classes\Constant::CATALOGUE]->id)}}" class="social-icon" title="Whatsapp" target="_blank"><i class="icon-whatsapp"></i></a>
                                                            <a href="https://telegram.me/share/url?url={{url('offer/'.$datas[\App\Classes\Constant::CATALOGUE]->id)}}&text=Learnt+to+cook+Nasi+Lemak" class="social-icon" title="Telegram" target="_blank"><i class="icon-telegram"></i></a>
                                                        </div>
                                                    </div><!-- End .product-details-footer -->

                                                    @if(count($datas[\App\Classes\Constant::CATALOGUE]->descriptif) > 0)
                                                    <h4 class="mt-3">Détails</h4>
                                                    <ul>
                                                        @foreach($datas[\App\Classes\Constant::CATALOGUE]->descriptif as $key => $desciptif)
                                                            <li class="mb-1"><strong>{{$key}}</strong> : &nbsp;&nbsp;&nbsp;&nbsp;{{$desciptif}}</li>
                                                        @endforeach
                                                    </ul>
                                                    @endif

                                                </div><!-- End .product-details -->
                                            </div><!-- End .col-lg-5 -->
                                        </div><!-- End .row -->
                                    </div><!-- End .product-details-top -->
                                </div><!-- End .col-xl-10 -->
                            </div><!-- End .row -->
                        </div><!-- End .product-details-top -->



                        <div class="product-details-tab">
                            <ul class="nav nav-pills justify-content-center" role="tablist">
                                @if(count($datas[\App\Classes\Constant::CATALOGUE]->descriptif) > 0)
                                <li class="nav-item">
                                    <a class="nav-link active" id="product-desc-link" data-toggle="tab" href="#product-desc-tab" role="tab" aria-controls="product-desc-tab" aria-selected="true">Description</a>
                                </li>
                                @endif
                                <li class="nav-item">
                                    <a class="nav-link{{count($datas[\App\Classes\Constant::CATALOGUE]->descriptif) == 0 ? ' active' : ''}}"
                                       id="product-shipping-link" data-toggle="tab" href="#product-shipping-tab" role="tab" aria-controls="product-shipping-tab"
                                       aria-selected="{{count($datas[\App\Classes\Constant::CATALOGUE]->descriptif) == 0}}">Localisation</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="product-review-link" data-toggle="tab" href="#product-review-tab" role="tab" aria-controls="product-review-tab" aria-selected="false">Commentaires ({{$datas[\App\Classes\Constant::CATALOGUE]->comments->count()}})</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                @if(count($datas[\App\Classes\Constant::CATALOGUE]->descriptif) > 0)
                                <div class="tab-pane fade show active" id="product-desc-tab" role="tabpanel" aria-labelledby="product-desc-link">
                                    <div class="product-desc-content">

                                    </div><!-- End .product-desc-content -->
                                </div><!-- .End .tab-pane -->
                                @endif
                                <div class="tab-pane fade{{count($datas[\App\Classes\Constant::CATALOGUE]->descriptif) == 0 ? ' show active' : ''}}"
                                     id="product-shipping-tab" role="tabpanel" aria-labelledby="product-shipping-link">
                                    <div class="product-desc-content">
                                        <div class="mapouter">
                                            <div class="gmap_canvas">
                                                <div id="map" style="height: 100%;" class="{{$datas[\App\Classes\Constant::CATALOGUE]->user->latitude.'&'.$datas[\App\Classes\Constant::CATALOGUE]->user->longitude.'&'.$datas[\App\Classes\Constant::CATALOGUE]->user->nomComplet}}"></div>
                                            </div>
                                            <style>.mapouter{position:relative;text-align:right;width:100%;height:400px;}.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:400px;}.gmap_iframe {width:100%!important;height: 400px;!important;}</style>
                                        </div>
                                    </div><!-- End .product-desc-content -->
                                </div><!-- .End .tab-pane -->
                                <div class="tab-pane fade" id="product-review-tab" role="tabpanel" aria-labelledby="product-review-link">
                                    <div class="reviews">
                                        <div class="d-flex flex-row justify-content-between">
                                            <h3>Commentaires ({{$datas[\App\Classes\Constant::CATALOGUE]->comments->count()}})</h3>
                                            <h3><a href="#">Voir plus</a></h3>
                                        </div>
                                        @foreach($datas[\App\Classes\Constant::CATALOGUE]->comments as $key => $comment)
                                            <div class="review">
                                                <div class="row no-gutters">
                                                    <div class="col-auto">
                                                        <h4><a href="#">{{$datas[\App\Classes\Constant::CATALOGUE]->commentUsers[$key]->nomComplet}}</a></h4>
                                                        <div class="ratings-container">
                                                            <div class="ratings">
                                                                <div class="ratings-val" style="width: {{($comment->util / (($comment->util == 0 ? 1 : $comment->util) + $comment->inutil)) * 100}}%;"></div><!-- End .ratings-val -->
                                                            </div><!-- End .ratings -->
                                                        </div><!-- End .rating-container -->
                                                        <span class="review-date">
                                                        {{$comment->duration['tag'] == "year" ? "Il y a ".$comment->duration['diff']." années" :
                                                         ($comment->duration['tag'] == "month" ? "Il y a ".$comment->duration['diff']." mois" :
                                                         ($comment->duration['diff'] == 0 ? "Aujourd'hui" : ($comment->duration['diff'] == 1 ? "Hier" : "Il y a ".$comment->duration['diff']." jours")))}}
                                                    </span>
                                                    </div><!-- End .col -->
                                                    <div class="col">
                                                        <h4>{{$comment->title}}</h4>

                                                        <div class="review-content">
                                                            <p>{{$comment->message}}</p>
                                                        </div><!-- End .review-content -->

                                                        <div class="review-action">
                                                            <a href="{{route('comment.react', $datas[\App\Classes\Constant::CATALOGUE]->id.'&'.$comment->id.'&'.(1).'&'.\App\Classes\Constant::CATALOGUE)}}"><i class="icon-thumbs-up"></i>Util ({{$comment->util}})</a>
                                                            <a href="{{route('comment.react', $datas[\App\Classes\Constant::CATALOGUE]->id.'&'.$comment->id.'&'.(0).'&'.\App\Classes\Constant::CATALOGUE)}}"><i class="icon-thumbs-down"></i>Pas util ({{$comment->inutil}})</a>
                                                        </div><!-- End .review-action -->
                                                    </div><!-- End .col-auto -->
                                                </div><!-- End .row -->
                                            </div><!-- End .review -->
                                        @endforeach
                                        <form action="/comments/{{$datas[\App\Classes\Constant::CATALOGUE]->id}}&{{\App\Classes\Constant::CATALOGUE}}" method="post" id="commentForm">
                                            @csrf
                                            <textarea class="form-control" name="message" placeholder="Laisser un commentaire..." required></textarea>
                                            <div class="btn btn-dark" id="{{$datas[\App\Classes\Constant::USER] != null ? 'btnComment' : 'btnCommentNone'}}"
                                                 href="{{$datas[\App\Classes\Constant::USER] != null ? '' : '#signin-modal'}}"
                                                 data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}">Envoyer</div>
                                        </form>
                                    </div><!-- End .reviews -->
                                </div><!-- .End .tab-pane -->
                            </div><!-- End .tab-content -->
                        </div><!-- End .product-details-tab -->

                        <div class="container-fluid p-0 m-0">
                            <h2 class="title pb-2">Catalogues similaires</h2><!-- End .title text-center -->
                            <div class="owl-carousel owl-simple carousel-equal-height carousel-with-shadow" data-toggle="owl"
                                 data-owl-options='{
                                        "nav": false,
                                        "dots": true,
                                        "margin": 20,
                                        "loop": false,
                                        "responsive": {
                                            "0": {
                                                "items":1
                                            },
                                            "480": {
                                                "items":2
                                            },
                                            "768": {
                                                "items":3
                                            },
                                            "992": {
                                                "items":4
                                            },
                                            "1200": {
                                                "items":3,
                                                "nav": true
                                            },
                                            "1600": {
                                                "items":5,
                                                "nav": true
                                            }
                                        }
                                    }'>
                                @foreach($datas[\App\Classes\Constant::CATALOGUES] as $key => $catalogue)
                                    <div class="product product-7 text-center" style="width: 260px;">
                                        <figure class="product-media">
                                            <a href="{{route('detail-cat-site', $catalogue->id)}}">
                                                <img src="{{asset(\App\Classes\Constant::CATALOGUE_PATH).'/'.$catalogue->images[0]->url}}" alt="Product image" class="product-image">
                                            </a>

                                            <div class="product-action-vertical">
                                                <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('catalogue.favorite.add', $catalogue->id.'&') : '#signin-modal'}}"
                                                   data-toggle="{{$datas[\App\Classes\Constant::USER] != null ? '' : 'modal'}}"
                                                   class="btn-product-icon btn-wishlist" title="Ajouter aux favories"
                                                   style="background-color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#db6d00' : ''}};
                                              color: {{$datas[\App\Classes\Constant::USER] != null && $datas[\App\Classes\Constant::USER]->id == $catalogue->preferenceUserId ? '#ffffff' : ''}};"
                                                ><span>Ajouter aux favories</span></a>
                                            </div>

                                            <div class="product-action">
                                                <a href="{{route('detail-cat-site', $catalogue->id)}}" class="btn btn-outline-primary-2 btn-lg btn-block"><span>détails</span> <i class="icon-plus"></i></a>
                                            </div>
                                        </figure>

                                        <div class="product-body">
                                            <h3 class="product-title"><a href="{{route('detail-cat-site', $catalogue->id)}}">{{$catalogue->titre}}</a></h3>
                                            <div class="product-price">
                                                <span class="out-price">Valide jusqu'au {{$catalogue->datePublication}}</span>
                                            </div>

                                            <div class="product-label-text">Rupture de stock</div>
                                        </div>
                                    </div><!-- End .product -->
                                @endforeach
                            </div><!-- End .owl-carousel -->
                        </div><!-- End .container -->
                    </div><!-- End .container -->
                </div><!-- End .page-content -->
            </div>
        </div>
    </div>
</main><!-- End .main -->
@endsection

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script type="module">
    // Initialize and add the map
    let map;

    async function initMap() {
        const positions = document.getElementById("map").className.split("&");
        // Request needed libraries.
        const { Map, InfoWindow } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
            "marker",
        );
        const map = new Map(document.getElementById("map"), {
            zoom: 14,
            center: { lat: Number(positions[0]), lng: Number(positions[1]) },
            mapId: "4504f8b37365c3d0",
        });

        const tourStops = [
            {
                position: { lat: Number(positions[0]), lng: Number(positions[1])},
                title: positions[2],
            },
        ];

        const infoWindow = new InfoWindow();

        tourStops.forEach(({ position, title }, i) => {
            const pin = new PinElement({
                glyph: positions[2].substring(0, 1).toUpperCase(),
            });
            const marker = new AdvancedMarkerElement({
                position,
                map,
                title: `${title}`,
                content: pin.element,
            });

            infoWindow.close();
            infoWindow.setContent(marker.title);
            infoWindow.open(marker.map, marker);
        });
    }

    initMap();

    /* Form comments */
    document.getElementById('btnComment').addEventListener('click', function(event){
        document.getElementById('commentForm').submit();
    });
</script>

<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
    ({key: "AIzaSyAOVYRIgupAurZup5y1PRh8Ismb1A3lLao", v: "weekly"});
</script>