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

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

{% block stylesheets %}
<link rel="stylesheet" href="/static/assets/css/style.css">
<style>
  .float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#337ab7;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}
.my-float{
	margin-top:22px;
}
</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">
          <h6 class="h2 text-white d-inline-block mb-0"></h6>
          <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" style="background-color: #337ab7;color: white; font-family: 'Arial', sans-serif";>
              <li class="breadcrumb-item">Application View</li>
            </ol>
          </nav>
          <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
            <a href="/dashboardsssss/{{client}}">
            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
              <li class="breadcrumb-item">System View</li>
            </ol>
          </a>
          </nav>

          <!-- <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
            <a href="/notesTable/{{client}}">
            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
              <li class="breadcrumb-item">Add Notes</li>
            </ol>
          </a>
          </nav>
           -->
        
        </div>
        <div class="col-lg-2 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 class="col-lg-4 col-7 text-right" >
          <u><a href="/download/{{client}}" style="text-align: right; font-weight: bold;">Backup Overview Report</a></u>
          <!-- <a href="#" class="btn btn-sm btn-neutral">Filters</a> -->
        </div>
      </div>
    </div>
    <div class="row">
      {% for key,value in active_data.items() %}
      <div class="col-xl-4 col-md-4">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                {% if key == "License Valid Until" %}

                <a data-id="{{client}}" class="choose" id="colo" style="cursor: pointer;">
                  <u>
                    <h5 class="card-title  mb-0" style="text-transform: capitalize;font-size: small; color: black;">{{key}}
                    </h5>
                  </u>
                  {% if value[0]=="0" %}
                  <span class="h2 font-weight-bold mb-0" style="color: {{value[1]}};">N/A</span>
                  {% else %}
                    <span class="h2 font-weight-bold mb-0" style="color: {{value[1]}};">{{value[0]}}</span>
                  {% endif %}  
                </a>
                {% elif key == "Active Users" %}
                <a data-id="{{client}}" class="active" id="colo" style="cursor: pointer;">
                  <u>
                    <h5 class="card-title mb-0" style="color: black;" >{{key}}</h5>
                  </u>
                  {% if value[0]=="0" %}
                  <span class="h2 font-weight-bold mb-0">N/A</span>
                  {% else %}
                  <span class="h2 font-weight-bold mb-0">{{value[0] | add_comma}}</span>
                  {% endif %}  
                </a>

                {% elif key == "AAD Auth Token" %}
                <h5 class="card-title mb-0">{{key}}</h5>
                  {% if value[0]=="0" %}
                  <span class="h2 font-weight-bold mb-0" style="color: {{value[1]}};">N/A</span>
                  {% else %}
                  <span class="h2 font-weight-bold mb-0"style="color: {{value[1]}};">{{value[0]}}</span>
                  {% endif %}  
              

                  {% elif key == "SSL Certificate Valid Until" %}
                  <h5 class="card-title mb-0">{{key}}</h5>
                    {% if value[0]=="0" %}
                    <span class="h2 font-weight-bold mb-0" style="color: {{value[1]}};">N/A</span>
                    {% else %}
                    <span class="h2 font-weight-bold mb-0"style="color: {{value[1]}};">{{value[0]}}</span>
                    {% endif %}  

                    {% elif key == "Dedup Backup Policy" %}
                    {% if value[0] == "No Policies" %}
                    <h5 class="card-title mb-0" style="color: black;" >{{key}}</h5>
                      {% if value[0]=="0" %}
                        <span class="h2 font-weight-bold mb-0">N/A</span>
                        {% else %}
                        <span class="h2 font-weight-bold mb-0">{{value[0]}}</span>
                        {% endif %} 

                    {% else %}
                    <a data-id="{{client}}" class="dedupDisabled" id="colo" style="cursor: pointer;">
                      <u>
                        <h5 class="card-title mb-0" style="color: black;" >{{key}}</h5>
                      </u>
                        {% if value[0]=="0" %}
                        <span class="h2 font-weight-bold mb-0">N/A</span>
                        {% else %}
                        <span class="h2 font-weight-bold mb-0">{{value[0]}}</span>
                        {% endif %}
                    {% endif %}  
                    </a>



                    {% elif key == "OneDrive Id MisMatched Users" %}
                    {% if value[0] == "No Users" %}
                    <h5 class="card-title mb-0" style="color: black;" >{{key}}</h5>
                      {% if value[0]=="0" %}
                        <span class="h2 font-weight-bold mb-0">N/A</span>
                        {% else %}
                        <span class="h2 font-weight-bold mb-0">{{value[0]}}</span>
                        {% endif %} 

                    {% else %}
                    <a data-id="{{client}}" class="oneDriveMisMatch" id="colo" style="cursor: pointer;">
                      <u>
                        <h5 class="card-title mb-0" style="color: black;" >{{key}}</h5>
                      </u>
                        {% if value[0]=="0" %}
                        <span class="h2 font-weight-bold mb-0">N/A</span>
                        {% else %}
                        <span class="h2 font-weight-bold mb-0">{{value[0]}}</span>
                        {% endif %}
                    {% endif %}  
                    </a>

                {% else %}
                <h5 class="card-title mb-0">{{key}}</h5>
                {% if value[0]=="0" %}
                  <span class="h2 font-weight-bold mb-0">N/A</span>
                  {% else %}
                  <span class="h2 font-weight-bold mb-0">{{value[0]}}</span>
                  {% endif %}  
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<div class="container-fluid mt--6">
  <div class="row">
    <div class="col-xl-8">
      <div class="card">
        <div class="card-header border-0">
          <div class="row align-items-center">
            <div class="col">
              <h3 class="mb-0">Data Protection Scorecard</h3>
            </div>
          </div>
        </div>
        <div class="table-responsive">
          <!-- Projects table -->
          <table class="table align-items-center table-flush">
            <thead class="thead-light">
              <tr>
                <th scope="col">Details</th>
                <th scope="col">Total Number</th>
                <th scope="col">Percentage</th>
              </tr>
            </thead>
            <tbody>
              {% for key, value in device.items() %}
              <tr>
                <th scope="row">
                  {{key}}
                </th>
                <td>
                  {{value[0] | add_comma}}
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    {% if key != "Number of Active Users" %}
                    <span class="mr-2">{{value[1] |round(2)}}%</span>
                    <div>
                      {% if value[1] < 75 %} <div class="progress">
                        <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60"
                          aria-valuemin="0" aria-valuemax="100" style="width: {{value[1]}}%;"></div>
                    </div>
                    {% else %}
                    <div class="progress">
                      <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="60"
                        aria-valuemin="0" aria-valuemax="100" style="width: {{value[1]}}%;"></div>
                    </div>
                    {% endif %}
                  </div>
                  {% endif %}
        </div>
        </td>
        </tr>
        {% endfor %}

        </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-xl-4">
    <div class="card">
      <div class="card-header border-0">
        <div class="row align-items-center">
          <div class="col">
            <h3 class="mb-0">Storage Settings</h3>
          </div>
        </div>

      </div>
      <div class="table-responsive">
        <!-- Projects table -->
        <table class="table align-items-center table-flush">
          <thead class="thead-light">
            <tr>
              <th scope="col">Details</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            {% if MuxType == "Mux" %}
            <tr>
              <th scope="row">
                Common Storage Bucket
              </th>
              <td>
                <select id="dropdown" class="form-control" data-cloudname="{{ cloudName }}">
                  {% for person in MuxDetails %}
                  <option value="{{ person.odbLoginId}}">{{ person.odbLoginId }}</option>
                  {% endfor %}
                </select>
              </td>
            </tr>
	    {% if uniqueIdLength > 10 %}
	    	<tr>
              <th scope="row">
                Greater than 10 buckets
              </th>
              <td>
		      <a href="/bucketsList/{{client}}">Click here</a>
              </td>
            </tr>
	    {% else %}
	    {% endif %}


            <tr>
              <th scope="row">
                Total Storage
              </th>
              <td>
                <span id="street"></span>
              </td>
            </tr>
            {% for key, value in store.items() %}
            <tr>
              {% if key == "Storage Target" %}
              <th scope="row">
                {{key}}
              </th>
              <td>
                {{value[0]}}
              </td>
              {% endif %}
            </tr>
            <tr>
              {% if key == "Type"  %}
              <th scope="row">
                Storage Type
              </th>
                {% if value[0] == 'MIX' %}
                <td>
                  MIX/NON-MUX
                </td>
                {% else %}
                <td>
                  {{value[0]}}
                </td>
                {% endif %}
              {% endif %}
            </tr>
            
            {% endfor %}
            <tr>
              <th scope="row">
                Storage Used
              </th>
              <td>
                <span id="city"></span>
              </td>
            </tr>
            <tr>
              <th scope="row">
                Storage Remaining 
              </th>
              <td>
                <span id="state"></span>
              </td>
            </tr>

            <tr>
              <th scope="row">
                Storage Used in %
              </th>
              <td>
                <span id="info"></span>
              </td>
            </tr>
            {% for key, value in store.items() %}
            {% if key == "usersMux" %}
            <tr>
              <th scope="row">
                Users With No Storage Buckets
              </th>
              <td>
                {% if muxFileUserSize != 0 %}
                <a data-id="{{cloudName}}" class="MuxUsers" id="colo" style="cursor: pointer;">
                  <span class="badge badge-dot mr-4">
                    <u>{{muxFileUserSize}}</u>
                  </span>
                </a>
                {% else %}
                <p>No Users</p>
                {% endif %}
              </td>
            </tr>
            {% endif %}
            {% endfor %}
            {% else %}
            {% for key, value in store.items() %}
            <tr>
              <th scope="row">
                {{key}}
              </th>
              <td>
                {{value[0]}}
              </td>
            </tr>
            {% endfor %}
            {% endif %}

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

