@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{asset('siteStyle/blog.css')}}">
    <meta name="description" content="content description">
@stop

@section('title')
    blog title
@stop

@section('content')


    <section class="containerB post-hero-section" style="--post-hero-image: url('{{ asset($blogPost->image) }}');">
        <div class="topSectionBlog post-hero-inner">
            <div class="titleAndBtnBlog">
                @include('sections.breadcrumbs', [
                    'parentPageLink' => route("home"),
                    'parentPage' => 'Home',
                    'childPageLink' => route("blog"),
                    'childPage' => 'Blog',
                    'childPageLink2' => "",
                    'childPage2' => 'post_1',
                    "fontColor" => "lightFont"
                ])
                <p class="post-hero-eyebrow"><span></span> Article Atirao</p>
                <h1 class="titleTopSectionDBlog">{!! $blogPost->title !!}</h1>
                <div class="post-hero-meta" aria-label="Informations de l'article">
                    <span>Par Atirao</span>
                    <span>{!! $blogPost->date !!}</span>
                    <span>Insights marketing</span>
                </div>
            </div>
        </div>
    </section>

    <section class="containerW post-content-section">
        <div class="blogContent">
            <div class="share">
                <p>Partagez ceci</p>
                <div class="socialShare">
                    <div class="svgZone">
                        <svg xmlns="http://www.w3.org/2000/svg" id="fb" data-name="fb" viewBox="0 0 144.77 255.06" width="17" fill="#fff">
                            <path id="f" class="cls-1" stroke-width="0px" d="M90.04,241.51v-103.97h34.88l5.23-40.53h-40.12v-25.87c0-11.73,3.24-19.73,20.09-19.73h21.44V15.14c-3.71-.48-16.44-1.59-31.26-1.59-30.94,0-52.12,18.89-52.12,53.56v29.89H13.2v40.53h34.99v103.97h41.85Z"></path>
                        </svg>
                    </div>
                    <div class="svgZone">
                        <svg xmlns="http://www.w3.org/2000/svg" id="linked" data-name="linked" viewBox="0 0 277.28 248.94" width="27" fill="#fff">
                            <g id="_10.Linkedin" data-name="10.Linkedin">
                            <path class="cls-1" stroke-width="0px" d="M251.56,237.39v-82.72c0-40.65-8.75-71.71-56.18-71.71-22.87,0-38.11,12.42-44.32,24.28h-.56v-20.61h-44.89v150.75h46.86v-74.81c0-19.76,3.67-38.68,27.95-38.68s24.28,22.3,24.28,39.81v73.4h46.86v.28Z"></path>
                            <path class="cls-1" stroke-width="0px" d="M29.38,86.64h46.86v150.75H29.38V86.64Z"></path>
                            <path class="cls-1" stroke-width="0px" d="M52.82,11.54c-14.96,0-27.1,12.14-27.1,27.1s12.14,27.38,27.1,27.38,27.1-12.42,27.1-27.38-12.14-27.1-27.1-27.1Z"></path>
                            </g>
                        </svg>
                    </div>
                    {{-- <div class="svgZone">
                        <svg xmlns="http://www.w3.org/2000/svg" id="inst" data-name="inst" viewBox="0 0 258.89 255.06" width="27" fill="#fff">
                            <path class="cls-1" stroke-width="0px" d="M188.79,8.85h-118.68c-32.63,0-59.34,26.71-59.34,59.34v118.68c0,32.62,26.71,59.34,59.34,59.34h118.68c32.63,0,59.34-26.71,59.34-59.34v-118.68c0-32.63-26.71-59.34-59.34-59.34ZM228.34,186.87c0,21.81-17.74,39.56-39.56,39.56h-118.68c-21.81,0-39.56-17.75-39.56-39.56v-118.68c0-21.81,17.75-39.56,39.56-39.56h118.68c21.82,0,39.56,17.75,39.56,39.56v118.68h0Z"></path>
                            <circle class="cls-1" stroke-width="0px" cx="193.74" cy="63.24" r="14.83"></circle>
                            <path class="cls-1" stroke-width="0px" d="M129.45,68.19c-32.78,0-59.34,26.56-59.34,59.34s26.56,59.34,59.34,59.34,59.34-26.58,59.34-59.34-26.57-59.34-59.34-59.34ZM129.45,167.09c-21.85,0-39.56-17.71-39.56-39.56s17.71-39.56,39.56-39.56,39.56,17.71,39.56,39.56-17.71,39.56-39.56,39.56Z"></path>
                        </svg>
                    </div> --}}
                </div>
            </div>
            <script>
const facebookIcon = document.getElementById('fb');
const linkedinIcon = document.getElementById('linked');
const instagramIcon = document.getElementById('inst'); // Instagram n'a pas de partage direct, mais on peut ouvrir la page IG

// Partage sur Facebook
facebookIcon.addEventListener('click', () => {
    const url = window.location.href;
    const fbShare = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
    window.open(fbShare, "_blank", "width=600,height=400");
});

// Partage sur LinkedIn
linkedinIcon.addEventListener('click', () => {
    const url = window.location.href;
    const linkedShare = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
    window.open(linkedShare, "_blank", "width=600,height=400");
});

if (instagramIcon) {
    instagramIcon.addEventListener('click', () => {
        alert("Instagram ne permet pas de partager directement via un lien. Vous pouvez copier l'URL : " + window.location.href);
    });
}
</script>

            <article class="article">

                {!! $blogPost->content !!}
            </article>
        </div>
    </section>



@stop

@section('footerScripts')
    <script src="{{asset('siteScripts/home.js')}}"></script>
@stop