@{
    ViewBag.Title = "Services";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using ReportWeb.Models;
@using SuperAdmin.Controllers;

@model List<Services>

@functions {
    void StatusToText(int status)
    {
        if (status == 0)
        {
            <span>Inactive</span>
        }
        else if (status == 1)
        {
            <span>Active</span>
        }
    }
}
<style>
</style>

<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-xs-12 mb-1">
                <h2 class="content-header-title">Services Report</h2>
            </div>
            <div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-xs-12">
                <div class="breadcrumb-wrapper col-xs-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="Index">Admin</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#">Services Report</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- Basic form layout section start -->
            <section id="basic-form-layouts">
                <div class="row service-height">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title" id="basic-layout-form">Search</h4>
                                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                                <div class="heading-elements">
                                    <ul class="list-inline mb-0">
                                        <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                        @*<li><a data-action="reload"><i class="icon-reload"></i></a></li>*@
                                        <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                        @*<li><a data-action="close"><i class="icon-cross2"></i></a></li>*@
                                    </ul>
                                </div>
                            </div>
                            <div class="card-content collapse show">
                                <div class="card-body">
                                    <div class="card-block">
                                        <div class="form-body">
                                            @Html.AntiForgeryToken()
                                            @*<div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="teamName">Team</label>
                                                            <input class="form-control" type="text" id="teamName" name="teamName">
                                                        </div>
                                                    </div>
                                                </div>*@
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <button type="button" class="btn btn-primary" onclick="searchServiceRp()" id="btnSearch">
                                                        <i class="icon-search"></i> Search
                                                    </button>
                                                    <button type="button" class="btn btn-success" onclick="addServiceRp()">
                                                        <i class="icon-plus-circle"></i> Add
                                                    </button>
                                                    @*<button type="button" class="btn btn-danger" onclick="deleteTable('exercise')">
                                                            <i class="icon-bin"></i> Delete Data
                                                        </button>*@
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card">
                            <div class="card-content">
                                <div class="col-md-12 table-responsive">
                                    <table class="table table-striped table-hover">
                                        <thead class="thead-inverse">
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col" class="text-center">Action</th>
                                                <th scope="col" class="text-center">Service Code</th>
                                                <th scope="col" class="text-center">Db Name</th>
                                                <th scope="col" class="text-center">Db User</th>
                                                <th scope="col" class="text-center">Connection String</th>
                                                <th scope="col" class="text-center">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody id="gridbody">
                                            @if (Model != null)
                                            {
                                                for (int i = 0; i < Model.Count; i++)
                                                {
                                                    Services service = Model[@i];
                                                    <tr>
                                                        <td scope="row">@(i + 1)</td>
                                                        <td class="text-center">
                                                            <span class="fa fa-edit cursor-pointer" onclick="editServiceRp('@service.sv_code')"></span>
                                                            @if (service.status == 0)
                                                            {
                                                                <span class="fa fa-undo text-primary cursor-pointer" onclick="enableServiceRp('@service.sv_code')"></span>
                                                            }
                                                            else
                                                            {
                                                                <span class="fa fa-remove text-danger cursor-pointer" onclick="removeServiceRp('@service.sv_code')"></span>
                                                            }
                                                        </td>
                                                        <td class="text-left">@service.sv_name</td>
                                                        <td class="text-left">@service.db_name</td>
                                                        <td class="text-left">@service.db_username</td>
                                                        <td class="text-left">@service.connection_string</td>
                                                        <td class="text-center">@{StatusToText(service.status);}</td>
                                                    </tr>

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

                </div>
            </section>
            <!-- // Basic form layout section end -->
        </div>

        <div class="modal fade text-xs-left" id="modal-add-service" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="modalLabelService">New Report</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <hidden id="advId"></hidden>
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="serviceCode">Service</label>
                                    <select id="serviceCode" name="serviceCode" class="form-control">
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team1">Db Name</label>
                                    <input class="form-control" type="text" id="dbName" name="dbName" autocomplete="on">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team2">Db user</label>
                                    <input class="form-control" type="text" id="dbUserName" name="dbUserName" autocomplete="on">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team2">Db password</label>
                                    <input class="form-control" type="text" id="dbPassword" name="dbPassword" autocomplete="on">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="fromDate">Connection String</label>
                                    <textarea class="form-control" id="connectionString" name="connectionString" autocomplete="off" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="fromDate">SQL report daily</label>
                                    <textarea class="form-control" id="sqlReportDaily" name="sqlReportDaily" autocomplete="off" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="fromDate">SQL report hourly</label>
                                    <textarea class="form-control" id="sqlReportHourly" name="sqlReportHourly" autocomplete="off" rows="4"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                        <button type="button" id="btnAddService" class="btn btn-outline-primary" onclick="addNewServiceRp()">Add</button>
                        <button type="button" id="btnUpdateInfo" class="btn btn-outline-primary" onclick="saveChangeServiceRp()">Save Info</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@*<link href="~/editor/summernote.css" rel="stylesheet">*@
@*<script type="text/javascript" src="~/editor/summernote.js"></script>*@
@*<script type="text/javascript" src="~/editor/script-custom-editor.js"></script>*@


@section Scripts {
    <script>
        $(document).ready(function () {
            $.ajax({
                url: subDomain + "/Admin/SearchService",
                data: {
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    for (var i = 0; i < data.listService.length; i++) {
                        var sv = data.listService[i];
                        console.log(sv);
                        var o = new Option(sv.sv_name, sv.sv_code);
                        $(o).html(sv.sv_name);
                        console.log(o);
                        $("#serviceCode").append(o);
                    }
                }
            })
        });

        function addServiceRp() {
            // clear data
            $("#dbName").val("");
            $("#dbUserName").val("");
            $("#dbPassword").val("");

            $("#btnAddService").show();
            $("#btnUpdateInfo").hide();
            // show modal
            showModal("modal-add-service");
        }

        function editServiceRp(svCode) {
            console.log(svCode);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/GetServiceRpBySvCode",
                data: {
                    svCode: svCode
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error != "0") {
                        setTimeout(function () {
                            showModal('message-dialog');
                            $('#message-content').html(data.content.split("\n").join("<br />"));
                        }, 1000);
                    } else {
                        var service = data.service;
                        // change data
                        $("#serviceCode").val(service.sv_code);
                        $("#dbName").val(service.db_name);
                        $("#dbUserName").val(service.db_username);
                        $("#dbPassword").val(service.db_password);
                        $("#connectionString").val(service.connection_string);
                        $("#sqlReportDaily").val(service.sql_report_daily);
                        $("#sqlReportHourly").val(service.sql_report_hourly);

                        $("#btnAddService").hide();
                        $("#btnUpdateInfo").show();

                        // show modal
                        showModal("modal-add-service");
                    }
                },
                error: function (data) {
                    console.log(data.error);
                }
            })
        }

        function removeServiceRp(id) {
            console.log(id);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/UpdateServiceRpStatus",
                data: {
                    svCode: id,
                    status: "0"
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error_code != "0") {
                        setTimeout(function () {
                            showModal('message-dialog');
                            $('#message-content').html(data.content.split("\n").join("<br />"));
                        }, 1000);
                    } else {
                        searchServiceRp();
                    }
                },
                error: function (data) {
                    console.log(data.error_code);
                }
            })
        }

        function enableServiceRp(id) {
            console.log(id);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/UpdateServiceRpStatus",
                data: {
                    svCode: id,
                    status: "1"
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error_code != "0") {
                        setTimeout(function () {
                            showModal('message-dialog');
                            $('#message-content').html(data.content.split("\n").join("<br />"));
                        }, 1000);
                    } else {
                        searchServiceRp();
                    }
                },
                error: function (data) {
                    console.log(data.error_code);
                }
            })
        }


        function updateGridData(val) {
            console.log(val);
            $("#gridbody").html("");
            var html = "";
            if (val != undefined) {
                for (var i = 0; i < val.length; i++) {
                    var service = val[i];
                    html += "<tr>";
                    html += "<td scope='row'>" + (i + 1) + "</td>";
                    html += "<td class='text-center'><span class='fa fa-edit cursor-pointer' onclick='editServiceRp(\"" + service.sv_code + "\")'></span> "
                        + (service.status == 1 ? "<span class='fa fa-remove  text-danger cursor-pointer' onclick='removeServiceRp(\"" + service.sv_code + "\")'></span></td >"
                            : "<span class='fa fa-undo text-primary cursor-pointer' onclick='enableServiceRp(\"" + service.sv_code + "\")'></span></td >");
                    html += "<td class='text-left'>" + service.sv_name + "</td>";
                    html += "<td class='text-left'>" + service.db_name + "</td>";
                    html += "<td class='text-left'>" + service.db_username + "</td>";
                    html += "<td class='text-left'>" + service.connection_string + "</td>";
                    html += "<td class='text-center'>" + StatusToText(service.status) + "</td>";
                    html += "</tr>";
                }
            }
            $("#gridbody").html(html);
        }
    </script>
}