{% extends "main/base_template.html" %}
{% load crispy_forms_tags %}

{% block title %}
Roo.me - Search
{% endblock %}

{% block content %}
<div class="row">
  <div class="card mb-3">
    <div class="card-body">
      <div class="fieldWrapper">
        <form class="row row-cols-lg-auto g-3 align-items-center" method="POST">
          {% csrf_token %}
          <div class="col-12">
            <label for="city">City</label>
            <div class="input-group">
              {{ search_form.city }}
            </div>
          </div>

          <div class="col-12">
            <label for="start-date">Entry date</label>
            {{ search_form.start_date }}
          </div>

          <div class="col-12">
            <label for="roommates">Number of roommates</label>
            {{ search_form.num_of_roomates }}
          </div>

          <div class="col-12">
            <label for="num-rooms">Number of rooms</label>
            {{ search_form.num_of_rooms }}
          </div>

          <div class="col-12">
            <label for="min-rent">Minimum rent</label>
            {{ search_form.min_rent }}
          </div>

          <div class="col-12">
            <label for="max-rent">Maximum rent</label>
            {{ search_form.max_rent }}
          </div>

          <div class="input-group">

            <div class="form-check form-check-inline">
              {{ preferences_form.no_smoking}}
              <span class="badge rounded-pill bg-primary">
                <label class="form-check-label" for="no-smoking"><i class="fas fa-smoking-ban"></i> No Smoking</label>
              </span>
            </div>

            <div class="form-check form-check-inline">
              {{ preferences_form.pets_allowed }}
              <span class="badge rounded-pill bg-primary">
                <label class="form-check-label" for="pets-allowed"><i class="fas fa-paw"></i> Pet Friendly</label>
              </span>
            </div>

            <div class="form-check form-check-inline">
              {{ preferences_form.air_conditioner }}
              <span class="badge rounded-pill bg-primary">
                <label class="form-check-label" for="air-con"><i class="fas fa-fan"></i> A/C</label>
              </span>
            </div>

            <div class="form-check form-check-inline">
              {{ preferences_form.balcony }}
              <span class="badge rounded-pill bg-primary">
                <label class="form-check-label" for="balcony"><i class="fas fa-sun"></i> Balcony</label>
              </span>
            </div>

            <div class="form-check form-check-inline">
              {{ preferences_form.elevator }}
              <span class="badge rounded-pill bg-primary">
                <label class="form-check-label" for="elevator"><i class="fas fa-arrow-alt-circle-up"></i>
                  Elevator</label>
              </span>
            </div>

            <div class="form-check form-check-inline">
              {{ preferences_form.long_term }}
              <span class="badge rounded-pill bg-primary">
                <label class="form-check-label" for="long-term"><i class="fas fa-file-signature"></i> Long Term</label>
              </span>
            </div>

            <div class="form-check form-check-inline">
              {{ preferences_form.immediate_entry }}
              <span class="badge rounded-pill bg-primary">
                <label class="form-check-label" for="immediate-entry"><i class="fas fa-paw"></i> Immediate Entry</label>
              </span>
            </div>
            <div class="col-12">
              <br>
              <button type="submit" class="btn btn-primary">Search</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% if filteredApartments%}
