<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel='icon' href='/favicon.ico' type='image/x-icon'/>
    <title> <%= settings["WebsiteName"].Value %> || <%= title %></title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.dataTables.min.css">
    <!-- Google Tag Manager -->

    <!-- End Google Tag Manager -->
    <style>
        h6 {
            font-size: 16px !important;
            font-weight: bold !important;
        }

        textarea {
            width: 100%;
            height: fit-content;
            min-height: 120px;
        }
    </style>
    <!-- Custom CSS Block -->
    <%- block('css').toString() %>

</head>
<body class="hold-transition sidebar-mini">
<!-- Google Tag Manager (noscript) -->

<!-- End Google Tag Manager (noscript) -->
<div class="wrapper">

    <!-- Navbar -->
    <% include ../partials/navbar.ejs %>
    <!-- /.navbar -->

    <!-- Sidebar -->
    <% include ../partials/sidebar.ejs %>
    <!-- /.sidebar -->

    <!-- Content Wrmemer. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark"><%= title %></h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>

                            <li class="breadcrumb-item active"><%= title %></li>

                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">

                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title"><%= title %></h3>
                        <!-- /.card-tools -->
                        <div class="float-right">
                            <% if(["Admin", "President", "HR VP", "TD Team Leader", "TD Member"].includes(user.Position?.Name) || user.isAdmin){ %>
                                <button type="button" class="btn btn-block btn-success" data-toggle="modal"
                                        data-target="#NewMemberModal">New Member
                                </button>
                            <% } %>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body ">
                        <table id="ind" class="table table-bordered table-hover wrap" role="grid"
                               aria-describedby="example2_info">
                            <thead>
                            <tr role="row">
                                <th>#</th>
                                <th>Name</th>
                                <th>Team</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Profile</th>
                                <th>Link</th>
                                <th>Extra</th>
                            </thead>
                            <tbody>
                            <% members.forEach(mem =>  { %>
                                <tr role="row" id="row-<% mem.id %>">
                                    <td><%= mem.id %></td>
                                    <td><%= mem.Name %></td>
                                    <td><%= mem.Committee %></td>
                                    <td><a href="mailto:<%= mem.Email %>"><%= mem.Email %></a></td>
                                    <td><a href="tel:<%= mem.Phone %>"><%= mem.Phone %></a></td>
                                    <td><a href="/portal/members/profile/<%= mem.id %>">Profile</a></td>
                                    <td><a href="/members/performance/<%= mem.PageID %>">Here</a>
                                    </td>
                                    <td>

                                        <% if(["Admin", "President", "HR VP", "TD Team Leader", "TD Member"].includes(user.Position?.Name) || user.isAdmin){ %>
                                            <span class="btn-group btn-group-sm"> <span data-toggle="tooltip"
                                                                                        data-placement="top"
                                                                                        title="Actions"><button
                                                            type="button" class="btn btn-secondary EditButton"
                                                            data-toggle="modal"
                                                            data-target="#meme" data-id="<%= mem.id %>">
                                            <i class="fa fa-cog"></i>
                                        </button></span>
                                            <form class="MailSend"> <span data-toggle="tooltip" data-placement="top"
                                                                          title="Send Email">
                                                <input type="hidden" name="id" value="<%= mem.id %>">
                                                <button type="submit" class="btn btn-success"><i
                                                            class="fa fa-paper-plane"></i>
                                                </button> </span>
                                            </form>
                                            </span>
                                        <% } %>
                                    </td>


                                </tr>
                            <% }); %>

                            </tbody>
                        </table>
                    </div>
                    <div class="modal fade" id="par" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content" id="InfoModalContent">
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="meme" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content" id="EditModalContent">

                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>


                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <% if(["Admin", "President", "HR VP", "TD Team Leader", "TD Member"].includes(user.Position?.Name) || user.isAdmin){ %>
        <div class="modal fade" id="NewMemberModal" style="display: none;" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Add a New Member</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">Ã—</span>
                        </button>
                    </div>
                    <form method="post" action="/portal/members/new" id="NewMember">
                        <div class="modal-body">

                            <div class="form-group">
                                <label for="inputName">Name</label>
                                <input type="text" id="inputName" class="form-control" name="Name" required>
                            </div>
                            <div class="form-group">
                                <label for="inputPhone">Phone</label>
                                <input type="text" id="inputPhone" class="form-control" name="Phone" required>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail">Email</label>
                                <input type="email" id="inputEmail" class="form-control" name="Email" required>
                            </div>
                            <div class="form-group">
                                <label for="inputTeam">Team</label>
                                <select id="inputTeam" class="form-control custom-select" name="Team">
                                    <option selected disabled>Select one</option>
                                    <% choices.forEach((choice)=>{ %>
                                        <option value="<%= choice.Name %>"><%= choice.DisplayName %></option>
                                    <% }) %>
                                </select>
                            </div>
                        </div>

                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add</button>


                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    <%}%>
    <!-- /.content-wrmemer -->
    <!--    Footer-->
    <% include ../partials/footer.ejs %>

    <!-- Toasts -->
    <% include ../partials/toasts.ejs %>
    <!-- Custom JS Block -->
    <%- block('js').toString() %>
    <!-- AJAXSubmit -->
    <script type="text/javascript" src="/vendor/jquery.ajaxSubmit.min.js"></script>
    <script src="/plugins/datatables/jquery.dataTables.js"></script>
    <script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
    <script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.7/pagination/select.js"></script>
    <script type="text/javascript">
        let label = {
            Applied: "bg-primary",
            Interviewed: "bg-warning",
            Rejected: "bg-danger",
            Accepted: "bg-success",
            Overtime: "bg-dark"
        }
        $(document).on('submit', '.editKPI', function () {
            $.ajax({
                url: '/portal/editkpi',
                type: 'POST',
                data: $(this).serialize(),
                tryCount: 0,
                retryLimit: 5,
                success: function (res) {
                    console.log(res.id + " " + res.State);
                    this.tryCount = 0;
                    toastr.success(res.msg);
                },
                error: function (xhr, textStatus, errorThrown) {
                    if (textStatus === 'timeout') {
                        this.tryCount++;
                        toastr.error("Error! " + xhr.status + " " + textStatus + ", Retrying");
                        if (this.tryCount <= this.retryLimit) {
                            //try again
                            $.ajax(this);
                            return;
                        }
                        return;
                    }
                    if (xhr.status === 500) {
                        toastr.error("Error! " + xhr.status + " " + textStatus);
                    } else {
                        toastr.error("Error! " + xhr.status + " " + textStatus);
                    }
                }
            });
            return false;
        });
        $(document).on('submit', '#NewMember', function () {
            $.ajax({
                url: '/portal/members/new',
                type: 'POST',
                data: $(this).serialize(),
                tryCount: 0,
                retryLimit: 5,
                success: function (res) {
                    console.log(res.id + " " + res.State);
                    this.tryCount = 0;
                    toastr.success(res.msg);
                },
                error: function (xhr, textStatus, errorThrown) {
                    if (textStatus === 'timeout') {
                        this.tryCount++;
                        toastr.error("Error! " + xhr.status + " " + textStatus + ", Retrying");
                        if (this.tryCount <= this.retryLimit) {
                            //try again
                            $.ajax(this);
                            return;
                        }
                        return;
                    }
                    if (xhr.status === 500) {
                        toastr.error("Error! " + xhr.status + " " + textStatus);
                    } else {
                        toastr.error("Error! " + xhr.status + " " + textStatus);
                    }
                }
            });
            return false;
        });
        $(document).on('click', '.KPIButton', function () {
            let input = $(this).closest("div.kpimonth").find("input");
            if ($(this).hasClass("btn-danger")){
                $(this).removeClass("btn-danger");
                $(this).addClass("btn-success");
                input.prop( "disabled", false );
            } else if ($(this).hasClass("btn-success")){
                $(this).removeClass("btn-success");
                $(this).addClass("btn-danger");
                input.prop( "disabled", true );
            }

        });
        // $(document).on('submit', '.MailSend', function () {
        //     $.ajax({
        //         url: '/portal/sendtosheet',
        //         type: 'POST',
        //         data: $(this).serialize(),
        //         tryCount: 0,
        //         retryLimit: 5,
        //         success: function (res) {
        //             this.tryCount = 0;
        //             toastr.success(res.msg);
        //         },
        //         error: function (xhr, textStatus, errorThrown) {
        //             if (textStatus === 'timeout') {
        //                 this.tryCount++;
        //                 toastr.error("Error! " + xhr.status + " " + textStatus + ", Retrying");
        //                 if (this.tryCount <= this.retryLimit) {
        //                     //try again
        //                     $.ajax(this);
        //                     return;
        //                 }
        //                 return;
        //             }
        //             if (xhr.status === 500) {
        //                 toastr.error("Error! " + xhr.status + " " + textStatus);
        //             } else {
        //                 toastr.error("Error! " + xhr.status + " " + textStatus);
        //             }
        //         }
        //     });
        //     return false;
        // });
        $(document).on('click', '.EditButton', function () {
            let MemId = $(this).data("id");
            console.log(MemId);
            $("#EditModalContent").load(`/portal/members/edit/kpi?id=${MemId}`);
        });
        $(document).on('keypress', '.kpiinput', function (e) {
            if (e.which === 37 ||e.which === 32){
                console.log("Block")
                return false;
            }
            let letter = String.fromCharCode(e.which)
            return /^\d*\.?\d*$/.test(letter);
        });
    </script>
    <script>
        $(function () {
            $("#ind").DataTable({
                stateSave: true,
                responsive: true,
                columnDefs: [
                    {responsivePriority: 1, targets: 0},
                    {responsivePriority: 2, targets: -1},
                    {responsivePriority: 3, targets: 1}
                ],
                fixedHeader: {
                    header: true,
                    footer: true
                },
                "autoWidth": false
            });


        })

    </script>
</body>
</html>