@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 }} | Pipcke
@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 }} | Pipcke" />
    <meta property="og:description" content="{{ $realisation->meta_desc_projet }}" />
    <meta name="description" content="{{ $realisation->meta_desc_projet }}" />
@endsection

@section('sub-menu')
    @include('admin.modules.realisations.draft.menu')
@endsection

@section('style')
    <style>
        .realisation_icons {
            margin-left: 20px !important;
            padding-top: 20px;
        }

        .realisation-designer-desc .project_content p {
            margin-left: 20px !important;
            font-size: 1.2rem !important;
            padding-top: 10px;
            margin: auto;
        }

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

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

            .values {
                white-space: none;
            }

            .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 {
                display: flex;
                /* establish flex container */
                flex-direction: column;
                /* stack flex items vertically */
                justify-content: center;
                /* center items vertically, in this case */
                align-items: center;
            }

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

            .realisation-designer-desc .project_content p {
                padding: 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('admin.modules.realisations.draft.partials.esquisse')
            </div>
        </div>
    </section>
    <section class="vc_row">
        <div class="container-fluid">
            <div class="row">
                <div class=" col-md-offset-2 col-md-8 realisation-breadcrumb" style="margin-bottom: -15px !important;">
                    <div class="col">
                        <ol class="breadcrumb pl-0">
                            <li>
                                <a href="{{ route('home') }}">
                                    <span>Pipcke</span>
                                </a>
                            <li>
                                <a href="{{ 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 col-md-offset-2">
                    <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;">
                                    {{ $realisation->nom_projet }}</h2>
                                <h3 class="h3 w-100 m-auto pt-10" style="color:#DEAF7F; font-size:1.3em;">Forfait
                                    {{ $projet->forfait_conception ?? $projet->forfait }}</h3>

                                @if (strip_tags($realisation->desc_projet) !== $realisation->desc_projet)
                                    @php
                                        $desc = preg_replace(
                                            '/<span\s(.+?)>(.+?)<\/span>/is',
                                            "<br>$2</br>",
                                            $realisation->desc_projet,
                                        );
                                    @endphp
                                    <div
                                        style="margin-left: 20px !important;
                                    font-size: 1em !important;
                                    margin: auto; white-space: pre-line;line-height: 1.8;padding-inline-end: 20px;">
                                        {!! $desc !!}</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 col-md-offset-2">
                    <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;">Besoin
                                    client</h2>
                                <p class="pt-20"
                                    style="margin-left: 20px !important;
                        font-size: 1em !important;
                        margin: auto;">
                                    {{ $realisation->besoin_client }}
                                </p>

                                <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>
                                        <span class="values">{{ $realisation->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 col-md-offset-2 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">
                    @if ($projet->designer_retenue)
                        <div class=" col-md-2 col-md-offset-2 realisation-designer-img">
                            <img src="{{ asset($projet->designer_retenue->designer->photo ?? '') }}" style="height: 35vh"
                                alt="">
                        </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>

                                <h3 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 }}</h3>

                                <p class="pt-20">
                                    @php
                                        $style_designer = strip_tags($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')
                                        <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>
    </section>

@endsection