{% 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">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item">Machine Name : {{cloudname}}</li>
                            <!-- <li>{{session['accesstype']}}</li> -->
                        </ol>
                    </nav>

                    <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">
                        <a data-id="{{cloudname}}" class="addClient" style="cursor: pointer;">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark" data-toggle="tooltip"
                                data-placement="bottom" title="Add Note">
                                <li class="breadcrumb-item">
                                    Add Note
                                </li>
                            </ol>
                        </a>
                    </nav> -->
                </div>
            </div>
            <!-- Card stats -->
        </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 Notes</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>


<div class="modal fade" id="editContent" 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 Notes</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="edit-macha">
                ...
            </div>

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


<div class="modal fade" id="modifiedContent" 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"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="content-boy">
                ...
            </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">
                                <div class="col-md-4">
                                    <button type="submit" data-id="{{cloudname}}"  class="addClient btn btn-primary">Add Note</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <!-- <h3 style="text-align: 4000px;">Add Note</h3> -->
                    <!-- Projects table -->
                    <table id="example" class="display table table-striped table-bordered">
                        <thead class="sticky-header">
                            <tr>
                                <th>Date / Time</th>
                                <th>Owners</th>
                                 <th>Notes</th>
                                <th>Edit</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        {% for note in opcenterData%}
                        <tr>
                            <td scope="row" style="width: 20px;">{{note.dateTime}}</td>
                            <td scope="row" style="width: 20px;">{{note.author}}</td>
                            <td scope="row" style="white-space: normal;">{{note.content}}   </td>
                            <td scope="row" style="width: 20px;">
                                <a data-item="{{note._id}}" data-cloudname="{{cloudname}}" class="noteedit" style="cursor: pointer;">
                                    <i class="fa fa-pencil" style="font-size:12px"></i>
                                </a>
                            </td>
                            <td scope="row" style="width: 30px;">
                                {% if note.modified %}
                                <u><a data-item="{{note.unique_id}}" data-cloudname="{{cloudname}}" data-id="{{note._id}}" class="modifiedAgain" style="cursor: pointer;">
                                    Modified
                                </a></u>
                                {% else %}

                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

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

</div>
{% endblock content %}


{% block javascripts %}


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

<script type='text/javascript'>
    $(document).ready(function () {
        $('.modifiedAgain').click(function () {
            var id = $(this).data('item');
            var newid = $(this).data('id');
            var cloudname = $(this).data('cloudname');
            $.ajax({
                url: '/modified',
                type: 'post',
                data: { id: id,cloudname: cloudname ,newid : newid},
                success: function (data) {
                    $('.content-boy').html(data);
                    $('.content-boy').append(data.htmlresponse);
                    $('#modifiedContent').modal('show');
                }
            });
        });
    });
</script>

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

        var table = $('#example').DataTable(
    {
        "searching": true,
        "fixedHeader": true,
        "lengthMenu": [],
        "paging":false,
	"search": true
    }
    );
    });
</script>


{% endblock javascripts %}
