@php
    // Ne pas afficher cette page si le programme n'existe pas (simulateur indépendant)
    $shouldDisplayPage = isset($program) && $program;
@endphp
@if($shouldDisplayPage)
@php
    // Les données sont calculées par LesInformationsEssentiellesSurMonProgrammeCalculator
    $interiorImage = $interiorImage ?? base_url('assets/img/bulles.jpg');
    $addressLine1 = $addressLine1 ?? '';
    $postalCode = $postalCode ?? '';
    $city = $city ?? '';
    $numberOfLots = $numberOfLots ?? 0;
    $ecologicalNorm = $ecologicalNorm ?? '';
    $promoter = $promoter ?? '';
    $deliveryDateFormatted = $deliveryDateFormatted ?? '';
    $notaryName = $notaryName ?? '';
    $notaryFirstName = $notaryFirstName ?? '';
    $notaryCompany = $notaryCompany ?? '';
@endphp
<page style="font-size: 12pt">
    <div class="contener">
        <div class="cadre">
            @include('simulator.templates.shared._titre_page', ['titreContent' => '<span class="orange backgroundtitre">Les informations essentielles</span> sur mon programme'])

            <div class="contenu">
                <div style="position: absolute; width: 480px; height: 270px; top: 240px; left: 470px; z-index: 0; background-color: black;"></div>

                <div style="position:absolute ; width : 480px ; top: 220px; left : 490px; z-index: 10;">
                    <img style="width:480px;height:270px" src="{{ $interiorImage }}">
                </div>
                <div style='position:absolute; width: 200px; left: 750px; top: 440px; z-index: 10;'>
                    @php
                        $svgOndesUp = file_get_contents(public_path('assets/img/mozartpp/ondes-up.svg'));
                        $svgOndesUp = str_replace('#1d1d1b', 'currentColor', $svgOndesUp);
                        $svgOndesUp = preg_replace('/<svg /', '<svg style="width:160px;height:auto;display:block;" ', $svgOndesUp, 1);
                    @endphp
                    <span style="display:block;width:160px;color: var(--primary-color);">{!! $svgOndesUp !!}</span>
                </div>

                <div style="position : absolute ; width : 200px ; height : 200px; top: 0px; left : -100px; text-align: center;">
                    <div class="img-picto-2">
                        @include('simulator.templates.shared._pictoSynthese', [
                            'picto' => 'adresse',
                            'primaryHex' => $primaryColor ?? '#d6bd85'
                        ])
                    </div>
                    <div class="titrepuce">Adresse</div>
                    <div class="mt10 mb10 sep" style="width:200px; margin-top: -10px;"></div>
                    <div class="textepuce">{{ $addressLine1 }},<br/>{{ $postalCode }} {{ $city }}</div>
                </div>

                <div style="position : absolute ; width : 200px ; height : 200px; top: 0px; left : 150px; text-align: center;">
                    <div class="img-picto-2">
                        @include('simulator.templates.shared._pictoSynthese', [
                            'picto' => 'appartements',
                            'primaryHex' => $primaryColor ?? '#d6bd85'
                        ])
                    </div>
                    <div class="titrepuce">Nombre de logements</div>
                    <div class="mt10 mb10 sep" style="width:200px; margin-top: -10px;"></div>
                    <div class="textepuce">{{ $numberOfLots }} logements</div>
                </div>

                <div style="position : absolute ; width : 200px ; height : 200px; top: 0px; left : 400px; text-align: center;">
                    <div class="img-picto-2">
                        @include('simulator.templates.shared._pictoSynthese', [
                            'picto' => 'norme-th',
                            'primaryHex' => $primaryColor ?? '#d6bd85'
                        ])
                    </div>
                    <div class="titrepuce">Norme thermique</div>
                    <div class="mt10 mb10 sep" style="width:200px; margin-top: -10px;"></div>
                    <div class="textepuce">{{ $ecologicalNorm }}</div>
                </div>

                @if(!empty($notaryName) && trim($notaryName) !== "")
                <div style="position : absolute ; width : 200px ; height : 200px; top: 0px; left : 650px; text-align: center;">
                    <div class="img-picto-2">
                        @include('simulator.templates.shared._pictoSynthese', [
                            'picto' => 'picto-notaire',
                            'primaryHex' => $primaryColor ?? '#d6bd85'
                        ])
                    </div>
                    <div class="titrepuce">Notaire</div>
                    <div class="mt10 mb10 sep" style="width:200px; margin-top: -10px;"></div>
                    <div class="textepuce">{{ $notaryFirstName }} {{ $notaryName }}<br/>{{ $notaryCompany }}</div>
                </div>
                @endif

                <div style="position : absolute ; width : 200px ; height : 200px; top: 180px; left : -100px; text-align: center;">
                    <div class="img-picto-2">
                        @include('simulator.templates.shared._pictoSynthese', [
                            'picto' => 'promoteur',
                            'primaryHex' => $primaryColor ?? '#d6bd85'
                        ])
                    </div>
                    <div class="titrepuce">Promoteur</div>
                    <div class="mt10 mb10 sep" style="width:200px; margin-top: -10px;"></div>
                    <div class="textepuce">{{ $promoter }}</div>
                </div>

                <div style="position : absolute ; width : 200px ; height : 200px; top: 180px; left : 150px; z-index: 100; text-align: center;">
                    <div class="img-picto-2">
                        @include('simulator.templates.shared._pictoSynthese', [
                            'picto' => 'livraison',
                            'primaryHex' => $primaryColor ?? '#d6bd85'
                        ])
                    </div>
                    <div class="titrepuce">Date de livraison prévue</div>
                    <div class="mt10 mb10 sep" style="width:200px; margin-top: -10px;"></div>
                    <div class="textepuce">{{ $deliveryDateFormatted }}</div>
                </div>
            </div>
        </div>
        <div class="bgwhite" style="position:absolute; width:150px; bottom:110px; text-align:center; left:90px;">
            @include('simulator.templates.shared._pictoLosanges', ['width' => 150])
        </div>
        <div class='pagination'>{{ $pageNumber }}</div>
    </div>
</page>
@endif