{% extends "pos/base.html" %}
{% load static %}
{% block title %}Vendor Ledger{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block heading %}Vendor Ledger{% endblock %}

{% block content %}
  <form method="get" class="form-inline mb-4 align-items-end">
    <!-- Vendor ID -->
    <div class="form-group mr-3">
      <label for="ven_id">Vendor ID</label>
      <input type="text" class="form-control ml-2" id="ven_id"
             name="vendor_id" value="{{ request.GET.vendor_id }}">
    </div>

    <!-- Vendor Name (Select2) -->
    <div class="form-group mr-3">
      <label for="ven_name">Vendor Name</label>
      <select id="ven_name" name="vendor_name" class="form-control ml-2" style="width:200px">
        <option></option>
      </select>
    </div>

    <!-- Ledger Type -->
    <div class="form-group mr-3">
      <label for="ledgerType">Mode</label>
      <select id="ledgerType" name="ledgerType" class="form-control ml-2">
        <option value="Bill Wise" {% if ledger_type == "Bill Wise" %}selected{% endif %}>
          Bill Wise
        </option>
        <option value="Item Wise" {% if ledger_type == "Item Wise" %}selected{% endif %}>
          Item Wise
        </option>
      </select>
    </div>

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

    <button type="submit" class="btn btn-primary">Search</button>
  </form>

  <!-- Export Button -->
  <button type="button" class="btn btn-secondary mb-3" data-toggle="modal"
          data-target="#exportModal">
    Export
  </button>

  <!-- Export Modal -->
  <div class="modal fade" id="exportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <form method="post" action="{% url 'vendors:export_vendor_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">
            <!-- carry over current filters -->
            {% for k,v in request.GET.items %}
              <input type="hidden" name="{{ k }}" value="{{ v }}">
            {% endfor %}

            <!-- select columns -->
            <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 %}

            <!-- page size -->
            <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>

            <!-- export type -->
            <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 type="submit" class="btn btn-primary">Download</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  {% if vendor_obj %}
    <h5>Ledger for: <strong>{{ vendor_obj.name|title }}</strong></h5>
    <table id="ledgerTable" class="table table-bordered table-hover">
      <thead class="thead-light">
        <tr>
          <th>ID</th>
          <th>Date</th>
          <th>Description</th>
          <th>Purchase #</th>
          <th class="text-right">Debit</th>
          <th class="text-right">Credit</th>
          <th class="text-right">Balance</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for row in ledger %}
        <tr>
          <td>{{ row.id }}</td>
          <td>{{ row.date }}</td>
          <td>{{ row.description|safe }}</td>
          <td>{{ row.purchase_no }}</td>
          <td class="text-right">{{ row.debit }}</td>
          <td class="text-right">{{ row.credit }}</td>
          <td class="text-right">{{ row.balance }}</td>
          <td>
            {% if row.id %}
              <button type="button"
                      class="btn btn-sm btn-info js-ledger-action"
                      data-action="view"
                      data-payment-id="{{ row.id }}">
                View
              </button>
              {% if 'edit_purchase_bill' in allowed_features %}
              <button type="button"
                      class="btn btn-sm btn-warning js-ledger-action"
                      data-action="edit"
                      data-payment-id="{{ row.id }}">
                Edit
              </button>
              {% endif %}
               {% if 'delete_purchase_bill' in allowed_features %}
              <button type="button"
                      class="btn btn-sm btn-danger js-ledger-action"
                      data-action="delete"
                      data-payment-id="{{ row.id }}">
                Del
              </button>
              {% endif %}
            {% endif %}
          </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>
          <td></td>
        </tr>
      </tfoot>
    </table>
  {% else %}
    <p class="text-muted">Please select a vendor and click Search.</p>
  {% endif %}
{% endblock %}

