{% extends "pos/base.html" %}
{% load static %}
{% block title %}Customers{% endblock title %}
{% load video_help_tags %}

{% block heading %}Customers{% endblock heading %}

{% block content %}


<!-- Actions (single line) -->
<!-- DESKTOP / LAPTOP (md+) : single line -->
<div class="btn-toolbar mb-3 d-none d-md-flex" role="toolbar" aria-label="Customer actions">
  <div class="btn-group mr-2 flex-nowrap" role="group" style="flex-wrap:nowrap;">
    <a href="{% url 'customers:customers_add' %}" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i>
      Create new Customer
    </a>
    {% if 'customer_edit' in allowed_features %}
    <a href="{% url 'customers:customers_edit' %}" class="btn btn-outline-success font-weight-bold">
      <i class="fas fa-edit mr-2"></i>
      Edit Customer
    </a>

    <a href="{% url 'customers:customers_bulk_edit' %}" class="btn btn-outline-success font-weight-bold">
      <i class="fas fa-edit mr-2"></i>
      Bulk Edit Customer
    </a>
    {% endif %}
    {% video_help_button 'add-customers' 'Video Help' 'btn btn-danger' %}
  </div>
</div>

<!-- MOBILE (sm) : grid -->
<div class="mb-3 d-md-none">
  <div class="row no-gutters">
    <div class="col-6 pr-1 mb-2">
      <a href="{% url 'customers:customers_add' %}" class="btn btn-success font-weight-bold btn-block">
        <i class="fas fa-plus mr-2"></i> New
      </a>
    </div>
    {% if 'customer_edit' in allowed_features %}
    <div class="col-6 pl-1 mb-2">
      <a href="{% url 'customers:customers_edit' %}" class="btn btn-outline-success font-weight-bold btn-block">
        <i class="fas fa-edit mr-2"></i> Edit
      </a>
    </div>

    <div class="col-6 pr-1 mb-2">
      <a href="{% url 'customers:customers_bulk_edit' %}" class="btn btn-outline-success font-weight-bold btn-block">
        <i class="fas fa-edit mr-2"></i> Bulk
      </a>
    </div>
    {% endif %}

    {% video_help_button 'add-customers' 'Video Help' 'btn btn-danger' %}
  </div>
</div>




<!-- 1) "Upload Excel" button, toggles the hidden upload section -->
<div class="row ml-0 mb-3">
    <button type="button" class="btn btn-primary font-weight-bold" onclick="toggleUploadSection()">
        <i class="fas fa-file-upload mr-2"></i>
        Upload Excel
    </button>
</div>

<!-- 2) Hidden upload section (initially display: none) -->
<div class="card shadow mb-4" id="uploadSection" style="display: none;">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Upload Excel</h6>
    </div>
    <div class="card-body">
        <!-- Button to download the template file -->
        <a href="{% url 'customers:download_excel_template' %}" class="btn btn-info mb-3">
            Download Excel Template
        </a>

        <!-- Form to upload the file -->
        <form method="POST" action="{% url 'customers:upload_excel' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form-group">
                <label for="excelFileInput">Choose Excel/CSV file:</label>
                <input 
                    type="file" 
                    name="excel_file" 
                    id="excelFileInput" 
                    accept=".xlsx, .xls, .csv"
                    required
                    class="form-control-file"
                >
            </div>
            <button type="submit" class="btn btn-success mt-2">
                <i class="fas fa-upload mr-1"></i> Upload
            </button>
        </form>
    </div>
</div>

<!-- Django “messages” feedback (if you haven’t already added it) -->
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }} mt-2" role="alert">
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

