{% extends "pos/base.html" %}
{% load static %}
{% block stylesheets %}
  <style>
    .select2-results__option--highlighted .cust-option,
    .select2-results__option--highlighted .cust-option div {
      color: #fff !important;
    }
    .select2-results__option--highlighted .cust-addr {
      color: rgba(255,255,255,0.8) !important;
    }
  </style>
{% endblock %}
{% block heading %}Customer Report{% endblock heading %}
 
{% block content %}
<form method="get" class="form-inline mb-3" id="custFilterForm">
  <!-- Customer Name -->
  <div class="form-check mx-2">
    <input class="form-check-input" type="checkbox" name="filter_name" id="filter_name" {% if params.filter_name %}checked{% endif %}>
    <label class="form-check-label" for="filter_name">Filter by Name</label>
  </div>
  <select id="customer_name" name="customer_name" class="form-control mx-2" style="width:200px;">
    {% if params.filter_name and params.customer_name %}
      <option value="{{ params.customer_name }}" selected>{{ selected_customer_name }}</option>
    {% endif %}
  </select>
  </select>

  <!-- Order Booker -->
  <div class="form-check mx-2">
    <input class="form-check-input" type="checkbox" name="filter_booker" id="filter_booker" {% if params.filter_booker %}checked{% endif %}>
    <label class="form-check-label" for="filter_booker">Filter by Booker</label>
  </div>
  <select id="order_booker" name="order_booker_ids" class="form-control mx-2" multiple="multiple" style="width:200px;">
    {% for b in sel_bookers %}
      <option value="{{ b.t_id }}" selected>{{ b.name }}</option>
    {% endfor %}
  </select>

  <!-- Sale Area -->
  <div class="form-check mx-2">
    <input class="form-check-input" type="checkbox" name="filter_area" id="filter_area" {% if params.filter_area %}checked{% endif %}>
    <label class="form-check-label" for="filter_area">Filter by Area</label>
  </div>
  <select id="sale_area" name="sale_area_ids" class="form-control mx-2" multiple="multiple" style="width:200px;">
    {% for a in sel_areas %}
      <option value="{{ a.t_id }}" selected>{{ a.area_name }}</option>
    {% endfor %}
  </select>

  <!-- Department -->
  <div class="form-check mx-2">
    <input class="form-check-input" type="checkbox" name="filter_department" id="filter_department" {% if params.filter_department %}checked{% endif %}>
    <label class="form-check-label" for="filter_department">Filter by Department</label>
  </div>
  <select name="department" class="form-control mx-2" style="width:180px;">
    <option value="all" {% if params.department == 'all' %}selected{% endif %}>ALL</option>
    <option value="">-- Department --</option>
    {% for d in departments %}
      <option value="{{ d.id }}" {% if params.department == d.id|stringformat:"s" %}selected{% endif %}>{{ d.name }}</option>
    {% endfor %}
  </select>

<!-- Show All Customers -->
<div class="form-check mx-2">
  <input class="form-check-input"
         type="checkbox"
         name="show_all"
         id="show_all"
         {% if params.show_all %}checked{% endif %}>
  <label class="form-check-label" for="show_all">
    Show All Customers
  </label>
</div>

<button class="btn btn-primary mx-2">Search</button>
</form>

<div class="mb-3">
  <a href="{{ export_excel_url }}?{{ request.GET.urlencode }}" class="btn btn-success">Export Excel</a>
  <button class="btn btn-danger" data-toggle="modal" data-target="#pdfModal">Export PDF</button>
