{% extends "./template.html" %}
{% block content %}
    {% load static %}
    <style>
        .card-body {
            overflow: scroll;
        }
    </style>
    <script>
        function on_page_load() {
            //EXTRACT administration tasks
            $.ajax({
                url: '/dashboard/administration_task/',
                data: {},
                dataType: 'HTML',
                type: 'GET',
                success: function(data) {
                    $("#administration_task").html(data);
                },
                error: function() {
                    new_error("Sorry, but the administration tasks has not loaded correctly");
                }
            });

            //EXTRACT ready for approval
            $.ajax({
                url: '/dashboard/ready_for_approval/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#ready_for_approval').html(data);
                },
                error: function () {
                    new_error("Sorry, but the ready for approval has had issues loading.");
                }
            });
            //EXTRACT Group ACTIVE PROJECTS
            $.ajax({
                url: '/dashboard/group_active_projects/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#group_active_projects').html(data);
                },
                error: function(){
                    new_error("Sorry, the 'Group Active Projects' had issues loading.");
                }
            });
            //EXTRACT Group ACTIVE TASKS
            $.ajax({
                url: '/dashboard/group_active_tasks/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#group_active_tasks').html(data);
                },
                error: function(){
                    new_error("Sorry, the 'Group Active Tasks' had issues loading");
                }
            });
            //EXTRACT Group Request for change
            $.ajax({
                url: '/dashboard/group_request_for_change/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#group_request_for_change').html(data);
                },
                error: function(){
                    new_error("Sorry, the 'Group Request for Change' had issues loading");
                }
            });
            $.ajax({
                url: '/dashboard/active_quotes/',
                data: {},
                dataType: "HTML",
                type: "GET",
                success: function(data) {
                    $("#active_quotes").html(data);
                },
                error: function() {
                    new_error("Sorry, the active quotes could not load");
                }
            });
            $.ajax({
                url: '/dashboard/active_requirements/',
                data: {},
                dataType: "HTML",
                type: "GET",
                success: function(data) {
                    $("#active_requirements").html(data);
                },
                error: function() {
                    new_error("Sorry, the 'Active Requirements' dashboard widget could not load");
                }
            });
            $.ajax({
                url: '/dashboard/active_projects/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#active_projects').html(data);
                },
                error: function(){
                    new_error("Sorry the active projects did not load correctly");
                }
            });
                                    $.ajax({
                url: '/dashboard/active_tasks/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#active_tasks').html(data);
                },
                error: function(){
                    new_error("Sorry, the 'Active Tasks' had issues loading");
                }
            });
            $.ajax({
                url: '/dashboard/group_opportunities/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#group_opportunities').html(data);
                },
                error: function(){
                    new_error("Sorry, the 'Group Opportunities' had issues loading");
                }
            });
            $.ajax({
                url: '/dashboard/opportunities/',
                data: {},
                dataType: 'HTML',
                type:'GET',
                success: function(data) {
                    $('#opportunities').html(data);
                },
                error: function(){
                    new_error("Sorry, the 'Opportunities' had issues loading");
                }
            });

            console.log("Active bugs");
            $.ajax({
                url: '/dashboard/active_bugs/',
                data: {},
                dataType: 'JSON',
                type:'GET',
                success: function(data) {
                    render_bug_client_bugs(data, "active_bugs");
                },
                error: function(){
                    //Note that widget could not connect to bugzilla
                    $("active_bugs").html(`<p>We are sorry, we could not connect to one or more of your bug clients`);
                }
            });
        }
    </script>
    <body onload="on_page_load()">
        <!-- Showing the administration tasks -->
        <div id="administration_task"></div>

        <!-- Being able to filter objects -->
        <div class="card mt-4">
            <div class="card-header">
                <h1>NearBeach Dashboard</h1>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label for="filter_tables">Filter dashboard</label>
                    <input id="filter_tables" type="text" placeholder="Filter..." onkeyup="apply_filters()" style="width: 100%;">
                </div>

                <div id="unsupported_browser"></div> <!-- Where we place any unsupported browser errors -->

            </div>

        </div>



        <div id="ready_for_approval"></div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>My Projects</h2>
            </div>
            <div class="card-body" id="active_projects">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>My Tasks</h2>
            </div>
            <div class="card-body" id="active_tasks">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Quotes</h2>
            </div>
            <div class="card-body" id="active_quotes">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Requirements</h2>
            </div>
            <div class="card-body" id="active_requirements">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Opportunities</h2>
            </div>
            <div class="card-body" id="opportunities">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Group Projects</h2>
            </div>
            <div class="card-body" id="group_active_projects">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Group Tasks</h2>
            </div>
            <div class="card-body" id="group_active_tasks">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Group Opportunities</h2>
            </div>
            <div class="card-body" id="group_opportunities">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Group Request for Change</h2>
            </div>
            <div class="card-body" id="group_request_for_change">
                Loading...
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h2>Active Bug Clients</h2>
            </div>
            <div class="card-body" id="active_bugs">
                Loading... please note this widget could take a while to load
            </div>
        </div>

        <script>
            function apply_filters() {
                //Varibales used in the function
                var input,
                    filter,
                    tr,
                    i;

                //Get the value from the search box
                input = document.getElementById("filter_tables");

                //We want to compare apples with apples, make all uppercase
                filter = input.value.toUpperCase();

                //Get all table rows
                tr = document.getElementsByTagName("tr");

                for (i = 0; i < tr.length; i++) {
                    //If the <tr> contains any values of the filter OR has class header, we want to show
                    if (tr[i].innerHTML.toUpperCase().indexOf(filter) > -1 || tr[i].className=="header") {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        </script>
    </body>
{% endblock %}
