{# templates/sales/cheque_list.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Cheque Tracking{% endblock %}

{% block stylesheets %}
<style>
  .cheque-page { padding: 15px; }
  .cheque-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
  }
  .cheque-header h5 {
    margin: 0;
    font-weight: 700;
    color: #1e293b;
  }
  .filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .filter-group select, .filter-group input {
    height: 34px;
    font-size: 0.85rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
  }
  .filter-group .btn {
    height: 34px;
    font-size: 0.82rem;
    padding: 0 12px;
  }

  /* Status badges */
  .st-pending   { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
  .st-deposited { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
  .st-bounced   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
  .st-cancelled { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
  .status-badge {
    font-size: 0.75rem; font-weight: 600;
    padding: 3px 10px; border-radius: 12px;
    text-transform: uppercase; letter-spacing: 0.3px;
  }

  /* Summary cards */
  .summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
  }
  .summary-card {
    flex: 1; min-width: 140px;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
  }
  .summary-card .sc-label {
    font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 4px;
  }
  .summary-card .sc-value { font-size: 1.3rem; font-weight: 700; }
  .sc-pending   { background: #fffbeb; border: 1px solid #fde68a; }
  .sc-pending .sc-value { color: #d97706; }
  .sc-deposited { background: #f0fdf4; border: 1px solid #bbf7d0; }
  .sc-deposited .sc-value { color: #16a34a; }
  .sc-total     { background: #eff6ff; border: 1px solid #bfdbfe; }
  .sc-total .sc-value { color: #2563eb; }

  /* Cheque table */
  .cheque-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .cheque-table thead th {
    background: #f1f5f9; border-bottom: 2px solid #94a3b8;
    color: #334155; font-weight: 700; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.3px;
    padding: 10px 8px; white-space: nowrap;
  }
  .cheque-table tbody td {
    padding: 8px; border-bottom: 1px solid #f0f2f5;
    font-size: 0.85rem; color: #1e293b;
    vertical-align: middle;
  }
  .cheque-table tbody tr:hover td { background: #f5f8ff; }

  /* Due soon highlight */
  .cheque-table tbody tr.due-today td { background: #fef3c7; }
  .cheque-table tbody tr.overdue td { background: #fee2e2; }

  /* Action buttons */
  .btn-deposit {
    font-size: 0.78rem; padding: 3px 10px; border-radius: 4px;
    background: #16a34a; color: #fff; border: none; cursor: pointer;
  }
  .btn-deposit:hover { background: #15803d; }
  .btn-bounce {
    font-size: 0.78rem; padding: 3px 10px; border-radius: 4px;
    background: #dc2626; color: #fff; border: none; cursor: pointer;
  }
  .btn-bounce:hover { background: #b91c1c; }
  .btn-cancel-ch {
    font-size: 0.78rem; padding: 3px 10px; border-radius: 4px;
    background: #94a3b8; color: #fff; border: none; cursor: pointer;
  }
  .btn-cancel-ch:hover { background: #64748b; }

  @media (max-width: 576px) {
    .cheque-header { flex-direction: column; align-items: stretch; }
    .filter-group { flex-wrap: wrap; }
    .summary-cards { flex-direction: column; }
    .cheque-table { font-size: 0.8rem; }
  }
</style>
{% endblock %}


{% block content %}
<div class="cheque-page">

  <!-- Header with Filters -->
  <div class="cheque-header">
    <h5><i class="fas fa-money-check-alt mr-2"></i>Cheque Tracking</h5>

    <form method="get" class="filter-group" id="chequeFilterForm">
      <select name="status" class="form-control form-control-sm">
        <option value="all"       {% if status_filter == 'all' %}selected{% endif %}>All Status</option>
        <option value="pending"   {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
        <option value="deposited" {% if status_filter == 'deposited' %}selected{% endif %}>Deposited</option>
        <option value="bounced"   {% if status_filter == 'bounced' %}selected{% endif %}>Bounced</option>
        <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
      </select>
      <input type="date" name="date_from" class="form-control form-control-sm"
             value="{{ date_from }}" placeholder="From Date">
      <input type="date" name="date_to" class="form-control form-control-sm"
             value="{{ date_to }}" placeholder="To Date">
      <button type="submit" class="btn btn-sm btn-primary">
        <i class="fas fa-filter"></i> Filter
      </button>
      <a href="{% url 'sales:cheque_list' %}" class="btn btn-sm btn-outline-secondary">Reset</a>
    </form>
  </div>

  <!-- Summary Cards -->
  <div class="summary-cards">
    <div class="summary-card sc-total">
      <div class="sc-label">Showing</div>
      <div class="sc-value">{{ cheques|length }}</div>
    </div>
    <div class="summary-card sc-pending">
      <div class="sc-label">Total Amount</div>
      <div class="sc-value">{{ total_amount|floatformat:0 }}</div>
    </div>
  </div>

  <!-- Cheque Table -->
  <div class="table-responsive">
    <table class="cheque-table" id="chequeTable">
      <thead>
        <tr>
          <th>#</th>
          <th>Invoice</th>
          <th>Cheque #</th>
          <th>Cheque Date</th>
          <th>Amount</th>
          <th>Party</th>
          <th>Target Bank</th>
          <th>Status</th>
          <th>Deposit Date</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for ch in cheques %}
        <tr class="
          {% if ch.status == 'pending' %}
            {% if ch.cheque_date == today %}due-today{% endif %}
            {% if ch.cheque_date < today %}overdue{% endif %}
          {% endif %}
        " data-id="{{ ch.id }}">
          <td>{{ forloop.counter }}</td>
          <td>
            <a href="#" class="text-primary" title="Open Invoice">
              {{ ch.invoice_no }}
            </a>
          </td>
          <td><strong>{{ ch.cheque_no }}</strong></td>
          <td>{{ ch.cheque_date|date:"d M Y" }}</td>
          <td class="text-right"><strong>{{ ch.cheque_amount|floatformat:0 }}</strong></td>
          <td>{{ ch.cheque_party }}</td>
          <td>
            {% for bank in banks %}
              {% if bank.id == ch.bank_id %}{{ bank.name }}{% endif %}
            {% endfor %}
          </td>
          <td>
            <span class="status-badge
              {% if ch.status == 'pending' %}st-pending
              {% elif ch.status == 'deposited' %}st-deposited
              {% elif ch.status == 'bounced' %}st-bounced
              {% elif ch.status == 'cancelled' %}st-cancelled
              {% endif %}">
              {{ ch.status|upper }}
            </span>
          </td>
          <td>
            {% if ch.deposit_date %}{{ ch.deposit_date|date:"d M Y" }}{% else %}—{% endif %}
          </td>
          <td>
            {% if ch.status == 'pending' %}
              <button type="button"
                      class="btn-deposit btn-do-deposit"
                      data-id="{{ ch.id }}"
                      data-bank="{{ ch.bank_id }}"
                      data-amount="{{ ch.cheque_amount|floatformat:0 }}"
                      data-no="{{ ch.cheque_no }}"
                      title="Deposit to Bank">
                <i class="fas fa-check"></i> Deposit
              </button>
              <button type="button"
                      class="btn-bounce btn-do-bounce"
                      data-id="{{ ch.id }}"
                      title="Mark Bounced">
                <i class="fas fa-times"></i>
              </button>
              <button type="button"
                      class="btn-cancel-ch btn-do-cancel"
                      data-id="{{ ch.id }}"
                      title="Cancel">
                <i class="fas fa-ban"></i>
              </button>
            {% elif ch.status == 'deposited' %}
              <button type="button"
                      class="btn-bounce btn-do-bounce"
                      data-id="{{ ch.id }}"
                      title="Mark Bounced (reverses deposit)">
                <i class="fas fa-undo"></i> Bounce
              </button>
            {% else %}
              <span class="text-muted small">—</span>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="10" class="text-center text-muted py-4">
            <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
            No cheques found for the selected filters.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Deposit Modal -->
<div class="modal fade" id="depositModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header py-2" style="background:#f0fdf4; border-bottom:1px solid #bbf7d0;">
        <h6 class="modal-title" style="color:#166534;">
          <i class="fas fa-check-circle mr-1"></i> Deposit Cheque
        </h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
      </div>
      <div class="modal-body py-3">
        <p class="small mb-2">
          Cheque <strong id="dep_cheque_no"></strong> —
          Amount <strong id="dep_cheque_amount"></strong>
        </p>
        <div class="form-group mb-2">
          <label class="small mb-1">Deposit to Bank</label>
          <select id="dep_bank" class="form-control form-control-sm">
            {% for bank in banks %}
              <option value="{{ bank.id }}">{{ bank.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group mb-0">
          <label class="small mb-1">Deposit Date</label>
          <input type="date" id="dep_date" class="form-control form-control-sm">
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success btn-sm" id="btnConfirmDeposit">
          <i class="fas fa-check"></i> Confirm Deposit
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}


{% block javascripts %}
<script>
  const csrftoken = $('[name=csrfmiddlewaretoken]').val() || '{{ csrf_token }}';
  let depositChequeId = null;

  // Set today as default deposit date
  $(function() {
    const today = new Date().toISOString().split('T')[0];
    $('#dep_date').val(today);
  });

  // ── Deposit Button → Open Modal ──
  $(document).on('click', '.btn-do-deposit', function() {
    depositChequeId = $(this).data('id');
    const bankId = $(this).data('bank');
    const amount = $(this).data('amount');
    const chequeNo = $(this).data('no');

    $('#dep_cheque_no').text(chequeNo);
    $('#dep_cheque_amount').text(amount);
    $('#dep_bank').val(bankId);

    const today = new Date().toISOString().split('T')[0];
    $('#dep_date').val(today);

    $('#depositModal').modal('show');
  });

  // ── Confirm Deposit ──
  $('#btnConfirmDeposit').on('click', function() {
    if (!depositChequeId) return;

    const $btn = $(this);
    $btn.prop('disabled', true).text('Processing…');

    $.ajax({
      url: '/sales/cheques/' + depositChequeId + '/deposit/',
      type: 'POST',
      headers: {
        'X-CSRFToken': csrftoken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      data: {
        deposit_bank: $('#dep_bank').val(),
        deposit_date: $('#dep_date').val()
      },
      success: function(res) {
        if (res.ok) {
          $('#depositModal').modal('hide');
          // Reload page to reflect changes
          location.reload();
        } else {
          Swal.fire('Error', res.error || 'Failed', 'error');
        }
      },
      error: function(xhr) {
        const msg = (xhr.responseJSON && xhr.responseJSON.error) || 'Server error';
        Swal.fire('Error', msg, 'error');
      },
      complete: function() {
        $btn.prop('disabled', false).html('<i class="fas fa-check"></i> Confirm Deposit');
      }
    });
  });

  // ── Bounce Button ──
  $(document).on('click', '.btn-do-bounce', function() {
    const chequeId = $(this).data('id');
    Swal.fire({
      title: 'Mark as Bounced?',
      text: 'This will reverse any deposit if already deposited.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#dc2626',
      confirmButtonText: 'Yes, Bounce it'
    }).then((result) => {
      if (!result.isConfirmed) return;

      $.ajax({
        url: '/sales/cheques/' + chequeId + '/bounce/',
        type: 'POST',
        headers: {
          'X-CSRFToken': csrftoken,
          'X-Requested-With': 'XMLHttpRequest'
        },
        success: function(res) {
          if (res.ok) location.reload();
          else Swal.fire('Error', res.error || 'Failed', 'error');
        }
      });
    });
  });

  // ── Cancel Button ──
  $(document).on('click', '.btn-do-cancel', function() {
    const chequeId = $(this).data('id');
    Swal.fire({
      title: 'Cancel Cheque?',
      text: 'This cheque will be marked as cancelled.',
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Yes, Cancel it'
    }).then((result) => {
      if (!result.isConfirmed) return;

      $.ajax({
        url: '/sales/cheques/' + chequeId + '/cancel/',
        type: 'POST',
        headers: {
          'X-CSRFToken': csrftoken,
          'X-Requested-With': 'XMLHttpRequest'
        },
        success: function(res) {
          if (res.ok) location.reload();
          else Swal.fire('Error', res.error || 'Failed', 'error');
        }
      });
    });
  });

  // ── Auto-submit filter on status change ──
  $('select[name="status"]').on('change', function() {
    $('#chequeFilterForm').submit();
  });
</script>
{% endblock %}