{% extends 'layouts/base.html' %}

{% block title %} {{cloudName}} {% endblock title %}

{% block stylesheets %}
<link rel="stylesheet" href="/static/assets/css/style.css">
<link rel="stylesheet" href="/static/assets/css/dataTables.min.css">
<!-- <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"> -->
<style>
    #colo {
        color: brown;
    }

    /* CSS link color (red) */
    #colo:hover {
        color: blue;
    }

    /* CSS link hover (green) */


    .sticky-header {
    position: sticky;
    top: 0;
    z-index: 999; /* Adjust this value if necessary */
    background-color: #fff; /* Set the desired background color for the sticky header */
    /* Add any additional styling for the sticky header */
    }

</style>

{% endblock stylesheets %}

{% block content %}
<div class="header bg-primary pb-6">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">

                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item">Total Accounts : {{counts}}</li>
                            <!-- <li>{{session['accesstype']}}</li> -->
                        </ol>
                    </nav>

                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark" data-toggle="tooltip"
                            data-placement="bottom" title="Dashboard">
                            <li class="breadcrumb-item"><i class="fas fa-home"></i></li>
                        </ol>
                    </nav>
                    {% if session['accesstype'] == "admin" %}
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <a data-id="hello" class="addClient" style="cursor: pointer;">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark" data-toggle="tooltip"
                                data-placement="bottom" title="Add or Modify Owners here">
                                <li class="breadcrumb-item">
                                    Manage
                                </li>
                            </ol>
                        </a>
                    </nav>
                    {% endif %}

                </div>
                <div class="col-lg-6 col-7 text-right">
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                        <h3>Session time: <span id="session-time"></span></h3>
                    </nav>
                </div>
            </div>
            <!-- Card stats -->
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="empModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>

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


<!-- Modal for the add and edit owners in client -->
<div class="modal fade" id="ownerClient" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Manage</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>

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


<!-- Modal -->
<div class="modal fade" id="chooseModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Choose the View</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>

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

<!-- Page content -->
<div class="container-fluid mt--6">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="row">
                                <h3 class="mb-0">Account Details - </h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <!-- Projects table -->
                    <table id="example" class="display table table-striped table-bordered">
                        <thead class="sticky-header">

                            <tr>
                                <th>Cloud Name</th>
                                <th>Machine Status</th>
                                <th>Alert</th>
                                
                                <!-- <th>Server Type</th> -->
                                <th>
                                    <select id="server-select" name="server-select">
                                        <option value="">Server Type</option>
                                        <option value="Testing/Poc/Demo">Testing/Poc/Demo</option>
                                        <option value="Production">Production</option>
                                    </select>
                                    </th> 

                                <th>
                                    <select id="owner-select" name="owner-select">
                                        <option value="">All Owners</option>
                                        {% for owner in owners %}
                                        <option value="{{ owner }}">{{ owner }}</option>
                                        {% endfor %}
                                    </select>
                                </th> 
                                    <!-- <th>Owners</th> -->
                                <th>Last Updated On</th>
                                <th>Last Updated Status</th>
                            </tr>
                        </thead>
                       
                        <tbody>
                            {% for customer in datas %}
                            <tr>
                                <td scope="row" class="{{customer['CloudName']}}">
					<b> <u><a href="/dashboard/{{customer['CloudName']}}" data-toggle="tooltip"
                                            data-placement="bottom" title="{{customer['CloudName']}}"
								    style="cursor: pointer;">{{customer['CloudName']}}</a></u><b>
                                </td>
                                <td scope="row" class="{{customer['CloudName']}}">
                                    <u><a href="/dashboard/{{customer['CloudName']}}" data-toggle="tooltip"
                                            data-placement="bottom" title="{{customer['CloudName']}}"
                                            style="cursor: pointer;">{{customer['CloudName']}}</a></u>
                                </td>
                                
                                <td class="">
                                    <u><a data-id="{{customer['CloudName']}}" class="user" style="cursor: pointer;">
                                            <i
                                                class="fas fa-circle text-{{colorsss[customer['CloudName']]}} mr-3"></i>
                                            {{colorsss[customer['CloudName']] | capitalize_first_letter}}
                                        </a></u>
                                </td>
                                <td class="{{customer['CloudName']}}">
                                    {% set machineType = cloudname_to_type.get(customer['CloudName'])%}
				    {% if machineType == "prod" %}
                                    	Production
				     {% else %}
				     	Testing/Poc/Demo
				     {% endif %}
                                  </td>
                                <td class="{{customer['CloudName']}}">
                                    {% set cloud_owner = cloudname_to_owner.get(customer['CloudName'])%}
                                    {{ cloud_owner }}
                                </td>

                                <td>
                                    {% set cloud_ownerDate = cloudname_to_date.get(customer['CloudName'])%}
                                        {% if cloud_ownerDate is not none %}
                                            {{cloud_ownerDate}}
                                        {% else %}
                                            {{formatted_time}}
                                        {% endif %}
                                </td>
                                <td id="status-{{customer['System Name']}}"></td>
                            </tr>
                            {% endfor %}
                           
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    {% include "includes/footer.html" %}

