{% extends 'core/base.html' %}

{% block content %}
  <div class="wrapper p-2 m-2">
    <h4>Property Photos</h4>
    <div class="row">
      <div class="col-md-6">
        <!-- Property Images Slider -->
        <div id="propertySlider" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            {% for image in property.property_images.all %}
              <li data-target="#propertySlider" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}></li>
            {% endfor %}
          </ol>
          <div class="carousel-inner">
            {% for image in property.property_images.all %}
              <div class="carousel-item {% if forloop.first %}active{% endif %}">
                <img class="d-block w-100" src="{{ image.image.url }}" alt="Property Image">
              </div>
            {% endfor %}
          </div>
          <a class="carousel-control-prev" href="#propertySlider" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#propertySlider" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

      <div class="col-md-6">
        <aside>
          <!-- Property Details Accordion -->
          <div class="accordion" id="propertyDetailsAccordion">
            <div class="card">
              <div class="card-header" id="propertyDetailsHeading">
                <h5 class="mb-0">
                  <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#propertyDetailsCollapse" aria-expanded="true" aria-controls="propertyDetailsCollapse">
                    Property Details <i class="fas fa-chevron-down"></i>
                  </button>
                  <a href="{% url 'property-list' %}" class="float-right">
                    <i class="fa fa-list"></i>
                  </a>
                </h5>
              </div>

              <div id="propertyDetailsCollapse" class="collapse show" aria-labelledby="propertyDetailsHeading" data-parent="#propertyDetailsAccordion">
                <div class="card-body">
                  <!-- Property Details Content -->
                  <p class="card-text">Property Type: {{ property.get_property_type_display }}</p>
                  <p class="card-text">Status: {{ property.get_property_status_display }}</p>
                  <p class="card-text">Year Built: {{ property.year_built }}</p>
                  <p class="card-text">Total Rooms: {{ property.units.all|length }}</p>
                  <p class="card-text">Square Footage: {{ property.square_footage }}</p>
                  <!-- Add more property details as needed -->
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card-header" id="ownerDetailsHeading">
                <h5 class="mb-0">
                  <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#ownerDetailsCollapse" aria-expanded="false" aria-controls="ownerDetailsCollapse">
                    Owner Details <i class="fas fa-chevron-down"></i>
                  </button>
                </h5>
              </div>

              <div id="ownerDetailsCollapse" class="collapse" aria-labelledby="ownerDetailsHeading" data-parent="#propertyDetailsAccordion">
                <div class="card-body">
                  <!-- Owner Details Content -->
                  <p>Name: {{ property.owner.user }}</p>
                  <p>Contact: {{ property.owner.mobile_number }}</p>
                  <!-- Add more owner details as needed -->
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card-header" id="unitsDetailsHeading">
                <h5 class="mb-0">
                  <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#unitsDetailsCollapse" aria-expanded="false" aria-controls="unitsDetailsCollapse">
                    Units <i class="fas fa-chevron-down"></i>
                  </button>
                </h5>
              </div>

              <div id="unitsDetailsCollapse" class="collapse" aria-labelledby="unitsDetailsHeading" data-parent="#propertyDetailsAccordion">
                <div class="card-body">
                  <!-- Units Content -->
                  {% for unit in property.units.all %}
                    <div class="unit">
                      <h6>{{ unit.title }}</h6>
                      <p>Unit Code: {{ unit.unit_code }}</p>
                      <p>Description: {{ unit.description|safe }}</p>
                      <!-- Add more unit details as needed -->
                    </div>
                  {% empty %}
                    <p>No units available.</p>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
{% endblock %}