@extends('layouts.front')
@php $isStuck=1; @endphp
@php $no_full_title=true; @endphp
@php $type= mb_strtolower($designer->profile->type ?? "Architecte d'intérieur"); @endphp

@section('meta-title') Découvrez {{ $designer->prenom . ' ' . $designer->nom }} | {!! $designer->profile->type ?? "Architecte d'intérieur" !!} @endsection

@section('meta')

    <meta property="twitter:image" content="{{ asset($profile->cover) }}">
    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Découvrez {{ $designer->prenom }} {{ $designer->nom }} | {!! $designer->profile->type ?? "Architecte d'intérieur" !!}" />
    <meta property="og:description"
        content="Découvrez {{ $designer->prenom }} {{ $designer->nom }}, notre {!! strtolower($type) !!}, à travers sa conception de l’architecture d’intérieur, ses styles déco et ses réalisations." />
    <meta name="description"
        content="Découvrez {{ $designer->prenom }} {{ $designer->nom }}, notre {!! strtolower($type) !!}, à travers sa conception de l’architecture d’intérieur, ses styles déco et ses réalisations." />
    <meta property="og:image" content="{{ asset($designer->photo) }}">

@endsection

@section('meta-keywords', '')
@section('meta-description', '')
@section('body-class', 'designer_profile')

@section('additional-schema')
    <script type="application/ld+json">
        {
         "@context": "https://schema.org",
         "@graph": [
            {
				"@type": "BreadcrumbList",
				"itemListElement": [
					{
						"@type": "ListItem",
						"position": 1,
						"name": "Pipcke",
						"item": "https://pipcke.fr/"
					},
					{
						"@type": "ListItem",
						"position": 2,
						"name": "Designers",
						"item": "https://pipcke.fr/designers/"
					},
					{
						"@type": "ListItem",
						"position": 3,
						"name": "{{ $designer->prenom }} {{ $designer->nom}}"
					}
				]
			},
			{
				"@type": "ImageObject",
				"inLanguage": "fr-FR",
				"url": "{{ asset($profile->cover) }}",
				"contentUrl": "{{ asset($profile->cover) }}",
				"caption": "{{ $designer->prenom }} {{ $designer->nom}} - Pipcke"
			}
		]
      }
    </script>
