{% extends "pos/base.html" %}
{% load static %}

{% block title %}Debitor Ledger{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block heading %}Debitor Ledger{% endblock %}

{% block content %}
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 font-weight-bold text-primary">Debitor Ledger</h6>
    </div>
    <div class="card-body">
      <!-- FILTER BAR -->
      <form method="get" class="form-inline mb-4 align-items-end">
        <!-- Invoice filter -->
        <div class="form-group mr-3">
          <label for="inv">Invoice #</label>
          <input id="inv" type="text" name="invoice" class="form-control ml-2" value="{{ invoice_q }}">
        </div>
        <div class="form-check mr-3">
          <input class="form-check-input" type="radio" name="filter" value="invoice"
                 id="fInv" {% if filters.invoice_active %}checked{% endif %}>
          <label class="form-check-label ml-1" for="fInv">Use</label>
        </div>

        <!-- Debitor filter -->
        <div class="form-group mr-3">
          <label for="debitor_name">Debitor</label>
          <select id="debitor_name" name="debitor" class="form-control ml-2" style="width:200px">
            <option></option>
            {% if debitor_obj %}
              <option value="{{ debitor_obj.t_id }}" selected>{{ debitor_obj.name }}</option>
            {% endif %}
          </select>
        </div>
        <div class="form-check mr-3">
          <input class="form-check-input" type="radio" name="filter" value="debitor"
                 id="fDeb" {% if filters.debitor_active %}checked{% endif %}>
          <label class="form-check-label ml-1" for="fDeb">Use</label>
        </div>

        <!-- Date range filter -->
        <div class="form-group mr-3">
          <label for="start_date">Start</label>
          <input id="start_date" type="date" name="start_date" class="form-control ml-2"
                 value="{{ start_date }}">
        </div>
        <div class="form-group mr-3">
          <label for="end_date">End</label>
          <input id="end_date" type="date" name="end_date" class="form-control ml-2"
                 value="{{ end_date }}">
        </div>
        <div class="form-check mr-3">
          <input class="form-check-input" type="checkbox" name="date_wise" id="date_wise"
                 {% if date_wise %}checked{% endif %}>
          <label class="form-check-label ml-1" for="date_wise">Date Wise</label>
        </div>

        <button type="submit" class="btn btn-primary">Search</button>
        <button type="button" class="btn btn-secondary ml-2" data-toggle="modal" data-target="#exportModal">
          Export
        </button>
      </form>

      <!-- EXPORT MODAL -->
      <div class="modal fade" id="exportModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <form method="post" action="{% url 'reports:export_debitor_ledger' %}">
            {% csrf_token %}
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Export Ledger</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body">
                {% for k, v in request.GET.items %}
                  <input type="hidden" name="{{ k }}" value="{{ v }}">
                {% endfor %}
                <p>Select columns to include:</p>
                {% for col in export_columns %}
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="columns"
                           id="exp_{{ col|slugify }}" value="{{ col }}" checked>
                    <label class="form-check-label" for="exp_{{ col|slugify }}">{{ col }}</label>
                  </div>
                {% endfor %}
                <div class="form-group mt-3">
                  <label for="page_size">Page Size</label>
                  <select name="page_size" id="page_size" class="form-control">
                    <option>A4</option>
                    <option>A5</option>
                    <option>Thermal</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>Format</label><br>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="export_type" id="exp_pdf"
                           value="pdf" checked>
                    <label class="form-check-label" for="exp_pdf">PDF</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="export_type" id="exp_xl"
                           value="excel">
                    <label class="form-check-label" for="exp_xl">Excel</label>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary">Download</button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!-- LEDGER TABLE -->
      <div class="table-responsive">
        <table id="ledgerTable" class="table table-bordered table-hover">
          <thead class="thead-light">
            <tr>
              <th>ID</th>
              <th>Date</th>
              <th>Description</th>
              <th>Invoice #</th>
              <th>Debit</th>
              <th>Credit</th>
              <th>Balance</th>
            </tr>
          </thead>
          <tbody>
            {% for row in ledger %}
              <tr>
                <td>{{ row.id }}</td>
                <td>{{ row.date }}</td>
                <td>{{ row.description }}</td>
                <td>{{ row.invoice_no }}</td>
                <td class="text-right">{{ row.debit }}</td>
                <td class="text-right">{{ row.credit }}</td>
                <td class="text-right">{{ row.balance }}</td>
              </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="font-weight-bold">
              <td colspan="4" class="text-right">Totals:</td>
              <td class="text-right">{{ total_debit }}</td>
              <td class="text-right">{{ total_credit }}</td>
              <td class="text-right">{{ grand_total }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
{% endblock %}

{% block javascripts %}

  <script>

    $('#debitor_name').on('select2:select', function(){
      $('input[name="filter"][value="debitor"]').prop('checked', true);
    });
    $('#debitor_name').on('select2:clear', function(){
      $('input[name="filter"][value="debitor"]').prop('checked', false);
    });

    // CSRF setup for AJAX
    function getCookie(name) {
      var cookieValue = null;
      document.cookie.split(';').forEach(function(c) {
        var parts = c.trim().split('=');
        if (parts[0] === name) cookieValue = decodeURIComponent(parts[1]);
      });
      return cookieValue;
    }
    $.ajaxSetup({
      beforeSend: function(xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
          xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
      }
    });

    $(function(){
      // Initialize Select2 on debitor field
      $('#debitor_name').select2({
        placeholder: 'Search debitor…',
        allowClear: true,
        minimumInputLength: 1,
        ajax: {
          url: '{% url "transactions:get_debitors" %}',
          type: 'POST',
          data: function(params) { return { term: params.term }; },
          processResults: function(data) { return { results: data.results }; }
        }
      }).val("{{ debitor_q }}").trigger('change');

      // Initialize DataTable
      $('#ledgerTable').DataTable({
        pageLength: 25,
        ordering: true
      });
    });
  </script>
{% endblock %}