{% extends 'base.html' %}

{% load static %}

{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		<div class="mb-3">
			<h1 class="h3 d-inline align-middle">Scale</h1>
			<br><i>All fields marked with an asterisk (<span style="color:red;">*</span>) are required</i>

			{% include 'partials/_messages.html' %}
			
		</div>
		

		<form class="row" action="{% url 'add-scale' %}" method="post" id="form-add-scale">
      {% csrf_token %}
      <div class="col-12">
        <div class="card mb-3"><!-- added mb-4 for spacing -->
          <div class="card-body">
            <div class="row">

              <div class="container-fluid py-3">
              

              
                    <form method="post">
                      {% csrf_token %}
              
                      <div class="row g-3 m-3 align-items-end">

                        <div class="col-12 col-md-4">
                          <label for="txt-scale-id" class="form-label">
                            Scale ID <span class="text-danger">*</span>
                          </label>
                          <input type="text" class="form-control" name="scale_id" id="txt-scale-scale_id"
                                 placeholder="Scale ID"
                                 value="{% if scale_id %}{{ scale_id }}{% else %}{{ old_input_field_values.scale_id }}{% endif %}">
                        </div>
              
                        <!-- Scale Name -->
                        <div class="col-12 col-md-4">
                          <label for="txt-scale-name" class="form-label">
                            Description <span class="text-danger">*</span>
                          </label>
                          <input type="text" class="form-control" name="description" id="txt-scale-description"
                                 placeholder="Description"
                                 value="{% if description %}{{ description }}{% else %}{{ old_input_field_values.description }}{% endif %}">
                        </div>
              

              
                        <!-- Buttons -->
                        <div class="col-12">
                          <div class="d-flex gap-2 justify-content-end mt-2">
                            <a href="{% url 'add-scale' %}" class="btn btn-secondary">
                              Clear
                            </a>
                            <button type="submit" class="btn btn-primary" id="btn-add-item">
                              Add New Scale
                            </button>
                          </div>
                        </div>
                      </div>
                    </form>
              
              </div>
              
            </div>
          </div>
        </div><!-- /card -->
      </div>
    </form>
		<div class="row mt-4">
            <div class="col-xl-12">
                <div class="card">
                    
                    <div class="card-body">

                        <div class="dataTables_wrapper">

                            <div class="row">
                                <div class="col-md-6">

    
                                    <div class="dataTables_length" id="datatables-reponsive_length">
                                        
                                        <form id="per-page-count-hidden-form" action="{% url 'scale-list'%}" method="GET">
                                            <label>Show 

                                                <select name="per_page_count" id="select-per-page-count" aria-controls="datatables-reponsive" class="form-select form-select-sm">
                                                    {% for option in per_page_selector %}
                                                    {% if option == default_per_page_count %}
                                                        <option value="{{option}}" selected>{{option}}</option>
                                                    {% else %}
                                                        <option value="{{option}}">{{option}}</option>
                                                    {% endif %}
                                                    {% endfor %}

                                                </select> entries
                                            </label>
                                          

                                            <input type="hidden" name = "start_index" id="start-index-hidden-input-tag" value="{{ page.start_index }}">
                                            
                                        </form>
                                   
                                    </div>
                                </div>
                            </div>

                        <table class="table table-responsive table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    
                                    <th>#</th>
                                    <th>Scale ID</th>
                                    <th>Description</th>
                                    
                                    <th class = "text-sm-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>

                                {% for scale in page %}
                                <tr>
                                    
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{scale.scale_id}}</td>
                                    <td>{{scale.description}}</td>
                                    
                                    <td class="text-sm-end">
                                        <button type="button"
                                                class="btn btn-secondary btn-pill btn-sm btn-view"
                                                data-id="{{ scale.id }}"
                                                data-description="{{ scale.description }}"
                                                data-scaleid ="{{scale.scale_id}}"
                                                data-bs-toggle="modal" data-bs-target="#viewScaleModal">
                                          View
                                        </button>
                                      
                                        <button type="button"
                                                class="btn btn-primary btn-pill btn-sm btn-edit"
                                                data-id="{{ scale.id }}"
                                                data-description="{{ scale.description }}"
                                                data-scaleid ="{{scale.scale_id}}"
                                                data-bs-toggle="modal" data-bs-target="#editScaleModal">
                                          Edit
                                        </button>
                                      
                                        <button type="button"
                                                class="btn btn-danger btn-pill btn-sm btn-delete"
                                                data-id="{{ scale.id }}"
                                                data-description="{{ scale.description }}"
                                                data-scaleid ="{{scale.scale_id}}"
                                                data-bs-toggle="modal" data-bs-target="#deleteScaleModal">
                                          Delete
                                        </button>
                                      </td>                                      

                                </tr>
                                {% endfor %}
                               
                            </tbody>
                        </table>
                                {# VIEW MODAL #}
                                <div class="modal fade" id="viewScaleModal" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                        <h5 class="modal-title">Scale</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                        <dl class="row mb-0">
                                          <dt class="col-sm-4">Scale ID</dt>
                                          <dd class="col-sm-8" id="view-scale_id"></dd>
                                          <dt class="col-sm-4">Description</dt>
                                          <dd class="col-sm-8" id="view-description"></dd>
                                        </dl>
                                        </div>
                                        <div class="modal-footer">
                                        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                
                                {# EDIT MODAL (POST) #}
                                <div class="modal fade" id="editScaleModal" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog">
                                      <form class="modal-content" method="post" id="edit-form" action="{% url 'update-scale' %}">
                                        {% csrf_token %}
                                        <!-- Hidden input for scale id -->
                                        <input type="hidden" name="id" id="edit-id">
                                  
                                        <div class="modal-header">
                                          <h5 class="modal-title">Edit Scale</h5>
                                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                          <div class="mb-3">
                                            <label class="form-label">Scale ID</label>
                                            <input type="text" class="form-control" name="scale_id" id="edit-scale_id" required>
                                          </div>
                                          <div class="mb-3">
                                            <label class="form-label">Description</label>
                                            <input type="text" class="form-control" name="description" id="edit-description" required>
                                          </div>

                                        </div>
                                        <div class="modal-footer">
                                          <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                                          <button class="btn btn-primary" type="submit">Save</button>
                                        </div>
                                      </form>
                                    </div>
                                </div>
                                  
                                
                                {# DELETE MODAL (POST) #}
                                <div class="modal fade" id="deleteScaleModal" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog">
                                      <form class="modal-content" method="post" id="delete-form" action="{% url 'delete-scale' %}">
                                        {% csrf_token %}
                                        <!-- Hidden input for scale id -->
                                        <input type="hidden" name="id" id="delete-id">
                                  
                                        <div class="modal-header">
                                          <h5 class="modal-title">Delete Scale</h5>
                                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                          <p class="mb-0">Are you sure you want to delete 
                                            <strong id="delete-name"></strong> 
                                            (<code id="delete-scale_id"></code>)?
                                          </p>
                                        </div>
                                        <div class="modal-footer">
                                          <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
                                          <button class="btn btn-danger" type="submit">Delete</button>
                                        </div>
                                      </form>
                                    </div>
                                  </div>
                                  
  

                        <div class="row">
                            <div class="col-sm-12 col-md-5">
                                {% if has_entries %}
                                    {% if page|length == 1 %}
                                        <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">{{ page.paginator.count }} entry</div>
                                    {% else %}
                                    <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">{{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count }} entries</div>
                                    {% endif %}
                                {% else %}
                                <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite"><span class="text-danger">No entries</span></div>
                                {% endif %}
                            </div>
                            <div class="col-sm-12 col-md-2">
                                {% if has_entries %}
                                <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">Page {{page.number}} of {{page.paginator.num_pages}}</div>
                                {% endif %}
                            </div>
                            <div class="col-sm-12 col-md-5">
                                <div class="dataTables_paginate paging_simple_numbers" id="datatables-reponsive_paginate">
                                    {% if has_entries %}
                                    <ul class="pagination">

                                        {% if page.has_previous %}

                                        <li class="paginate_button page-item previous" id="datatables-reponsive_previous">
                                            <a href="?page_number={{page.previous_page_number}}&per_page_count={{default_per_page_count}}" 
                                                                                                                                                        
                                            aria-controls="datatables-reponsive" aria-disabled="true" aria-role="link" data-dt-idx="previous" tabindex="0" class="page-link">Previous</a>
                                        </li>

                                        {% else %}

                                        <li class="paginate_button page-item previous disabled" id="datatables-reponsive_previous">
                                            <a href="" aria-controls="datatables-reponsive" aria-disabled="true" aria-role="link" data-dt-idx="previous" tabindex="0" class="page-link">Previous</a>
                                        </li>

                                        {% endif %}

                                        {% for page_number in page_list %}
                                        {% if page_number == page.paginator.ELLIPSIS %}
                                            {{page_number}}
                                        {% else %}

                                            {% if page_number == page.number %}
                                                <li class="paginate_button page-item active">
                                                    <a href="#" aria-controls="datatables-reponsive" aria-role="link" aria-current="page" data-dt-idx="0" tabindex="0" class="page-link">{{page_number}}</a>
                                                </li>
                                            {% else %}
                                                <li class="paginate_button page-item">
                                                    <a href="?page_number={{page_number}}&per_page_count={{default_per_page_count}}" 
                                                    aria-controls="datatables-reponsive" aria-role="link" aria-current="page" data-dt-idx="0" tabindex="0" class="page-link">{{page_number}}</a>
                                                </li>
                                            {% endif %}


                                        {% endif %}
                                        {% endfor %}

                                        {% if page.has_next %}

                                        <li class="paginate_button page-item next" id="datatables-reponsive_next">
                                            <a href="?page_number={{page.next_page_number}}&per_page_count={{default_per_page_count}}" 
                                            aria-controls="datatables-reponsive" aria-role="link" data-dt-idx="next" tabindex="0" class="page-link">Next</a>
                                        </li>

                                        {% else %}

                                        <li class="paginate_button page-item next disabled" id="datatables-reponsive_next">
                                            <a href="" aria-controls="datatables-reponsive" aria-role="link" data-dt-idx="next" tabindex="0" class="page-link">Next</a>
                                        </li>

                                        {% endif %}

                                    </ul>

                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>

	</div>
</main>
<script>
    // helper to set form action with the selected id
    function setAction(formEl, urlPattern, id) {
      // urlPattern example: "/core/scale/0/update/" — we replace the 0
      formEl.action = urlPattern.replace("0", id);
    }
  
    // View
    document.querySelectorAll('.btn-view').forEach(btn => {
      btn.addEventListener('click', () => {
        document.getElementById('view-description').textContent = btn.dataset.description;
        document.getElementById('view-scale_id').textContent = btn.dataset.scaleid;

      });
    });
  
// Edit
document.querySelectorAll('.btn-edit').forEach(btn => {
    btn.addEventListener('click', () => {
      document.getElementById('edit-id').value   = btn.dataset.id;
      document.getElementById('edit-description').value = btn.dataset.description;
      document.getElementById('edit-scale_id').value = btn.dataset.scaleid;
    });
  });
  
  // Delete
  document.querySelectorAll('.btn-delete').forEach(btn => {
    btn.addEventListener('click', () => {
      document.getElementById('delete-id').value = btn.dataset.id;
      document.getElementById('delete-description').textContent = btn.dataset.description;
      document.getElementById('delete-scale_id').textContent = btn.dataset.scaleid;
    });
  });
  
  </script>
  

<script src="{% static 'js/number-separator.js' %}"></script>
<script src="{% static 'js/itemregistry/add-item2.js' %}"></script>
<script src="{% static 'js/page-selection.js' %}"></script>

{% endblock %}