<form method="get" class="mb-3 p-3 border rounded bg-light">
  <div class="form-row align-items-end">
    <!-- 1) Search by Name -->
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="filter_name"
               id="chkName" {% if filter_name_active %}checked{% endif %}>
        <label class="form-check-label" for="chkName">Search by Name</label>
      </div>
      <select id="searchbox_customers" name="name_search" style="width:200px;"
              {% if not filter_name_active %}disabled{% endif %}></select>
    </div>

    <!-- 2) Search by Area -->
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="filter_area"
               id="chkArea" {% if filter_area_active %}checked{% endif %}>
        <label class="form-check-label" for="chkArea">Search by Area</label>
      </div>
      <select id="searchbox_areas" name="area_search" style="width:200px;"
              {% if not filter_area_active %}disabled{% endif %}></select>
    </div>

    <!-- 3) Search by Booker -->
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="filter_booker"
               id="chkBooker" {% if filter_booker_active %}checked{% endif %}>
        <label class="form-check-label" for="chkBooker">Search by Booker</label>
      </div>
      <select id="searchbox_bookers" name="booker_search" style="width:200px;"
              {% if not filter_booker_active %}disabled{% endif %}></select>
    </div>

    <!-- 4) Filter by Date -->
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="filter_date"
               id="chkDate" {% if filter_date_active %}checked{% endif %}>
        <label class="form-check-label" for="chkDate">Filter by Date</label>
      </div>
      <input type="date" class="form-control" name="date_search"
             {% if not filter_date_active %}disabled{% endif %}
             value="{{ filter_date|default:today_str }}">
    </div>

    <!-- Show all / only positive balance -->
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="show_all"
               id="chkAll" {% if show_all %}checked{% endif %}>
        <label class="form-check-label" for="chkAll">Show All Customers</label>
      </div>
    </div>

    <!-- Search button -->
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Search</button>
    </div>

    <!-- Print button -->
    <div class="col-auto">
      <button type="button" class="btn btn-secondary" data-toggle="modal"
              data-target="#printModal">Print</button>
    </div>
  </div>
</form>

<div class="modal fade" id="printModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form method="post" action="{% url 'customers:customers_pdf' %}">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Select Columns</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          {% comment %} keep all your GET filters as hidden inputs {% endcomment %}
          {% for key, val in request.GET.items %}
            <input type="hidden" name="{{ key }}" value="{{ val }}">
          {% endfor %}
          {% comment %} column checkboxes {% endcomment %}
            {% for col in available_columns %}
              <div class="form-check">
                <input class="form-check-input"
                       type="checkbox"
                       name="columns"
                       id="col_{{ col|slugify }}"
                       value="{{ col }}"
                       {% if col in default_columns %}checked{% endif %}>
                <label class="form-check-label" for="col_{{ col|slugify }}">
                  {{ col }}
                </label>
              </div>
            {% endfor %}

        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger">Generate PDF</button>
        </div>
      </div>
    </form>
  </div>
</div>


<!-- DataTable for customers -->
<div class="card shadow mb-12">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Customers</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th style="width:5%">#</th>
                        <th style="width:20%">Name</th>
                        <th style="width:25%">Address</th>
                        <th style="width:15%">Mobile #</th>
                        <th style="width:25%">Balance</th>
                        <th class="text-center" style="width:10%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in customers %}
                    <tr>
                        <td>{{c.id}}</td>
                        <td>{{forloop.counter}}</td>
                        <td>{{c.name}}</td>
                        <td>{{c.address}}</td>
                        <td>{{c.mobile}}</td>
                        <td>{{ c.prev_balance|default:c.balance }}</td>
                        <td class="text-center">
                            <!--Update-->
                            {% if 'customer_edit' in allowed_features %}
                            <a href="{% url 'customers:customers_update' c.id %}" class="text-decoration-none">
                                <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="tooltip" title="Update customer">
                                    <i class="fas fa-pen"></i>
                                </button>
                            </a>
                            {% endif %}
                            <!--Delete modal-->
                            {% if 'customer_delete' in allowed_features %}
                            <a class="text-decoration-none">
                                <button rel="delete" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </a>
                            {% endif %}
                                    
                            <!-- Modal -->
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Delete customer</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div id="updateThisText" class="modal-body">
                                        Are you sure you want to delete the customer: {{c.name}}
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                        <a id="updateThisURL" href="{% url 'customers:customers_delete' c.id %}" class="text-decoration-none">
                                            <button type="button" class="btn btn-danger">Delete</button>
                                        </a>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascripts %}