</div>
<!-- PDF Options Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
    <form method="get" action="{{ export_pdf_url }}" class="modal-content">
      <div class="modal-header py-2">
        <div>
          <h5 class="modal-title mb-0" id="pdfModalTitle">PDF Export Options</h5>
          <small class="text-muted">Choose columns + layout settings</small>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <!-- carry over filter GET params -->
        {% for k, vlist in request.GET.lists %}
          {% if k != 'group_by' %}
            {% for v in vlist %}
              <input type="hidden" name="{{ k }}" value="{{ v }}">
            {% endfor %}
          {% endif %}
        {% endfor %}

        <div class="row">
          <!-- LEFT: Columns -->
          <div class="col-12 col-lg-7 mb-3 mb-lg-0">
            <div class="pdf-card">
              <div class="d-flex align-items-center justify-content-between mb-2">
                <strong>Select Columns</strong>
                <div class="btn-group btn-group-sm" role="group" aria-label="columns">
                  <button type="button" class="btn btn-outline-secondary" id="pdfColsAll">All</button>
                  <button type="button" class="btn btn-outline-secondary" id="pdfColsNone">None</button>
                </div>
              </div>

              <div class="pdf-cols-box">
                {% for key,label in all_columns %}
                  <div class="custom-control custom-checkbox pdf-col-item">
                    <input class="custom-control-input" type="checkbox"
                           name="columns" value="{{ key }}"
                           id="col_{{ key }}" {% if key in default_pdf_columns %}checked{% endif %}>>
                    <label class="custom-control-label" for="col_{{ key }}">{{ label }}</label>
                  </div>
                {% endfor %}
              </div>

              <small class="text-muted d-block mt-2">
                Tip: Columns zyada hon to A4 Landscape auto better hota hai.
              </small>
            </div>
          </div>

          <!-- RIGHT: Settings -->
          <div class="col-12 col-lg-5">
            <div class="pdf-card">
              <strong class="d-block mb-2">PDF Settings</strong>

              <div class="form-group mb-2">
                <label class="mb-1">Page size</label>
                <select name="page_size" class="form-control form-control-sm">
                  <option>A4</option>
                  <option>A5</option>
                  <option>Thermal</option>
                </select>
              </div>

              <div class="form-group mb-2">
                <label class="mb-1">Orientation</label>
                <select name="orientation" class="form-control form-control-sm" id="pdfOrientation">
                  <option value="auto">Auto</option>
                  <option value="portrait">Portrait</option>
                  <option value="landscape">Landscape</option>
                </select>
                <small class="text-muted d-block mt-1">Orientation is ignored in Thermal.</small>
              </div>

              <div class="form-group mb-2">
                <label class="mb-1">Group By</label>
                <select name="group_by" class="form-control form-control-sm" id="pdfGroupBy">
                  <option value="" {% if not params.group_by %}selected{% endif %}>None</option>
                  <option value="area" {% if params.group_by == 'area' %}selected{% endif %}>Area</option>
                  <option value="booker" {% if params.group_by == 'booker' %}selected{% endif %}>Booker</option>
                </select>
              </div>

              <div class="alert alert-light border mb-0 py-2">
                <small class="text-muted d-block">
                  <strong>Grouping:</strong> Each group prints as a separate table with subtotal, and a grand total at the end.
                </small>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer py-2">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary btn-sm">
          <i class="fas fa-file-pdf mr-1"></i> Generate PDF
        </button>
      </div>
    </form>
  </div>
</div>

<table id="reportTable" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>T-ID</th><th>Name</th><th>Address</th><th>Mobile</th>
      <th>Area</th><th>Balance</th><th>Booker</th>
      <th>CNIC</th><th>NTN</th><th>Type</th><th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for r in rows %}
    <tr>
      <td>{{ r.t_id }}</td><td>{{ r.name }}</td><td>{{ r.address }}</td><td>{{ r.mobile }}</td>
      <td>{{ r.area }}</td><td>{{ r.balance }}</td><td>{{ r.booker }}</td>
      <td>{{ r.cnic }}</td><td>{{ r.ntn }}</td><td>{{ r.type_c }}</td>
      <td>
        <div class="dropdown">
          <button class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown">Show</button>
          <div class="dropdown-menu">
            {% if 'customer_edit' in allowed_features %}
            <a class="dropdown-item" href="{% url 'customers:customers_quick_edit_tid' r.t_id %}">Edit</a>
            {% endif %}
            {% if 'customer_delete' in allowed_features %}
            <a class="dropdown-item" href="{% url 'customers:customers_delete' r.id %}">Delete</a>
            {% endif %}

            <!-- Balance Slip — opens in new tab -->
            <a class="dropdown-item"
               href="{% url 'reports:balance_slip_html' r.id %}?size=A5"
               target="_blank">
              Balance Slip (A5)
            </a>
            <a class="dropdown-item"
               href="{% url 'reports:balance_slip_html' r.id %}?size=Thermal"
               target="_blank">
              Balance Slip (Thermal)
            </a>

            <a class="dropdown-item" href="{% url 'customers:check_customer_ledger' %}">Ledger</a>
            <a class="dropdown-item" href="{% url 'reports:sale_history_customer' r.t_id %}">Sale History</a>
          </div>
          {% if 'customer_edit' in allowed_features %}
          <a class="btn btn-sm btn-outline-dark icon-btn"
             href="{% url 'customers:customers_quick_edit_tid' r.t_id %}"
             title="Edit Customer (Quick)">
            <i class="fas fa-pen" aria-hidden="true"></i>
          </a>
          {% endif %}
          <button type="button"
                  class="btn btn-sm btn-outline-success icon-btn wa-reminder-btn"
                  title="Send WhatsApp Reminder"
                  data-customer-name="{{ r.name }}"
                  data-customer-mobile="{{ r.mobile }}"
                  data-customer-balance="{{ r.balance }}"
                  data-customer-address="{{ r.address }}">
            <i class="fab fa-whatsapp" aria-hidden="true"></i>
          </button>

        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="mt-3">
  <strong>Receivables:</strong> {{ receivables }} &nbsp;&nbsp;
  <strong>Payables:</strong> {{ payables }}
