{%extends "confreg/confadmin_base.html" %}
{%load assets%}
{%block title%}Reports{%endblock%}
{%block extrahead%}
{%asset "css" "jqueryui1" %}
{%asset "js" "jqueryui1" %}
<style>
#fieldlist { list-style-type: none; margin: 0; padding: 0; }
#fieldlist li { cursor: move;}
input[type=checkbox] { margin-right: 1em; }
a.delete-link {
   cursor: pointer;
}
a.delete-block {
    font-weight: normal;
    cursor: pointer;
}
.dlgInput {
   width: 100%;
}
select.dlgInput {
   height: 200px;
}
input#dlgSelectFieldCountText {
   width: 50px;
}
</style>
{%endblock%}
{%block layoutblock%}
<h1>Reports</h1>
<select id="selStoredReports">
  <option value="-1">* Confirmed and not cancelled attendees</option>
  <option value="-2">* Canceled (but once confirmed) attendees</option>
{%if conference.confirmpolicy%}
  <option value="-3">* Confirmed attendees that have not confirmed the conference policy</option>
{%endif%}
{%for r in stored_reports %}
 <option value="{{r.id}}">{{r.title}}</option>
{%endfor%}
</select>
<button id="btnLoadReport" class="btn btn-default">Load report</button>
<button id="btnDeleteReport" class="btn btn-default">Delete stored report</button>
<p>
  Reports with * indicates pre-defined reports that cannot be edited or deleted.
</p>

<h2>Report</h2>
<table class="table">
  <tr>
    <td class="col-md-3"><h3>Fields</h3>Select fields to include.<br/>Drag to change order.</td>
    <td>
      <ul id="fieldlist">
      {%for f in adv_fields %}
      <li><input type="checkbox" name="fields" value="{{f.id}}"{%if f.default%} CHECKED{%endif%}/>{{f.title}}</li>
      {%endfor%}
      </ul>
    </td>
  </tr>
 <tr>
    <td class="col-md-3"><h3>Filters</h3>Select filters to apply</td>
    <td>
      <table id="addedfilters" class="table table-condensed">
	<thead>
	  <tr class="filterHeader">
	    <th>Filter</th>
	    <th>Value</th>
	    <th></th>
	  </tr>
	</thead>
	<tbody></tbody>
      </table>
      <strong>Add filter:</strong><br/>
      <select id="addFilterSelect">
	<option value="0">** Select filter to add</option>
      {%for filter in adv_filters%}
	<option value="{{filter.id}}">{{filter.name}}</option>
      {%endfor%}
      </select>
      <p>
	Multiple filters are ANDed together.
      </p>
      <button id="btnAddFilterBlock" class="btn btn-sm btn-default">Add filter block</button>
      <p>
	Multiple filter blocks are ORed together.
      </p>
    </td>
  </tr>
</table>

<form method="post" action=".">{% csrf_token %}
<input type="hidden" name="reportdata" id="reportdata">
<input type="hidden" name="what" id="txtWhat">
<input type="submit" id="btnSubmit" value="Query data" class="btn btn-primary"/>
<input type="submit" id="btnSave" value="Save report definition" class="btn btn-default"/>
<a href="." class="btn btn-default">Reset form</a>
</form>

{%if matchingattendees is not None %}
<h2>Output</h2>
<p>
  Query matched {{matchingattendees|length}} attendees.
