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

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

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

{% block title %} Admin Dashboard - 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-3">
                        <div class="card card-post card-round">
                            {% if request.user.image %}
                                <img src="{{ request.user.image.url }}" alt="Profile Picture" class="avatar-img card-img-top rounded img-fluid" />
                            {% else %}
                                <img src="{% static 'dashboard/img/JMMA_blank.jpg' %}" alt="Default Profile Picture" class="avatar-img rounded img-fluid" />
                            {% endif %}
                            <div class="card-body">
                                <div class="d-flex">
                                  <div class="avatar">
                                    <img
                                      src="{% static 'logo1.png' %}"
                                      alt="..."
                                      class="avatar-img rounded-circle"
                                    />
                                  </div>
                                  <div class="info-post ms-2">
                                    <p class="username">{{ request.user.phone_number }}</p>
                                    <p class="date text-muted">{{ request.user.email }}</p>
                                  </div>
                                </div>
                                <div class="separator-solid"></div>
                                <p class="card-category text-info mb-1">
                                  <a href="#">Policy Document</a>
                                </p>
                                <h3 class="card-title">
                                  <a href="#"> Ensure compliance with our Policy Document. </a>
                                </h3>
                                <p class="card-text">
                                  Ensure compliance with our Policy Document to maintain organizational standards,
                                    uphold integrity, and achieve consistent,
                                    high-quality performance across all operations....
                                </p>
                                <a href="#" class="btn btn-primary btn-rounded btn-sm"
                                  >Read More</a
                                >
                              </div>
                        </div>
                  </div>

                  <div class="col-md-9">
                      <div class="card card-round">
                          <div class="card-header">
                            <div class="card-head-row">
                              <div class="card-title">
                                  {% if request.user.is_trader %}
                                        TRADER PROFILE
                                        <p>Business Info: {{ profile.business_info }}</p>
                                        <!-- Add other trader-specific fields here -->
                                    {% elif request.user.is_staff %}
                                        STAFF PROFILE
                                        <!-- Add staff-specific fields here -->
                                    {% elif request.user.is_customer %}
                                        CUSTOMER PROFILE
                                        <!-- Add customer-specific fields here -->
                                    {% endif %}
                              </div>
                              <div class="card-tools">
                                <a
                                  href="#"
                                  class="btn btn-label-success btn-round btn-sm me-2"
                                >
                                  <span class="btn-label">
                                    <i class="fa fa-pencil"></i>
                                  </span>
                                  Export
                                </a>
                                <a href="{% url 'user_pdf' user.pk %}" class="btn btn-label-info btn-round btn-sm">
                                  <span class="btn-label">
                                    <i class="fa fa-print"></i>
                                  </span>
                                  Print
                                </a>
                              </div>
                            </div>
                          </div>
                          <div class="card-body">
                               <div class="table-responsive">
                                  <div class="table-responsive">
                                      <table class="table table-hover text-center">
                                        <thead>
                                          <tr>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <th scope="row">Full Name</th>
                                            <td>{{ user.first_name }} {{ user.middle_name }} {{ user.last_name }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Gender</th>
                                            <td>{{ user.gender }}</td>
                                          </tr>
                                          {% if request.user.is_trader %}
                                          <tr>
                                            <th scope="row">Profession</th>
                                            <td>{{ user.trader.profession }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">National Identity Number</th>
                                            <td>{{ user.trader.nin }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Registration Number</th>
                                            <td>{{ user.trader.registration_no }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Residential Address</th>
                                            <td>{{ user.trader.residential_address }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Country</th>
                                            <td>{{ user.trader.country }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">State</th>
                                            <td>{{ user.trader.state }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">LGA</th>
                                            <td>{{ user.trader.lga }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Ethnicity</th>
                                            <td>{{ user.trader.ethnicity }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Approved Status</th>
                                            <td>{{ user.trader.is_approved }}</td>
                                          </tr>
                                          {% elif request.user.is_staff %}
                                          <tr>
                                            <th scope="row">Department</th>
                                            <td>{{ user.staff.department }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Position</th>
                                            <td>{{ user.staff.position }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">Country</th>
                                            <td>{{ user.staff.country }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">State</th>
                                            <td>{{ user.staff.state }}</td>
                                          </tr>
                                          <tr>
                                            <th scope="row">LGA</th>
                                            <td>{{ user.staff.lga }}</td>
                                          </tr>
                                          {% endif %}
                                        </tbody>

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


        {% endblock main_container %}


        {% block script_js %}
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const prevBtn = document.getElementById('prevBtn');
                    const nextBtn = document.getElementById('nextBtn');
                    const submitBtn = document.getElementById('submitBtn');

                    const profileFormTabs = document.querySelectorAll('#profileFormTabs a');
                    const traderTab = new bootstrap.Tab(profileFormTabs[0]);
                    const businessTab = new bootstrap.Tab(profileFormTabs[1]);

                    function showTab(index) {
                        profileFormTabs[index].click();
                        if (index === 0) {
                            prevBtn.style.display = 'none';
                            nextBtn.style.display = 'inline-block';
                            submitBtn.style.display = 'none';
                        } else {
                            prevBtn.style.display = 'inline-block';
                            nextBtn.style.display = 'none';
                            submitBtn.style.display = 'inline-block';
                        }
                    }

                    nextBtn.addEventListener('click', function() {
                        showTab(1);
                    });

                    prevBtn.addEventListener('click', function() {
                        showTab(0);
                    });

                    showTab(0);  // Initialize the form with the first tab visible
                });
            </script>
            <script>
                function previewImage(event) {
                    var reader = new FileReader();
                    reader.onload = function(){
                        var output = document.getElementById('image_preview');
                        output.src = reader.result;
                    };
                    reader.readAsDataURL(event.target.files[0]);
                }

                document.addEventListener('DOMContentLoaded', function() {
                    var imageUrl = document.getElementById('image_preview').src;
                    if (imageUrl.includes('blank_passport.png')) {
                        document.getElementById('upload_message').style.display = 'block';
                    }
                });

            </script>
        {% endblock script_js %}