@endsection
@section('content')
    <div class="loader">
        <div></div>
    </div>

    <section class="mt-120">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-offset-2 col-md-8" style="margin-bottom: -15px !important;">
                    <ol class="breadcrumb pl-0">
                        <li>
                            <a href="{{ route('home') }}" id="{{ route('home') }}">
                                <span>Pipcke</span>
                            </a>
                        <li>
                            <a href="{{ route('designers') }}" id="{{ route('designers') }}">
                                <span>Designers</span>
                            </a>
                        </li>

                        <li>
                            <a href="{{ url()->current() }}">
                                <span>{{ $designer->prenom }} {{ $designer->nom }}</span>
                            </a>
                        </li>
                    </ol>
                </div>
                <div class="col-md-offset-2 col-md-8">
                    <div id="coverphoto" class="cover" data-background-image="url({{ asset($profile->cover) }})">
                    </div>
                </div>

            </div>

        </div>
    </section>
    <section class="pb-40">
        <div class="container">
            <div class="user_photo">
                <div id="profilephoto" class="photo" data-background-image="url('{{ $designer->photo }}')"></div>
                <br>
                <h1 class="h4">{{ $designer->prenom . ' ' . $designer->nom }}</h1>

                <div class="disponible mt-10 mb-4">
                    @if ($designer->profile->disponible)
                        <img width="25" class="mr-1"
                            src="{{ asset('img/icons/pipcke-designer-profile-available.svg') }}" alt="">
                        <span class="text-success">{!! lang('Disponible') !!}</span>
                    @else
                        <img width="25" class="mr-1"
                            src="{{ asset('img/icons/pipcke-designer-profile-available-soon.svg') }}" alt="">
                        <span style="color: #ff6f37">{!! lang('Disponible prochainement') !!}</span>
                    @endif

                </div>
                <br>
                @if (!($draft ?? 0))
                    @if (strpos(url()->previous(), 'pinterest') !== false ||
                            app('router')->getRoutes()->match(app('request')->create(url()->previous()))->getName() != 'experience_achat.selectionner_designers')
                        <div class="btn btn-sm btn2 mt-10 border-radius-10 lancerProjet {{ $designer->profile->disponible ? '' : 'disabled' }}"
                            data-id="{{ $designer->id }}">{!! lang('Lancer projet avec') !!} {{ $designer->prenom }}</div>
                    @endif
                @else
                    <div class="text-danger p-3">Visualisation profil non validé</div>
                @endif
            </div>
        </div>
    </section>

    <section class="pt-30 pb-40 bg-light">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel">
                        <div class="h5">{!! lang('Styles favoris') !!}</div>

                        <p class="m-0">
                            @foreach ($profile->_styles as $key => $style)
                                {{ $style->libelle }}{{ $key < count($profile->_styles) - 1 ? ',' : '' }}
                            @endforeach
                        </p>
                    </div>

                    @if ($profile->adresse)
                        <div class="panel">
                            <div class="m-0 h5"><span class="text-black">{{ $profile->adresse }}</span></div>
                        </div>
                    @endif

                    @php
                        $facebook = $profile->social_medias->where('libelle', 'facebook')->first()->url ?? null;
                        $twitter = $profile->social_medias->where('libelle', 'twitter')->first()->url ?? null;
                        $linkedin = $profile->social_medias->where('libelle', 'linkedin')->first()->url ?? null;
                        $pinterest = $profile->social_medias->where('libelle', 'pinterest')->first()->url ?? null;
                        $behance = $profile->social_medias->where('libelle', 'behance')->first()->url ?? null;
                        $instagram = $profile->social_medias->where('libelle', 'instagram')->first()->url ?? null;
                        $site_personnel =
                            $profile->social_medias->where('libelle', 'site_personnel')->first()->url ?? null;
                    @endphp
                    @if ($facebook || $twitter || $linkedin || $pinterest || $behance || $instagram || $site_personnel)
                        <div class="panel">
                            <div class="h5">{!! lang('Suivez') !!} {{ $designer->prenom }}</div>
                            @if ($site_personnel)
                                @if ($ret = parse_url($site_personnel))
                                    @if (!isset($ret['scheme']))
                                        @php $site_personnel = "https://{$site_personnel}"; @endphp
                                    @endif
                                @endif
                                <a href="{{ $site_personnel }}" target="_blank" class="icon">
                                    <img src="{{ asset('img/icons/pipcke-follow-us-personal-website.svg							') }}"
                                        alt="">
                                </a>
                            @endif

                            @if ($facebook)
                                @if ($ret = parse_url($facebook))
                                    @if (!isset($ret['scheme']))
                                        @php $facebook = "https://{$facebook}"; @endphp
                                    @endif
                                @endif
                                <a href="{{ $facebook }}" target="_blank" class="icon">
                                    <img src="{{ asset('img/icons/pipcke-follow-us-facebook.svg') }}" alt="">
                                </a>
                            @endif

                            @if ($twitter)
                                @if ($ret = parse_url($twitter))
                                    @if (!isset($ret['scheme']))
                                        @php $twitter = "https://{$twitter}"; @endphp
                                    @endif
                                @endif
                                <a href="{{ $twitter }}" target="_blank" class="icon">
                                    <img src="{{ asset('img/icons/pipcke-follow-us-twitter.png') }}" alt="">
                                </a>
                            @endif

                            @if ($linkedin)
                                @if ($ret = parse_url($linkedin))
                                    @if (!isset($ret['scheme']))
                                        @php $linkedin = "https://{$linkedin}"; @endphp
                                    @endif
                                @endif

                                <a href="{{ $linkedin }}" target="_blank" class="icon">
                                    <img src="{{ asset('img/icons/pipcke-follow-us-linkedin.svg') }}" alt="">
                                </a>
                            @endif

                            @if ($pinterest)
                                @if ($ret = parse_url($pinterest))
                                    @if (!isset($ret['scheme']))
                                        @php $pinterest = "https://{$pinterest}"; @endphp
                                    @endif
                                @endif
                                <a href="{{ $pinterest }}" target="_blank" class="icon">
                                    <img src="{{ asset('img/icons/pipcke-follow-us-pinterest.svg') }}" alt="">
                                </a>
                            @endif

                            @if ($behance)
                                @if ($ret = parse_url($behance))
                                    @if (!isset($ret['scheme']))
                                        @php $behance = "https://{$behance}"; @endphp
                                    @endif
                                @endif
                                <a href="{{ $behance }}" target="_blank" class="icon">
                                    <img src="{{ asset('img/icons/pipcke-follow-us-behance.svg') }}" alt="">
                                </a>
                            @endif

                            @if ($instagram)
                                @if ($ret = parse_url($instagram))
                                    @if (!isset($ret['scheme']))
                                        @php $instagram = "https://{$instagram}"; @endphp
                                    @endif
                                @endif
                                <a href="{{ $instagram }}" target="_blank" class="icon">
                                    <img src="{{ asset('img/icons/pipcke-follow-us-instagram.svg') }}" alt="">
                                </a>
                            @endif
                        </div>
                    @endif

                    <div class="panel">
                        <div class="h5 mb-0">

                            <div class="favoris" data-action="favoris_toggle"
                                data-url="{{ route('api.favoris.toggle', $designer->id) }}" class="mr-3">
                                <span class="show-favoris {{ !$designer->in_favoris ? 'hidden' : '' }}">
                                    <i class="fa fa-heart text-danger pull-right"></i>
                                    {!! lang('Supprimer') !!} {{ $designer->prenom }} {!! lang('des favoris') !!}

                                </span>
                                <span class="hide-favoris  {{ $designer->in_favoris ? 'hidden' : '' }}">
                                    <i class="fa fa-heart-o pull-right"></i>
                                    {!! lang('Ajouter') !!} {{ $designer->prenom }} {!! lang('aux favoris') !!}
                                </span>
                            </div>

                        </div>
                    </div>

                    @if ($profile->video)
                        <div class="panel">

                            <div class="h5">{!! lang('Partager le profil de') !!} {{ $designer->prenom }} sur</div>
                            <a target="_blank" href="http://www.facebook.com/sharer.php?u={{ request()->url() }}"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-facebook.svg') }}" alt="">
                            </a>
                            <a target="_blank"
                                href="https://twitter.com/intent/tweet?text=Rejoignez {{ $designer->prenom }} sur Pipcke pour découvrir ses styles préférés, ses sources d’inspiration ainsi que ses conseils d’aménagement et de décoration !&url={{ request()->url() }}"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-twitter.png') }}" alt="">
                            </a>
                            <a target="_blank"
                                href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{ request()->url() }}"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-linkedin.svg') }}" alt="">
                            </a>
                            <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-pinterest.svg') }}" alt="">
                            </a>
                            <a class="font-size-24 icon-mail"
                                href="mailto:?Subject=Découvrez le profil de {{ $designer->prenom }}&amp;Body=Rejoignez {{ $designer->prenom }} sur Pipcke pour découvrir ses styles préférés, ses sources d’inspiration ainsi que ses conseils d’aménagement et de décoration ! %0D%0D{{ request()->url() }}"><i
                                    class="fa fa-envelope-square"></i></a>
                        </div>
                    @endif
                </div>
                <div class="col-md-6">
                    <div class="panel">
                        <h2 class="h5">{!! lang('Moi en quelques mots') !!}</h2>
                        <p>{!! $profile->resume !!}</p>
                    </div>
                    <div class="panel">
                        <h2 class="h5">{!! lang("Ma conception de l'architecture d'intérieur") !!}</h2>
                        <p>{!! $profile->conception !!}</p>
                    </div>
                    <div class="panel">
                        <h2 class="h5">{!! lang('Mon style') !!}</h2>
                        <p>{!! $profile->style !!}</p>
                    </div>
                    <div class="panel">
                        <h2 class="h5">{!! lang("Mes sources d'inspiration") !!}</h2>
                        <p>{!! $profile->sources_inspiration !!}</p>
                    </div>
                    <div class="panel pb-0">
                        <h2 class="h5">{!! lang('Mes formations et certifications') !!} {!! $type == "architecte d'intérieur" ? "d'" : 'de ' !!}{!! $type !!}</h2>

                        <table class="table m-0">
                            @foreach ($profile->formations as $formation)
                                <tr class="formation-item">
                                    <td style="padding: 15px 30px 20px 0">
                                        <b>{{ $formation->libelle }}</b>
                                        <span class="ecole">{{ $formation->ecole }}</span>
                                    </td>
                                    <td style="width: 100px; text-align: center; padding: 15px 0 15px 0">
                                        <span>{{ $formation->annee }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                    <div class="panel pb-0">
                        <h2 class="h5">{!! lang('Langues') !!}</h2>

                        <table class="table m-0">
                            @foreach ($profile->langues as $langue)
                                <tr class="formation-item">
                                    <td style="padding: 20px 0 20px 0">
                                        <b>{{ $langue->libelle }}</b>
                                        <span class="ecole">{{ $langue->niveau }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
                <div class="col-md-3">
                    @if ($profile->video)
                        <div class="panel pt-2 pl-2 pr-2 pb-0">
                            <iframe class="m-0" src="{{ $profile->url_embed }}" width="100%" height="240"
                                allowfullscreen frameborder="0"></iframe>
                        </div>
                    @else
                        <div class="panel">
                            <div class="h5">{!! lang('Partager le profil de') !!} {{ $designer->prenom }} sur</div>
                            <a target="_blank" href="http://www.facebook.com/sharer.php?u={{ request()->url() }}"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-facebook.svg') }}" alt="">
                            </a>
                            <a target="_blank"
                                href="https://twitter.com/intent/tweet?text=Rejoignez {{ $designer->prenom }} sur Pipcke pour découvrir ses styles préférés, ses sources d’inspiration ainsi que ses conseils d’aménagement et de décoration !&url={{ request()->url() }}"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-twitter.png') }}" alt="">
                            </a>
                            <a target="_blank"
                                href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{ request()->url() }}"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-linkedin.svg') }}" alt="">
                            </a>
                            <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"
                                class="icon">
                                <img src="{{ asset('img/icons/pipcke-follow-us-pinterest.svg') }}" alt="">
                            </a>
                            <a class="font-size-24 icon-mail"-mail"
                                href="mailto:?Subject=Découvrez le profil de {{ $designer->prenom }}&amp;Body=Rejoignez {{ $designer->prenom }} sur Pipcke pour découvrir ses styles préférés, ses sources d’inspiration ainsi que ses conseils d’aménagement et de décoration ! %0D%0D{{ request()->url() }}"><i
                                    class="fa fa-envelope-square"></i></a>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </section>

    <section class="vc_row pt-70 pb-60">
        <div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="mb-70 ">
                        <div class="text-center text-black font-size-21">{!! lang('Portfolio de') !!} {{ $designer->prenom }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="lqd-column">
                <div class="ld-carousel-phone ld-carousel-phone-style-2">
                    <div class="ld-carousel-phone-inner">
                        <div class="mockup-container">
                            <div class="mockup-inner">
                                <figure class="text-center">
                                    <img src="{{ asset('img/mockup-1.png') }}" alt="Phone">
                                </figure>
                            </div>
                        </div>
                        <div class="mockup-content-container">
                            <div class="mockup-content-inner">
                                <div
                                    class="carousel-container carousel-nav-floated carousel-nav-middle carousel-nav-bordered carousel-nav-circle carousel-nav-sm">
                                    <div class="carousel-items "
                                        data-lqd-flickity='{ "groupCells": false, "wrapAround": true, "cellAlign": "center" }'>
                                        @foreach ($profile->photos as $key => $photo)
                                            <div class="carousel-item">
                                                <img loading="lazy" src="{{ asset($photo->url) }}"
                                                    alt="Portfolio {{ $designer->prenom }} {{ $designer->nom }} {{ $key + 1 }}">
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pb-70">
        <div class="container text-center">
            @if (!($draft ?? 0))
                @if (strpos(url()->previous(), 'pinterest') !== false ||
                        app('router')->getRoutes()->match(app('request')->create(url()->previous()))->getName() != 'experience_achat.selectionner_designers')
                    <div class="btn btn-sm btn2 mt-10 border-radius-10 lancerProjet {{ $designer->profile->disponible ? '' : 'disabled' }}"
                        data-id="{{ $designer->id }}">{!! lang('Lancer votre projet avec') !!} {{ $designer->prenom }}</div>
                @endif
            @else
                <div class="text-danger p-3">Visualisation profil non validé</div>
            @endif
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"
        integrity="sha512-jNDtFf7qgU0eH/+Z42FG4fw3w7DM/9zbgNPe3wfJlCylVDTT3IgKW5r92Vy9IHa6U50vyMz5gRByIu4YIXFtaQ=="
        crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {
            $('#coverphoto').lazyload({
                effect: "fadeIn"
            });
            $('#profilephoto').lazyload({
                effect: "fadeIn"
            });
        });
    </script>
@endsection

@section('schema')
    @php
        $t = [];

        if ($site_personnel) {
            array_push($t, $site_personnel);
        }
        if ($facebook) {
            array_push($t, $facebook);
        }
        if ($twitter) {
            array_push($t, $twitter);
        }
        if ($linkedin) {
            array_push($t, $linkedin);
        }
        if ($pinterest) {
            array_push($t, $pinterest);
        }
        if ($behance) {
            array_push($t, $behance);
        }
        if ($instagram) {
            array_push($t, $instagram);
        }
    @endphp
    <script type="application/ld+json">
		{
		  "@context": "http://schema.org",
		  "@type": "Person",
		  "name": "{{ $designer->prenom.' '.$designer->nom}}",
		  "jobTitle": "{!! ucfirst($type) !!}",  
		  "alternateName": "{{ $designer->prenom.' '.$designer->nom}}",
		  "description": "Apprenez-en plus sur {{ $designer->prenom }} {{ $designer->nom }}, notre {!! $type !!}, à travers sa conception de l’architecture d’intérieur, ses styles déco mais aussi ses sources d’inspiration et ses réalisations.",
		  "url": "{{ url()->current() }}"
		  
		  @if( count( $t ) ) 
		  , "sameAs": [ {!! '"'.implode( '","', $t ).'"' !!} ]
		  @endif
		
		}
	</script>

@endsection