@extends('layouts.realisation')
@php
    $no_full_title = true;
    $style_1 = $realisation->style_1;
    $style_2 = $realisation->style_2;
    $piece = $projet->espace;
    $id = $projet->id;
    $forfait = $projet->forfait_conception;
@endphp

@section('meta-title')
    {{ $realisation->meta_title_projet }}
@endsection

@section('meta')
    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{ $realisation->meta_title_projet }}" />
    <meta property="og:description" content="{{ $realisation->meta_desc_projet }}" />
    <meta name="description" content="{{ $realisation->meta_desc_projet }}" />
@endsection
@section('additional-schema')
    <script type="application/ld+json">
        {
         "@context": "https://schema.org",
         "@graph": [
            {
                "@type": "WebPage",
                "@id": "{{ request()->url() }}",
                "url": "{{ request()->url() }}",
                "name": "{{ $realisation->meta_title_projet }}",
                "primaryImageOfPage": {
                    "@id": "{{ $realisation->cover->nom_image }}"
                },
                "image": {
                    "@id": "{{ $realisation->cover->nom_image }}"
                },
                "thumbnailUrl": "{{ $realisation->cover->nom_image }}",
                "datePublished": "{{ $realisation->created_at }}",
                "dateModified": "{{ $realisation->created_at }}",
                "description": "{{ $realisation->meta_desc_projet }}",
                "inLanguage": "fr-FR"
            },
            {
				"@type": "BreadcrumbList",
				"itemListElement": [
					{
						"@type": "ListItem",
						"position": 1,
						"name": "Pipcke",
						"item": "https://pipcke.fr/"
					},
					{
						"@type": "ListItem",
						"position": 2,
						"name": "Réalisations aménagement d'interieur",
						"item": "https://pipcke.fr/realisations-amenagement-d-interieur/"
					},
					{
						"@type": "ListItem",
						"position": 3,
						"name": "Aménagement {{ $piece }} {!! strtolower($style_1) !!} {!! strtolower($style_2) !!} - {{ $id }}"
					}
				]
			},
			{
				"@type": "ImageObject",
				"inLanguage": "fr-FR",
				"url": "{{ $realisation->cover->nom_image }}",
				"contentUrl": "{{ $realisation->cover->nom_image }}",
				"caption": "Aménagement {{ $piece }} {!! strtolower($style_1) !!} {!! strtolower($style_2) !!} - {{ $id }}"
			}
		]
      }
    </script>
@endsection

@section('sub-menu')
    @include('front.pages.realisations.generic.menu')
@endsection