</div>


<div class="modal fade" id="balanceSlipModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Balance Slip</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="balanceSlipSize">Page size</label>
          <select id="balanceSlipSize" class="form-control">
            <option value="A5">A5</option>
            <option value="Thermal">Thermal</option>
          </select>
        </div>
        <small class="text-muted d-block mb-2">
          Download or "Share" on WhatsApp / Email.
        </small>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="balanceSlipDownloadBtn">Download</button>
        <button type="button" class="btn btn-success" id="balanceSlipShareBtn">Share</button>
      </div>
    </div>
  </div>
</div>


{% endblock %}

{% block javascripts %}

  <script>
    $(document).ready(function(){
      // CSRF
      $.ajaxSetup({ headers: {'X-CSRFToken':'{{ csrf_token }}'} });

      // ✅ NEW — Department-wise classification
      var DEPARTEMENT_WISE_CLASSIFICATION = {% if departement_wise_classification %}true{% else %}false{% endif %};
      var CURRENT_DEPARTMENT = "{{ params.department|escapejs }}";
      var CURRENT_DEPARTMENT_FILTER_ON = {% if params.filter_department %}true{% else %}false{% endif %};

      function lockDepartment(deptId) {
        $('select[name="department"]').val(deptId);
        $('#filter_department').prop('checked', true);
        $('select[name="department"]').prop('disabled', true);
        $('#filter_department').prop('disabled', true);
      }

      // Search button (real GET submit) se pehle locked fields dobara
      // enable — warna disabled fields submit mein include nahi hotay
      // aur department URL se gir jaata.
      $('#custFilterForm').on('submit', function () {
        $('select[name="department"], #filter_department').prop('disabled', false);
      });

      if (DEPARTEMENT_WISE_CLASSIFICATION) {
        if (CURRENT_DEPARTMENT && CURRENT_DEPARTMENT_FILTER_ON) {
          lockDepartment(CURRENT_DEPARTMENT);
        } else {
          Swal.fire({
            title: 'Please Select Departement First',
            html: '<select id="swalDeptSelect" class="form-control">' +
                  $('select[name="department"]').html() + '</select>',
            confirmButtonText: 'Continue',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showCancelButton: false,
            preConfirm: function () {
              var val = $('#swalDeptSelect').val();
              if (!val) {
                Swal.showValidationMessage('Please select a department to continue.');
                return false;
              }
              return val;
            }
          }).then(function (result) {
            if (result.isConfirmed) {
              $('select[name="department"]').val(result.value);
              $('#filter_department').prop('checked', true);
              $('#custFilterForm').trigger('submit');
            }
          });
        }
      }

// Cache addresses separately (Select2 can strip custom fields)
      var _customerAddressCache = {};

      $('#customer_name').select2({
        placeholder: 'Search customer',
        ajax: {
          url: "{% url 'customers:get_customers' %}",
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: params=>({term: params.term}),
          processResults: function(data){
            var results = [];
            $.each(data, function(i, c){
              _customerAddressCache[c.id] = c.address || '';
              results.push(c);
            });
            return { results: results };
          },
        },
        allowClear:true,
        escapeMarkup: function(markup){ return markup; },
        templateResult: function(item){
          if (item.loading) return item.text;
          var addr = item.address || _customerAddressCache[item.id] || '';
          var html = '<div class="cust-option" style="line-height:1.3;">'
                   + '<div style="font-weight:600;">' + $('<span>').text(item.text || '').html() + '</div>';
          if (addr){
            html += '<div class="cust-addr" style="font-size:0.82em;color:#777;">' + $('<span>').text(addr).html() + '</div>';
          }
          html += '</div>';
          return html;
        },
        templateSelection: function(item){ return item.text || ''; }
      });
      // Booker multi-select
      $('#order_booker').select2({
        placeholder: 'Select Booker(s)',
        multiple: true,
        ajax: {
          url: "{% url 'customers:get_order_bookers' %}",
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: params=>({term: params.term}),
          processResults: data=>({results: data}),
        }
      });

      // Sale area multi-select
      $('#sale_area').select2({
        placeholder: 'Select Area(s)',
        multiple: true,
        ajax: {
          url: "{% url 'customers:get_sale_areas' %}",
          type: 'POST',
          dataType: 'json',
          delay: 250,
          data: params=>({term: params.term}),
          processResults: data=>({results: data}),
        }
      });

    // Auto-enable filter checkbox when user focuses/uses select2
    $('#customer_name').on('select2:open select2:select', function () {
      $('#filter_name').prop('checked', true);
      $('#show_all').prop('checked', true);
    });

    $('#order_booker').on('select2:open select2:select', function () {
      $('#filter_booker').prop('checked', true);
    });

    $('#sale_area').on('select2:open select2:select', function () {
      $('#filter_area').prop('checked', true);
    });



      // DataTable
      $('#reportTable').DataTable({ order: [] });



      // ─────────────────────────────────────────────
      // Balance Slip Download / Share popup
      // ─────────────────────────────────────────────
      let currentBalanceSlip = {
        urlA5: null,
        urlThermal: null,
        custName: '',
        custTid: ''
      };

      // Dropdown se modal open
      $(document).on('click', '.btn-balance-slip', function (e) {
        e.preventDefault();

        currentBalanceSlip.urlA5     = $(this).data('pdf-url-a5');
        currentBalanceSlip.urlThermal= $(this).data('pdf-url-thermal');
        currentBalanceSlip.custName  = $(this).data('cust-name') || 'Customer';
        currentBalanceSlip.custTid   = $(this).data('cust-tid') || '';

        $('#balanceSlipSize').val('A5');
        $('#balanceSlipModal').modal('show');
      });

      function getSelectedBalanceSlipUrl() {
        const size = $('#balanceSlipSize').val();
        if (size === 'Thermal') {
          return currentBalanceSlip.urlThermal;
        }
        return currentBalanceSlip.urlA5;
      }

      function makeFileName() {
        const base = currentBalanceSlip.custTid || currentBalanceSlip.custName || 'customer';
        return `balance_slip_${base}.pdf`;
      }

      // ---- Download: real file download via fetch+blob ----
      $('#balanceSlipDownloadBtn').on('click', async function () {
        const url = getSelectedBalanceSlipUrl();
        if (!url) return;

        try {
          const resp = await fetch(url);
          if (!resp.ok) throw new Error('Network error');
          const blob = await resp.blob();
          const blobUrl = URL.createObjectURL(blob);
          const fileName = makeFileName();

          const a = document.createElement('a');
          a.href = blobUrl;
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          a.remove();
          URL.revokeObjectURL(blobUrl);
        } catch (err) {
          console.error(err);
          alert('Download mein problem aa gai.');
        }

        $('#balanceSlipModal').modal('hide');
      });

      // ---- Share: try Web Share files[], fallback to link ----
      $('#balanceSlipShareBtn').on('click', async function () {
        const url = getSelectedBalanceSlipUrl();
        if (!url) return;

        try {
          const resp = await fetch(url);
          if (!resp.ok) throw new Error('Network error');
          const blob = await resp.blob();
          const fileName = makeFileName();
          const file = new File([blob], fileName, { type: 'application/pdf' });

          const title = 'Balance Slip - ' + (currentBalanceSlip.custName || '');
          const text  = 'Customer balance slip PDF.';

          // Web Share Level 2: share actual file
          if (navigator.canShare && navigator.canShare({ files: [file] })) {
            await navigator.share({ title, text, files: [file] });
          }
          // Fallback: simple link share (old behaviour)
          else if (navigator.share) {
            await navigator.share({ title, text, url });
          }
          // Last fallback: copy link
          else if (navigator.clipboard && navigator.clipboard.writeText) {
            await navigator.clipboard.writeText(url);
            alert('Link clipboard me copy ho gaya, WhatsApp/email me paste kar dein.');
          } else {
            window.prompt('Copy this link:', url);
          }
        } catch (err) {
          console.error(err);
          alert('Share mein problem aa gai.');
        }

        $('#balanceSlipModal').modal('hide');
      });

      // PDF modal open hote hi current page grouping modal me set kar do
      $('#pdfModal').on('show.bs.modal', function () {
        const g = ($('input[name="group_by"]:checked').val() || '').toString();
        $('#pdfGroupBy').val(g);

        // orientation (agar URL me ho)
        const o = (new URLSearchParams(window.location.search).get('orientation') || 'auto').toString();
        $('#pdfOrientation').val(o);
      });


    // All / None (works even inside modal)
    $(document).on('click', '#pdfColsAll', function (e) {
      e.preventDefault();
      $('#pdfModal input[type="checkbox"][name="columns"]').prop('checked', true);
    });

    $(document).on('click', '#pdfColsNone', function (e) {
      e.preventDefault();
      $('#pdfModal input[type="checkbox"][name="columns"]').prop('checked', false);
    });

    });


