{% extends "pos/base.html" %}
{% load static %}
{% block title %}Daily Transaction Register{% endblock %}

{% block heading %}Daily Transaction Register{% endblock %}

{% block content %}

  <!-- ═══ Filter Bar ═══════════════════════════════════════════════════ -->
  <form method="get" class="mb-3" id="registerFilterForm">
    <div class="d-flex flex-wrap align-items-end bg-light p-3 rounded border">

      <div class="mr-3 mb-2">
        <label class="small mb-1" for="start_date">Start</label>
        <input type="date" class="form-control form-control-sm" id="start_date"
               name="start_date" value="{{ start_date }}">
      </div>

      <div class="mr-3 mb-2">
        <label class="small mb-1" for="end_date">End</label>
        <input type="date" class="form-control form-control-sm" id="end_date"
               name="end_date" value="{{ end_date }}">
      </div>

      <div class="mr-3 mb-2">
        <label class="small mb-1" for="party_type">Party Type</label>
        <select id="party_type" name="party_type" class="form-control form-control-sm">
          <option value="all"      {% if party_type == "all" %}selected{% endif %}>All</option>
          <option value="customer" {% if party_type == "customer" %}selected{% endif %}>Customer</option>
          <option value="vendor"   {% if party_type == "vendor" %}selected{% endif %}>Vendor</option>
        </select>
      </div>

      <div class="mr-3 mb-2">
        <label class="small mb-1" for="party_search">Party (optional)</label>
        <select id="party_search" name="party_id" class="form-control form-control-sm" style="width:220px;">
          <option></option>
        </select>
        <input type="hidden" name="party_side" id="party_side" value="{{ request.GET.party_side }}">
        <input type="hidden" name="party_name" id="party_name_hidden" value="{{ request.GET.party_name }}">
      </div>

      <div class="mb-2">
        <button type="submit" class="btn btn-sm btn-primary">
          <i class="fas fa-search mr-1"></i> Search
        </button>
      </div>
    </div>

    <div class="mt-2 p-3 bg-light rounded border">
      <div class="row">
        <div class="col-md-6">
          <strong class="small d-block mb-1 text-info">Customer Transactions</strong>
          {% for key, label in customer_bill_types %}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="bill_type" value="{{ key }}"
                   id="bt_{{ key }}" {% if key in selected_bill_types %}checked{% endif %}>
            <label class="form-check-label small" for="bt_{{ key }}">{{ label }}</label>
          </div>
          {% endfor %}
        </div>
        <div class="col-md-6">
          <strong class="small d-block mb-1 text-warning">Vendor Transactions</strong>
          {% for key, label in vendor_bill_types %}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="bill_type" value="{{ key }}"
                   id="bt_{{ key }}" {% if key in selected_bill_types %}checked{% endif %}>
            <label class="form-check-label small" for="bt_{{ key }}">{{ label }}</label>
          </div>
          {% endfor %}
        </div>
      </div>
      <small class="text-muted d-block mt-2">Leave every box unchecked to include all types.</small>
    </div>
  </form>

  <!-- ═══ Results Table ════════════════════════════════════════════════ -->
  {% if rows %}
  <div class="table-responsive">
    <table id="registerTable" class="table table-bordered table-hover">
      <thead class="thead-light">
        <tr>
          <th>Type</th>
          <th>Party</th>
          <th>Description</th>
          <th>Voucher #</th>
          <th>Date</th>
          <th class="text-right">Debit</th>
          <th class="text-right">Credit</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          <td>
            {% if row.party_side == "customer" %}
              <span class="badge badge-info">Customer</span>
            {% else %}
              <span class="badge badge-warning text-dark">Vendor</span>
            {% endif %}
          </td>
          <td>{{ row.party_name|title }}</td>
          <td>{{ row.description|safe }}</td>
          <td>{{ row.invoice_no }}</td>
          <td>{{ row.date }}</td>
          <td class="text-right">{{ row.debit }}</td>
          <td class="text-right">{{ row.credit }}</td>
          <td>
            <button type="button" class="btn btn-sm btn-info js-reg-action"
                    data-action="view" data-id="{{ row.id }}">
              <i class="fas fa-eye"></i>
            </button>

            {% if row.party_side == "customer" %}
              {% if 'edit_sale_bill' in allowed_features %}
              <button type="button" class="btn btn-sm btn-warning js-reg-action"
                      data-action="edit" data-id="{{ row.id }}">
                <i class="fas fa-pen"></i>
              </button>
              {% endif %}
              {% if 'delete_sale_bill' in allowed_features %}
              <button type="button" class="btn btn-sm btn-danger js-reg-action"
                      data-action="delete" data-id="{{ row.id }}">
                <i class="fas fa-trash"></i>
              </button>
              {% endif %}
            {% else %}
              {% if 'edit_purchase_bill' in allowed_features %}
              <button type="button" class="btn btn-sm btn-warning js-reg-action"
                      data-action="edit" data-id="{{ row.id }}">
                <i class="fas fa-pen"></i>
              </button>
              {% endif %}
              {% if 'delete_purchase_bill' in allowed_features %}
              <button type="button" class="btn btn-sm btn-danger js-reg-action"
                      data-action="delete" data-id="{{ row.id }}">
                <i class="fas fa-trash"></i>
              </button>
              {% endif %}
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="font-weight-bold">
          <td colspan="5" class="text-right">Totals:</td>
          <td class="text-right">{{ total_debit }}</td>
          <td class="text-right">{{ total_credit }}</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
  {% else %}
    <p class="text-muted">No transactions found for the selected filters.</p>
  {% endif %}

