{% extends 'base.html' %}
{% load humanize %}
{% block title %}{{ property.title }} — {{ site.site_name }}{% endblock %}
{% block meta_description %}{{ property.meta_description|default:property.short_description|default:property.description|striptags|truncatewords:25 }}{% endblock %}

{% block content %}

{% if property.is_flyer_image %}

{# ================================================================ #}
{#  FLYER HERO MODE — full-width image, then two-column below        #}
{# ================================================================ #}

<nav class="container small text-muted pt-3 pb-1">
  <a href="{% url 'core:home' %}">Home</a> /
  <a href="{% url 'properties:list' %}">Properties</a> /
  {{ property.title }}
</nav>

<section class="property-flyer-hero">
  <img src="{{ property.main_image.url }}"
       alt="{{ property.title }}"
       class="property-flyer-image">
  <div class="property-flyer-badges">
    <span class="badge badge-{{ property.listing_type }}">{{ property.get_listing_type_display }}</span>
    {% if property.is_featured %}<span class="badge badge-featured">&#11088; Featured</span>{% endif %}
    {% if property.is_verified %}<span class="badge badge-verified"><i class="bi bi-patch-check-fill"></i> Verified</span>{% endif %}
  </div>
</section>

<section class="property-detail">
  <div class="container">
    <div class="row g-4">

      <div class="col-lg-8">
        <h1>{{ property.title }}</h1>
        <div class="property-location-large">
          <i class="bi bi-geo-alt-fill"></i> {{ property.location.name }}, {{ property.location.state }}
          {% if property.address %}&nbsp;&middot; {{ property.address }}{% endif %}
        </div>
        <div class="property-price-large">{{ property.price_display }}</div>

        {% if property.bedrooms or property.bathrooms or property.toilets or property.parking_spaces or property.area_sqm or property.plot_size %}
        <div class="property-key-stats">
          {% if property.bedrooms %}<div><i class="bi bi-house-door"></i><strong>{{ property.bedrooms }}</strong>Bedrooms</div>{% endif %}
          {% if property.bathrooms %}<div><i class="bi bi-droplet"></i><strong>{{ property.bathrooms }}</strong>Bathrooms</div>{% endif %}
          {% if property.toilets %}<div><i class="bi bi-toilet"></i><strong>{{ property.toilets }}</strong>Toilets</div>{% endif %}
          {% if property.parking_spaces %}<div><i class="bi bi-car-front"></i><strong>{{ property.parking_spaces }}</strong>Parking</div>{% endif %}
          {% if property.area_sqm %}<div><i class="bi bi-rulers"></i><strong>{{ property.area_sqm }}</strong>m²</div>{% endif %}
          {% if property.plot_size %}<div><i class="bi bi-aspect-ratio"></i><strong>{{ property.plot_size }}</strong>Size</div>{% endif %}
        </div>
        {% endif %}

        <h3 class="mt-4">Description</h3>
        <div class="property-description">{{ property.description|safe }}</div>

        {% if property.feature_list %}
        <h3 class="mt-4">Features &amp; Amenities</h3>
        <div class="row">
          {% for f in property.feature_list %}
          <div class="col-md-6"><div class="feature-item"><i class="bi bi-check-circle-fill text-success"></i> {{ f }}</div></div>
          {% endfor %}
        </div>
        {% endif %}

        {% if property.title_documents %}
        <h3 class="mt-4">Title Documents</h3>
        <p><i class="bi bi-file-earmark-text-fill text-primary"></i> {{ property.title_documents }}</p>
        {% endif %}

        {% if property.images.all %}
        <h3 class="mt-4">Additional Photos</h3>
        <div class="row g-2">
          {% for img in property.images.all %}
          <div class="col-md-4">
            <a href="{{ img.image.url }}" target="_blank">
              <img src="{{ img.image.url }}" alt="{{ img.caption|default:property.title }}" class="img-fluid rounded">
            </a>
          </div>
          {% endfor %}
        </div>
        {% endif %}

        {% if property.video_url %}
        <h3 class="mt-4">Property Tour</h3>
        <div class="ratio ratio-16x9">
          {% if "youtube" in property.video_url or "youtu.be" in property.video_url %}
            <iframe src="https://www.youtube.com/embed/{{ property.video_url|cut:'https://www.youtube.com/watch?v='|cut:'https://youtu.be/' }}" allowfullscreen></iframe>
          {% else %}<iframe src="{{ property.video_url }}" allowfullscreen></iframe>{% endif %}
        </div>
        {% endif %}

        {% if property.floor_plan %}
        <h3 class="mt-4">Floor Plan</h3>
        <a href="{{ property.floor_plan.url }}" target="_blank">
          <img src="{{ property.floor_plan.url }}" class="img-fluid rounded shadow-sm" alt="Floor plan">
        </a>
        {% endif %}

        {% if property.featured_in_videos.exists %}
        <h3 class="mt-5">See This Property in Action</h3>
        <p class="text-muted small mb-3">Watch our walkthrough and inspection videos.</p>
        <div class="row g-3">
          {% for v in property.featured_in_videos.all|slice:":3" %}
          <div class="col-md-4">
            <a href="{{ v.get_absolute_url }}" class="video-card">
              {% if v.thumbnail %}<img src="{{ v.thumbnail.url }}" alt="{{ v.title }}">
              {% else %}<div class="video-placeholder"><i class="bi bi-play-circle"></i></div>{% endif %}
              <div class="video-overlay"><i class="bi bi-play-fill"></i></div>
              <div class="video-info">
                <h6>{{ v.title|truncatechars:60 }}</h6>
                {% if v.duration %}<small>{{ v.duration }}</small>{% endif %}
              </div>
            </a>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>

      <div class="col-lg-4">
        <div class="inquiry-sidebar sticky-top" style="top:100px;">
          <div class="contact-card">
            <h5>Interested in this property?</h5>
            <p class="text-muted small">Get in touch and an agent will contact you within 24 hours.</p>
            <form method="post" action="{% url 'leads:property_inquiry' slug=property.slug %}">
              {% csrf_token %}
              <input type="text" name="name" class="form-control mb-2" placeholder="Your name *" required>
              <input type="email" name="email" class="form-control mb-2" placeholder="Email *" required>
              <input type="text" name="phone" class="form-control mb-2" placeholder="Phone number">
              <textarea name="message" class="form-control mb-2" rows="3" placeholder="Message">I'm interested in {{ property.title }}. Please contact me.</textarea>
              <button class="btn btn-primary w-100">Send Inquiry</button>
            </form>
            <hr>
            <a href="tel:{{ site.phone|default:CONTACT_PHONE }}" class="btn btn-outline-primary w-100 mb-2">
              <i class="bi bi-telephone-fill"></i> {{ site.phone|default:CONTACT_PHONE }}
            </a>
            <a href="https://wa.me/{{ site.whatsapp_number|default:WHATSAPP_NUMBER }}?text=I'm interested in {{ property.title|urlencode }}"
               target="_blank" class="btn btn-success w-100">
              <i class="bi bi-whatsapp"></i> WhatsApp
            </a>
          </div>
        </div>
      </div>

    </div>

    {% if related %}
    <div class="mt-5">
      <h3>Similar Properties</h3>
      <div class="row g-4 mt-2">
        {% for property in related %}<div class="col-md-6 col-lg-3">{% include 'partials/property_card.html' %}</div>{% endfor %}
      </div>
    </div>
    {% endif %}

  </div>
</section>

{% else %}

{# ================================================================ #}
{#  STANDARD PHOTO LAYOUT — gallery left, inquiry sidebar right      #}
{# ================================================================ #}
<section class="property-detail">
  <div class="container">
    <nav class="small text-muted mb-3">
      <a href="{% url 'core:home' %}">Home</a> /
      <a href="{% url 'properties:list' %}">Properties</a> /
      {{ property.title }}
    </nav>

    <div class="row g-4">
      <div class="col-lg-8">
        <div class="property-gallery">
          <div class="main-image">
            <img src="{{ property.main_image.url }}" alt="{{ property.title }}" id="property-main-img">
            <div class="property-badges">
              <span class="badge badge-{{ property.listing_type }}">{{ property.get_listing_type_display }}</span>
              {% if property.is_featured %}<span class="badge badge-featured">Featured</span>{% endif %}
              {% if property.is_verified %}<span class="badge badge-verified"><i class="bi bi-patch-check-fill"></i> Verified</span>{% endif %}
            </div>
          </div>
          {% if property.images.all %}
          <div class="thumbnail-row">
            <img src="{{ property.main_image.url }}" class="thumb active" onclick="document.getElementById('property-main-img').src=this.src">
            {% for img in property.images.all %}
              <img src="{{ img.image.url }}" alt="{{ img.caption }}" class="thumb" onclick="document.getElementById('property-main-img').src=this.src">
            {% endfor %}
          </div>
          {% endif %}
        </div>

        <div class="property-content mt-4">
          <h1>{{ property.title }}</h1>
          <div class="property-location-large"><i class="bi bi-geo-alt-fill"></i> {{ property.location.name }}, {{ property.location.state }}{% if property.address %} · {{ property.address }}{% endif %}</div>
          <div class="property-price-large">{{ property.price_display }}</div>

          <div class="property-key-stats">
            {% if property.bedrooms %}<div><i class="bi bi-house-door"></i><strong>{{ property.bedrooms }}</strong>Bedrooms</div>{% endif %}
            {% if property.bathrooms %}<div><i class="bi bi-droplet"></i><strong>{{ property.bathrooms }}</strong>Bathrooms</div>{% endif %}
            {% if property.toilets %}<div><i class="bi bi-toilet"></i><strong>{{ property.toilets }}</strong>Toilets</div>{% endif %}
            {% if property.parking_spaces %}<div><i class="bi bi-car-front"></i><strong>{{ property.parking_spaces }}</strong>Parking</div>{% endif %}
            {% if property.area_sqm %}<div><i class="bi bi-rulers"></i><strong>{{ property.area_sqm }}</strong>m²</div>{% endif %}
            {% if property.plot_size %}<div><i class="bi bi-aspect-ratio"></i><strong>{{ property.plot_size }}</strong>Size</div>{% endif %}
          </div>

          <h3 class="mt-4">Description</h3>
          <div class="property-description">{{ property.description|safe }}</div>

          {% if property.feature_list %}
          <h3 class="mt-4">Features &amp; Amenities</h3>
          <div class="row">
            {% for f in property.feature_list %}<div class="col-md-6"><div class="feature-item"><i class="bi bi-check-circle-fill text-success"></i> {{ f }}</div></div>{% endfor %}
          </div>
          {% endif %}

          {% if property.title_documents %}
          <h3 class="mt-4">Title Documents</h3>
          <p><i class="bi bi-file-earmark-text-fill text-primary"></i> {{ property.title_documents }}</p>
          {% endif %}

          {% if property.video_url %}
          <h3 class="mt-4">Property Tour</h3>
          <div class="ratio ratio-16x9">
            {% if "youtube" in property.video_url or "youtu.be" in property.video_url %}
              <iframe src="https://www.youtube.com/embed/{{ property.video_url|cut:'https://www.youtube.com/watch?v='|cut:'https://youtu.be/' }}" allowfullscreen></iframe>
            {% else %}<iframe src="{{ property.video_url }}" allowfullscreen></iframe>{% endif %}
          </div>
          {% endif %}

          {% if property.floor_plan %}
          <h3 class="mt-4">Floor Plan</h3>
          <a href="{{ property.floor_plan.url }}" target="_blank"><img src="{{ property.floor_plan.url }}" class="img-fluid rounded shadow-sm" alt="Floor plan"></a>
          {% endif %}

          {% if property.featured_in_videos.exists %}
          <h3 class="mt-5">See This Property in Action</h3>
          <p class="text-muted small mb-3">Watch our walkthrough and inspection videos.</p>
          <div class="row g-3">
            {% for v in property.featured_in_videos.all|slice:":3" %}
            <div class="col-md-4">
              <a href="{{ v.get_absolute_url }}" class="video-card">
                {% if v.thumbnail %}<img src="{{ v.thumbnail.url }}" alt="{{ v.title }}">
                {% else %}<div class="video-placeholder"><i class="bi bi-play-circle"></i></div>{% endif %}
                <div class="video-overlay"><i class="bi bi-play-fill"></i></div>
                <div class="video-info">
                  <h6>{{ v.title|truncatechars:60 }}</h6>
                  {% if v.duration %}<small>{{ v.duration }}</small>{% endif %}
                </div>
              </a>
            </div>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </div>

      <div class="col-lg-4">
        <div class="inquiry-sidebar sticky-top">
          <div class="contact-card">
            <h5>Interested in this property?</h5>
            <p class="text-muted small">Get in touch and an agent will contact you within 24 hours.</p>
            <form method="post" action="{% url 'leads:property_inquiry' slug=property.slug %}">
              {% csrf_token %}
              <input type="text" name="name" class="form-control mb-2" placeholder="Your name *" required>
              <input type="email" name="email" class="form-control mb-2" placeholder="Email *" required>
              <input type="text" name="phone" class="form-control mb-2" placeholder="Phone number">
              <textarea name="message" class="form-control mb-2" rows="3" placeholder="Message">I'm interested in this property. Please contact me.</textarea>
              <button class="btn btn-primary w-100">Send Inquiry</button>
            </form>
            <hr>
            <a href="tel:{{ site.phone|default:CONTACT_PHONE }}" class="btn btn-outline-primary w-100 mb-2"><i class="bi bi-telephone-fill"></i> {{ site.phone|default:CONTACT_PHONE }}</a>
            <a href="https://wa.me/{{ site.whatsapp_number|default:WHATSAPP_NUMBER }}?text=I'm interested in {{ property.title|urlencode }}" target="_blank" class="btn btn-success w-100"><i class="bi bi-whatsapp"></i> WhatsApp</a>
          </div>
        </div>
      </div>
    </div>

    {% if related %}
    <div class="mt-5">
      <h3>Similar Properties</h3>
      <div class="row g-4 mt-2">
        {% for property in related %}<div class="col-md-6 col-lg-3">{% include 'partials/property_card.html' %}</div>{% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
</section>

{% endif %}

{% endblock %}