<script>
    // Toggle the hidden upload section
    function toggleUploadSection() {
      var x = document.getElementById("uploadSection");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

    $(document).ready(function() {
        tblCategories = $('#dataTable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'print',
                    text: 'Print <i class="fas fa-file ml-2"></i>',
                    titleAttr: 'Print',
                    className: 'btn btn-info',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'excelHtml5',
                    text: 'Download Excel <i class="fas fa-file-excel ml-2"></i>',
                    titleAttr: 'Download Excel',
                    className: 'btn btn-success ml-2',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
                {
                    extend: 'pdfHtml5',
                    text: 'Download PDF <i class="fas fa-file-pdf ml-2"></i>',
                    titleAttr: 'Download PDF',
                    className: 'btn btn-danger ml-2',
                    download: 'open',
                    orientation: 'vertical',
                    pageSize: 'A4',
                    title: '*',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    },
                    customize: function (doc) {
                        doc.styles = {
                            header: {
                                fontSize: 18,
                                bold: true,
                                alignment: 'center'
                            },
                            subheader: {
                                fontSize: 13,
                                bold: true
                            },
                            quote: {
                                italics: true
                            },
                            small: {
                                fontSize: 8
                            },
                            tableHeader: {
                                bold: true,
                                fontSize: 11,
                                color: 'white',
                                fillColor: '#2d4154',
                                alignment: 'center'
                            }
                        };
                        doc.content[1].table.widths = ['10%', '10%', '30%', '30%', '20%'];
                        doc.content[1].margin = [0, 35, 0, 0];
                        doc.content[1].layout = {};
                        doc['footer'] = (function (page, pages) {
                            return {
                                columns: [
                                    {
                                        alignment: 'left',
                                        text: ['Creation date: ', {text: moment().format('MM-DD-YYYY (HH:mm:ss)')}]
                                    },
                                    {
                                        alignment: 'right',
                                        text: ['page ', {text: page.toString()}, ' of ', {text: pages.toString()}]
                                    }
                                ],
                                margin: 20
                            }
                        });
                    }
                }
            ],
            deferRender: true,
            columnDefs: [
                {
                    targets: [0],
                    visible: false,
                    searchable: false,
                },
                {
                    targets: [-1], // Actions column
                    orderable: false,
                }
            ],
        });
    });

    // Alert when trying to delete a customer
    $('#dataTable tbody').on('click', 'button[rel="delete"]', function () {
        var tr = tblCategories.cell($(this).closest('td, li')).index();
        row_data = tblCategories.row(tr.row).data();
        customer_id = row_data[0];
        customer_name = row_data[2];
        new_delete_url  = 'delete/' + customer_id;
        document.getElementById("updateThisText").innerHTML =
          "Are you sure you want to delete the customer: " + customer_name + "?";
        document.getElementById("updateThisURL").href = new_delete_url;
    });

  // enable/disable inputs when their checkbox toggles
  $("#chkName").change(e => $("#searchbox_customers").prop("disabled", !e.target.checked));
  $("#chkArea").change(e => $("#searchbox_areas").prop("disabled", !e.target.checked));
  $("#chkBooker").change(e => $("#searchbox_bookers").prop("disabled", !e.target.checked));
  $("#chkDate").change(e => $("input[name='date_search']").prop("disabled", !e.target.checked));

    function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
        document.cookie.split(';').forEach(c => {
          const [k, v] = c.trim().split('=');
          if (k === name) cookieValue = decodeURIComponent(v);
        });
      }
      return cookieValue;
    }
    $(function() {
      function initSelect2(selector, url, placeholder) {
        return $(selector).select2({
          width: '200px',
          placeholder: placeholder,
          allowClear: true,
          ajax: {
            url, type: 'POST', delay: 250,
            data: params => ({
              term: params.term,
              csrfmiddlewaretoken: getCookie('csrftoken')
            }),
            processResults: data => ({ results: data }),
            error: xhr => console.error("Select2 AJAX error:", xhr)
          }
        });
      }

      const custBox   = initSelect2('#searchbox_customers', '{% url "customers:get_customers"   %}', 'Search customer…');
      const areaBox   = initSelect2('#searchbox_areas',     '{% url "customers:get_sale_areas" %}', 'Search area…');
      const bookerBox = initSelect2('#searchbox_bookers',   '{% url "customers:get_order_bookers" %}', 'Search booker…');

      function wireToggle(chk, box) {
        $(chk).on('change', e => {
          if (e.target.checked) {
            box.prop('disabled', false);
          } else {
            box.val(null).trigger('change');
            box.prop('disabled', true);
          }
        }).trigger('change');
      }

      wireToggle('#chkName',   custBox);
      wireToggle('#chkArea',   areaBox);
      wireToggle('#chkBooker', bookerBox);
    });

</script>
{% endblock javascripts %}