{% endblock %}

{% block javascripts %}
<script>
  function getCookie(name) {
    let cookieValue = null;
    document.cookie.split(';').forEach(c => {
      const [k, v] = c.trim().split('=');
      if (k === name) cookieValue = decodeURIComponent(v);
    });
    return cookieValue;
  }
  $.ajaxSetup({
    beforeSend: function (xhr, settings) {
      if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
        xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
      }
    }
  });

  $(function () {

    // ── Optional party search (Select2, searches customer or vendor) ──
    $('#party_search').select2({
      placeholder: 'Search a specific customer or vendor…',
      allowClear: true,
      minimumInputLength: 1,
      width: '220px',
      ajax: {
        url: '{% url "reports:daily_register_party_search" %}',
        type: 'POST',
        data: params => ({
          term: params.term,
          side: $('#party_type').val() === 'vendor' ? 'vendor' : 'customer'
        }),
        processResults: data => ({ results: data.results })
      }
    }).on('select2:select', function (e) {
      // Keep the Party Type dropdown and hidden fields in sync with the pick
      $('#party_side').val(e.params.data.side);
      $('#party_name_hidden').val(e.params.data.text);
      $('#party_type').val(e.params.data.side);
    }).on('select2:clear', function () {
      $('#party_side').val('');
      $('#party_name_hidden').val('');
    });

    {% if request.GET.party_id %}
      $('#party_search').append(
        new Option("{{ request.GET.party_name|default:'' }}", "{{ request.GET.party_id }}", true, true)
      ).trigger('change');
    {% endif %}

    initRegisterTable();

    // ── Row actions (View / Edit / Delete) ──
    $(document).on('click', '.js-reg-action', function () {
      const action = $(this).data('action');
      const id = $(this).data('id');
      if (!id) return;

      if (action === 'delete') {
        const ok = confirm('Do you want to delete this transaction?');
        if (!ok) return;
      }

      $.post('{% url "reports:daily_register_action" %}', { action: action, payment_id: id })
        .done(function (resp) {
          if (!resp || !resp.ok) {
            alert((resp && resp.msg) ? resp.msg : 'This action is not available for this transaction.');
            return;
          }
          if (action === 'delete') {
            LedgerAction.del(resp.url, { confirm: false, onDone: refreshRegister });
          } else if (action === 'edit') {
            LedgerAction.open(resp.url, { mode: 'edit', onDone: refreshRegister });
          } else {
            LedgerAction.open(resp.url, { mode: 'view' });
          }
        })
        .fail(function (xhr) {
          let msg = 'This action is not available for this transaction.';
          try {
            const j = xhr.responseJSON;
            if (j && j.msg) msg = j.msg;
          } catch (e) {}
          alert(msg);
        });
    });
  });

  function initRegisterTable() {
    if (!$.fn.DataTable.isDataTable('#registerTable')) {
      if ($('#registerTable').length === 0) return;
    }
    if ($.fn.DataTable.isDataTable('#registerTable')) {
      $('#registerTable').DataTable().destroy();
    }
    $('#registerTable').DataTable({
      pageLength: 25,
      ordering: true,
      order: [],
      dom: 'Bfrtip',
      buttons: [
        'excelHtml5',
        {
          extend: 'pdfHtml5',
          orientation: 'landscape',
          pageSize: 'A4',
          exportOptions: { columns: ':visible' }
        }
      ]
    });
  }

  // ── After edit/delete: refresh the table in place, no full page reload ──
  window.refreshRegister = function () {
    $.get(window.location.href)
      .done(function (html) {
        var $doc = $('<div>').html(html);
        var $newTable = $doc.find('#registerTable');
        if ($newTable.length) {
          if ($.fn.DataTable.isDataTable('#registerTable')) {
            $('#registerTable').DataTable().destroy();
          }
          $('#registerTable').replaceWith($newTable);
          initRegisterTable();
        } else {
          window.location.reload();
        }
      })
      .fail(function () {
        window.location.reload();
      });
  };
</script>
{% endblock %}