{% load static %}

{% include 'dashboard/admin_dashboard/header.html' %}

{% include 'dashboard/admin_dashboard/body.html' %}

<!-- Right side column. Contains the navbar and content of the page -->

<style>

    /* Basic styling for the switch */

    .form-check-input {

        width: 43px;

        height: 14px;

        -webkit-appearance: none;

        appearance: none;

        background-color: #ccc;

        border-radius: 30px;

        position: relative;

        cursor: pointer;

        transition: background-color 0.3s;

    }



    /* Styling when the checkbox is checked */

    .form-check-input:checked {

        background-color: #367fa9; /* Blue color when checked */

    }



    /* Styling for the switch knob */

    .form-check-input:before {

        content: "";

        position: absolute;

        top: -3px;

        left: -2px;

        width: 20px;

        height: 20px;

        border-radius: 50%;

        background-color: #e9e9e9;

        transition: transform 0.3s;

    }



    /* Move the knob when the switch is checked */

    .form-check-input:checked:before {

        transform: translateX(26px); /* Moves the knob to the right */

    }



    /* Optional: Change label font size or padding */

    .form-check-label {

        font-size: 15px;

        padding-left: 10px;

        vertical-align: middle;

    }



    /* Media Query for Small Screens (Mobile) */

    @media (max-width: 767px) {

        .form-check-input {

            width: 35px;  /* Smaller width on mobile */

            height: 12px; /* Adjust height for mobile */

        }



        .form-check-input:before {

            width: 18px;  /* Smaller knob size */

            height: 18px; /* Smaller knob size */

        }



        .form-check-label {

            font-size: 14px; /* Smaller font size on mobile */

        }

    }



    /* Media Query for Medium Screens (Tablets) */

    @media (min-width: 768px) and (max-width: 1024px) {

        .form-check-input {

            width: 40px; /* Adjusted width for tablet */

            height: 13px; /* Adjusted height for tablet */

        }



        .form-check-input:before {

            width: 19px;  /* Adjusted knob size for tablet */

            height: 19px; /* Adjusted knob size for tablet */

        }



        .form-check-label {

            font-size: 15px; /* Font size for tablets */

        }

    }



    /* Media Query for Large Screens (Desktop) */

    @media (min-width: 1025px) {

        .form-check-input {

            width: 43px;  /* Default size for desktop */

            height: 14px; /* Default size for desktop */

        }



        .form-check-input:before {

            width: 20px;  /* Default knob size for desktop */

            height: 20px; /* Default knob size for desktop */

        }



        .form-check-label {

            font-size: 15px; /* Default font size for desktop */

        }

    }

</style>

