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

{% block title %} Dashboard {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
<style>
#colo { color: brown; } /* CSS link color (red) */
#colo:hover { color: blue; } /* CSS link hover (green) */
</style>
{% endblock stylesheets %}

{% block content %}

<!-- Header -->
<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">  
                                <h5 class="card-title text-uppercase text-muted mb-0">Total Accounts</h5>
                                <span class="h2 font-weight-bold mb-0">{{counts}}</span>
                            
                            </li>
                        </ol>
                    </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"><a href="{{url_for('admin.dashboard')}}"><i class="fas fa-home"></i></a></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="Add or Modify Owners here">
                            <li class="breadcrumb-item"> <a data-id="hello" class="addClient" style="cursor: pointer;">
                                <i class="fas fa-plus">Add or Modify Owners</i>
                            </a>
                            </li>
                        </ol>
                    </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 class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </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">Add or Modify Owners</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 class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </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 class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </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">
                            <h3 class="mb-0">Account Details</h3>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <!-- Projects table -->
                    <table class="table align-items-center table-flush" id="devicesListSharepointTable">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" style="text-transform: capitalize; font-size: small;">Account Name</th>
                                <th scope="col" style="text-transform: capitalize; font-size: small;">Status</th>
                                <th scope="col" style="font-size: small;">Spoc</th>
                                <th scope="col" style="text-transform: capitalize; font-size: small;">Alert Received On</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for customer in datas %}
                            <tr>
                                <td scope="row" class="{{customer['System Name']}}">
                                    <a href="/dashboard/{{customer['System Name']}}" data-toggle="tooltip" data-placement="bottom" title="{{customer['CloudName']}}" id="colo" style="cursor: pointer;">{{customer['CloudName']}}</a>
                                </td>
                                <td class="{{colorsss[customer['System Name']]}}">
                                    <a data-id="{{customer['System Name']}}" class="user" style="cursor: pointer;">
                                        <i class="fas fa-circle text-{{colorsss[customer['System Name']]}} mr-3"></i>
                                        {{colorsss[customer['System Name']]}}
                                    </a>
                                </td>
                                <td class="{{customer['spoc']}}">
                                    {% if customer['Owner'] and customer['Owner'] != '' %}
                                    {{customer['Owner']}}
                                    {% else %}
                                    Not Assigned
                                    {% endif %}
                                </td>

                                <td>
                                    {{customer['DateTime']}}
                                </td>
                            </tr>
                            {% endfor %}
                            <tr>
                                <td scope="row" class="{{customer['System Name']}}">
                                    <a href="/dashboard/{{customer['System Name']}}" data-toggle="tooltip" data-placement="bottom" title="{{customer['CloudName']}}" id="colo" style="cursor: pointer;">test</a>
                                </td>
                                <td class="{{colorsss[customer['System Name']]}}">
                                    <a data-id="{{customer['System Name']}}" class="user" style="cursor: pointer;">
                                        <i class="fas fa-circle text-{{colorsss[customer['System Name']]}} mr-3"></i>
                                        test
                                    </a>
                                </td>
                                <td class="{{customer['spoc']}}">
                                    test
                                </td>

                                <td>
                                    test
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

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

</div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}
<script type='text/javascript'>
    $(document).ready(function () {
        $('.user').click(function () {
            var userid = $(this).data('id');
            $.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>
    $(document).ready(function() {
    $('#devicesListSharepointTable').DataTable({
        "pageLength": 25
    });
});

</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>

{% endblock javascripts %}