</div>
{% endblock content %}


{% block javascripts %}
<!-- 
<script>
    $(document).ready(function() {
    $('#example').DataTable(
        {
        "lengthMenu": [[50, 100], [50, 100]],
        "pageLength": 50
        }
    );
    
});
</script> -->
<script>
    const rows = document.querySelectorAll('tbody tr');

    rows.forEach(row => {
        const time = row.cells[5].textContent.trim();
        const dateTime = new Date(time);
        const now = new Date();
        const diffInMs = now - dateTime;
        const diffInHrs = Math.floor(diffInMs / (1000 * 60 * 60));

        if (diffInHrs <= 6) {
            row.cells[6].textContent = 'Running Successfully';
            row.cells[6].style.color = 'green';
            row.cells[1].textContent = "Active"
            row.cells[1].style.color = 'green';
        } else if (diffInHrs >= 6 && diffInHrs <= 168) {
            row.cells[6].textContent = 'Down since ' + diffInHrs + ' hours';
            row.cells[6].style.color = 'red';
            row.cells[1].textContent = "Active"
            row.cells[1].style.color = 'green';
        }
        else {
            row.cells[6].textContent = 'Down since ' + diffInHrs + ' hours';
            row.cells[6].style.color = 'red';
            row.cells[1].textContent = "Expired"
            row.cells[1].style.color = 'red';
        }
    });
</script>


<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#example').DataTable(
    {
        "searching": true,
        "fixedHeader": true,
        "lengthMenu": [],
        "paging":false,
	"search": true
    }
        );
            
        $('#owner-select').on('change', function () {
            var owner = $(this).val();
            console.log(owner);
            if (owner) {
                table.column(4).search('^' + owner + '$', true, false).draw();
            } else {
                table.column(4).search('').draw();
            }
        });


        $('#server-select').on('change', function () {
            var owner = $(this).val();
            console.log(owner);
            if (owner) {
                table.column(3).search('^' + owner + '$', true, false).draw();
            } else {
                table.column(3).search('').draw();
            }
        });

        $('select').on('click',function(ev){      
    ev.stopPropagation()
});
    });
</script>


<script type='text/javascript'>
    $(document).ready(function () {
        $('.user').click(function () {
            var userid = $(this).data('id');
            console.log("This is the userid"+userid)
            $.ajax({
                url: '/color',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.modal-body').html(data);
                    $('.modal-body').append(data.htmlresponse);
                    $('#empModal').modal('show');
                }
            });
        });
    });
</script>

<script type='text/javascript'>
    $(document).ready(function () {
        $('.choose').click(function () {
            var userid = $(this).data('id');
            $.ajax({
                url: '/chooseModal',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.modal-body').html(data);
                    $('.modal-body').append(data.htmlresponse);
                    $('#chooseModal').modal('show');
                }
            });
        });
    });
</script>

<script type='text/javascript'>
    $(document).ready(function () {
        $('.addClient').click(function () {
            var userid = $(this).data('id');
            $.ajax({
                url: '/addOwners',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.modal-body').html(data);
                    $('.modal-body').append(data.htmlresponse);
                    $('#ownerClient').modal('show');
                }
            });
        });
    });
</script>

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script>
    $(document).ready(function () {
        $("input[name='query']").keyup(function () {
            var query = $(this).val();
            $.ajax({
                type: "POST",
                url: "/suggest",
                data: { query: query },
                success: function (data) {
                    $("ul").empty();
                    $.each(data, function (index, item) {
                        $("ul").append("<li>" + item.name + " (" + item.city + ")" + "</li>");
                    });
                }
            });
        });
    });
</script>

<script>
    function searchedSharepointDevices() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("dashboardTable");
        filter = input.value;
        table = document.getElementById("devicesListSharepointTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {

                //                         txtValue = td.textContent || td.innerText;
                txtValue = td.className;
                // console.log(txtValue);
                if (txtValue.indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>


<script>
    function updateSessionTime() {
        var start = new Date('{{ session.logged_in_at }}' * 1000);  // Convert Unix timestamp to JavaScript date
        var now = new Date();
        var elapsed = now - start;
        var hours = Math.floor(elapsed / (1000 * 60 * 60));
        var minutes = Math.floor((elapsed / (1000 * 60)) % 60);
        var seconds = Math.floor((elapsed / 1000) % 60);
        var sessionTime = hours + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
        document.getElementById('session-time').textContent = sessionTime;
    }
    setInterval(updateSessionTime, 1000);  // Update session time every second
</script>

{% endblock javascripts %}
