{% extends "_layouts/default" %}

{% block content %}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

{# 1. Logique de récupération du bien #}
{% set ref = craft.app.request.getSegment(2) %} 
{% set listings = craft.realEstate.getListings() %}
{% set property = null %}
{% for p in listings %}
    {% if p.refP is defined and p.refP == ref %}{% set property = p %}{% endif %}
{% endfor %}

<div class="container mx-auto p-6" style="color: black; background: white; min-height: 100vh;">
    {% if property %}
        
        {# Retour #}
        <div style="margin-bottom: 20px;">
            <a href="/properties" style="color: #6366f1; text-decoration: none;">← Back to all properties</a>
        </div>

        {# GRILLE PRINCIPALE (2 COLONNES) #}
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start;">
            
            {# --- COLONNE GAUCHE : GALERIE --- #}
{# --- COLONNE GAUCHE : GALERIE --- #}
<div x-data="{ 
    activePhoto: '{{ attribute(property.media.photos.G, '1') }}',
    photos: [{% for g in property.media.photos.G ?? [] %}'{{ g }}',{% endfor %}],
    showModal: false,
    scrollMinis(dir) {
        const el = document.getElementById('mini-scroll');
        const amt = 200;
        el.scrollBy({ left: dir === 'left' ? -amt : amt, behavior: 'smooth' });
    }
}" style="width: 100%; position: relative;">

    {# Grande Image #}
    <div @click="showModal = true" style="width: 100%; height: 500px; background: #f3f4f6; border-radius: 12px; overflow: hidden; cursor: zoom-in; margin-bottom: 15px; position: relative; border: 1px solid #eee;">
        <img :src="activePhoto" style="width: 100%; height: 100%; object-fit: cover;">
        <div style="position: absolute; bottom: 15px; right: 15px; background: rgba(0,0,0,0.5); color: white; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem;">
            Click to enlarge
        </div>
    </div>

    {# Container Miniatures avec Flèches #}
    <div style="position: relative; width: 100%; display: flex; align-items: center; group">
        
        {# Flèche Gauche Miniatures #}
        <button @click="scrollMinis('left')" style="position: absolute; left: -10px; z-index: 10; background: white; border: 1px solid #ddd; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-weight: bold;">‹</button>

        <div id="mini-scroll" style="display: flex !important; flex-direction: row !important; overflow-x: auto; gap: 10px; width: 100%; padding: 5px 0; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;">
            {% for key, v in property.media.photos.V ?? [] %}
                {% set gURL = attribute(property.media.photos.G, key) %}
                <img src="{{ v }}" 
                     @click="activePhoto = '{{ gURL }}'"
                     :style="activePhoto == '{{ gURL }}' ? 'border: 3px solid #b45309; opacity: 1;' : 'opacity: 0.6; border: 3px solid transparent;'"
                     style="width: 120px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: 0.2s;">
            {% endfor %}
        </div>

        {# Flèche Droite Miniatures #}
        <button @click="scrollMinis('right')" style="position: absolute; right: -10px; z-index: 10; background: white; border: 1px solid #ddd; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-weight: bold;">›</button>
    </div>

    {# --- LIGHTBOX AVEC TELEPORT (S'affiche par dessus TOUT le site) --- #}
    <template x-teleport="body">
        <div x-show="showModal" 
             x-cloak 
             @keydown.escape.window="showModal = false"
             style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); z-index: 9999999; display: flex; align-items: center; justify-content: center;"
             @click.self="showModal = false">
            
            {# Fermer #}
            <button @click="showModal = false" style="position: absolute; top: 30px; right: 30px; color: white; background: none; border: none; font-size: 50px; cursor: pointer; line-height: 1;">&times;</button>
            
            {# Navigation #}
            <button @click="let i = photos.indexOf(activePhoto); activePhoto = photos[(i - 1 + photos.length) % photos.length]" 
                    style="position: absolute; left: 30px; color: white; background: rgba(255,255,255,0.1); border-radius: 50%; width: 60px; height: 60px; border: none; cursor: pointer; font-size: 30px;">❮</button>
            <img :src="activePhoto" 
             style="max-height: 95vh; max-width: 95vw; object-fit: contain; box-shadow: 0 0 50px rgba(0,0,0,0.6); display: block; margin: auto;">

            <button @click="let i = photos.indexOf(activePhoto); activePhoto = photos[(i + 1) % photos.length]" 
                    style="position: absolute; right: 30px; color: white; background: rgba(255,255,255,0.1); border-radius: 50%; width: 60px; height: 60px; border: none; cursor: pointer; font-size: 30px;">❯</button>
        </div>
    </template>
</div>

<style>
    #mini-scroll::-webkit-scrollbar { display: none; }
    [x-cloak] { display: none !important; }
</style>

            {# --- COLONNE DROITE : INFOS & FORMULAIRE --- #}
            <div style="width: 100%;">
                <h1 style="font-size: 2rem; font-weight: bold; margin-bottom: 10px;">{{ property.propertyTitleEN ?? 'Property' }}</h1>
                <p style="color: #9ca3af; margin-bottom: 20px;">Ref: {{ property.refP }}</p>
                
                <div style="font-size: 1.8rem; color: #4f46e5; font-weight: bold; margin-bottom: 25px;">
                    {{ (property.Price ?? 0) | number_format(0, '.', ' ') }} €
                </div>

                {# Caractéristiques #}
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 20px 0; margin-bottom: 30px;">
                    <div><span style="color: #6b7280; font-size: 0.8rem;">Surface</span><p style="font-weight: 600;">{{ property.totalAreal }} m²</p></div>
                    <div><span style="color: #6b7280; font-size: 0.8rem;">Bedrooms</span><p style="font-weight: 600;">{{ property.BedRooms }}</p></div>
                </div>

                {# Descriptif #}
                <div style="margin-bottom: 40px;">
                    <h3 style="font-size: 1.2rem; font-weight: bold; margin-bottom: 10px;">Description</h3>
                    <p style="line-height: 1.6; color: #374151; white-space: pre-line;">
                        {{ property.InternalCommentsUK ?: property.InternalCommentsFR }}
                    </p>
                </div>

                {# Formulaire de contact #}
                <div style="background: #f9fafb; padding: 30px; border-radius: 12px; border: 1px solid #e5e7eb;">
                    <h3 style="font-size: 1.2rem; font-weight: bold; margin-bottom: 15px;">Inquire About This Property</h3>
                    <form method="post" action="">
                        {{ csrfInput() }}
                        <input type="hidden" name="action" value="contact-form/send">
                        <input type="hidden" name="subject" value="Inquiry: {{ property.propertyTitleEN }} (Ref: {{ property.refP }})">
                        
                        <input type="text" name="fromName" placeholder="Name" style="width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; margin-bottom: 15px;" required>
                        <input type="email" name="fromEmail" placeholder="Email" style="width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; margin-bottom: 15px;" required>
                        <textarea name="message" rows="4" style="width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; margin-bottom: 15px;" required>I am interested in Ref: {{ property.refP }}.</textarea>
                        
                        <button type="submit" style="width: 100%; background: #111827; color: white; padding: 15px; border-radius: 6px; font-weight: 600; cursor: pointer; border: none; text-transform: uppercase; letter-spacing: 1px;">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>

        </div>

    {% else %}
        <div style="text-align: center; padding: 100px 0;">
            <h1>Property Not Found</h1>
            <a href="/properties">Back to listings</a>
        </div>
    {% endif %}
</div>

{% endblock %}