{% extends 'dashboard/admin_dashboard/main.html' %}
{% load static %}
{% block content %}
<h4 class="fw-bold py-3 mb-4">Settings</h4>

<div class="container-fluid">
  {% if messages %}
    <div class="row">
      <div class="col-12">
        {% for message in messages %}
          <div class="alert {% if 'success' in message.tags %}alert-success{% elif 'danger' in message.tags %}alert-danger{% endif %} alert-dismissible" role="alert" id="success-alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  <div class="row">
    <div class="col-12">
      <div class="card mb-4">
        <form role="form" method="POST" enctype="multipart/form-data" action="" autocomplete="off">
          {% csrf_token %}
          <div class="card-body">
            <!-- Image and Favicon Section -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="image" class="form-label">Image (PNG, JPG, JPEG):</label>
                {% if setting.image %}
                  <img src="{% static 'website_setting/logo/' %}{{ setting.image.url }}" alt="Current Logo" class="img-fluid mb-2" style="max-width: 85px;">
                {% endif %}
                <input type="file" name="image" accept=".png, .jpg, .jpeg" class="form-control" id="image">
              </div>
              <div class="col-md-6">
                <label for="favicon" class="form-label">Favicon (ICO):</label>
                {% if setting.favicon %}
                  <img src="{% static 'website_setting/favicon/' %}{{ setting.favicon.url }}" alt="Current Favicon" class="img-fluid mb-2" style="max-width: 32px;">
                {% endif %}
                <input type="file" name="favicon" accept=".ico" class="form-control" id="favicon">
              </div>
            </div>

            <!-- Website Details Section -->
            <div class="row mb-3">
              <div class="col-md-3">
                <label for="website_company_domaines" class="form-label">Company Domain:</label>
                <input type="text" name="website_company_domaines" value="{{ setting.company_domain }}" class="form-control" id="website_company_domaines" required>
              </div>
              <div class="col-md-3">
                <label for="website_name" class="form-label">Website Name:</label>
                <input type="text" name="website_name" value="{{ setting.website_name }}" class="form-control" id="website_name" required>
              </div>
              <div class="col-md-3">
                <label for="website_link" class="form-label">Website Link:</label>
                <input type="url" name="website_link" class="form-control" value="{{ setting.website_link }}" id="website_link" required>
              </div>
              <div class="col-md-3">
                <label for="copyright" class="form-label">Copyright:</label>
                <input type="text" name="copyright" class="form-control" value="{{ setting.copyright }}" id="copyright" required>
              </div>
            </div>

            <!-- SMTP Settings Section -->
            <div class="row mb-3">
              <div class="col-md-3">
                <label for="smtp_host" class="form-label">SMTP Host:</label>
                <input type="text" name="smtp_host" class="form-control" value="{{ setting.smtp_host }}" id="smtp_host" required>
              </div>
              <div class="col-md-3">
                <label for="smtp_user" class="form-label">SMTP User:</label>
                <input type="text" name="smtp_user" class="form-control" value="{{ setting.smtp_user }}" id="smtp_user" required>
              </div>
              <div class="col-md-3">
                <label for="smtp_password" class="form-label">SMTP Password:</label>
                <input type="password" name="smtp_password" class="form-control" value="{{ setting.smtp_password }}" id="smtp_password" required>
              </div>
              <div class="col-md-3">
                <label for="smtp_port" class="form-label">SMTP Port:</label>
                <input type="number" name="smtp_port" class="form-control" value="{{ setting.smtp_port }}" id="smtp_port" required>
              </div>
            </div>

            <!-- Email Settings Section -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="w_from_name" class="form-label">From Name:</label>
                <input type="text" name="w_from_name" class="form-control" value="{{ setting.from_name }}" id="w_from_name" required>
              </div>
              <div class="col-md-6">
                <label for="w_from_email" class="form-label">From Email:</label>
                <input type="email" name="w_from_email" class="form-control" value="{{ setting.from_email }}" id="w_from_email" required>
              </div>
            </div>

            <!-- New Row for SMTP TLS/SSL -->
            <div class="row mb-3">
              <div class="col-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" name="smtp_tls" id="smtp_tls" {% if setting.smtp_tls %}checked{% endif %}>
                  <label class="form-check-label" for="smtp_tls">SMTP TLS</label>
                </div>
              </div>

              <div class="col-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" name="smtp_ssl" id="smtp_ssl" {% if setting.smtp_ssl %}checked{% endif %}>
                  <label class="form-check-label" for="smtp_ssl">SMTP SSL</label>
                </div>
              </div>

              <div class="col-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" name="whatsapp_notification" role="switch" id="whatsapp_notification" {% if setting.whatsapp_notification == 1 %}checked{% endif %}>
                  <label class="form-check-label" for="whatsapp_notification">WhatsApp Notification</label>
                </div>
              </div>
            </div>

            <!-- WhatsApp Notification Toggle -->
            <div class="row mb-3">

              <div class="col-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" name="safety_service_kiosk" id="safety_service_kiosk" {% if setting.safety_Service_Kiosk == 1 %}checked{% endif %}>
                  <label class="form-check-label" for="safety_service_kiosk">Safety Service Kiosk</label>
                </div>
              </div>
              <div class="col-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" name="is_gate_pass_template_active" id="is_gate_pass_template_active" {% if setting.is_gate_pass_template_active == 1 %}checked{% endif %}>
                  <label class="form-check-label" for="is_gate_pass_template_active">Gate Pass Template Active</label>
                </div>
              </div>
              <div class="col-4">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="is_safety_video_active" id="is_safety_video_active" {% if setting.is_safety_video_active == 1 %}checked{% endif %}>
                    <label class="form-check-label" for="is_safety_video_active">Safety Video Active</label>
                </div>
              </div>
            </div>


            <!-- WhatsApp Statistics Section -->
            {% if setting.whatsapp_notification == 1 %}
              <div class="row mb-3">
                <!-- Total WhatsApp Messages Card -->
                <div class="col-md-4">
                  <div class="card bg-primary text-white h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                      <div>
                        <h3 class="card-title text-white">{{ total_messages }}</h3>
                        <p>Total WhatsApp Messages</p>
                      </div>
                      <i class="bx bxl-whatsapp fs-1"></i>
                    </div>
                  </div>
                </div>

                <!-- Messages Sent Card -->
                <div class="col-md-4">
                  <div class="card bg-info text-white h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                      <div>
                        <h3 class="card-title text-white">{{ message_count }}</h3>
                        <p>Messages Sent</p>
                      </div>
                      <i class="bx bx-paper-plane   fs-1"></i>
                    </div>
                  </div>
                </div>

                <!-- Remaining Message Limit Card -->
                <div class="col-md-4">
                  <div class="card bg-success text-white h-100">
                    <div class="card-body d-flex justify-content-between align-items-center">
                      <div>
                        <h3 class="card-title text-white">{{ remaining_messages }}</h3>
                        <p>Remaining Message Limit</p>
                      </div>
                      <i class="bx bx-envelope fs-1"></i>
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
          </div>
          <div class="card-footer bg-white text-end">
            <button type="submit" class="btn btn-primary">
                submit
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- ✅ Test Email Section -->
  <div class="row  mb-6">
    <div class="col-md-12">
      <div class="card border-primary">
        <div class="card-header bg-primary text-white">
          <h5 class="mb-0 text-white">Test Email Configuration</h5>
        </div>
        <div class="card-body">
          <br>
          <form method="POST" action="{% url 'admin_setting_send_test_email' %}">
            {% csrf_token %}
            <div class="row">
              <div class="col-md-8">
                <label for="test_email" class="form-label fs-6">Enter Test Email Address:</label>
                <input type="email" name="test_email" id="test_email" class="form-control" placeholder="example@domain.com" required>
              </div>
              <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">Send Test Email</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // When SMTP TLS changes
    $('#smtp_tls').change(function() {
      if ($(this).is(':checked')) {
        // If TLS is checked, uncheck SSL
        $('#smtp_ssl').prop('checked', false);
      } else {
        // If TLS is unchecked, check SSL
        $('#smtp_ssl').prop('checked', true);
      }
    });

    // When SMTP SSL changes
    $('#smtp_ssl').change(function() {
      if ($(this).is(':checked')) {
        // If SSL is checked, uncheck TLS
        $('#smtp_tls').prop('checked', false);
      } else {
        // If SSL is unchecked, check TLS
        $('#smtp_tls').prop('checked', true);
      }
    });
  });
</script>

{% endblock %}