// ─────────────────────────────────────────────
// WhatsApp Reminder Button Handler
// ─────────────────────────────────────────────
const WA_SIGNATURE = `

━━━━━━━━━━━━━━━
_Automated Message from *Blue Primes Software* (blueprimes.com)_`;

$(document).on('click', '.wa-reminder-btn', async function() {
  const btn = $(this);
  const origHTML = btn.html();
  
  const customerName = btn.data('customer-name') || 'Customer';
  const customerMobile = btn.data('customer-mobile') || '';
  const customerBalance = btn.data('customer-balance') || '0';
  const customerAddress = btn.data('customer-address') || '';
  
  if (!customerMobile) {
    alert('Customer mobile number not available!');
    return;
  }
  
  // Format phone number
  let phone = String(customerMobile).trim().replace(/[\s\-\+]/g, '');
  if (phone.startsWith('0')) {
    phone = '92' + phone.substring(1);
  }
  
  btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
  
  try {
    // Fetch default reminder template
    let templateText = '';
    try {
      const templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'reminder' %}", {
        method: 'GET',
        credentials: 'same-origin',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      const templateData = await templateResp.json();
      
      if (templateData.ok && templateData.template_text) {
        templateText = templateData.template_text;
      } else {
        templateText = getFallbackReminderTemplate();
      }
    } catch (err) {
      console.warn('Template fetch failed, using fallback:', err);
      templateText = getFallbackReminderTemplate();
    }
    
    // Replace placeholders
    let msg = templateText
      .split('{customer_name}').join(customerName)
      .split('{remaining}').join(customerBalance)
      .split('{balance}').join(customerBalance)
      .split('{address}').join(customerAddress)
      .split('{mobile}').join(customerMobile)
      .split('{date}').join(new Date().toLocaleDateString('en-GB'))
      .split('{amount}').join('')
      .split('{invoice_no}').join('')
      .split('{remarks}').join('');
    
    // Add signature
    msg += WA_SIGNATURE;
    
    // Send via WhatsApp API
    const waFD = new FormData();
    waFD.append('phone', phone);
    waFD.append('message', msg);
    
    const waResp = await fetch('http://localhost:3000/api/send-media', {
      method: 'POST',
      body: waFD
    });
    const waData = await waResp.json();
    
    if (waData.success) {
      // Show success feedback
      btn.removeClass('btn-outline-success').addClass('btn-success');
      btn.html('<i class="fas fa-check"></i>');
      setTimeout(() => {
        btn.removeClass('btn-success').addClass('btn-outline-success');
        btn.html(origHTML);
      }, 2000);
    } else {
      alert('WhatsApp failed: ' + (waData.error || 'Unknown error'));
      btn.html(origHTML);
    }
  } catch (err) {
    console.error(err);
    alert('WhatsApp server not reachable. Is it running?');
    btn.html(origHTML);
  } finally {
    btn.prop('disabled', false);
  }
});

function getFallbackReminderTemplate() {
  return `*{customer_name}*

📋 Outstanding Balance: *Rs. {remaining}*
📅 Date: {date}

Please clear your dues at the earliest.

Thank you! 🙏`;
}



  </script>
{% endblock %}