{% extends 'Accounts/comun.html' %}
<title>Vehicles</title>
{% load static %}
{% load i18n %}
{% load tz %}
<script src="{% static 'dev/index.js' %}"></script>

{% block content %}

 <div class="container-fluid">

          <!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Vehicles</h1>
            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
          </div>
          <div class="row">
            <div class="col-xl-12 col-lg-12">

                <div class="demo-container">
                    <div id="gridContainer"></div>

                </div>
               
            </div>
          </div>
        </div>


<script>
DevExpress.localization.locale(navigator.language || navigator.browserLanguage);
    
function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	var expires = "expires=" + d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') {
			c = c.substring(1);
		}
		if (c.indexOf(name) == 0) {
			return c.substring(name.length, c.length);
		}
	}
	return "";
}


    
    $(function(){
    var orders = new DevExpress.data.CustomStore({
        load: function (loadOptions) {
            var deferred = $.Deferred(),
                args = {};
    
            if (loadOptions.sort)
            {
                args.orderby = loadOptions.sort[0].selector;
                if (loadOptions.sort[0].desc)
                    args.orderby += " desc";
            }
    
            args.skip = loadOptions.skip;
            args.take = loadOptions.take;

            

            $.ajax({
                url: "http://127.0.0.1:8000/listVehicles",
                dataType: "json", 
                data: args,
                success: function(result) {
                    deferred.resolve(result.items, { totalCount: result.totalCount });
                },
                error: function() {
                    deferred.reject("Data Loading Error");
                },
                timeout: 5000
            });
    
            return deferred.promise();
        }
    });
    
    $("#gridContainer").dxDataGrid({
		 columnChooser: { enabled: true },
		columnFixing: {enabled: true},
		//keyExpr: "ID",
		//focusedRowEnabled: true,
        showBorders: true,
        dataSource: {store: orders}, //datasource arriba
        showBorders: true,
        remoteOperations: {
            sorting: true,
            paging: true
        },
     
        paging: {
            pageSize: 100
        },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [8, 12, 20]
        },
        columns: [
            "id", "plate", "capacity", "insurancenumber","state","property","revisiondate", {
                //dataField: "SaleAmount",
                //format: "currency"
            }
        ],
        groupPanel: {
            visible: true
        },
        scrolling: {
            mode: "virtual"
        },
		filterRow: {
            visible: true
        },
        headerFilter: {
            visible: true
        },
        export: {
            enabled: true,
			printingEnabled: true,
            customizeExcelCell: (options) => {
                var gridCell = options.gridCell;
                if(!gridCell) {
                    return;
                }
            }
        },
		stateStoring: {
			enabled: true,
			type: "custom",
			customLoad: function () {
				return JSON.parse(getCookie("key") || '{}');
			},
			customSave: function (state) {
				setCookie("key", JSON.stringify(state), 1000);
			},
		}
    }).dxDataGrid("instance");
    });



</script>

{% endblock %}