{% extends 'base.html' %}
{% load static %}
{% block page_scripts %}
    <script src="{% static 'projects/fyw/app/tonal/greg/js/grid.js' %}"></script>
{% endblock %}

{% block content %}

{% if user.is_authenticated %}


   <form id="searchform" method="POST" action="">
       {% csrf_token %}

        <select name="select_main_search_prefilter" id="select_main_search_prefilter" onchange="load_main_grid()">
            <option value="everywhere">Everywhere</option>
            <option value="name">Name</option>
        </select>

        <input type="text"  id="txtSearch" name="txtSearch" autocomplete="off" onKeyUp="load_main_grid()">
        <button type="submit" >Submit</button>
    </form>

    <div id="div_current_selected_search_tab"></div>

    <script> function load_main_grid(){

        alert('load_main_grid')

        // puiskil faut dupliquer ca aussi pour get_selected_row dans grid.html , en faire une fonction ???

        var active_tab_button_id = ''
        var active_sub_tab_button_id = ''

        if (!$('.active').length) {// If no tab slected
            active_tab_button_id = '_tab_search_results_contact'
            active_sub_tab_button_id = '_tab_sub_search_results_company'
        }
        else(
            $('.active').each(function() {

                if($(this).attr('id').indexOf('_sub_') != -1){
                    active_sub_tab_button_id = $(this).attr('id').substring($(this).attr('id').indexOf("_tab"))
                }
                else {
                    active_tab_button_id = $(this).attr('id').substring($(this).attr('id').indexOf("_tab"))
                }
            })
        )

        $.ajaxSetup({
        data: {txtSearch: $('#txtSearch').val(), select_main_search_prefilter: $('#select_main_search_prefilter').val(),csrfmiddlewaretoken: '{{ csrf_token }}' },});
        $.ajax({
            type: "POST",
            url: "main_search_records/",
            //dataType: 'json',
            //beforeSend: function () {
                //$('#myTable').remove(); // delete myTable on home.html
                //$('#myTable tbody').empty(); ou thead
            //},
            success: function (data) {
                //alert($($.parseHTML("<div>"+data.html_table+"</div>")).find('#div_tab_search_results_contact').html())
            $("#div_home_main_grid").html(data.html_table); // copy grid.html inside div oh home.html
            $("#button_tab_search_results_contact").html('Contact ('+jQuery('#jqGrid').jqGrid('getGridParam','records')+')');
            $("#button_tab_search_results_company").html('Company ('+jQuery('#jqGrid_company').jqGrid('getGridParam','records')+')');
            //$("#button"+active_tab_button_id).click();
            //$("#button"+active_sub_tab_button_id).click();

            //create_sub_search_tabs("button"+active_tab_button_id)

            document.getElementById('button'+active_tab_button_id).className += " active";
            document.getElementById('div'+active_tab_button_id).style.display = "block";

            document.getElementById('button'+active_sub_tab_button_id).className += " active";
            document.getElementById('div'+active_sub_tab_button_id).style.display = "block";

            create_sub_search_tabs('button'+active_tab_button_id)

            //sorttable.makeSortable(document.getElementById("myTable2")); // rend table dans filter.html sortable sans mettre sortable dans class
            }
        });
        }</script>

    <script>
        $("#searchform").submit(function(e){
        e.preventDefault(); // bloque le action du form pour executer ajax a la place
        $.ajaxSetup({
        data: {txtSearch: $('#txtSearch').val(), select_main_search_prefilter: $('#select_main_search_prefilter').val(),csrfmiddlewaretoken: '{{ csrf_token }}' },});
        $.ajax({
            type: "POST",
            url: "main_search_records/",
            //dataType: 'json',
            //beforeSend: function () {
                //$('#myTable').remove(); // delete myTable on home.html
                //$('#myTable tbody').empty(); ou thead
            //},

            success: function (data) {
            $("#div_home_main_grid").html(data.html_table); // copy grid.html inside div oh home.html
                $("#button_tab_search_results_contact").html('Contact ('+jQuery('#jqGrid').jqGrid('getGridParam','records')+')');
            //sorttable.makeSortable(document.getElementById("myTable2")); // rend table dans filter.html sortable sans mettre sortable dans class
            }
        });
        })

        //$(document).ready(function() {$('#myTable tr').dblclick(function() {
        //var href = $(this).find("a").attr("href");
        //if(href) {
            //window.location = href;}});});
</script>

    <div id="div_home_main_grid" class="tab"></div>

<a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#jqGrid').jqGrid('getGridParam','records'));">Get number of records in Grid</a>

    <input type="button" value="Get Selected Rows and column values (draft to popuilate subgrid)" onclick="getSelectedRows2()" />

    <script>function getSelectedRows2() {
            var grid = $("#jqGrid");
            var rowKey = grid.getGridParam("selrow");

            if (!rowKey)
                alert("No rows are selected");
            else {
                var selectedIDs = grid.getGridParam("selarrrow");

                var result = "";
                for (var i = 0; i < selectedIDs.length; i++) {
                    result += selectedIDs[i] + "," + grid.getCell(selectedIDs[i], 'last_name');
                }
                    //https://stackoverflow.com/questions/6995129/how-to-get-a-jqgrid-selected-row-cells-value
                alert(result);
            }
        }</script>

{% else %}

<div class="col-md-6 offset-md-3">
<h1>Login</h1>
<br/>

<form method="POST" action="{% url 'home' %}">
	{% csrf_token %}
  <div class="mb-3">
    <input type="text" class="form-control" name="username", placeholder="Username" required>

  </div>
    <br/>
  <div class="mb-3">
    <input type="password" class="form-control" name="password", placeholder="Password" required>
  </div>
  <br/>
  <button type="submit" class="btn btn-secondary">Login</button>

</form>

</div>

{% endif %}

{% endblock %}