@{
    ViewBag.Title = "Broadcast";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

@using ReportWeb.Models;
@model List<Broadcast>

@functions {
    private 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>
        }
    }

    private void StatusBroadcast(int status)
    {
        if (status == 0)
        {
            <span class="inactive">Inactive</span>
        }
        else if (status == 1)
        {
            <span class="primary">Running</span>
        }
        else if (status == 2)
        {
            <span class="success">Finished</span>
        }
        else if (status == 3)
        {
            <span class="danger">Cancelled</span>
        }
        else if (status == 4)
        {
            <span class="warning">Paused</span>
        }
    }
}
 
<style>
</style> 

<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-body">

            <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="feather icon-minus4"></i></a></li>
                            @*<li><a data-action="reload"><i class="icon-reload"></i></a></li>*@
                            <li><a data-action="expand"><i class="feather 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="form">
                            @Html.AntiForgeryToken()
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>From date</label>
                                        <div class='input-group'>
                                            <input id="fromDate" name="fromDate" type='text' class="form-control fromDate" />
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    <span class="fa fa-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>To date</label>
                                        <div class='input-group'>
                                            <input id="toDate" name="toDate" type='text' class="form-control toDate" />
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    <span class="fa fa-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-primary" onclick="searchBroadcast()" id="btnSearch">
                                        <i class="feather icon-search"></i> Search
                                    </button>
                                    <button type="button" class="btn btn-success" onclick="addBroadcast()">
                                        <i class="feather 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 class="card">
                <div class="card-header">
                    <h4 class="card-title">Report</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body ">
                        <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">Broacast Name</th>
                                        <th scope="col" class="text-center">Channel</th>
                                        <th scope="col" class="text-center">Message Type</th>
                                        <th scope="col" class="text-center">Message</th>
                                        <th scope="col" class="text-center">Count subs</th>
                                        <th scope="col" class="text-center">Schedule time</th>
                                        <th scope="col" class="text-center">Finish time</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++)
                                        {
                                            Broadcast broadcast = Model[@i];
                                            if (broadcast != null)
                                            {
                                                <tr>
                                                    <td scope="row">@(i + 1)</td>
                                                    <td class="text-center">
                                                        @if (broadcast.status == 0)
                                                        {
                                                            <span class="feather icon-edit cursor-pointer" onclick="editBroadcast(@broadcast.id)"></span>
                                                        }
                                                        @if (broadcast.status <= 1 || broadcast.status == 4)
                                                        {
                                                            <span class="feather icon-trash-2 danger cursor-pointer" onclick="saveBroadcastStatus(@broadcast.id.ToString(), '3')"></span>
                                                        }
                                                        @if (broadcast.status == 0 || broadcast.status == 4)
                                                        {
                                                            <span type="button" class="success " onclick="saveBroadcastStatus(@broadcast.id.ToString(), '1')" id="btnRun">
                                                                <i class="feather icon-play"></i> Run
                                                            </span>
                                                        }
                                                        else if (broadcast.status == 1)
                                                        {
                                                            <span type="button" class=" warning" onclick="saveBroadcastStatus(@broadcast.id.ToString(), '4')" id="btnPause">
                                                                <i class="feather icon-pause"></i> Pause
                                                            </span>
                                                        }
                                                    </td>
                                                    <td class="text-left">@broadcast.broadcast_name</td>
                                                    <td class="text-center">@broadcast.channel_adv</td>
                                                    <td class="text-center">@{MsgTypeToText(broadcast.message_type);}</td>
                                                    <td class="text-center">@broadcast.msg_adv</td>
                                                    <td class="text-right">@(broadcast.progress_sub + "/" + broadcast.count_sub)</td>
                                                    <td class="text-center">@broadcast.schedule_time</td>
                                                    <td class="text-center">@broadcast.finish_time</td>
                                                    <td class="text-center">@{StatusBroadcast(broadcast.status);}</td>
                                                </tr>
                                            }
                                        }
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </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 Broadcast</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <hidden id="id"></hidden>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="serviceAdv">Service Adv</label>
                                        <select id="serviceAdv" name="serviceAdv" class="form-control">
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="team1">Broadcast Name</label>
                                        <input class="form-control" type="text" id="broadcastName" name="broadcastName" autocomplete="on">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Schedule time</label>
                                        <div class='input-group'>
                                            <input id="scheduleTime" name="scheduleTime" type='text' class="form-control todate" />
                                            <div class="input-group-append">
                                                <span class="input-group-text">
                                                    <span class="fa fa-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="file_upload">File upload (txt)</label>
                                        <input class="form-control" type="file" id="file_upload" name="file_upload" accept=".txt" autocomplete="off">
                                        <button type="button" id="btnDownload" class="btn btn-outline-primary" onclick="download()">Download</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row" id="div-status" style="display:none">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="serviceCode">Status</label>
                                        <input class="form-control" type="text" id="status" name="status" readonly>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="team1">Finished time</label>
                                        <input class="form-control" type="text" id="finishTime" name="finishTime" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <span id="progress-status" class="text-danger"></span>
                            <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                            <button type="button" id="btnAdd" class="btn btn-outline-primary" onclick="addNewBroadcast()">Add</button>
                            <button type="button" id="btnUpdate" class="btn btn-outline-primary" onclick="saveChangeBroadcast()">Save Info</button>
                        </div>
                    </div>
                </div>
            </div>

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


