{% extends 'base.html' %}
{% load static %}

{% block title %}{{ single_property.property_name }} - {{ single_property.location }} | Propiedades en Cartagena{% endblock %}

{% block meta %}
<meta name="description" content="{{ single_property.property_name }} en {{ single_property.location }}, Cartagena. {{ single_property.bedrooms }} habitaciones, {{ single_property.bathrooms }} baños, {{ single_property.area }}m². Desde ${{ single_property.price|floatformat:0 }} COP.">
<meta name="keywords" content="propiedad cartagena, {{ single_property.category.name|lower }}, {{ single_property.location }}, inmuebles cartagena, {% if single_property.purpose == 'rent' %}arriendo{% else %}venta{% endif %}">
<meta property="og:title" content="{{ single_property.property_name }} - {{ single_property.location }}">
<meta property="og:description" content="{{ single_property.bedrooms }} hab, {{ single_property.bathrooms }} baños, {{ single_property.area }}m² - Desde ${{ single_property.price|floatformat:0 }} COP">
<meta property="og:image" content="{{ single_property.main_image.url }}">
<meta property="og:type" content="website">
<link rel="canonical" href="{{ request.build_absolute_uri }}">
{% endblock %}

{% block extra_head %}
<style>
  :root {
    --primary-color: #2c5aa0;
    --secondary-color: #f8b500;
    --accent-color: #ff6b35;
    --text-dark: #2d3748;
    --text-light: #718096;
    --bg-light: #f7fafc;
    --border-color: #e2e8f0;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .property-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a365d 100%);
    padding: 3rem 0;
    color: white;
    position: relative;
    overflow: hidden;
  }

  .property-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.05"><path d="M0,0v100h1000V0H0z M100,50c50,0,100-25,150-25s100,25,150,25s100-25,150-25s100,25,150,25s100-25,150-25s100,25,150,25s100-25,150-25s100,25,150,25H0z"/></svg>') repeat-x;
    pointer-events: none;
  }

  .property-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }

  .property-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
  }

  .price-badge {
    background: var(--secondary-color);
    color: var(--text-dark);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
    box-shadow: var(--shadow);
    transform: translateY(-10px);
  }

  .quick-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    backdrop-filter: blur(10px);
  }

  .stat-icon {
    width: 20px;
    height: 20px;
    fill: var(--secondary-color);
  }

  .gallery-section {
    padding: 2rem 0;
    background: white;
  }

  .main-gallery {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
  }

  .main-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .main-image:hover {
    transform: scale(1.02);
  }

  .thumbnail-gallery {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .thumbnail {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
  }

  .thumbnail:hover,
  .thumbnail.active {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: var(--shadow);
  }

  .content-section {
    padding: 3rem 0;
    background: var(--bg-light);
  }

  .info-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
  }

  .card-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
  }

  .card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }

  .feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .feature-item:hover {
    background: #e2e8f0;
  }

  .feature-icon {
    color: #2c5aa0;
    width: 24px;
    height: 24px;
    fill: var(--primary-color);
    flex-shrink: 0;
  }

  .clase-icon{
    color: white;
  }

  .feature-text {
    font-weight: 500;
    color: var(--text-dark);
  }

  .feature-value {
    color: var(--primary-color);
    font-weight: 600;
  }

  .multimedia-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
  }

  .media-embed {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .media-embed iframe {
    width: 100%;
    height: 300px;
    border: none;
  }

  .description-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
  }

  .description-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
  }

  .description-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
  }

  .description-text {
    color: var(--text-light);
    line-height: 1.6;
  }

  .cta-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a365d 100%);
    padding: 4rem 0;
    color: white;
    margin-top: 3rem;
    position: relative;
    overflow: hidden;
  }

  .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.05"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
  }

  .cta-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  .cta-description {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 2rem;
    line-height: 1.5;
  }

  .cta-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    opacity: 0.9;
  }

  .benefit-item i {
    color: #90EE90;
    font-size: 1.1rem;
  }

  .cta-action {
    text-align: center;
  }

  .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
    padding: 1.25rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
    color: white;
    text-decoration: none;
  }

  .cta-button i {
    font-size: 1.4rem;
  }

  .button-text {
    font-weight: 700;
  }

  .cta-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .cta-note i {
    color: #90EE90;
  }

  /* Responsive Design */
  @media (max-width: 991px) {
    .cta-content {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 2rem;
    }
    
    .cta-title {
      font-size: 2rem;
    }
    
    .cta-benefits {
      justify-content: center;
      align-items: center;
    }
  }

  @media (max-width: 768px) {
    .cta-section {
      padding: 3rem 0;
    }
    
    .cta-title {
      font-size: 1.75rem;
    }
    
    .cta-description {
      font-size: 1.1rem;
    }
    
    .cta-button {
      padding: 1rem 2rem;
      font-size: 1rem;
    }
    
    .cta-benefits {
      flex-direction: column;
      gap: 0.5rem;
    }
  }

  @media (max-width: 480px) {
    .cta-button {
      padding: 1rem 1.5rem;
      font-size: 0.95rem;
    }
    
    .button-text {
      display: block;
      line-height: 1.3;
    }
  }
  .location-badge {
    background: rgba(255,255,255,0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: inline-block;
  }

  @media (max-width: 768px) {
    .property-title {
      font-size: 2rem;
    }
    
    .quick-stats {
      gap: 1rem;
      justify-content: center;
    }
    
    .stat-item {
      padding: 0.5rem 1rem;
      font-size: 0.9rem;
    }
    
    .multimedia-section {
      grid-template-columns: 1fr;
    }
    
    .features-grid {
      grid-template-columns: 1fr;
    }
    
    .main-image {
      height: 300px;
    }
    
    .thumbnail {
      width: 80px;
      height: 60px;
    }
  }

  .expandable-section {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .expandable-content.expanded {
    max-height: 2000px;
  }

  .expand-icon {
    transition: transform 0.3s ease;
  }

  .expand-icon.rotated {
    transform: rotate(180deg);
  }

  @media (max-width: 991.98px) {
    .price-column {
      margin-top: 2rem; /* Ajusta este valor según necesites */
    }
  }

  /* Opcional: ajuste adicional para pantallas muy pequeñas */
  @media (max-width: 575.98px) {
    .price-column {
      margin-top: 1.5rem;
    }
  }
</style>
{% endblock %}

{% block content %}
<!-- Sección Hero -->
<section class="property-hero">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <div class="location-badge">
          <i class="fas fa-map-marker-alt stat-icon"></i>
          {{ single_property.location }} • Cartagena
        </div>
        <h1 class="property-title">{{ single_property.property_name }}</h1>
        <p class="property-subtitle">
          {% if single_property.purpose == 'rent' %}
            Propiedad en arriendo en una ubicación privilegiada de Cartagena
          {% else %}
            Propiedad en venta en una ubicación privilegiada de Cartagena
          {% endif %}
        </p>
        <div class="quick-stats">
          <div class="stat-item">
            <i class="fas fa-bed stat-icon"></i>
            {{ single_property.bedrooms }} Habitaciones
          </div>
          <div class="stat-item">
            <i class="fas fa-bath stat-icon"></i>
            {{ single_property.bathrooms }} Baños
          </div>
          <div class="stat-item">
            <i class="fas fa-ruler-combined stat-icon"></i>
            {{ single_property.area }} m²
          </div>
        </div>
      </div>
      <div class="col-lg-4 text-center price-column">
        <div class="price-badge precio-inmueble">{{ single_property.price }}</div>
        <div class="cta-action">
          <a href="https://api.whatsapp.com/send?phone=573113014351&text=Hola%20Espacio%20Elite,%20estoy%20interesado%20en%20la%20propiedad%20{{ mensaje }}" class="cta-button" target="_blank" rel="noopener">
            
            <span class="button-text">
              {% if single_property.purpose == 'rent' %}
                ¡Quiero Rentar!
              {% else %}
                ¡Quiero Comprar!
              {% endif %}
            </span>
          </a>
          <p class="cta-note">
            <i class="fas fa-shield-alt"></i>
            Servicio confiable y seguro
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Galería de Imágenes -->
<section class="gallery-section">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="main-gallery">
          <img id="mainImage" src="{{ single_property.main_image.url }}" alt="{{ single_property.property_name }}" class="main-image">
        </div>
        <div class="thumbnail-gallery">
          <img src="{{ single_property.main_image.url }}" alt="Imagen principal" class="thumbnail active" onclick="changeMainImage(this)">
          {% for image in property_gallery %}
          <img src="{{ image.image.url }}" alt="Galería {{ forloop.counter }}" class="thumbnail" onclick="changeMainImage(this)">
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Contenido Principal -->
<section class="content-section">
  <div class="container">
    
    <!-- Multimedia -->
    {% if single_property.video_url or single_property.maps_url %}
    <div class="multimedia-section">
      {% if single_property.video_url %}
      <div class="media-embed">
        <iframe src="{{ single_property.video_url }}" title="Video de la propiedad" allowfullscreen></iframe>
      </div>
      {% endif %}
      {% if single_property.maps_url %}
      <div class="media-embed">
        <iframe src="{{ single_property.maps_url }}" title="Ubicación en mapa" allowfullscreen loading="lazy"></iframe>
      </div>
      {% endif %}
    </div>
    {% endif %}
    <!-- Descripción e Información Adicional -->
    {% if single_property.description %}
    <div class="description-section">
      <div class="description-card">
        <h3 class="description-title">Descripción de la Propiedad</h3>
        <p class="description-text">{{ single_property.description }}</p>
      </div>
    </div>
    {% endif %}
    <!-- Información General -->
    <div class="info-card">
      <div class="card-header expandable-section" onclick="toggleSection('general')">
        <div class="card-icon">
          <i class="fas fa-info-circle clase-icon"></i>
        </div>
        <h2 class="card-title">Información General</h2>
        <i class="fas fa-chevron-down expand-icon ms-auto"></i>
      </div>
      <div id="general" class="expandable-content">
        <div class="features-grid">
          <div class="feature-item">
            <i class="fas fa-map-marker-alt feature-icon"></i>
            <div>
              <div class="feature-text">Ubicación</div>
              <div class="feature-value">{{ single_property.address }}</div>
            </div>
          </div>
          
          <div class="feature-item">
            <i class="fas fa-ruler-combined feature-icon"></i>
            <div>
              <div class="feature-text">Área</div>
              <div class="feature-value">{{ single_property.area }} m²</div>
            </div>
          </div>

          <div class="feature-item">
            <i class="fas fa-bed feature-icon" style="color: #2c5aa0;"></i>
            <div>
              <div class="feature-text">Habitaciones</div>
              <div class="feature-value">{{ single_property.bedrooms }}</div>
            </div>
          </div>

          <div class="feature-item">
            <i class="fas fa-bath feature-icon"></i>
            <div>
              <div class="feature-text">Baños</div>
              <div class="feature-value">{{ single_property.bathrooms }}</div>
            </div>
          </div>

          {% if single_property.floor %}
          <div class="feature-item">
            <i class="fas fa-layer-group feature-icon"></i>
            <div>
              <div class="feature-text">Piso</div>
              <div class="feature-value">{{ single_property.floor }}</div>
            </div>
          </div>
          {% endif %}

          <div class="feature-item">
            <i class="fas fa-couch feature-icon"></i>
            <div>
              <div class="feature-text">Estado</div>
              <div class="feature-value">{% if single_property.is_furnished %}Amoblado{% else %}Sin amoblar{% endif %}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Características y Servicios -->
    {% if single_property.features or single_property.services %}
    <div class="info-card">
      <div class="card-header expandable-section" onclick="toggleSection('features')">
        <div class="card-icon">
          <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        </div>
        <h2 class="card-title">Características y Servicios</h2>
        <svg class="expand-icon ms-auto" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z"/></svg>
      </div>
      <div id="features" class="expandable-content">
        <div class="features-grid">
          {% for feature in single_property.get_features_display %}
              <div class="feature-item">
                  <svg class="feature-icon" viewBox="0 0 24 24">
                      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
                  </svg>
                  <div class="feature-text">{{ feature }}</div>
              </div>
          {% endfor %}

          {% for service in single_property.get_services_display %}
              <div class="feature-item">
                  <svg class="feature-icon" viewBox="0 0 24 24">
                      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
                  </svg>
                  <div class="feature-text">{{ service }}</div>
              </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Reglas y Políticas -->
    {% if single_property.rules %}
    <div class="info-card">
      <div class="card-header expandable-section" onclick="toggleSection('rules')">
        <div class="card-icon">
          <svg viewBox="0 0 24 24"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/></svg>
        </div>
        <h2 class="card-title">Reglas y Políticas</h2>
        <svg class="expand-icon ms-auto" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z"/></svg>
      </div>
      <div id="rules" class="expandable-content">
        <div class="features-grid">
          {% for rule in single_property.get_rules_display %}
          <div class="feature-item">
            <svg class="feature-icon" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
            <div class="feature-text">{{ rule }}</div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</section>

<!-- Llamada a la Acción -->
<section class="cta-section">
  <div class="container">
    <div class="cta-content">
      <div class="cta-text">
        <h2 class="cta-title">¿Esta es tu propiedad ideal?</h2>
        <p class="cta-description">
          {% if single_property.purpose == 'rent' %}
            Inicia el proceso de arrendamiento ahora mismo. Te acompañamos en cada paso.
          {% else %}
            Da el primer paso hacia tu nueva propiedad. Estamos aquí para ayudarte.
          {% endif %}
        </p>
        <div class="cta-benefits">
          <div class="benefit-item">
            <i class="fas fa-check-circle"></i>
            <span>Asesoría personalizada</span>
          </div>
          <div class="benefit-item">
            <i class="fas fa-clock"></i>
            <span>Respuesta inmediata</span>
          </div>
          <div class="benefit-item">
            <i class="fas fa-handshake"></i>
            <span>Proceso transparente</span>
          </div>
        </div>
      </div>
      <div class="cta-action">
        <a href="https://api.whatsapp.com/send?phone=573113014351&text=Hola%20Espacio%20Elite,%20estoy%20interesado%20en%20la%20propiedad%20{{ mensaje }}" class="cta-button" target="_blank" rel="noopener">
          <span class="button-text">
            {% if single_property.purpose == 'rent' %}
              ¡Quiero Rentar Esta Propiedad!
            {% else %}
              ¡Quiero Comprar Esta Propiedad!
            {% endif %}
          </span>
        </a>
        <p class="cta-note">
          <i class="fas fa-shield-alt"></i>
          Servicio confiable y seguro
        </p>
      </div>
    </div>
  </div>
</section>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Formatear precios
  function formatPrice(price) {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  }

  const elementosParaFormatear = document.querySelectorAll('.precio-inmueble');
  elementosParaFormatear.forEach(function (elemento) {
    const precioSinFormato = parseFloat(elemento.textContent);
    elemento.textContent = '$ ' + formatPrice(precioSinFormato) + ' COP';
  });

  // Expandir/contraer secciones por defecto
  setTimeout(() => {
    toggleSection('general');
  }, 500);
});

// Cambiar imagen principal
function changeMainImage(thumbnail) {
  const mainImage = document.getElementById('mainImage');
  const allThumbnails = document.querySelectorAll('.thumbnail');
  
  mainImage.src = thumbnail.src;
  
  allThumbnails.forEach(thumb => thumb.classList.remove('active'));
  thumbnail.classList.add('active');
}

// Toggle de secciones expandibles
function toggleSection(sectionId) {
  const content = document.getElementById(sectionId);
  const header = content.previousElementSibling;
  const icon = header.querySelector('.expand-icon');
  
  if (content.classList.contains('expanded')) {
    content.classList.remove('expanded');
    icon.classList.remove('rotated');
  } else {
    content.classList.add('expanded');
    icon.classList.add('rotated');
  }
}
</script>

{% endblock %}