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

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

@model List<Services>

@functions{
    void MsgTypeToText(string msgType)
    {
        if (msgType == "0")
        {
            <span>SMS Text</span>
        }
        else if (msgType == "1")
        {
            <span>SMS Flash</span>
        }
        else if (msgType == "200")
        {
            <span>USSD Push</span>
        }
        else if (msgType == "201")
        {
            <span>USSD Flash</span>
        }
    }

    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 Adv</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 Adv</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="searchServiceAdv()" id="btnSearch">
                                                        <i class="icon-search"></i> Search
                                                    </button>
                                                    <button type="button" class="btn btn-success" onclick="addServiceAdv()">
                                                        <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">Adv Name</th>
                                                <th scope="col" class="text-center">Message</th>
                                                <th scope="col" class="text-center">Channel</th>
                                                <th scope="col" class="text-center">Message Type</th>
                                                <th scope="col" class="text-center">From Money</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="editServiceAdv('@service.adv_id')"></span>
                                                            @if (service.status == 1)
                                                            {
                                                                <span class="fa fa-remove text-danger cursor-pointer" onclick="removeServiceAdv('@service.adv_id')"></span>
                                                            }
                                                            else
                                                            {
                                                                <span class="fa fa-undo text-primary cursor-pointer" onclick="enableServiceAdv('@service.adv_id')"></span>
                                                            }
                                                        </td>
                                                        <td class="text-left">@service.sv_name</td>
                                                        <td class="text-left">@service.adv_name</td>
                                                        <td class="text-left">@service.msg_adv</td>
                                                        <td class="text-center">@service.channel_adv</td>
                                                        <td class="text-center">@{MsgTypeToText(service.message_type);}</td>
                                                        <td class="text-right">@service.from_money</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 Service Adv</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">Adv Name</label>
                                    <input class="form-control" type="text" id="advName" name="advName" autocomplete="on">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team2">Message type</label>
                                    <select class="form-control" id="messageType" name="messageType">
                                        <option value="0" selected>SMS Text</option>
                                        @*<option value="1">SMS Flash</option>*@
                                        <option value="200">USSD Push</option>
                                        <option value="201">USSD Flash</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team1">Channel</label>
                                    <input class="form-control" type="text" id="channelAdv" name="channelAdv" autocomplete="on">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="fromDate">Message adv</label>
                                    <textarea class="form-control" id="msgAdv" name="msgAdv" autocomplete="off" rows="3"></textarea>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="team2">From money</label>
                                    <input class="form-control" type="number" id="fromMoney" name="fromMoney">
                                </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="addNewServiceAdv()">Add</button>
                        <button type="button" id="btnUpdateInfo" class="btn btn-outline-primary" onclick="saveChangeServiceAdv()">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 addServiceAdv() {
            // clear data
            $("#advName").val("");
            $("#messageType").val("0");
            $("#msgAdv").val("");
            $("#fromMoney").val("0");

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

        function editServiceAdv(advId) {
            console.log(advId);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/GetServiceAdvById",
                data: {
                    advId: advId
                },
                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);
                        $("#advId").val(service.adv_id);
                        console.log($("#advId").val());
                        $("#advName").val(service.adv_name);
                        $("#channelAdv").val(service.channel_adv);
                        $("#messageType").val(service.message_type);
                        $("#msgAdv").val(service.msg_adv);
                        $("#fromMoney").val(service.from_money);

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

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

        function removeServiceAdv(id) {
            console.log(id);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/UpdateServiceAdvStatus",
                data: {
                    advId: 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 {
                        searchServiceAdv();
                    }
                },
                error: function (data) {
                    console.log(data.error_code);
                }
            })
        }

        function enableServiceAdv(id) {
            console.log(id);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/UpdateServiceAdvStatus",
                data: {
                    advId: 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 {
                        searchServiceAdv();
                    }
                },
                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='editServiceAdv(\"" + service.adv_id + "\")'></span> "
                        + (service.status == 1 ? "<span class='fa fa-remove  text-danger cursor-pointer' onclick='removeServiceAdv(\"" + service.adv_id + "\")'></span></td >"
                            : "<span class='fa fa-undo text-primary cursor-pointer' onclick='enableServiceAdv(\"" + service.adv_id + "\")'></span></td >");
                    html += "<td class='text-left'>" + service.sv_name + "</td>";
                    html += "<td class='text-left'>" + service.adv_name + "</td>";
                    html += "<td class='text-left'>" + service.msg_adv + "</td>";
                    html += "<td class='text-center'>" + service.channel_adv + "</td>";
                    html += "<td class='text-center'>" + MsgTypeToText(service.message_type) + "</td>";
                    html += "<td class='text-right'>" + service.from_money + "</td>";
                    html += "<td class='text-center'>" + StatusToText(service.status) + "</td>";
                    html += "</tr>";
                }
            }
            $("#gridbody").html(html);
        }
    </script>
}