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

{% load static %}
{% load crispy_forms_tags %}

{% block script_css %}
{% endblock script_css %}

{% block title %} {{ user.get_full_name }} - Jos Main Market Authority {% endblock title %}

      {% block main_container %}
        <div class="container">
          <div class="page-inner">
            <div class="page-header">
              <h4 class="page-title">Dashboard</h4>
              <ul class="breadcrumbs">
                <li class="nav-home">
                    <a href="{{ breadcrumbs.0.url }}">
                        <i class="icon-home"></i>
                    </a>
                </li>
                <li class="separator">
                    <i class="icon-arrow-right"></i>
                </li>
                {% for breadcrumb in breadcrumbs %}
                    {% if not forloop.first %}
                        <li class="nav-item">
                            <a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>
                        </li>
                        {% if not forloop.last %}
                            <li class="separator">
                                <i class="icon-arrow-right"></i>
                            </li>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </ul>

            </div>
            <!-- Begin Main Content -->
              <div class="row">
              <div class="col-md-12">
                <div class="card card-round">
                  <div class="card-header">
                    <div class="card-head-row">
                      <div class="card-title">UPDATE PROFILE</div>
                      <div class="card-tools">
                        <div class="dropdown">
                          <button
                            class="btn btn-icon btn-clean me-0"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fas fa-ellipsis-h"></i>
                          </button>
                          <div
                            class="dropdown-menu"
                            aria-labelledby="dropdownMenuButton"
                          >
                            <a class="dropdown-item" href="">Add Staff</a>
                            <a class="dropdown-item" href="">Add Customer</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        {% if form.errors %}
                        <div class="alert alert-danger">
                            {% for field, errors in form.errors.items %}
                            <p>{{ field }}: {{ errors }}</p>
                            {% endfor %}
                        </div>
                        {% endif %}

                        <!-- Image upload section for all user roles -->
                        <div class="row">
                            <div class="col-md-4 d-flex flex-column align-items-center mb-3">
                                <img id="image_preview"
                                     src="{% if user_form.instance.image %}{{ user_form.instance.image.url }}{% else %}{% static 'dashboard/img/JMMA_blank.png' %}{% endif %}"
                                     alt="Image Preview"
                                     class="img-thumbnail mb-2"
                                     style="width: 200px; height: 200px; object-fit: cover;">
                                <input id="image_input" type="file" name="image" accept="image/*" class="form-control mb-2" onchange="previewImage(event)">
                                <small class="form-text text-muted">Accept Image in (.jpg, .jpeg, .png)</small>
                            </div>

                            <!-- User details section -->
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        {{ user_form.first_name.label_tag }} {{ user_form.first_name }}
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        {{ user_form.middle_name.label_tag }} {{ user_form.middle_name }}
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        {{ user_form.last_name.label_tag }} {{ user_form.last_name }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        {{ user_form.email.label_tag }} {{ user_form.email }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        {{ user_form.phone_number.label_tag }} {{ user_form.phone_number }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        {{ user_form.password1.label_tag }} {{ user_form.password1 }}
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        {{ user_form.password2.label_tag }} {{ user_form.password2 }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        {{ user_form.gender.label_tag }} {{ user_form.gender }}
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        {{ user_form.profession.label_tag }} {{ user_form.profession }}
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        {{ user_form.nin.label_tag }} {{ user_form.nin }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Trader-Specific Form -->
                        {% if is_trader %}
                        <h3>Trader Details</h3>
                        <div class="col-md-4 mb-3">
                                {{ role_form.registration_no.label_tag }} {{ role_form.registration_no }}
                            </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                {{ role_form.country.label_tag }} {{ role_form.country }}
                            </div>
                            <div class="col-md-4 mb-3">
                                {{ role_form.state.label_tag }} {{ role_form.state }}
                            </div>
                            <div class="col-md-4 mb-3">
                                {{ role_form.lga.label_tag }} {{ role_form.lga }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ role_form.residential_address.label_tag }} {{ role_form.residential_address }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ role_form.ethnicity.label_tag }} {{ role_form.ethnicity }}
                            </div>
                        </div>
                        <h3>Business Details</h3>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ role_form.business_name.label_tag }} {{ role_form.business_name }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ role_form.business_name.label_tag }} {{ role_form.business_name }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ role_form.service_trade_type.label_tag }} {{ role_form.service_trade_type }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ role_form.date_established.label_tag }} {{ role_form.date_established }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ role_form.business_class.label_tag }} {{ role_form.business_class }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ role_form.business_address.label_tag }} {{ role_form.business_address }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ role_form.business_address.label_tag }} {{ role_form.business_address }}
                            </div>
                        </div>
                        {% endif %}

                        <!-- Staff-Specific Form -->
                        {% if is_staff %}
                        <h3>Staff Details</h3>
                        <div class="row">
                            <div class="col-md-2 mb-3">
                                {{ role_form.position.label_tag }} {{ role_form.position }}
                            </div>
                            <div class="col-md-3 mb-3">
                                {{ role_form.department.label_tag }} {{ role_form.department }}
                            </div>
                            <div class="col-md-3 mb-3">
                                {{ role_form.country.label_tag }} {{ role_form.country }}
                            </div>
                            <div class="col-md-2 mb-3">
                                {{ role_form.state.label_tag }} {{ role_form.state }}
                            </div>
                            <div class="col-md-2 mb-3">
                                {{ role_form.lga.label_tag }} {{ role_form.lga }}
                            </div>
                        </div>
                        {% endif %}

                        <!-- Customer-Specific Form -->
                        {% if is_customer %}
                        <h3>Customer Details</h3>
                        {{ role_form.as_p }}
                        {% endif %}

                        <button type="submit" class="btn btn-success">Submit</button>
                    </form>


                  </div>
                </div>
              </div>
            </div>
            <!-- End of Main Content -->
          </div>
        </div>

        {% endblock main_container %}


        {% block script_js %}
            <script>
            document.addEventListener('DOMContentLoaded', function () {
                const password1 = document.getElementById('{{ form.password1.id_for_label }}');
                const password2 = document.getElementById('{{ form.password2.id_for_label }}');
                const message = document.getElementById('password-message');

                // Function to check if passwords match
                function validatePasswords() {
                    if (password1.value === password2.value) {
                        password1.style.borderColor = 'green';
                        password2.style.borderColor = 'green';
                        message.textContent = 'Passwords match!';
                        message.style.color = 'green';
                    } else {
                        password1.style.borderColor = 'red';
                        password2.style.borderColor = 'red';
                        message.textContent = 'Passwords do not match!';
                        message.style.color = 'red';
                    }
                }

                // Add event listeners to run the validation on every keystroke
                password1.addEventListener('input', validatePasswords);
                password2.addEventListener('input', validatePasswords);
            });
            </script>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const nextBtns = document.querySelectorAll('.next-tab');
                    const prevBtns = document.querySelectorAll('.prev-tab');

                    nextBtns.forEach(button => {
                        button.addEventListener('click', function() {
                            const nextTab = document.querySelector(button.getAttribute('data-next-tab'));
                            new bootstrap.Tab(nextTab).show();
                        });
                    });

                    prevBtns.forEach(button => {
                        button.addEventListener('click', function() {
                            const prevTab = document.querySelector(button.getAttribute('data-prev-tab'));
                            new bootstrap.Tab(prevTab).show();
                        });
                    });
                });

                function previewImage(event) {
                    const input = event.target;
                    const reader = new FileReader();
                    reader.onload = function(){
                        const dataURL = reader.result;
                        const imagePreview = document.getElementById('image_preview');
                        imagePreview.src = dataURL;
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            </script>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var countrySelect = document.getElementById('id_country');
                    var stateSelect = document.getElementById('id_state');
                    var lgaSelect = document.getElementById('id_lga');

                    countrySelect.onchange = function () {
                        var country_id = this.value;
                        console.log('Country selected:', country_id);  // Add logging

                        stateSelect.innerHTML = '<option value="">Select State</option>';
                        lgaSelect.innerHTML = '<option value="">Select LGA</option>';

                        if (country_id) {
                            fetch('/Dashboard/ajax/load-states/' + country_id + '/')
                                .then(response => response.json())
                                .then(data => {
                                    console.log('States data:', data);  // Add logging
                                    data.forEach(function (state) {
                                        var option = document.createElement('option');
                                        option.value = state.id;
                                        option.text = state.name;
                                        stateSelect.appendChild(option);
                                    });
                                    stateSelect.disabled = false;
                                })
                                .catch(error => {
                                    console.error('Error loading states:', error);
                                });
                        }
                    };

                    stateSelect.onchange = function () {
                        var state_id = this.value;
                        console.log('State selected:', state_id);  // Add logging

                        lgaSelect.innerHTML = '<option value="">Select LGA</option>';

                        if (state_id) {
                            fetch('/Dashboard/ajax/load-lgas/' + state_id + '/')
                                .then(response => response.json())
                                .then(data => {
                                    console.log('LGAs data:', data);  // Add logging
                                    data.forEach(function (lga) {
                                        var option = document.createElement('option');
                                        option.value = lga.id;
                                        option.text = lga.name;
                                        lgaSelect.appendChild(option);
                                    });
                                    lgaSelect.disabled = false;
                                })
                                .catch(error => {
                                    console.error('Error loading LGAs:', error);
                                });
                        }
                    };
                });
            </script>
        {% endblock script_js %}