@{
    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</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</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="searchService()" id="btnSearch">
                                                        <i class="icon-search"></i> Search
                                                    </button>
                                                    <button type="button" class="btn btn-success" onclick="addService()">
                                                        <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">Edit</th>
                                                <th scope="col" class="text-center">Service Code</th>
                                                <th scope="col" class="text-center">Service Name</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" onclick="editService(@service.id)"></span></td>
                                                        <td class="text-left">@service.sv_code</td>
                                                        <td class="text-left">@service.sv_name</td>
                                                        <td class="text-right">@{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 Service</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <hidden id="serviceId"></hidden>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team1">Name</label>
                                    <input class="form-control" type="text" id="serviceName" name="serviceName" autocomplete="on">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team2">Code</label>
                                    <input class="form-control" type="text" id="serviceCode" name="serviceCode" autocomplete="on">
                                </div>
                            </div>
                            <div class="col-md-6" id="siv-status">
                                <div class="form-group">
                                    <label for="score1">Status</label>
                                    <select id="status" name="status" class="form-control" disabled>
                                        <option value="1" selected>Active</option>
                                        <option value="0">Inactive</option>
                                    </select>
                                </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="addNewService()">Add</button>
                        <button type="button" id="btnUpdateInfo" class="btn btn-outline-primary" onclick="saveChangeService()">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>

        function addService() {
            // clear data
            $("#serviceName").val("");
            $("#serviceCode").val("");
            $("#div-status").hide();


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

        function editService(id) {
            console.log(id);
            $("#div-status").show();
            // get service info
            $.ajax({
                url: subDomain + "/Admin/GetServiceById",
                data: {
                    serviceId: id
                },
                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
                        $("#serviceName").val(service.sv_name);
                        $("#serviceCode").val(service.sv_code);
                        $("#status").val(service.status);
                        $("#serviceId").val(id);
                        console.log($("#serviceId").val());

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

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

        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='editService(" + service.id + ")'></span></td>";
                    html += "<td class='text-left'>" + service.sv_code + "</td>";
                    html += "<td class='text-left'>" + service.sv_name + "</td>";
                    html += "<td class='text-right'>" + StatusToText(service.status) + "</td>";
                    html += "</tr>";
                }
            }
            $("#gridbody").html(html);
        }

    </script>
}