{# templates/petrol/nozzle_list.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Nozzle Management{% endblock %}

{% block stylesheets %}
<style>
.nz-container { max-width:960px; margin:20px auto; padding:0 15px; }
.nz-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.nz-header h4 { font-weight:700; color:#01478f; margin:0; }
.nz-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.nz-table thead th { background:#01478f; color:#fff; padding:10px 12px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.5px; font-weight:700; }
.nz-table tbody td { padding:9px 12px; border-bottom:1px solid #f0f0f0; font-size:0.85rem; vertical-align:middle; }
.nz-table tbody tr:hover { background:#f4f8ff; }
.nz-badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:0.72rem; font-weight:700; }
.nz-badge.active { background:#d4edda; color:#155724; }
.nz-badge.inactive { background:#f8d7da; color:#721c24; }
.btn-nz-edit, .btn-nz-del { border:none; padding:4px 10px; border-radius:4px; font-size:0.78rem; cursor:pointer; font-weight:600; }
.btn-nz-edit { background:#e7f1ff; color:#01478f; }
.btn-nz-edit:hover { background:#cde0ff; }
.btn-nz-del { background:#ffe5e5; color:#dc3545; margin-left:4px; }
.btn-nz-del:hover { background:#fcc; }

/* Modal overrides */
#nozzleModal .modal-header { background:#01478f; color:#fff; }
#nozzleModal .modal-header .close { color:#fff; opacity:1; }
#nozzleModal .form-control, #nozzleModal .custom-select { height:38px; }
#nozzleModal label { font-size:0.78rem; font-weight:600; color:#555; margin-bottom:2px; }
</style>
{% endblock %}

{% block content %}
<div class="nz-container">
  <div class="nz-header">
    <h4><i class="fas fa-gas-pump mr-2"></i>Nozzle Management</h4>
    <div>
      <a href="{% url 'petrol:daily_list' %}" class="btn btn-sm btn-outline-primary mr-1"><i class="fas fa-list mr-1"></i>Daily Entries</a>
      <button class="btn btn-sm btn-primary" onclick="openNozzleModal()"><i class="fas fa-plus mr-1"></i>Add Nozzle</button>
    </div>
  </div>

  <table class="nz-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Code</th>
        <th>Nozzle Name</th>
        <th>Product</th>
        <th>Initial Reading</th>
        <th>Order</th>
        <th>Status</th>
        <th style="width:120px;">Actions</th>
      </tr>
    </thead>
    <tbody id="nozzleTableBody">
      {% for nz in nozzles %}
      <tr data-id="{{ nz.id }}">
        <td>{{ forloop.counter }}</td>
        <td>{{ nz.nozzle_code }}</td>
        <td><strong>{{ nz.nozzle_name }}</strong></td>
        <td>{{ nz.product.name }}</td>
        <td>{{ nz.initial_reading|floatformat:1 }}</td>
        <td>{{ nz.sort_order }}</td>
        <td><span class="nz-badge {% if nz.is_active %}active{% else %}inactive{% endif %}">
          {% if nz.is_active %}Active{% else %}Inactive{% endif %}
        </span></td>
        <td>
          <button class="btn-nz-edit" onclick="editNozzle({{ nz.id }}, '{{ nz.nozzle_code|escapejs }}','{{ nz.nozzle_name|escapejs }}', {{ nz.product.id }}, {{ nz.initial_reading }}, {{ nz.sort_order }}, {{ nz.is_active|yesno:'true,false' }})"><i class="fas fa-pen"></i></button>
          <button class="btn-nz-del" onclick="deleteNozzle({{ nz.id }}, '{{ nz.nozzle_name|escapejs }}')"><i class="fas fa-trash"></i></button>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="8" class="text-center text-muted py-4">No nozzles found. Click "Add Nozzle" to create one.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Nozzle Modal -->
<div class="modal fade" id="nozzleModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title mb-0" id="nzModalTitle">Add Nozzle</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="nz_id" value="0">
        <div class="form-group">
          <label>Nozzle Code</label>
          <input type="text" id="nz_code" class="form-control" placeholder="e.g. NZ-1">
        </div>
        <div class="form-group">
          <label>Nozzle Name *</label>
          <input type="text" id="nz_name" class="form-control" placeholder="e.g. Pump 1 - Petrol">
        </div>
        <div class="form-group">
          <label>Product *</label>
          <select id="nz_product" class="custom-select">
            <option value="">-- Select Product --</option>
            {% for p in products %}
            <option value="{{ p.id }}">{{ p.name }} ({{ p.product_code }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="row">
          <div class="col-6 form-group">
            <label>Initial Reading</label>
            <input type="number" id="nz_initial" class="form-control" value="0" step="0.1" min="0">
          </div>
          <div class="col-3 form-group">
            <label>Sort Order</label>
            <input type="number" id="nz_sort" class="form-control" value="0" min="0">
          </div>
          <div class="col-3 form-group">
            <label>Active</label>
            <select id="nz_active" class="custom-select">
              <option value="1" selected>Yes</option>
              <option value="0">No</option>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary btn-sm" id="btnSaveNozzle">Save</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function csrfToken() { return '{{ csrf_token }}'; }

function openNozzleModal(isEdit) {
  if (!isEdit) {
    $('#nz_id').val(0);
    $('#nz_code, #nz_name').val('');
    $('#nz_product').val('');
    $('#nz_initial').val(0);
    $('#nz_sort').val(0);
    $('#nz_active').val('1');
    $('#nzModalTitle').text('Add Nozzle');
  }
  $('#nozzleModal').modal('show');
  setTimeout(function(){ $('#nz_name').focus(); }, 200);
}

function editNozzle(id, code, name, productId, initial, sort, active) {
  $('#nz_id').val(id);
  $('#nz_code').val(code);
  $('#nz_name').val(name);
  $('#nz_product').val(productId);
  $('#nz_initial').val(initial);
  $('#nz_sort').val(sort);
  $('#nz_active').val(active ? '1' : '0');
  $('#nzModalTitle').text('Edit Nozzle');
  openNozzleModal(true);
}

$('#btnSaveNozzle').on('click', function(){
  var payload = {
    id:              +$('#nz_id').val() || 0,
    nozzle_code:     $('#nz_code').val(),
    nozzle_name:     $('#nz_name').val(),
    product_id:      +$('#nz_product').val() || 0,
    initial_reading: +$('#nz_initial').val() || 0,
    sort_order:      +$('#nz_sort').val() || 0,
    is_active:       $('#nz_active').val() === '1',
  };
  $.ajax({
    url: "{% url 'petrol:api_nozzle_save' %}",
    type: 'POST',
    contentType: 'application/json',
    headers: {'X-CSRFToken': csrfToken()},
    data: JSON.stringify(payload),
    success: function(r) {
      if (r.ok) {
        Swal.fire({icon:'success', title:'Saved!', text:r.message, timer:1200, showConfirmButton:false})
        .then(function(){ location.reload(); });
      } else {
        Swal.fire('Error', r.error, 'error');
      }
    },
    error: function(){ Swal.fire('Error','Server error','error'); }
  });
});

function deleteNozzle(id, name) {
  Swal.fire({
    title: 'Delete "'+name+'"?',
    text: 'This cannot be undone.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Delete'
  }).then(function(r){
    if (!r.isConfirmed) return;
    $.ajax({
      url: "{% url 'petrol:api_nozzle_delete' %}",
      type: 'POST',
      contentType: 'application/json',
      headers: {'X-CSRFToken': csrfToken()},
      data: JSON.stringify({id: id}),
      success: function(r) {
        if (r.ok) { location.reload(); }
        else { Swal.fire('Error', r.error, 'error'); }
      },
      error: function(){ Swal.fire('Error','Server error','error'); }
    });
  });
}

// Enter key → next input
$('#nozzleModal').on('keypress', 'input, select', function(e){
  if (e.which !== 13) return;
  e.preventDefault();
  var inputs = $('#nozzleModal').find('input:visible, select:visible');
  var idx = inputs.index(this);
  if (idx < inputs.length - 1) inputs.eq(idx + 1).focus();
  else $('#btnSaveNozzle').focus();
});
</script>
{% endblock %}