{% extends 'base.html.twig' %}

{% block title %}Mes Tickets{% endblock %}

{% block body %}
<!-- Include the core CSS, this is needed by the grid -->
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css"/>
<!-- Include the theme CSS, only need to import the theme you are going to use -->
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css"/>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-balham.css"/>
<!-- Latest compiled and minified CSS -->
<!--link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"-->
<!-- Latest compiled and minified JavaScript -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js"></script>
<!--script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script-->
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@29.0.0/dist/ag-grid-enterprise.min.js"></script>
<script>
    var listTickets = "{{ url('app_ajax_tickets') }}";
</script>
<script>
    const columnDefs = [
        // Row Data: The data to be displayed.
        // Column Definitions: Defines & controls grid columns.
            { 
                field: "id" 
            },
            { 
                field: "type",
                sortable: true,
                editable: false,
                resizable: false,
                filter: 'agNumberColumnFilter'
            },
            { 
                field: "description",
                sortable: true,
                editable: false,
                resizable: false,
                filter: 'agNumberColumnFilter'
            },
            { 
                field: "excerpt",
                sortable: true,
                editable: false,
                resizable: false,
                filter: 'agNumberColumnFilter'
            },
            { 
                field: "assignee",
                sortable: true,
                editable: false,
                resizable: false,
                filter: 'agNumberColumnFilter' 
            },
            { 
                field: "status",
                sortable: true,
                editable: false,
                resizable: false,
                filter: 'agNumberColumnFilter' 
            },
            { 
                field: "comments",
                sortable: true,
                editable: false,
                resizable: false,
                filter: 'agNumberColumnFilter'
            }
    ];

        // custom loading template. the class ag-overlay-loading-center is part of the grid,
        // it gives a white background and rounded border
        /*overlayLoadingTemplate:
            '<div style="position:absolute;top:0;left:0;right:0; bottom:0; background: url(https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/editor-0.6s-46px.gif) center no-repeat" aria-label="loading"></div>',
        overlayNoRowsTemplate:
            '<span style="padding: 10px; border: 2px solid #666; background: #55AA77;">This is a custom \'no rows\' overlay</span>',*/

    function renderCells(){
        // define cellRenderer to be reused
        const myCellRenderer = params => `<span style="color: ${params.color}">${params.value}</span>`;

        // use with a colour
        columnDefs.cellRenderer = myCellRenderer;
        columnDefs.cellRendererParams = {
        color: 'guinnessBlack'
        }

        // use with another colour
        columnDefs.cellRenderer = myCellRenderer;
        columnDefs.cellRendererParams = {
        color: 'irishGreen'
        }
    }

    function autoSizeAll(skipHeader) {
        const allColumnIds = [];
        gridOptions.columnApi.getColumns().forEach((column) => {
            allColumnIds.push(column.getId());
        });
        gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
    }

    function getTotalDsplayedRows() {
        var count = gridOptions.api.getDisplayedRowCount();
        //console.log('## printAllDisplayedRows');
        var total = 0;
        for (var i = 0; i < count; i++) {
            var rowNode = gridOptions.api.getDisplayedRowAtIndex(i);
            var montant = rowNode.data.montant
            //console.log('montant ' + i + ' is ' + montant);
            total += montant;
        }
        console.log('total montant is ' + total);
        /*var moveCount = + $('#moveCount').text();
        $('#moveCount').text(moveCount + 1);*/
        $('span#resultValue').html(count);
        $('span#totalValue').html(total.toFixed(2) + " €");
    }

    function onSelectionChanged() {
        var selectedRows = gridOptions.api.getSelectedRows();
        var selectedRowsIDs = '';
        selectedRows.forEach(function (selectedRow, index) {

            $('#btn-categorize').removeClass('disabled');
            $('#btn-categorize-dropdown').removeClass('disabled');
            $('#btn-supprimer-operations').removeClass('disabled');

            if (index > 0) {
                selectedRowsIDs += ',';
            }

            selectedRowsIDs += selectedRow.id;
            console.log('Valider les lignes id : ', selectedRowsIDs);

            var arr = selectedRowsIDs.split(',');

            $('span#selectedRowIds').html(selectedRowsIDs);    
            $('span#resultValue').html(arr.length);
            $('span#totalValue').html('');
            $('#btn-changer-cat').html('<a href="/operations/validate/' + selectedRowsIDs + '" >Catégoriser opération(s) : ' + selectedRowsIDs + '</a>');
            $('#btn-pointer-operations').removeClass('disabled');
        });
    }
    // let the grid know which columns and what data to use
    /*const gridOptions = {
        columnDefs: columnDefs,
        rowSelection: 'multiple', // allow rows to be selected
        animateRows: true, // have rows animate to new positions when sorted
        //isExternalFilterPresent: isExternalFilterPresent,
        //doesExternalFilterPass: doesExternalFilterPass,
        //sideBar: 'columns',
         // example event handler
        onCellClicked: params => {
            console.log('cell was clicked', params)
        },
        //onSelectionChanged: onSelectionChanged,
        onFilterChanged: params => {
            console.log('onFilterChanged is called')
            getTotalDsplayedRows();
        }
        
    };*/
    // Pass gridOptions to createGrid

    // Grid Options: Contains all of the grid configurations
    // Your Javascript code to create the grid
    /*document.addEventListener('DOMContentLoaded', () => {
        const gridDiv = document.querySelector('#TicketsGrid');
        new agGrid.Grid(gridDiv, gridOptions);

        agGrid.simpleHttpRequest({
            url: listTickets
        }).then(response => {
            gridOptions.api.setRowData(response.data);
        });
    }); */

    // Grid Options: Contains all of the grid configurations
    const gridOptions = {
    // Row Data: The data to be displayed.
        rowData: [
            { mission: "Voyager", company: "NASA", location: "Cape Canaveral", date: "1977-09-05", rocket: "Titan-Centaur ", price: 86580000, successful: true },
            { mission: "Apollo 13", company: "NASA", location: "Kennedy Space Center", date: "1970-04-11", rocket: "Saturn V", price: 3750000, successful: false },
            { mission: "Falcon 9", company: "SpaceX", location: "Cape Canaveral", date: "2015-12-22", rocket: "Falcon 9", price: 9750000, successful: true }
        ],
        // Column Definitions: Defines & controls grid columns.
        columnDefs: [
            { field: "mission" },
            { field: "company" },
            { field: "location" },
            { field: "date" },
            { field: "price" },
            { field: "successful" },
            { field: "rocket" }
        ]
    };

    // setup the grid after the page has finished loading
    document.addEventListener('DOMContentLoaded', () => {
        const gridDiv = document.querySelector('#TicketsGrid');
        //new agGrid.Grid(gridDiv, gridOptions);

        agGrid.simpleHttpRequest({
            url: listTickets
        }).then(response => {
            gridOptions.api.setRowData(response.data);
            renderCells();
            autoSizeAll(true);
        });
        new agGrid.Grid(gridDiv, gridOptions);
    }); 
    $(document).ready(function () {
        $(".page-title h1").text("Mes tickets");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");
    })
</script>

<div class="container-page">
    <div class="btn-group" role="group">
        <a class="btn glossy-button" href="/tickets/add" role="button">Créer une demande</a>
    </div>
    <br>
    <!-- Your grid container -->
    <div id="TicketsGrid" class="ag-theme-quartz" style="height: 500px"></div>
</div>  
<!--script>

    $.ajax({
        url: listTickets,
        method: "get",
        dataType: "json",
        data: {}
    }).done(function (response) {
        gridOptions.api.setRowData(response.data);
        const gridDiv = document.querySelector('#TicketsGrid');
        agGrid.createGrid(gridDiv, gridOptions);
    }).fail(function (response) {
    }); 

    const gridDiv = document.querySelector('#TicketsGrid');
    agGrid.createGrid(gridDiv, gridOptions);
</script-->
{% endblock %}