@extends('layout.layoutAdmin')

@section('title', "Estim'bien - Estimateur de biens immobilier sur Montpellier - page Estimation ")

@section('content')
    <section id="estim-section">
        <div class="titre-div-bien">
            <h2 class="titreBien">{{ $bien->maisons->typeMaison }} - {{ $bien->client->genre }} {{ $bien->client->prenom }} {{ $bien->client->nom }}</h2>
            <h3>{{ $bien->adresse }}</h3>
            @if($bien->statut !== 2)
                <p id="lien-modal" >Faire l'estimation <img src="{{ asset('/images/open.svg') }}" alt="redirection"></p>
            @else
                <br>
                <p style="text-decoration: none;">Prix Bas : {{ $bien->prix_bas }} €</p>
                <p style="text-decoration: none;">Prix Moyen : {{ $bien->prix_moyen }} €</p>
                <p style="text-decoration: none;">Prix Haut : {{ $bien->prix_haut }} €</p>
            @endif
        </div> 

        <div class="infos-bien">
            <h3 class="titre-parties-infos">Informations sur le bien :</h3>
            <div class="double-wrap">
                <div class="div-wrap">
                    <div class="elements-wrap">
                        <p>Surface Carrez : <b>{{ $bien->maisons->surfaceCarrez }}m²</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Nombre de Pièces : <b>{{ $bien->maisons->nbPieces}}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Nombre de Chambres: <b>{{ $bien->maisons->nbChambres }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Nombre de Salle de bain : <b>{{ $bien->maisons->nbSdb }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Etage du bien : <b>{{ $bien->maisons->etageBien }}</b></p>
                    </div>
                </div>
                <div class="div-wrap">
                    <div class="elements-wrap">
                        <p>Vue du bien : <b>{{ $bien->maisons->vueBien }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Bruit : <b>{{ $bien->maisons->bruit }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Luminosité : <b>{{ $bien->maisons->luminosite }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>DPE : <b>{{ $bien->maisons->DPE }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Etat d'occupation : <b>{{ $bien->maisons->etatOccupation }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Etat du bien : <b>{{ $bien->maisons->etatBien }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p> Commodités et transport : <b>{{ $bien->maisons->commodites }}</b></p>
                    </div>
                    <div class="elements-wrap">
                        <p>Cuisine : <b>{{ $bien->maisons->cuisine }}</b></p>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="infos-bien">
            <h3 class="titre-parties-infos">Expositions :</h3>
            <div class="div-wrap">
                @if($bien->expositions)
                    @if($bien->expositions->nord)
                        <div class="elements-wrap">
                            <p><b>Nord</b></p>
                        </div>
                    @endif
                    @if($bien->expositions->nordEst)
                        <div class="elements-wrap">
                            <p><b>Nord-Est</b></p>
                        </div>
                    @endif
                    @if($bien->expositions->est)
                        <div class="elements-wrap">
                            <p><b>Est</b></p>
                        </div>
                    @endif
                    @if($bien->expositions->sudEst)
                        <div class="elements-wrap">
                            <p><b>Sud-Est</b></p>
                        </div>
                    @endif
                    @if($bien->expositions->sud)
                        <div class="elements-wrap">
                            <p><b>Sud</b></p>
                        </div>
                    @endif
                    @if($bien->expositions->sudOuest)
                        <div class="elements-wrap">
                            <p><b>Sud-Ouest</b></p>
                        </div>
                    @endif
                    @if($bien->expositions->ouest)
                        <div class="elements-wrap">
                            <p><b>Ouest</b></p>
                        </div>
                    @endif
                    @if($bien->expositions->nordOuest)
                        <div class="elements-wrap">
                            <p><b>Nord-Ouest</b></p>
                        </div>
                    @endif
                @else
                    <p>Aucune exposition spécifiée pour ce bien.</p>
                @endif
            </div>
        </div>
        <hr>
        <div class="infos-bien">
            <h3 class="titre-parties-infos">Exterieur :</h3>
            <div class="div-wrap">
                @if($bien->maisons->exterieur->balcon)
                    <div class="elements-wrap">
                        <p>Balcon : <b>{{ $bien->maisons->exterieur->balcon }}m²</b></p>
                    </div>
                @endif
                @if($bien->maisons->exterieur->terrasse)
                    <div class="elements-wrap">
                        <p>Terrasse : <b>{{ $bien->maisons->exterieur->terrasse }}m²</b></p>
                    </div>
                @endif
                @if($bien->maisons->exterieur->jardin)
                    <div class="elements-wrap">
                        <p>Jardin : <b>{{ $bien->maisons->exterieur->jardin }}m²</b></p>
                    </div>
                @endif
            </div>
        </div>
        <hr>
        @if($bien->maisons->precisions)
        <div class="infos-bien">
            <h3 class="titre-parties-infos">Précisions :</h3>
            <p class="précisions-texte">
                {{ $bien->maisons->precisions}}
            </p>
        </div>
        <hr>
        @endif
        <div class="infos-bien">
            <h3 class="titre-parties-infos">Projet de vente :</h3>
            <div class="div-wrap">
                <div class="elements-wrap">
                    <p><b>{{ $bien->maisons->logementVente }}</b></p>
                </div>
                @if($bien->maisons->quandVendre)
                    <div class="elements-wrap">
                        <p><b>{{ $bien->maisons->quandVendre}}</b></p>
                    </div>
                @endif
            </div>
        </div>
        <hr>
        <div class="infos-bien">
            <h3 class="titre-parties-infos">Contact :</h3>
            <div class="div-wrap">
                <div class="elements-wrap">
                    <p><b>{{ $bien->client->genre }} {{ $bien->client->prenom }} {{ $bien->client->nom }}</b></p>
                </div>
                <div class="elements-wrap">
                    <p>Tel : <b>{{ $bien->client->telephone }}</b></p>
                </div>
                <div class="elements-wrap">
                    <p>Email : <b>{{ $bien->client->email }}</b></p>
                </div>
            </div>
        </div>
        <div>
            <form action="{{ route('updateNotes') }}" method="post">
                @csrf
                <h3 class="titre-parties-infos">Notes :</h3>
                <input type="hidden" name="idBien" value="{{ $bien->idBien }}">
                <textarea name="notes" id="notes" cols="30" rows="15">{{ $bien->notes }}</textarea>
                <button type="submit" id="bouton-form" style="width: 270px;">Sauvegarder la note</button>
            </form>
            @if($bien->statut !== 2)
                <button id="openDeleteModal" class="bouton-delete" style="margin-top: 5px; float:right;  background-color: #850A1E; color: white; padding: 10px 30px; border-radius: 20px; font-size: 15px; font-weight: 300; width: 280px; display: flex; justify-content: center; gap: 10px; text-decoration: none;margin-bottom: 50px">Supprimer cette estimation</button>
            @endif
        </div>

        <div id="deleteBienModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>Confirmation de suppression</h2>
                <p>Êtes-vous sûr de vouloir supprimer cette estimation ? Cette action est irréversible.</p>
                <form action="{{ route('biens.delete', $bien->idBien) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Oui, supprimer</button>
                    <button type="button" class="btn btn-secondary" id="cancelDelete">Annuler</button>
                </form>
            </div>
        </div>


         <!-- Modal -->
         <div id="estimationModal" class="modal" >
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2 class="modal-titre">Estimation du bien</h2>
                <form action="{{ route('estimation.email') }}" method="POST" id="estimationForm">
                    @csrf
                    <input type="hidden" value="{{ $bien->idBien }}" name="idBien">
                    <label for="prix">Prix bas:</label>
                    <div class="inputPrix">
                        <input type="text" id="prix_bas" name="prix_bas" required oninput="formatNumberInput(this)">
                        <p>€</p>
                    </div>
                    <label for="prix">Prix moyen:</label>
                    <div class="inputPrix">
                        <input type="text" id="prix_moyen" name="prix_moyen" required oninput="formatNumberInput(this)">
                        <p>€</p>
                    </div>
                    <label for="prix">Prix haut:</label>
                    <div class="inputPrix">
                        <input type="text" id="prix_haut" name="prix_haut" required oninput="formatNumberInput(this)">
                        <p>€</p>
                    </div>
                    <button type="submit">Soumettre l'estimation</button>
                </form>
            </div>
        </div>
    </section>
    <script>
        document.getElementById("openDeleteModal").addEventListener("click", function () {
            document.getElementById("deleteBienModal").style.display = "block";
        });

        document.querySelector("#deleteBienModal .close").addEventListener("click", function () {
            document.getElementById("deleteBienModal").style.display = "none";
        });

        document.getElementById("cancelDelete").addEventListener("click", function () {
            document.getElementById("deleteBienModal").style.display = "none";
        });

        window.onclick = function(event) {
            const modal = document.getElementById("deleteBienModal");
            if (event.target === modal) {
                modal.style.display = "none";
            }
        };
    </script>
@endsection