{% block javascripts %}


  <script>
    // CSRF helper
    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(){
      // init Select2 for vendor name
      $('#ven_name').select2({
        placeholder: 'Search vendor…',
        allowClear: true,
        minimumInputLength: 1,
        width: '200px',
        ajax: {
          url: '{% url "vendors:get_vendors" %}',
          type: 'POST',
          data: params => ({ term: params.term }),
          processResults: data => ({ results: data.results })
        }
      }).val("{{ request.GET.vendor_name }}").trigger('change');


    setTimeout(() => {
      $('#ven_name').select2('open');
      setTimeout(() => {
        document.querySelector('.select2-container--open .select2-search__field').focus();
      }, 0);
    }, 200);



    // const today = new Date().toISOString().split("T")[0];
    // const $startDate = $('#start_date');
    // const $endDate   = $('#end_date');

    // if (!$startDate.val()) $startDate.val(today);
    // if (!$endDate.val())   $endDate.val(today);

    const now = new Date();
    const today = now.toISOString().split("T")[0];

    const oneMonthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
    const monthAgoStr = oneMonthAgo.toISOString().split("T")[0];

    const $startDate = $('input[name="start_date"]');
    const $endDate   = $('input[name="end_date"]');

    if (!$startDate.val()) $startDate.val(monthAgoStr);
    if (!$endDate.val())   $endDate.val(today);

      // init DataTable
      initLedgerTable();


      // =========================================================
      // Ledger Actions (View/Edit/Delete)
      // =========================================================
      $(document).on('click', '.js-ledger-action', function () {
        const action = $(this).data('action');
        const paymentId = $(this).data('payment-id');

        if (!paymentId) return;

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

        $.post('{% url "vendors:vendor_ledger_action" %}', {
          action: action,
          payment_id: paymentId
        })
        .done(function (resp) {
          if (!resp || !resp.ok) {
            alert((resp && resp.msg) ? resp.msg : 'Option Not Implementaion. Comming Soon.');
            return;
          }

          // ── Page navigate karne ke bajaye usi page par modal mein kholo ──
          if (action === 'delete') {
            // resp.url GET par delete karta hai (jaise pehle navigate hota tha)
            // ab fetch karke, phir ledger in-place refresh — confirm pehle ho chuka
            LedgerAction.del(resp.url, { confirm: false, onDone: refreshLedger });
          } else if (action === 'edit') {
            LedgerAction.open(resp.url, { mode: 'edit', onDone: refreshLedger });
          } else {
            // view / print / _blank waghaira -> read-only modal (page wahin rehti hai)
            LedgerAction.open(resp.url, { mode: 'view' });
          }
        })
        .fail(function (xhr) {
          let msg = 'Option Not Implementaion. Comming Soon.';
          try {
            const j = xhr.responseJSON;
            if (j && j.msg) msg = j.msg;
          } catch (e) {}
          alert(msg);
        });
      });






      
    });

    // ── DataTable init (refresh ke baad dobara call hota hai) ──────────────
    function initLedgerTable() {
      if ($.fn.DataTable.isDataTable('#ledgerTable')) {
        $('#ledgerTable').DataTable().destroy();
      }
      $('#ledgerTable').DataTable({
        pageLength: 25,
        ordering: true,
        order: [],
        dom: 'Bfrtip',
        buttons: [
          'excelHtml5',
          {
            extend: 'pdfHtml5',
            orientation: 'landscape',
            pageSize: 'A4',
            exportOptions: { columns: ':visible' }
          }
        ]
      });
    }

    // ── Edit/Delete ke baad: page navigate kiye baghair sirf ledger refresh ─
    // (poora reload nahi -> select2 dobara pop nahi hota, aap wahin rehte hain)
    window.refreshLedger = function () {
      $.get(window.location.href)
        .done(function (html) {
          var $doc = $('<div>').html(html);
          var $newTable = $doc.find('#ledgerTable');
          if ($newTable.length) {
            if ($.fn.DataTable.isDataTable('#ledgerTable')) {
              $('#ledgerTable').DataTable().destroy();
            }
            $('#ledgerTable').replaceWith($newTable);
            initLedgerTable();
          } else {
            window.location.reload();
          }
        })
        .fail(function () {
          window.location.reload();
        });
    };
  </script>
{% endblock %}