<div class="row row-cols-1 row-cols-md-2 g-4">
  {% for apartment in filteredApartments %}
  <div class="col">
    <div class="card h-100">
      <ul class="nav nav-pills" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="apt-tab-{{apartment.owner.id}}" data-toggle="tab"
            href="#apt-{{apartment.owner.id}}" role="tab" aria-controls="apt-{{apartment.owner.id}}"
            aria-selected="true">Apartment</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="rmt-tab-{{apartment.owner.id}}" data-toggle="tab" href="#rmt-{{apartment.owner.id}}"
            role="tab" aria-controls="rmt-{{apartment.owner.id}}" aria-selected="false">Roommate</a>
        </li>
      </ul>

      <div class="tab-content" id="card-tab-content">
        <div class="tab-pane fade show active" id="apt-{{apartment.owner.id}}" role="tabpanel"
          aria-labelledby="apt-tab-{{apartment.owner.id}}">
          <img src="{{apartment.image_url}}" class="card-img-top" height=275 width=150 alt="{{apartment.address}}">
          <div class="card-body">
            <h5 class="card-title">{{apartment.address}}, {{apartment.city}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">Uploaded by {{apartment.owner.first_name}}
              {{apartment.owner.last_name}}</h6>
            {% if apartment.owner.not_smoking %}
            <span class="badge rounded-pill bg-secondary"><i class="fas fa-smoking-ban"></i><small> No
                smoking</small></span>
            {% endif %}
            {% if apartment.owner.pets_allowed %}
            <span class="badge rounded-pill bg-secondary"><i class="fas fa-paw"></i><small> Pet friendly</small></span>
            {% endif %}
            {% if apartment.owner.air_conditioner %}
            <span class="badge rounded-pill bg-secondary"><i class="fas fa-fan"></i><small> A/C</small></span>
            {% endif %}
            {% if apartment.owner.balcony %}
            <span class="badge rounded-pill bg-secondary"><i class="fas fa-sun"></i><small> Balcony</small></span>
            {% endif %}
            {% if apartment.owner.elevator %}
            <span class="badge rounded-pill bg-secondary"><i class="fas fa-arrow-alt-circle-up"></i><small>
                Elevator</small></span>
            {% endif %}
            {% if apartment.owner.long_term %}
            <span class="badge rounded-pill bg-secondary"><i class="fas fa-file-signature"></i><small> Long
                Term</small></span>
            {% endif %}
            {% if apartment.owner.immediate_entry %}
            <span class="badge rounded-pill bg-secondary"><i class="fas fa-calendar-day"></i><small> Imediate
                Entry</small></span>
            {% endif %}
            <br><br>
            <h6><i class="fas fa-user"></i> {{apartment.num_of_roomates}} Roommates &nbsp; &nbsp;
              <i class="fas fa-door-closed"></i> {{apartment.num_of_rooms}} Rooms
            </h6>
            <p><i class="fas fa-money-check-alt"></i><strong> Rent:</strong> {{apartment.rent}} &nbsp; &nbsp; &nbsp;
              &nbsp;
              <i class="fas fa-calendar-day"></i><strong> Entry:</strong> {{apartment.start_date}}
            </p>
            {% if request.user.is_seeker%}
            <a href="/contacts/add/{{apartment.pk}}" class="btn btn-primary">YES <i class="fas fa-check-circle"></i></a>
            <a href="/contacts/decline/{{apartment.pk}}" class="btn btn-primary">NO <i class="fas fa-times-circle"></i></a> {% endif %}
            <a href="/apartments/{{apartment.pk}}/details" class="btn btn-primary">More Information</a>

            <br><br>
            <h6><strong>About</strong></h6>
            <p class="card-text">{{apartment.about}}</p>
          </div>
        </div>

        <div class="tab-pane fade" id="rmt-{{apartment.owner.id}}" role="tabpanel"
          aria-labelledby="rmt-tab-{{apartment.owner.id}}">
          <img src={{apartment.owner.image_url}} class="card-img-top" height=275 width=150 alt={{apartment.address}}>
          <div class="card-body">
            <h5 class="card-title">{{apartment.owner.first_name}} {{apartment.owner.last_name}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{apartment.address}}, {{apartment.city}}</h6>
            {% for hobby in apartment.owner.hobbies.all %}
            <span class="badge rounded-pill bg-secondary"><small>{{hobby}}</small></span>
            {% endfor %}
            <br><br>
            <br>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <small class="text-muted">Uploaded on {{apartment.date_posted}}</small>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% elif showResults%}
<h2>Sorry, no results was found.</h2>
{% endif %}
</div>
{% endblock %}