{% 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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">
                        <a href="{{url_for('admin.dashboard')}}">
                            <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>
                        </a>
                    </nav>
                    <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" id="countperselection">Customer Name: <span id="accountCount">{{agentName}}</span></li>
                        </ol>
                    </nav>
                </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>

<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">
                                <div class="card-body col-xl-7">
                                    <div class="card">
                                        <div class="progress-wrapper">
                                            <div class="progress-info">
                                                <div class="progress-label">
                                                    <span>Agent Status</span>
                                                </div>
                                                <div class="progress-percentage">
                                                    <span>{{agentStatus}}</span>
                                                </div>
                                            </div>
                                            {% if agentStatus == "Agent Created" %}
                                            <div class="progress">
                                                <div class="progress-bar bg-default" role="progressbar"
                                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                    style="width: 100%;">
                                                </div>
                                            </div>
                                            {% elif agentStatus == "Approved" %}
                                            <div class="progress">
                                                <div class="progress-bar bg-default" role="progressbar"
                                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                    style="width: 60%;">
                                                </div>
                                            </div>
                                            {% else %}
                                            <div class="progress">
                                                <div class="progress-bar bg-default" role="progressbar"
                                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                    style="width: 20%;">
                                                </div>
                                            </div>
                                            {% endif %}
                                        </div>


                                        <div class="col-xl-6">
                                            <div style="width: 18rem;">
                                                <div class="card card-stats mb-4 mb-lg-0">
                                                    <div class="row">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col">
                                                                    <h5
                                                                        class="card-title text-uppercase text-muted mb-0">
                                                                        Status
                                                                    </h5>
                                                                    <span
                                                                        class="h2 font-weight-bold mb-0">{{agentStatus}}
                                                                    </span>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div
                                                                        class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                                                        <i class="fas fa-chart-bar"></i>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                            <!-- <p class="mt-3 mb-0 text-muted text-sm">
                                                                <span class="text-success mr-2"> </span>
                                                                <span class="text-nowrap">Approval Pending From :</span>
                                                                <span class="text-nowrap">Praveen</span>
                                                            </p> -->
                                                        </div>

                                                    </div>


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

                                    </div>
                                </div>

                                <br>
                                <div class="col-xl-5">
                                    <div class="card">
                                        <div class="table-responsive">
                                            <!-- Projects table -->
                                            <table class="table align-items-center table-flush">
                                                <thead class="thead-light">
                                                    <tr>
                                                        <th scope="col">Agent Details</th>
                                                        <th scope="col"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <th scope="row">
                                                            Agent Name
                                                        </th>
                                                        <td>
                                                            <h4>{{agentName}}</h4>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">
                                                            Agent Fqdn
                                                        </th>
                                                        <td>
                                                            <h4>{{agentFqdn}}</h4>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">
                                                            Agent Version
                                                        </th>
                                                        <td>
                                                            <h4>{{agentVersion}}</h4>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <th scope="row">
                                                            Agent Requested On
                                                        </th>
                                                        <td>
                                                            <h4>{{agentRequestTime | timestampToDateTime}}</h4>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">
                                                            Agent Approved By
                                                        </th>
                                                        
                                                        <td>
                                                            <h4>{{approvedBy}}</h4>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">
                                                            Agent Approved On
                                                        </th>
                                                        <td>
                                                            <h4>{{approvedOn | timestampToDateTime}}</h4>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">
                                                            Agent Created On
                                                        </th>
                                                        {% if agentStatus == "Agent Created" %}
                                                        <td>
                                                            <h4>{{agentDeliveredOn | timestampToDateTime}}</h4>
                                                        </td>
                                                        {% else %}
                                                        <td>
                                                            <h4>Agent yet to be created</h4>
                                                        </td>
                                                        {% endif %}
                                                    </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                {% if agentStatus == "Agent Created" %}
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="card">
                                            <div class="table-responsive">
                                                <div>
                                                    <table class="table align-items-center">
                                                        <thead class="thead-light">
                                                            <tr>
                                                                <th scope="col">
                                                                    File Name
                                                                </th>
                                                                <th scope="col">
                                                                    Link
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="list">

                                                            <tr>
                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <span class="mb-0 text-sm">DMG file</span>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <input type="text" style="width: 900px;"
                                                                                value="{{dmgfile}}" readonly>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                            </tr>

                                                            <tr>
                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <span class="mb-0 text-sm">PKG file</span>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <input type="text" style="width: 900px;"
                                                                                value="{{pkgFile}}" readonly>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                            </tr>
                                                            <tr>
                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <span class="mb-0 text-sm">Parablu_EPA.zip
                                                                                file</span>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <input type="text" style="width: 900px;"
                                                                                value="{{updateFile}}" readonly>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                            </tr>
                                                            <tr>
                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <span class="mb-0 text-sm">Update.xml
                                                                                file</span>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                                <th scope="row" class="name">
                                                                    <div class="media align-items-center">
                                                                        <div class="media-body">
                                                                            <input type="text" style="width: 900px;"
                                                                                value="{{parablZip}}" readonly>
                                                                        </div>
                                                                    </div>
                                                                </th>

                                                            </tr>

                                                        </tbody>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



{% endblock content %}


{% block javascripts %}
<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 %}