{% load static %}

<link href="{% static 'popups/css/style.css' %}" rel="stylesheet">
<script src="{% static 'popups/js/jquery-3.6.0.min.js' %}"></script>

<style>
  {% for npopup in noti_popups.all %}
    {% if npopup.activate %}
    #npopup_{{ npopup.pk }} .modal-dialog .modal-body {
    background-size: cover;
    background-image: url({% static 'popups/img/'|add:npopup.background|add:'.jpg' %});
    {% if npopup.text_color == 'BL' %}
      color: #082744;
    {% elif npopup.text_color == 'WH' %}
      color: #ffffff;
    {% elif npopup.text_color == 'GR' %}
      color: #444444;
    {% endif %}
    }
    {% endif %}
  {% endfor %}
  {% for epopup in event_popups.all %}
    {% if epopup.activate %}
    #epopup_{{ epopup.pk }} .modal-dialog .modal-body {
    background-size: cover;
    background-image: url({% static 'popups/img/'|add:epopup.background|add:'.jpg' %});
    {% if epopup.text_color == 'BL' %}
      color: #082744;
    {% elif epopup.text_color == 'WH' %}
      color: #ffffff;
    {% elif epopup.text_color == 'GR' %}
      color: #444444;
    {% endif %}
    }
    {% endif %}
  {% endfor %}
  {% for ipopup in image_popups.all %}
    {% if ipopup.activate %}
    #epopup_{{ ipopup.pk }} .modal-dialog .modal-body {
    background-size: cover;
    background-image: url({% static 'popups/img/'|add:ipopup.background|add:'.jpg' %});
    {% if ipopup.text_color == 'BL' %}
      color: #082744;
    {% elif ipopup.text_color == 'WH' %}
      color: #ffffff;
    {% elif ipopup.text_color == 'GR' %}
      color: #444444;
    {% endif %}
    }
    {% endif %}
  {% endfor %}
</style>

<!-- Call Modal on page load -->
<script>
    {% for npopup in noti_popups.all %}
      {% if npopup.activate %}
      $(document).ready(function(){
          $("#npopup_{{ npopup.pk }}").modal('show');
      });
      {% endif %}
    {% endfor %}
    {% for epopup in event_popups.all %}
      {% if epopup.activate %}
      $(document).ready(function(){
          $("#epopup_{{ epopup.pk }}").modal('show');
      });
      {% endif %}
    {% endfor %}
    {% for ipopup in image_popups.all %}
      {% if ipopup.activate %}
      $(document).ready(function(){
          $("#ipopup_{{ ipopup.pk }}").modal('show');
      });
      {% endif %}
    {% endfor %}
</script>

<!-- Noti Popup Modal -->
{% for npopup in noti_popups.all %}
  {% if npopup.activate %}
  <div class="modal fade" id="npopup_{{ npopup.pk }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
       aria-labelledby="nstaticBackdropLabel_{{ npopup.pk }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="nstaticBackdropLabel_{{ npopup.pk }}">{{ npopup.title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="container">
            <h4 class="text-center">{{ npopup.subtitle }}</h4>
            {% autoescape off %}
            <p class="text-center">{{ npopup.description }}</p>
            {% endautoescape %}
          </div>
        </div>
         <div class="modal-footer">
           {% if npopup.url %}
            <a href="{{ npopup.url }}" target="_blank">자세히 보기</a>
           {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endif %}
{% endfor %}

<!-- Event Popup Modal -->
{% for epopup in event_popups.all %}
  {% if epopup.activate %}
  <div class="modal fade" id="epopup_{{ epopup.pk }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
       aria-labelledby="estaticBackdropLabel_{{ epopup.pk }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="estaticBackdropLabel_{{ epopup.pk }}">{{ epopup.title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="container">
            <h4 class="text-center">{{ epopup.subtitle }}</h4>
            {% autoescape off %}
            <p class="text-center">{{ epopup.description }}</p>
            {% endautoescape %}
            {% if epopup.url %}
            <a href="{{ epopup.url }}" class="btn-get-started scrollto">자세히 보기</a>
            {% endif %}
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
{% endfor %}

<!-- Image Popup Modal -->
<style>
  .modal .modal-dialog .modal-body {
  margin: 0px;
  padding: 0px;
  }
</style>
{% for ipopup in image_popups.all %}
  {% if ipopup.activate %}
  <div class="modal fade" id="ipopup_{{ ipopup.pk }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
       aria-labelledby="istaticBackdropLabel_{{ ipopup.pk }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="istaticBackdropLabel_{{ ipopup.pk }}">{{ ipopup.title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% if ipopup.url %}
          <a href="{{ ipopup.url }}" class="btn-get-started scrollto" target="_blank">
            <img src="{{ ipopup.image.url }}" class="img-fluid" alt="Popup image">
          </a>
          {% else %}
            <img src="{{ ipopup.image.url }}" class="img-fluid" alt="Popup image">
          {% endif %}
        </div>
        {% if ipopup.url %}
        <div class="modal-footer">
            <a href="{{ ipopup.url }}" target="_blank">자세히 보기</a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}
{% endfor %}