</p>
<form method="post" action="." target="_blank" class="form-horizontal">{% csrf_token%}
<table class="table">
  <tr>
    <td class="col-md-3"><h3>Title</h3></td>
    <td><input type="text" name="title" id="txtTitle" class="form-control"></td>
  </tr>
  <tr>
    <td class="col-md-3"><h3>Additional columns</h3>(These columns will be added empty, for manual entry. Separate with comma.)</td>
    <td><input type="text" name="additionalcols" id="txtAdditionalCols" class="form-control"></td>
  </tr>
  <tr>
    <td class="col-md-3"><h3>Order by</h3></td>
    <td>
      <select name="orderby1" id="selOrderby1">{%for f in adv_fields %}<option value="{{f.id}}"{%if forloop.counter == 1%} SELECTED{%endif%}>{{f.title}}</option>{%endfor%}</select>
      <select name="orderby2" id="selOrderby2">{%for f in adv_fields %}<option value="{{f.id}}"{%if forloop.counter == 2%} SELECTED{%endif%}>{{f.title}}</option>{%endfor%}</select>
    </td>
  </tr>
  <tr>
    <td class="col-md-3"><h3>Format</h3></td>
    <td>
      <table border="0" cellspacing="1" cellpadding="0">
	<tr>
	  <td>Format:</td>
	  <td><select name="format" id="selFormat"><option value="html">HTML</option><option value="pdf">PDF</option><option value="csv">CSV</option><option value="badge">Badge</option><option value="json">JSON</option></select></td>
	</tr>
	<tr>
	  <td></td>
	  <td>Note: For printing badges, don't forget to add a a "Payment confirmed" filter (the input field is left empty for printing all badges)</td>
	</tr>
	<tr>
	  <td>PDF orientation:</td>
	  <td><select name="orientation" id="selOrientation"><option value="portrait">Portrait</option><option value="landscape">Landscape</option></td>
	</tr>
	<tr>
	  <td>PDF pagesize:</td>
	  <td><select name="pagesize" id="selPagesize"><option value="A4">A4</option><option value="letter">Letter</option></td>
	</tr>
	<tr>
	  <td>Borders</td>
	  <td><input type="checkbox" name="border" CHECKED id="cbBorders"> include table and badge borders</td>
	<tr>
	  <td>Pagebreaks</td>
	  <td><input type="checkbox" name="pagebreaks" CHECKED id="cbPagebreaks"> force page break (between badges only)</td>
	</tr>
      </table>
    </td>
  </tr>
</table>
<input type="hidden" name="rids" value="{{matchingattendees|join:","}}">
<input type="hidden" name="reportdata" value="{{reportdata}}">
<input type="submit" name="submit" value="Generate report" class="btn btn-primary"/>
<a href="." class="btn btn-default">Reset form</a>
</form>

{%if dynafields%}
<h2>Set fields</h2>
<form method="post" action="." class="form-horizontal">{%csrf_token%}
<table class="table">
  <tr>
    <td class="col-md-3"><h4>Field</h4></td>
    <td><select name="dynasetfield" class="form-control">
	{%for f in dynafields%}<option value="{{f}}">{{f}}</option>{%endfor%}
    </select></td>
  </tr>
  <tr>
    <td class="col-md-3"><h4>Value</h4></td>
    <td><input type="text" class="form-control" name="dynasetvalue" placeholder="Value to write to dynamic field. Leave empty to delete."></td>
  </tr>
