@extends('simulator.templates.shared.MonPlanDeFinancement')

@section('lot_details')
    @if($has_lot)
    <div style='position:absolute; width: 200px; left: 370px; top: 230px; z-index: -10;'>
        <img src='{{ base_url('assets/img/mozartpp/loupe.png') }}' style='width: 160px;'>
    </div>

    <div style="position:absolute ; width : 250px ; top: 0px; left : 50px; z-index: 10;" class="index1">
        <div class="titre-orange titre3">
            Détail de mon lot :
        </div>
    </div>
    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 65px; left : 50px; z-index: 10;">
        N° du lot
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 60px; left : 230px; z-index: 10;">{{ $lot_number }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 100px; left : 50px; z-index: 10;">
        Superficie (m²)
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 95px; left : 230px; z-index: 10;">{{ $surface_lot }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 135px; left : 50px; z-index: 10;">
        Type
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 250px ; top: 130px; left : 230px; z-index: 10;">{{ $type_lot }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 170px; left : 50px; z-index: 10;">
        Étage
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 165px; left : 230px; z-index: 10;">{{ $etage_lot }}</div>

    <div style="position:absolute ; width : 250px ; top: 215px; left : 50px; z-index: 10;" class="index1">
        <div class="titre-orange-outline titre3">
            Équipements
        </div>
    </div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 290px; left : 50px; z-index: 10;">
        Parking
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 285px; left : 230px; z-index: 10;">{{ $nombre_parkings }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 325px; left : 50px; z-index: 10;">
        Garage
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 320px; left : 230px; z-index: 10;">{{ $nombre_garages }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 360px; left : 50px; z-index: 10;">
        Cave
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 355px; left : 230px; z-index: 10;">{{ $nombre_caves }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 395px; left : 50px; z-index: 10;">
        Balcon (m²)
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 390px; left : 230px; z-index: 10;">{{ $surface_balcon }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 430px; left : 50px; z-index: 10;">
        Terrasse (m²)
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 425px; left : 230px; z-index: 10;">{{ $surface_terrasse }}</div>

    <div class="maison-fin-titre text-left" style="position:absolute ; width : 150px ; top: 460px; left : 50px; z-index: 10;">
        Jardin (m²)
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 455px; left : 230px; z-index: 10;">{{ $surface_jardin }}</div>


    <div class="maison-fin-titre text-left" style="position:absolute ; top: 485px; left : 50px; z-index: 10; background-color: #CBB371; color: white; padding: 10px 8px 10px 8px;">
        Loyer préconisé
    </div>
    <div class="titre2 text-orange text-left" style="position:absolute ; width : 150px ; top: 485px; left : 230px; z-index: 10; ">{{ $loyer_preconise > 0 ? number_format($loyer_preconise, 0, ',', ' ') . ' €' : '--' }}</div>
    @endif
@endsection

@section('annexes_details')
    @if($has_lot)
    <div style="padding: 5px; background-color: #CBB371; position:absolute ; width : 200px ; top: 110px; left : 470px;">
        <div class="fin-titre">
            Dont prix parking TTC
        </div>
    </div>
    <div style="position:absolute ; width : 200px ; top: 105px; left : 740px;">
        <div class="fin-valeur">
            {{ $prix_parking_ttc > 0 ? number_format($prix_parking_ttc, 0, ',', ' ') . ' €' : '--' }}
        </div>
    </div>


    <div style="padding: 5px; background-color: #CBB371; position:absolute ; width : 200px ; top: 150px; left : 470px;">
        <div class="fin-titre">
            Dont prix garage TTC
        </div>
    </div>
    <div style="position:absolute ; width : 200px ; top: 145px; left : 740px;">
        <div class="fin-valeur">
            {{ $prix_garage_ttc > 0 ? number_format($prix_garage_ttc, 0, ',', ' ') . ' €' : '--' }}
        </div>
    </div>

    <div style="padding: 5px; background-color: #CBB371; position:absolute ; width : 200px ; top: 190px; left : 470px;">
        <div class="fin-titre">
            Dont prix cave TTC
        </div>
    </div>
    <div style="position:absolute ; width : 200px ; top: 185px; left : 740px;">
        <div class="fin-valeur">
            {{ $prix_cave_ttc > 0 ? number_format($prix_cave_ttc, 0, ',', ' ') . ' €' : '--' }}
        </div>
    </div>
    @endif
@endsection

@section('loyer_preconise')
    {{-- Le loyer préconisé est déjà affiché dans la colonne de gauche (lot_details) --}}
    {{-- Pas besoin de le réafficher dans la colonne de financement pour Malraux --}}
@endsection