@section('style')
    <style>
        .custom_desc p {
            font-size: 1em !important;
            font-family: Poppins !important;
        }

        .custom_desc font {
            font-size: 1em !important;
            font-family: Poppins !important;
        }

        .custom_desc span {
            font-size: 1em !important;
            font-family: Poppins !important;
        }

        .custom_desc a {
            font-size: 1em !important;
            font-family: Poppins !important;
        }

        .realisation_icons {
            margin-left: 20px !important;
            padding-top: 20px;
        }

        .realisation-designer-desc .project_content p {
            margin-left: 20px !important;
        }

        .realisation-designer-img-container {
            position: relative;
            height: 100%;
        }

        .realisation-designer-photo {
            margin: 0 !important;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        @media screen and (max-width: 800px) {
            .project-steps {
                display: inline-grid;
                grid-template-columns: repeat(auto-fit, 75vw);
                min-width: 75vw;
                padding: 20px !important;
                grid-gap: 10px;
            }

            .project-step {
                /* display: table-cell; vertical-align: middle; */
                width: 100% !important;
                margin: 0 auto !important;
            }

            .realisation-designer-img-container {
                height: 300px !important;
            }
        }

        @media screen and (max-width: 600px) {
            .realisation_icons {
                display: inline-grid;
                grid-template-columns: repeat(auto-fit, 35vw);
                min-width: 35vw;
                padding-top: 20px !important;
                grid-gap: 10px;
                padding: 0;
                list-style: none;
                margin-left: 0px !important
            }

            .realisation_icon {
                width: 100% !important;
                margin: 0 auto !important;
            }

            .values {
                white-space: none;
            }

            .realisation-designer {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .realisation-designer-img {
                text-align: center;
            }

            .realisation-designer-desc .project_content p {
                padding: 0px 20px !important;
                margin-left: 0 !important;
                font-size: 1em !important;
            }
        }
    </style>
@endsection

@section('content')
    <h1 class="hidden">{{ $realisation->meta_h1_projet }}</h1>
    <section class="vc_row">
        <div class="container-fluid">
            <div id="partials">
                @include('front.pages.realisations.generic.project.partials.conception')
            </div>
        </div>
    </section>
    <section class="vc_row">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-8 realisation-breadcrumb m-auto" style="margin-bottom: -15px !important;">
                    <div class="col">
                        <ol class="breadcrumb pl-0">
                            <li>
                                <a href="{{ route('home') }}" id="{{ route('home') }}">
                                    <span>Pipcke</span>
                                </a>
                            <li>
                                <a href="{{ route('realisations-pipcke') }}" id="{{ route('realisations-pipcke') }}">
                                    <span>Réalisations aménagement d'interieur</span>
                                </a>
                            </li>

                            <li>
                                <p>
                                    <span>Aménagement {{ $piece }} {!! strtolower($style_1) !!}
                                        {!! strtolower($style_2) !!} - {{ $id }}</span>
                                </p>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 m-auto">
                    <div class="col">
                        <div class="panel">
                            <div class="project_content">
                                <h2 class="h2 w-100 m-auto font-weight-bold"
                                    style="font-size: 1.4em !important;padding: 20px 20px 0">
                                    {{ $realisation->nom_projet }}</h2>
                                <p class="h3 w-100 m-auto pt-10 forfait_type" style="color:#DEAF7F; font-size:1.3em;">
                                    Forfait {{ $projet->forfait_conception ?? $projet->forfait }}</p>

                                @if (strip_tags($realisation->desc_projet) !== $realisation->desc_projet)
                                    <div class="custom_desc"
                                        style="margin-left: 20px !important;
                                    font-size: 1em !important;font-family: Poppins !important;
                                    margin: auto; white-space: pre-line;line-height: 1.8;padding-inline-end: 20px;">
                                        {!! $realisation->desc_projet !!}</div>
                                @else
                                    <p
                                        style="margin-left: 20px !important;
                                            font-size: 1em !important;
                                            margin: auto; white-space: pre-line;line-height: 1.8;padding-inline-end: 20px;">
                                        {{ $realisation->desc_projet }}
                                    </p>
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col col-md-8 m-auto">
                    <div class="col">
                        <div class="panel">
                            <div class="project_content">
                                <h2 class="h2 w-100 m-auto font-weight-bold"
                                    style="font-size: 1.4em !important;padding: 20px 20px 0">Besoin client</h2>
                                @if (strip_tags($realisation->besoin_client) !== $realisation->besoin_client)
                                    <div class="custom_desc"
                                        style="margin-left: 20px !important;
                                    font-size: 1em !important;font-family: Poppins !important;
                                    margin: auto; white-space: pre-line;line-height: 1.8;padding-inline-end: 20px;">
                                        {!! $realisation->besoin_client !!}</div>
                                @else
                                    <p
                                        style="margin-left: 20px !important;
                                        font-size: 1em !important;
                                        margin: auto; white-space: pre-line;line-height: 1.8;padding-inline-end: 20px;">
                                        {{ $realisation->besoin_client }}
                                    </p>
                                @endif
                                <div class="w-100 m-auto text-center realisation_icons">
                                    <div class="m-auto realisation_icon" style="display: inline-block; width:15%">
                                        <img src="{{ asset('img/piece.svg') }}" class="m-auto" style="height: 50px"
                                            alt="">
                                        <br>
                                        <span class="values">{{ $piece }}</span>
                                    </div>
                                    <div class="w-15 m-auto realisation_icon" style="display: inline-block;">
                                        <img src="{{ asset('img/surface.svg') }}" class="m-auto" style="height: 50px"
                                            alt="">
                                        <br>
                                        <span class="values">{{ $realisation->superficie }} m²</span>
                                    </div>
                                    <div class="w-15 m-auto realisation_icon" style="display: inline-block;">
                                        <img src="{{ asset('img/budget.svg') }}" class="m-auto" style="height: 50px"
                                            alt="">
                                        <br>
                                        @php
                                            $budget = number_format($realisation->budget, 0, '', ' ');
                                        @endphp
                                        <span class="values">{{ $budget }} €</span>
                                    </div>
                                    <div class="w-15 m-auto realisation_icon" style="display: inline-block;">
                                        <img src="{{ asset('img/styles/' . $style_1 . '.svg') }}" class="m-auto"
                                            style="height: 50px" alt="">
                                        <br>
                                        <span class="values">{{ $style_1 }}</span>
                                    </div>
                                    <div class="w-15 m-auto realisation_icon" style="display: inline-block;">
                                        <img src="{{ asset('img/styles/' . $style_2 . '.svg') }}" class="m-auto"
                                            style="height: 50px" alt="">
                                        <br>
                                        <span class="values">{{ $style_2 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col col-md-8 m-auto text-center">
                    <div class="col">
                        <div class="text-center pt-20">
                            <h2 class="h2 m-auto font-weight-bold" style="font-size: 2rem;">Ma décoration d’intérieur
                                réalisée par les décorateurs <br> et architectes d’intérieur de mon choix à partir de 90€
                            </h2>
                        </div>
                        <div class="text-center pt-30 pb-30 project-steps">
                            <div class="w-25 m-auto project-step" style="display: inline-block;">
                                <div class="numberCircle m-auto ">1</div>
                                <span class="">Je lance mon projet</span>
                            </div>
                            <div class="w-30 m-auto text-center project-step" style="display: inline-block;">
                                <div class="numberCircle m-auto">2</div>
                                <span class="">Je collabore avec mes designers</span>
                            </div>
                            <div class="w-25 m-auto text-center project-step" style="display: inline-block;">
                                <div class="numberCircle m-auto">3</div>
                                <span class="">Je donne vie à mon projet</span>
                            </div>
                        </div>
                        <div class="text-center pb-30">
                            <a rel="nofollow" href="{{ route('nouveauprojet') }}"
                                class="btn btn2 btn-action text-uppercase semi-round font-weight-semibold">{!! lang('Lancer mon projet') !!}<span
                                    class="btn-icon"><i class="fa fa-angle-right"></i></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="row w-110 panel realisation-designer m-auto">

                    @if ($projet->designer_retenue)
                        <div class="col-md-4 realisation-designer-img text-center">
                            {{-- <img src="{{ asset($projet->designer_retenue->designer->photo ?? '') }}" style="height: 35vh" alt=""> --}}
                            <div class="designer_profile realisation-designer-img-container">
                                <div class="user_photo realisation-designer-photo">
                                    <div id="profilephoto" class="photo"
                                        data-background-image="url('{{ $projet->designer_retenue->designer->photo ?? '' }}')">
                                    </div>
                                </div>
                            </div>

                        </div>
                    @endif
                    <div class="col-md-6 pt-20 realisation-designer-desc">
                        <div class="project_content">
                            @if (isset($des->designer))
                                <h2 class="h2 w-100 m-auto font-weight-bold" style="font-size: 1.4em !important;">
                                    Conception
                                    réalisée par {{ $des->designer->prenom }}</h2>
                            @endif
                            <p class="h3 w-100 m-auto"
                                style="color: #707070;font-size: 1.3em !important;font-style: italic;padding-top: 5px;text-transform: none !important;">
                                {{ $des->profile->type }}</p>
                            <p style="white-space: pre-line;margin-bottom:0px !important;">
                                @php
                                    $style_designer = str_replace('span', 'p', $des->profile->style);
                                @endphp
                                {!! $style_designer !!}
                            </p>

                            <div style="padding-left: 20px;">
                                @if (strpos(url()->previous(), 'pinterest') !== false ||
                                        app('router')->getRoutes()->match(app('request')->create(url()->previous()))->getName() != 'experience_achat.selectionner_designers')
                                    @if (isset($des->designer))
                                        <div class="btn btn-sm btn2 mt-10 border-radius-10 lancerProjet"
                                            style="padding-left: 20px">
                                            Démarrer mon projet avec {{ $des->designer->prenom }}</div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </div>
    </section>
    @php
        $allprojets = \App\Models\Projet::where('published', 1)
            ->where('id', '!=', $projet->id)
            ->orderBy('id', 'desc')
            ->get();
        $projets = [];
        $designersId = [];
        foreach ($allprojets as $projet) {
            foreach ($projet->designers as $designer) {
                array_push($designersId, $designer->designer->id);
            }
            if (
                $projet->realisation->is_draft == 0 &&
                (in_array($des->designer->id, $designersId) || $des->designer->id == 0)
            ) {
                array_push($projets, $projet);
            }
            $designersId = [];
        }
        $number = count($projets);
    @endphp

    <section class="vc_row bg-light here">
        @if ($projets && count($projets))
            <div class="container-fluid bg-light">
                <div class="row pt-20 panel bg-light" style="padding-bottom: 0px !important">
                    <h2 class="h2 pt-20 m-auto font-weight-bold text-center" style="font-size: 1.4em;">Découvrir d'autres
                        projets de {{ $des->designer->prenom }}</h2>
                    @include('front.pages.realisations.generic.caroussel', [
                        'des' => $des->designer->id,
                        'current' => $projet->id,
                    ])
                </div>
            </div>
        @endif
        <div class="text-center pt-60 pb-60">
            <a rel="nofollow" href="{{ route('realisations-pipcke') }}"
                class="btn btn2 btn-action text-uppercase semi-round font-weight-semibold">{!! lang("Découvrir d'autres réalisations") !!}
            </a>
        </div>
    </section>
@endsection