</table>
<input type="hidden" name="rids" value="{{matchingattendees|join:","}}">
<input type="hidden" name="reportdata" value="{{reportdata}}">
<input type="submit" name="submit" value="Set dynamic field on matching attendees" class="btn btn-primary confirm-btn" data-confirm="Are you sure you want to set this value on all matching entries?"/>
{%endif%}{# dynafields #}
{%endif%}{# has data #}

<div id="dlgStringField">
  <input type="text" id="dlgStringFieldString" class="dlgInput">
  <ul>
    <li>Enter a value to search for entries containing it (non-exact match)</li>
    <li>Enter <i>&gt;value</i> to search for values greater than</li>
    <li>Enter <i>&lt;value</i> to search for values lesser than</li>
    <li>Leave empty to search for *any* value</li>
    <li>Enter <i>\N</i> to search for NULL</li>
  </ul>
</div>

<div id="dlgSelectField">
  Select one or more values to include.
  <select id="dlgSelectFieldSelect" MULTIPLE class="dlgInput"></select>
  <div id="dlgSelectFieldCountDiv">
    Require a minimum of <input type="number" id="dlgSelectFieldCountText" /> of the selected options.
  </div>
</div>

<div id="dlgSaveReport">
  Name: <input type="text" id="dlgSaveReportName">
</div>

<script type="text/javascript">
var selectedFilters = [
  [],
];

var filters = {
{%for filter in adv_filters %}
  "{{filter.id}}": {
    type: "{{filter.type}}",
    name: "{{filter.name}}",{%if filter.type == "select" %}
    manytomany: {{filter.manytomany|yesno:"true,false"}},
    options: [{%for k,v in filter.options %}
  ["{{k}}", "{{v}}"],{%endfor%}
],{%endif%}
  },
{%endfor%}
};

var stored_reports = {
{%for r in stored_reports%}
   '{{r.title}}': true,{%endfor%}
};

function refreshFilterView() {
   var tbl = $('#addedfilters tbody');

   $(tbl).children().remove();

   $.each(selectedFilters, function (i, filterBlock) {
      if (i != 0) {
         var a = $('<a class="delete-block">Remove filter block</a>');
         a.data('filterblock', i);

         var r = $('#addedfilters thead tr.filterHeader').clone();
         r.find('th:last-child').append(a);
         tbl.append(r);
      }

      $.each(filterBlock, function(j, e) {
         var a = $('<a class="delete-link">Remove filter</a>');
         a.data('filterblock', i);
         a.data('filteridx', j);
         tbl.append(
          $('<tr/>')
           .append($('<td/>').text(filters[e.filter].name))
           .append($('<td/>').text(e.display))
           .append($('<td/>').append(a))
         );
      });
    });
}

function getReportDefinition() {
  return {
    fields: $('#fieldlist input:checkbox:checked').map(function() { return $(this).val(); }).get(),
    filters: selectedFilters,
  };
}

function load_report_definition(data) {
    $('#fieldlist input:checkbox').prop('checked', false);
    $.each(data.fields, function(i, e) {
        $('#fieldlist input:checkbox[value="' + e + '"]').prop('checked', true);
    });

    selectedFilters = data.filters;
    refreshFilterView();
}

const predefined_reports = {
    "-1": { /* Confirmed  but not canceled attendees */
	'fields': ['lastname', 'firstname', 'email'],
	'filters': [
	    [
		{ 'filter': 'payconfirmedat', 'value': '', 'display': ''},
		{ 'filter': 'canceledat', 'value': '\\N', 'display': '\\N'}
	    ]
	]
    },
    "-2": { /* Canceled (but once confirmed) attendees */
	'fields': ['lastname', 'firstname', 'email'],
	'filters': [
	    [
		{ 'filter': 'payconfirmedat', 'value': '', 'display': ''},
		{ 'filter': 'canceledat', 'value': '', 'display': ''}
	    ]
	]
    },
    "-3": { /* Confirmed attendees that have not confirmed the policy */
	'fields': ['lastname', 'firstname', 'email', 'payconfirmedat', 'policyconfirmedat'],
	'filters': [
	    [
		{ 'filter': 'payconfirmedat', 'value': '', 'display': ''},
		{ 'filter': 'canceledat', 'value': '\\N', 'display': '\\N'},
		{ 'filter': 'policyconfirmedat', 'value': '\\N', 'display': '\\N'},
	    ]
	]
    }
}

$(function() {
    $( '#dlgStringField').dialog({ autoOpen: false, modal: true, resizable: false, minWidth: 500});
    $( '#dlgSelectField').dialog({ autoOpen: false, modal: true, resizable: false, minWidth: 500});
    $( '#dlgSaveReport').dialog({ autoOpen: false, modal: true, resizable: false });

    $( "#fieldlist" ).sortable();
    $( "#fieldlist" ).disableSelection();

    $('input.adv_filter_box, blockquote.adv_filter_wrap').each(function(i, e) {
       if ($(e).prev().is(':checked')) {
          $(e).show();
       } else {
          $(e).hide();
       }
    });
    $('input.adv_filter_check').each(function(i, e) {
       $(e).change(function() {
          if ($(e).is(':checked')) {
             $(e).next().show();
          } else {
             $(e).next().hide();
          }
       });
    });

    $('#addFilterSelect').change(function() {
       var id = $(this).val();
       if (id == "0") return;

       var dlg;
       if (filters[id].type == "string") {
          dlg = $('#dlgStringField');
          $('#dlgStringFieldString').val("");
       } else if (filters[id].type == "select") {
          dlg = $('#dlgSelectField');
          if (filters[id].manytomany) {
             $('#dlgSelectFieldCountText').val(1);
             $('#dlgSelectFieldCountDiv').show();
          } else {
             $('#dlgSelectFieldCountDiv').hide();
          }
          var sel = document.getElementById('dlgSelectFieldSelect');
          sel.options.length = 0;
          $.each(filters[id].options, function(i, e) {
             var opt = document.createElement('option');
             opt.value = e[0];
             opt.innerHTML = e[1];
             sel.appendChild(opt);
          });
       }
       dlg.dialog('option', {
          'title': filters[id].name,
          'buttons': {
             'Cancel': function() {
                $('#addFilterSelect').val(0);
                $(this).dialog('close');
             },
             'Add filter': function() {
                var f = {
                   'filter': id,
                };
                if (filters[id].type == "string") {
                   f['value'] = $('#dlgStringFieldString').val();
                   f['display'] = f['value'];
                } else if (filters[id].type == "select") {
                   if (!$('#dlgSelectFieldSelect').val()) {
                      return;
                   }

                   f['value'] = $('#dlgSelectFieldSelect').val();
                   f['display'] = $('#dlgSelectFieldSelect option:selected').toArray().map(item => item.text).join(', ');
                   if (filters[id].manytomany) {
                      f['mincount'] = parseInt($('#dlgSelectFieldCountText').val());
                      f['display'] = f['mincount'] + ' of ' + f['display'];
                   }
                }

                /* Always push to the last filter block */
                selectedFilters[selectedFilters.length - 1].push(f);

                refreshFilterView();

                $('#addFilterSelect').val(0);
                $(this).dialog('close');
             }
          }
       }).dialog('open');
    });

    $('#btnSubmit').click(function() {
       $('#reportdata').val(JSON.stringify(getReportDefinition()));
       $('#txtWhat').val('query');
       return true;
    });

    $('#btnSave').click(function() {
       $('#dlgSaveReportName').val($('#txtTitle').val());
       $('#dlgSaveReport').dialog('option', {
          'title': 'Save report',
          'buttons': {
             'Cancel': function() {
                $(this).dialog('close');
             },
             'Save report': function() {
                var overwrite = 0;
                if ($('#dlgSaveReportName').val() in stored_reports) {
                   if (!confirm('A report with this name already exists. Overwrite?'))
                      return;
                   overwrite = 1;
                }

                $.post('.', {
                   'csrfmiddlewaretoken': '{{csrf_token}}',
                   'reportdata': JSON.stringify(getReportDefinition()),
                   'what': 'save',
                   'name': $('#dlgSaveReportName').val(),
                   'overwrite': overwrite,
                }).success(function() {
                   document.location.href = '.';
                }).fail(function() {
                  alert('Error saving');
                }).always(function() {
                  $('#txtWhat').val('save');
                  $('#dlgStringField').dialog('close');
                });
             }
          }
       }).dialog('open');


       return false;
    });

    $('#btnAddFilterBlock').click(function() {
       if (selectedFilters[selectedFilters.length - 1].length == 0) {
          return;
       }

       selectedFilters.push([]);
       refreshFilterView();
    });

    $('#btnLoadReport').click(function() {
       if ($('#selStoredReports').val() == null) {
           alert('No report selected.');
           return;
       }

       if (parseInt($('#selStoredReports').val()) < 0) {
           /* Predefined report */
           load_report_definition(predefined_reports[parseInt($('#selStoredReports').val())]);
           return;
       }

       $.get('.', {
          'storedreport': $('#selStoredReports').val(),
       }).success(function(data) {
	  load_report_definition(data);
       }).fail(function() {
          alert('Failed to load report');
       });
    });

    $('#btnDeleteReport').click(function() {
       if ($('#selStoredReports').val() == null) {
           alert('No report selected.');
           return;
       }
       if (parseInt($('#selStoredReports').val()) < 0) {
           alert('Cannot delete a predefined report.');
           return;
       }

       if (!confirm('Are you sure you want to delete this report?')) return;

       $.post('.', {
          'csrfmiddlewaretoken': '{{csrf_token}}',
          'what': 'delete',
          'storedreport': $('#selStoredReports').val(),
       }).success(function(data) {
          document.location.href = '.';
       }).fail(function() {
          alert('Failed to delete report');
       });
    });

    $(document).on("click", "a.delete-link", function() {
       var block = $(this).data('filterblock');
       var idx = $(this).data('filteridx');

       selectedFilters[block].splice(idx, 1);
       if (block > 0 && selectedFilters[block].length == 0) {
          selectedFilters.splice(block, 1);
       }
       refreshFilterView();
    });

    $(document).on("click", "a.delete-block", function() {
       var block = $(this).data('filterblock');
       selectedFilters.splice(block, 1);
       refreshFilterView();
    });
{%if reportdata %}
    /* Load the current report again */
    load_report_definition({{reportdata|safe}});
{%endif%}
  });
</script>

{%endblock%}