@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('carte.fidelite.list')}}">Cartes de fidélité</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Detail de la carte de fidélité</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-md-6">
                                        <div class="product-gallery product-gallery-vertical">
                                            <div class="row">
                                                <figure class="product-media w-100" style="background-color: transparent;">
                                                    <a class="w-100">
                                                        <img src="{{asset(\App\Classes\Constant::CARTE_FIDELITE_PATH).'/'.$datas[\App\Classes\Constant::CARTE_FIDELITE]->images[0]->url}}" class="w-100" alt="Brand Name">
                                                    </a>
                                                    <div class="product-action-vertical">
                                                        <a href="#" class="btn-product-icon btn-wishlist" title="S'abonner à la carte"><span>S'abonner à la carte</span></a>
                                                    </div>
                                                </figure>
                                            </div><!-- End .row -->
                                        </div><!-- End .product-gallery -->
                                    </div><!-- End .col-md-6 -->

                                    <div class="col-md-6">
                                        <div class="product-details">
                                            <h1 class="product-title">{{$datas[\App\Classes\Constant::CARTE_FIDELITE]->libelle}}</h1><!-- End .product-title -->

                                            <div class="ratings-container">
                                                <div class="ratings">
                                                    <div class="ratings-val" style="width: 80%;"></div><!-- End .ratings-val -->
                                                </div><!-- End .ratings -->
                                                <a class="ratings-text" href="#product-review-link" id="review-link">( 02 Commentaires )</a>
                                            </div><!-- End .rating-container -->

                                            <div class="product-price">
                                                Jusqu'à {{$datas[\App\Classes\Constant::CARTE_FIDELITE]->poucentage}}% de rémise
                                            </div><!-- End .product-price -->

                                            <div class="product-content">
                                                <p>{{$datas[\App\Classes\Constant::CARTE_FIDELITE]->description}}</p>
                                            </div><!-- End .product-content -->

                                            <div class="mb-2" style="text-align:center">
                                                <a href="{{$datas[\App\Classes\Constant::USER] != null ? route('carteFidelite.subscribe', $datas[\App\Classes\Constant::CARTE_FIDELITE]->id.'&carte-fidelite&'.$datas[\App\Classes\Constant::CARTE_FIDELITE]->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::CARTE_FIDELITE]->subscribeUserId ? 'Se desabonner de la carte' : 'S\'abonner à la carte'}}</span>
                                                    <i class="bi bi-hand-thumbs-up"></i>
                                                </a>
                                            </div><!-- End .product-action -->

                                            <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::CARTE_FIDELITE]->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::CARTE_FIDELITE]->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::CARTE_FIDELITE]->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::CARTE_FIDELITE]->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::CARTE_FIDELITE]->id)}}&text=Learnt+to+cook+Nasi+Lemak" class="social-icon" title="Telegram" target="_blank"><i class="icon-telegram"></i></a>
                                            </div>

                                            @if(count($datas[\App\Classes\Constant::CARTE_FIDELITE]->descriptif) > 0)
                                            <h4 class="mt-3">Détails</h4>
                                            <ul>
                                                @foreach($datas[\App\Classes\Constant::CARTE_FIDELITE]->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-md-6 -->
                                </div><!-- End .row -->
                            </div><!-- End .product-details-top -->

                            <div class="product-details-tab">
                                <ul class="nav nav-pills justify-content-center" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="product-shipping-link" data-toggle="tab" href="#product-shipping-tab" role="tab" aria-controls="product-shipping-tab" aria-selected="true">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::CARTE_FIDELITE]->comments->count()}})</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade 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::CARTE_FIDELITE]->magasin->latitude.'&'.$datas[\App\Classes\Constant::CARTE_FIDELITE]->magasin->longitude.'&'.$datas[\App\Classes\Constant::CARTE_FIDELITE]->magasin->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::CARTE_FIDELITE]->comments->count()}})</h3>
                                                <h3><a href="#">Voir plus</a></h3>
                                            </div>
                                            @foreach($datas[\App\Classes\Constant::CARTE_FIDELITE]->comments as $key => $comment)
                                                <div class="review">
                                                    <div class="row no-gutters">
                                                        <div class="col-auto">
                                                            <h4><a href="#">{{$datas[\App\Classes\Constant::CARTE_FIDELITE]->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::CARTE_FIDELITE]->id.'&'.$comment->id.'&'.(1).'&'.\App\Classes\Constant::CARTE_FIDELITE)}}"><i class="icon-thumbs-up"></i>Util ({{$comment->util}})</a>
                                                                <a href="{{route('comment.react', $datas[\App\Classes\Constant::CARTE_FIDELITE]->id.'&'.$comment->id.'&'.(0).'&'.\App\Classes\Constant::CARTE_FIDELITE)}}"><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::CARTE_FIDELITE]->id}}&{{\App\Classes\Constant::CARTE_FIDELITE}}" 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">Autres cartes de fidélité</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::CARTE_FIDELITES] as $key => $card)
                                    <div class="product text-center" style="width: 300px;">
                                        <figure class="product-media" style="background-color: transparent;">
                                            <a href="{{route('carte.fidelite.detail', $card->id)}}">
                                                <img src="{{asset(\App\Classes\Constant::CARTE_FIDELITE_PATH).'/'.$card->images[0]->url}}" alt="Brand Name">
                                            </a>
                                            <div class="product-action-vertical">
                                                <a href="#" class="btn-product-icon btn-wishlist" title="S'abonner à la carte"><span>S'abonner à la carte</span></a>
                                            </div>
                                        </figure>
                                    </div>
                                    @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>