@section Scripts {
    <script>

        $(".fromDate").datetimepicker({
            format: "DD/MM/YYYY",
            defaultDate: moment().add(-30, 'days')
        });

        $(".toDate").datetimepicker({
            format: "DD/MM/YYYY",
            defaultDate: moment().startOf('day')
        });


        $("#scheduleTime").datetimepicker({
            format: "DD/MM/YYYY HH:mm:ss",
            defaultDate: moment()
        });

        $(document).ready(function () {
            //$(".fromDate").datepicker({
            //    format: "dd/mm/yyyy",
            //    defaultViewDate: moment().subtract(30, "days")8gyt
            //});

            //$(".toDate").datepicker({
            //    format: "dd/mm/yyyy",
            //    defaultViewDate: moment()
            //});
            $.ajax({
                url: subDomain + "/Admin/SearchServiceAdv",
                data: {
                    status: "1"
                },
                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.adv_name, sv.adv_id);
                        $(o).html(sv.adv_name);
                        console.log(o);
                        $("#serviceAdv").append(o);
                    }
                }
            });
            loopSearchBroadcast();
            setInterval(loopSearchBroadcast, 15000);
        });

        function loopSearchBroadcast() {
            searchBroadcast($("#fromDate").val(), $("#toDate").val());
        }

        function download() {
            // download file
        }

        function addBroadcast() {
            // clear data
            $("#broadcastName").val("");
            $("#file_upload").val("");


            $("#modalLabelService").html("New Broadcast");
            $("#btnAdd").show();
            $("#btnUpdate").hide();
            $("#btnDownload").hide();
            $("#div-status").hide();
            // show modal
            showModal("modal-add-service");
        }

        function editBroadcast(id) {
            console.log(id);
            $("#file_upload").val("");
            // get service info
            $.ajax({
                url: subDomain + "/Admin/GetBroadcastById",
                data: {
                    id: 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 {
                        $("#modalLabelService").html("Edit Broadcast");
                        $("#div-status").show();
                        var service = data.broadcast;
                        // change data
                        if (service.status > 0) {
                            $("#btnUpdate").attr("disabled", true);
                            $("#progress-status").html("Broadcast in progress, can not be changed!");
                        }

                        $("#serviceAdv").val(service.sv_adv_id);
                        $("#broadcastName").val(service.broadcast_name);
                        $("#scheduleTime").val(service.schedule_time);
                        $("#status").val(StatusBroadcast(service.status));
                        $("#finishTime").val(service.finish_time);

                        $("#id").val(service.id);
                        console.log($("#id").val());

                        $("#btnAdd").hide();
                        $("#btnUpdate").show();
                        $("#btnDownload").show();

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

        function removeBroadcast(id) {
            console.log(id);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/UpdateBroadcastStatus",
                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 {
                        searchBroadcast();
                    }
                },
                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'>" + (service.status == 0 ? "<span class='feather icon-edit cursor-pointer' onclick='editBroadcast(" + service.id + ")'></span> " : "") +
                        ((service.status == 1 || service.status == 0 || service.status == 4)
                            ? "<span class='feather icon-trash-2  danger cursor-pointer' onclick='saveBroadcastStatus(" + service.id + ", 3)'></span> " : "") +
                        ((service.status == 0 || service.status == 4) ?
                            ('<span type="button" class="success " onclick="saveBroadcastStatus(' + service.id + ', 1)" id="btnRun">'
                                + '<i class="feather icon-play"></i> Run'
                                + '</span> ') : service.status == 1 ?
                                ('<span type="button" class=" warning" onclick="saveBroadcastStatus(' + service.id + ', 4)" id="btnPause">'
                                    + '<i class="feather icon-pause"></i> Pause'
                                    + '</span>') : '') + "</td>";

                    html += "<td class='text-left'>" + service.broadcast_name + "</td>";
                    html += "<td class='text-center'>" + service.channel_adv + "</td>";
                    html += "<td class='text-center'>" + MsgTypeToText(service.message_type) + "</td>";
                    html += "<td class='text-left'>" + service.msg_adv + "</td>";
                    html += "<td class='text-right'>" + service.progress_sub + "/" + service.count_sub + "</td>";
                    html += "<td class='text-center'>" + service.schedule_time + "</td>";
                    html += "<td class='text-center'>" + service.finish_time + "</td>";
                    html += "<td class='text-center'>" + StatusBroadcast(service.status) + "</td>";
                    html += "</tr>";
                }
            }
            $("#gridbody").html(html);
        }
    </script>
}