@extends('layouts.front')
@php
    $isStuck = 1;
    $no_full_title = true;
    $noStyleCss = true;
@endphp
@section('meta-title', 'Transformez Votre Espace avec Notre Guide Pipcke')
@section('meta')
    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Transformez Votre Espace avec Notre Guide Pipcke" />
    <meta property="og:description"
        content="Evitez les erreurs fatales en design d’intérieur avec notre guide Pipcke. Téléchargez gratuitement pour des conseils experts et transformez votre espace." />
    <meta name="description"
        content="Evitez les erreurs fatales en design d’intérieur avec notre guide Pipcke. Téléchargez gratuitement pour des conseils experts et transformez votre espace." />
    <meta property="twitter:image" content="{{ asset('bricorama-landing-ressources/img.png') }}">
    <meta property="og:image" content="{{ asset('bricorama-landing-ressources/img.png') }}">
    <meta property="fb:app_id" content="730800570418065">
@endsection

@section('style')
    <style>
        #content {
            background-color: white;
        }

        .title {
            text-align: center;
            color: white;
        }

        .title h1 {
            color: black;
            margin-bottom: 10px;
        }

        .title div {
            font-weight: 900;
            font-size: 24px;
            text-align: center;
            width: 100%;
            color: var(--color-font);
        }

        h4 {
            font-family: Poppins;
            font-weight: bold;
            font-size: 18px;
        }

        h1 {
            font-family: Poppins;
            font-weight: 900;
            font-size: 40px;
            text-align: center;
            width: 100%;
            text-shadow: 2px 4px 3px white;
        }

        .bg-flou:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 30%, rgb(246 222 211) 100%);
            z-index: -1;
        }

        .title-gradient-gray {
            background: linear-gradient(90deg, #bcbcbb 0%, #5f6474 100%);
            border-radius: 10px;
            color: white;
            font-size: 18px;
            padding: 6px 12px;
            font-weight: bold;
        }

        .title-gradient-marron {
            background: linear-gradient(90deg, #d7ac7f 50%, #f4dcd0 100%);
            border-radius: 10px;
            color: white;
            font-size: 18px;
            padding: 6px 12px;
            font-weight: bold;
        }

        .title-gradient-marron.bg-gradient-inverse {
            background: linear-gradient(90deg, #f4dcd0 50%, #d7ac7f 100%);
        }

        .title-gradient-blue {
            background: linear-gradient(90deg, #d4e2ea 50%, #ebf2f6 100%);
            border-radius: 10px;
            color: black;
            font-size: 18px;
            padding: 6px 12px;
        }

        .whitepaper-cover-page {
            height: 75vh;
        }

        .panel {
            background-color: #f6ded3;
            border-radius: 20px !important;
        }
    </style>
@endsection
@section('body-class', 'designer_profile')
@section('content')
    <div class="loader">
        <div></div>
    </div>
    <section class="mt-120">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row text-center">
                        <div class="col-md-12">
                            <div class="title">
                                <h1>Transformez votre espace avec Pipcke!</h1>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-20 mb-20 offresPro-row">
                        <div class="col-lg-6 col-md-12 text-center">
                            <img class="whitepaper-cover-page" src="{{ asset('img/livreblanc.png') }}"
                                alt="Livre blanc Pipcke" />
                        </div>
                        <div class="col-lg-6 col-md-12 col-md- d-flex align-items-center justify-content-center">
                            <div class="text-center" id="whitepaper-intro">
                                <p>
                                    Téléchargez notre guide exclusif pour réussir votre projet déco d'intérieur
                                </p>
                                <br>
                                <p>
                                    <b>18 erreurs fatales à éviter absolument!</b>
                                <p>
                                <p>
                                    Découvrez les astuces et conseils de nos designers pour:
                                </p>
                                <ul style="list-style: disc" class="ml-5 text-left">
                                    <li>Planifier votre projet efficacement</li>
                                    <li>Passer à l'action avec des étapes claires</li>
                                    <li>Faire les bons choix de produits</li>
                                    <li>Peaufiner les détails pour un espace unique</li>
                                </ul>
                                <br>
                                <p>
                                    <b>Ce que vous allez apprendre:</b>
                                <p>
                                <ul style="list-style: disc" class="ml-5 text-left">
                                    <li>Planification: Préparez-vous pour le succès</li>
                                    <li>Exécution: Réalisez votre projet sans tracas</li>
                                    <li>Choix des produits: Évitez les erreurs coûteuses</li>
                                    <li>Personnalisation: Ajoutez votre touche personnelle</li>
                                </ul>
                                <br>
                                <div class="btn btn9_black  btn-action text-uppercase semi-round" id="initiate_download">
                                    Téléchargez
                                    maintenant!</div>
                            </div>
                            <div class="text-left w-75" id="whitepaper-download" style="display: none;">
                                <form action="{{ route('white-paper.post') }}" id="whitepaper-form" method="post"
                                    enctype="multipart/form-data">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="">{!! lang('Prénom') !!} *</label>
                                                <input type="text" class="form-control" required=""
                                                    placeholder="Votre Prénom" name="prenom">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="">{!! lang('Nom') !!} *</label>
                                                <input type="text" class="form-control" required=""
                                                    placeholder="Votre Nom" name="nom">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="">{!! lang('Email') !!} *</label>
                                                <input type="email" class="form-control" required=""
                                                    placeholder="Votre email" name="email">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 text-left form-group mb-0">
                                            <div class="checkbox">
                                                <label class="font-size-14">
                                                    <input type="checkbox" class="mt-2" name="newsletter" required="">
                                                    {!! lang("J'accepte de recevoir des conseils de Pipcke.") !!}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="font-size-12">* Champs obligatoires</div> <br>
                                            {!! NoCaptcha::display() !!}
                                        </div>
                                        <div class="col-md-12 pt-20 text-center">
                                            <button
                                                class="btn btn9_black  btn-action text-uppercase semi-round">{!! lang('Valider') !!}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="text-center" id="whitepaper-sent" style="display: none;">
                                <div class="p-5 panel">
                                    <p class="">Votre guide a été envoyé! Il vous attend dans votre boîte email.</p>
                                    <a class="btn btn2 btn-action text-uppercase semi-round"
                                        href="{{ route('home') }}">Accueil</a>
                                    <a class="btn btn9_black btn-action text-uppercase semi-round font-weight-semibold px-1 bg-hover-white"
                                        href="{{ route('nouveauprojet') }}">Démarrer mon projet</a>
                                </div>
                            </div>
                            {{-- <div class="text-center" id="whitepaper-error" style="display: none;">
                                <div class="p-5 panel">
                                    <p class="">Erreur lors du téléchargement du guide veuillez réessayer
                                        ultérieurement</p>
                                    <a class="btn btn2 btn-action text-uppercase semi-round"
                                        href="{{ route('white-paper') }}">Réessayer</a>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('script')
    {!! NoCaptcha::renderJs() !!}
    <script>
        jQuery(document).ready(function($) {
            $('#initiate_download').click(function(event) {
                event.stopPropagation();
                event.preventDefault();
                $('#whitepaper-intro').hide();
                $('#whitepaper-download').show();
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#whitepaper-form').on('submit', function(e) {
                $(".loader").fadeIn();
                e.preventDefault();
                e.stopPropagation();
                var formData = new FormData(this);
                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('#whitepaper-download').hide();
                            $('#whitepaper-sent').show();
                        } else {
                            $('#whitepaper-download').hide();
                            $('#whitepaper-sent').show();
                        }
                        $(".loader").fadeOut();
                        console.log('Form submitted successfully');
                        console.log(response);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Handle errors
                        $('#whitepaper-download').hide();
                        $('#whitepaper-sent').show();
                        $(".loader").fadeOut();
                        console.log('Form submission failed');
                        console.log(textStatus, errorThrown);
                    }
                });
            });
        });
    </script>
@endsection