<div class="content-wrapper">

    <!-- Content Header (Page header) -->

    <div style="padding: 10px;">

      {% if messages %}

          {% for message in messages %}

          <div class="alert {% if 'success' in message.tags %}alert-success{% elif 'danger' in message.tags %}alert-danger{% endif %}" role="alert" id="success-alert">

  <!--                            <div class="alert alert-success" role="alert" id="success-alert">-->

              {{message}}

              <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                  <span aria-hidden="true">&times;</span>

              </button>

          </div>

          {% endfor %}

      {% endif %}

    </div>

    <section class="content-header text-center">

      <h1>

        Update  Setting

        <small>Control panel</small>

      </h1>

      <ol class="breadcrumb">

        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>

        <li class="active">Update  Setting</li>

      </ol>

    </section>
    
    <section class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="box box-primary">
                  <div class="box-header">
                    <h3 class="box-title">Update Setting</h3>
                  </div>
                  <form role="form" method="POST" enctype="multipart/form-data" action="">
                    {% csrf_token %}
                    <div class="box-body">
                        <div class="row">
                            <div class="form-group col-lg-6">
                                {% if setting.image %}
                                    <img src="{% static 'website_setting/logo/' %}{{ setting.image.url }}" alt="Current Logo" style="max-width: 200px;">
                                {% endif %}
                                <br>
                                <label for="image">Image (PNG, JPG, JPEG):</label>
                                <input type="file" name="image" accept=".png, .jpg, .jpeg" class="form-control" >
                            </div> 
                            <div class="form-group col-lg-6">
                                {% if setting.favicon %}
                                    <img src="{% static 'website_setting/favicon/' %}{{ setting.favicon.url }}" alt="Current Logo" style="max-width: 200px;">
                                {% endif %}
                                <br>
                                <label for="favicon">Favicon (ICO):</label>
                                <input type="file" name="favicon" accept=".ico" class="form-control">
                            </div>
                        </div>        
                        <div class="form-group col-lg-3">
                            <label for="website_company_domaines">Website Company Domain:</label>
                            <input type="text" name="website_company_domaines" value="{{ setting.company_domain }}" class="form-control" required>
                        </div>
                        <div class="form-group col-lg-3">
                            <label for="website_name">Website Name:</label>
                            <input type="text" name="website_name" value="{{ setting.website_name }}" class="form-control" required>
                        </div>
                        <div class="form-group col-lg-3">
                            <label for="website_link">Website Link:</label>
                            <input type="url" name="website_link" class="form-control" value="{{ setting.website_link }}" required>
                        </div>
                        <div class="form-group col-lg-3">
                            <label for="copyright">Copyright:</label>
                            <input type="text" name="copyright" class="form-control" value="{{ setting.copyright }}" required>
                        </div>
                        <div class="form-group col-lg-3">
                            <label for="w_email">SMTP Host:</label>
                            <input type="text" name="smtp_host" class="form-control" value="{{ setting.smtp_host }}" required>
                        </div>
                        <div class="form-group col-lg-3">
                            <label for="w_user">SMTP User:</label>
                            <input type="text" name="smtp_user" class="form-control" value="{{ setting.smtp_user }}" required>
                        </div>
                        <div class="form-group col-lg-3">
                            <label for="w_password">SMTP Password:</label>
                            <input type="password" name="smtp_password" class="form-control" value="{{ setting.smtp_password }}" required>
                        </div>
                        <div class="form-group 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 class="form-group col-lg-6">
                            <label for="w_from_name">From Name:</label>
                            <input type="text" name="w_from_name" class="form-control" value="{{ setting.from_name }}" required>
                        </div>
                        <div class="form-group col-lg-6">
                            <label for="w_from_email">From Email:</label>
                            <input type="text" name="w_from_email" class="form-control" value="{{ setting.from_email }}" required>
                        </div>
                        <div class="form-check form-switch form-group col-lg-4">
                            <input class="form-check-input" type="checkbox" name="whatsapp_notification" role="switch" id="flexSwitchCheckChecked" {% if setting.whatsapp_notification == 1 %}checked{% endif %}>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Whatsapp notification</label>
                        </div>
                        <div class="form-check form-switch form-group col-lg-4">
                            <input class="form-check-input" type="checkbox" name="smtp_tls" role="switch" id="smtp_tls" {% if setting.smtp_tls %}checked{% endif %}>
                            <label class="form-check-label" for="smtp_tls">SMTP TLS</label>
                        </div>
                        <div class="form-check form-switch form-group col-lg-4">
                            <input class="form-check-input" type="checkbox" name="smtp_ssl" role="switch" id="smtp_ssl" {% if setting.smtp_ssl %}checked{% endif %}>
                            <label class="form-check-label" for="smtp_ssl">SMTP SSL</label>
                        </div>
                    </div>
                    {% if setting.whatsapp_notification == 1 %}
                        <div class="row" style="margin-top: 20px;">
                            <div class="col-lg-4">
                                <div class="small-box bg-primary text-white">
                                    <div class="inner">
                                        <h3>{{ total_messages }}</h3>
                                        <p class="text-light">Total WhatsApp Messages</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-whatsapp"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="small-box bg-info text-white">
                                    <div class="inner">
                                        <h3>{{ message_count }}</h3>
                                        <p class="text-light">Messages Sent</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-paper-plane-o"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="small-box bg-success text-white">
                                    <div class="inner">
                                        <h3>{{ remaining_messages }}</h3>
                                        <p class="text-light">Remaining Message Limit</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-envelope-o"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    <div class="box-footer text-right">
                      <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                  </form>
                </div><!-- /.box -->
              </div>
            </div>   <!-- /.row -->
    </section>
    <section class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="box box-primary">
                  <div class="box-header">
                    <h3 class="box-title">Test Email Configuration</h3>
                  </div>
                  <form role="form" method="POST" enctype="multipart/form-data" action="{% url 'admin_setting_send_test_email' %}">
                    {% csrf_token %}
                    <div class="box-body">
                        <div class="form-group col-lg-12">
                             <label for="test_email">Enter Test Email Address:</label>

                            <input type="email" name="test_email" id="test_email" placeholder="example@domain.com" class="form-control" required>
                        </div>
                    </div>
                        <div class="row" style="margin-top: 20px;">
                        </div>
                    <div class="box-footer text-right">
                      <button type="submit" class="btn btn-primary">Send Test Email</button>
                    </div>
                  </form>
                </div><!-- /.box -->
            </div>
        </div>   
    </section>

</div>

{% include 'dashboard/visitors_dashboard/footer.html' %}