<div>
  <a href="/notesTable/{{client}}" class="float">
    <i class="fa fa-plus my-float"></i>
    </a>
</div>

<div class="modal fade" id="usersmore" 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">Users having no storage buckets</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="mux-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">License Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="license-body">
        ...
      </div>

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



<div class="modal fade" id="activeModal" 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">Active Users Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="active-body">
        ...
      </div>

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

<div class="modal fade" id="OneDriveModal" 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">OneDrive Mixmatch Users</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="Onedrive-body">
        ...
      </div>

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


<div class="modal fade" id="dedupModal" 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">Backup Policy</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="dedup-body">
        ...
      </div>

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

{% endblock content %}
{% block javascripts %}

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

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


<script type='text/javascript'>
  $(document).ready(function () {
    $('.oneDriveMisMatch').click(function () {
      var userid = $(this).data('id');
      $.ajax({
        url: '/oneDriveMisMatch',
        type: 'post',
        data: { userid: userid },
        success: function (data) {
          $('.Onedrive-body').html(data);
          console.log("Line 347");
          $('.Onedrive-body').append(data.htmlresponse);
          console.log("Line 349");
          $('#OneDriveModal').modal('show');
          console.log("Line 351");
        }
      });
    });
  });
</script>

<script> $(document).ready(function () {
    var dropdown = $('#dropdown');
    dropdown.change(function () {
      var selection = dropdown.val();
      var cloudname = dropdown.data('cloudname');
      $.ajax({
        url: '/get_info',
        data: {
          selection: selection,
          cloudname: cloudname
        },
        type: 'POST',
        success: function (response) {
          $('#odbLogin').text(response.odbLoginId);
          let myString = response.Details.TotalStorage;
	  console.log(myString);
          let total = myString.split(' ');
          let numericPart = total[0];
          let nonNumericPart = total[1];
          numericPart = numericPart.replace(/^0+/, '').replace(/^0/, '0.');
          console.log(numericPart)
          if (numericPart >= 1024) {
            let numericPartTb = Number(numericPart) / 1024;
            let totalStorage = numericPartTb.toFixed(2) + ' ' + 'TB';
	    console.log(totalStorage);
            $('#street').text(totalStorage);
          } else {
            let totalStorage = numericPart + ' ' + nonNumericPart;
            $('#street').text(totalStorage);
          }
          let usedStore = response.Details.UsedStorage;
          let totalUsed = usedStore.split(' ');
          let numericPartUsed = totalUsed[0];
          let nonNumericPartUsed = totalUsed[1];
          numericPartUsed = numericPartUsed.replace(/^0+/, '').replace(/^0/, '0.');
          if (numericPartUsed >= 1024) {
            let numericPartUsedTB = Number(numericPartUsed) / 1024;
            let UsedStorageNew = numericPartUsedTB.toFixed(2).toString() + ' ' + 'TB';
            $('#city').text(UsedStorageNew);
          } else {
            let UsedStorageNew = numericPartUsed + ' ' + nonNumericPart;
            $('#city').text(UsedStorageNew);
          }
          
          let freeStorage = response.Details.FreeStorage;
          let totalfree = freeStorage.split(' ');
          let freeNumerPart = totalfree[0];
          let freenonNumericPart = totalfree[1];
          freeNumerPart = freeNumerPart.replace(/^0+/, '').replace(/^0/, '0.');
          if (freeNumerPart >= 1024) {
            let freeNumerPartTB = Number(freeNumerPart) / 1024;
            let freeNumerPartNew = freeNumerPartTB.toFixed(2).toString() + ' ' + 'TB';
            $('#state').text(freeNumerPartNew);
          } else {
            let FreeStorageNew = freeNumerPart + ' ' + freenonNumericPart;
            $('#state').text(FreeStorageNew);
          }
          
          $('#zip').text(response.Details.Remaining);
          let percentageStorage = response.Details.percentage + "%";
          let percentageValue = response.Details.percentage;
          if (percentageValue > 90) {
              $('#info').css('color', 'red');
            } else {
              $('#info').css('color', 'green'); // Reset color if it was previously set to red
            }
          $('#info').text(percentageStorage);
        },
        error: function (error) {
          console.log(error);
        }
      });
    }); // Trigger change event on page load   
    dropdown.trigger('change');

  });
</script>

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



<script type='text/javascript'>
  $(document).ready(function () {
    $('.dedupDisabled').click(function () {
      var userid = $(this).data('id');
      $.ajax({
        url: '/dedupDisabled',
        type: 'post',
        data: { userid: userid },
        success: function (data) {
          $('.dedup-body').html(data);
          $('.dedup-body').append(data.htmlresponse);
          $('#dedupModal').modal('show');
        }
      });
    });
  });
</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 %}