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

@using ReportWeb.Models;
@using ReportWeb.Source;

@model List<SvAdvSchedule>

@{
    int? codeType = ViewBag.codeType;
}
<input type="hidden" value="@(codeType ?? LuckyCardUtils.CodeType.LUCKY_CARD)" id="codeType" />

<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 Advertise Scheduler @(codeType == LuckyCardUtils.CodeType.LUCKY_CALL ? " CALL" : " CARD")</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 Scheduler</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="searchMonth">Month</label>
                                                        <select class="form-control" id="searchMonth" name="searchMonth">
                                                            @for (int i = 1; i <= 12; i++)
                                                            {
                                                                if (i == DateTime.Now.Month)
                                                                {
                                                                    <option value="@i" selected>@i</option>
                                                                }
                                                                else
                                                                {
                                                                    <option value="@i">@i</option>
                                                                }
                                                            }
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label for="teamName">Year</label>
                                                        <select class="form-control" id="searchYear" name="searchYear">
                                                            @for (int i = -1; i <= 10; i++)
                                                            {
                                                                if (i == 0)
                                                                {
                                                                    <option value="@(DateTime.Now.Year + i)" selected>@(DateTime.Now.Year + i)</option>
                                                                }
                                                                else
                                                                {
                                                                    <option value="@(DateTime.Now.Year + i)">@(DateTime.Now.Year + i)</option>
                                                                }
                                                            }
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <button type="button" class="btn btn-primary" onclick="searchSvAdvSchedule()" id="btnSearch">
                                                        <i class="icon-search"></i> Search
                                                    </button>
                                                    <button type="button" class="btn btn-success" onclick="addSvAdvSchedule()">
                                                        <i class="icon-plus-circle"></i> Add
                                                    </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">Schedule tiltle</th>
                                                <th scope="col" class="text-center">Start Time</th>
                                                <th scope="col" class="text-center">End Time</th>
                                                <th scope="col" class="text-center">Max Total Message</th>
                                                <th scope="col" class="text-center">List Adv</th>
                                            </tr>
                                        </thead>
                                        <tbody id="gridbody">
                                            @if (Model != null)
                                            {
                                                for (int i = 0; i < Model.Count; i++)
                                                {
                                                    SvAdvSchedule advSchedule = Model[@i];
                                                    <tr>
                                                        <td scope="row">@(i + 1)</td>
                                                        <td class="text-center">
                                                            <span class="fa fa-edit cursor-pointer" onclick="editSvAdvSchedule('@advSchedule.id')"></span>
                                                            @if (advSchedule.status == 1)
                                                            {
                                                                <span class="fa fa-remove text-danger cursor-pointer" onclick="removeSvAdvSchedule('@advSchedule.id')"></span>
                                                            }
                                                            else
                                                            {
                                                                <span class="fa fa-undo text-primary cursor-pointer" onclick="enableSvAdvSchedule('@advSchedule.id')"></span>
                                                            }
                                                        </td>
                                                        <td class="text-left">@advSchedule.schedule_name</td>
                                                        <td class="text-center">@advSchedule.from_date.Value.ToString("dd/MM/yyyy HH:mm:ss")</td>
                                                        <td class="text-center">@advSchedule.to_date.Value.ToString("dd/MM/yyyy HH:mm:ss")</td>
                                                        <td class="text-right">@advSchedule.max_total_msg</td>
                                                        <td class="text-left">
                                                            @foreach (SvAdv adv in advSchedule.list_adv)
                                                            {
                                                                <span style="display:block">@(adv.adv_name + ": " + adv.percent + "%")</span>
                                                            }
                                                        </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-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="modalLabelService">New Service Adv Schedule</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <input type="hidden" id="scheduleId" />
                    <div class="modal-body" id="adv-info">


                    </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="addNewSvAdvSchedule()">Add</button>
                        <button type="button" id="btnUpdateInfo" class="btn btn-outline-primary" onclick="saveChangeSvAdvSchedule()">Save Info</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@section Scripts {
    <script>

        function loadServiceAdv(scheduleId) {
            startSpinner('adv-info');
            $("#scheduleId").val(scheduleId);
            $.ajax({
                url: subDomain + "/Admin/GetServiceAdvPartial",
                data: {
                    scheduleId: scheduleId,
                    codeType: $("#codeType").val()
                },
                type: "POST",
                success: function (data) {
                    //console.log(data);
                    $("#adv-info").html(data);

                    stopSpinner('adv-info');
                },
                error: function () {
                    stopSpinner('adv-info');
                }
            });
        };



        // Service Adv Schedule
        function searchSvAdvSchedule() {
            console.log("Search");
            startSpinner('btnSearch');
            $.ajax({
                url: subDomain + "/Admin/SearchSvAdvSchedule",
                data: {
                    month: $("#searchMonth").val(),
                    year: $("#searchYear").val(),
                    codeType: $("#codeType").val()
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data);
                    if (data.error != "0") {
                        setTimeout(function () {
                            showModal('message-dialog');
                            $('#message-content').html(data.content.split("\n").join("<br />"));
                        }, 1000);
                    } else {
                        //showModal('message-dialog');
                        //$('#message-content').html(data.content.split("\n").join("<br />"));
                        updateGridData(data.listService);
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);
                }
            })
        }


        function addSvAdvSchedule() {
            // clear data
            $("#scheduleName").val("");
            $("#maxTotalMsg").val(0);

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

            // load sv adv
            loadServiceAdv();

            // show modal
            showModal("modal-add-service");
        }

        function addNewSvAdvSchedule() {
            // Checking whether FormData is available in browser
            if (window.FormData !== undefined) {

                var listAdv = [];
                $(".sv-adv-id").each(function (index) {
                    var advId = $(this).val();
                    var percent = $("#percent-" + index).val();
                    listAdv.push({ id: advId, percent: percent });
                });
                var svAdv = { listAdv: listAdv };
                console.log(svAdv);
                console.log(JSON.stringify(svAdv));
                // Create FormData object
                var formData = new FormData();

                // Adding one more key to FormData object
                formData.append('scheduleName', $("#scheduleName").val());
                formData.append('maxTotalMsg', $("#maxTotalMsg").val());
                formData.append('fromDate', $("#fromDate").val());
                formData.append('toDate', $("#toDate").val());
                formData.append('listAdv', JSON.stringify(svAdv));
                formData.append('codeType', $("#codeType").val());

                $.ajax({
                    url: subDomain + '/Admin/AddSvAdvSchedule',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: formData,
                    success: function (result) {
                        if (result.error_code == '0') {
                            swal("Success!", "Add service adv schedule success!", "success").
                                then((result) => {
                                    hideModal("modal-add-service");
                                    searchSvAdvSchedule();
                                });
                            //alert('Import success: ' + result.content);
                        } else {
                            swal("Add service adv schedule failed!", result.error_content, "error");
                            //alert('Import failed: ' + result.content);
                        }
                    },
                    error: function (err) {
                        swal("Add service adv schedule failed!", err.statusText, "error");
                        //alert(err.statusText);
                    }
                });
            } else {
                swal("Failed!", "FormData is not supported.", "error");
                //alert("FormData is not supported.");
            }
        }


        function saveChangeSvAdvSchedule() {
            // Checking whether FormData is available in browser
            if (window.FormData !== undefined) {
                var formData = new FormData();
                // Adding one more key to FormData object
                var listAdv = [];
                $(".sv-adv-id").each(function (index) {
                    var advId = $(this).val();
                    var percent = $("#percent-" + index).val();
                    listAdv.push({ id: advId, percent: percent });
                });
                var svAdv = { listAdv: listAdv };
                console.log(svAdv);
                console.log(JSON.stringify(svAdv));

                formData.append('scheduleId', $("#scheduleId").val());
                formData.append('scheduleName', $("#scheduleName").val());
                formData.append('maxTotalMsg', $("#maxTotalMsg").val());
                formData.append('fromDate', $("#fromDate").val());
                formData.append('toDate', $("#toDate").val());
                formData.append('listAdv', JSON.stringify(svAdv));
                formData.append('codeType', $("#codeType").val());

                $.ajax({
                    url: subDomain + '/Admin/UpdateSvAdvSchedule',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: formData,
                    success: function (result) {
                        if (result.error_code == '0') {
                            swal("Success!", "Update service adv success!", "success").
                                then((result) => {
                                    hideModal("modal-add-service");
                                    searchSvAdvSchedule();
                                });
                            //alert('Import success: ' + result.content);
                        } else {
                            swal("Update service adv failed!", result.content, "error");
                            //alert('Import failed: ' + result.content);
                        }
                    },
                    error: function (err) {
                        swal("Update service adv failed!", err.statusText, "error");
                        //alert(err.statusText);
                    }
                });
            } else {
                swal("Failed!", "FormData is not supported.", "error");
                //alert("FormData is not supported.");
            }
        }


        function saveSvAdvScheduleStatus(status) {
            // Checking whether FormData is available in browser
            if (window.FormData !== undefined) {
                var formData = new FormData();
                // Adding one more key to FormData object

                formData.append('status', status);
                formData.append('scheduleId', $("#scheduleId").val());
                formData.append('codeType', $("#codeType").val());

                $.ajax({
                    url: subDomain + '/Admin/UpdateSvAdvScheduleStatus',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: formData,
                    success: function (result) {
                        if (result.error_code == '0') {
                            swal("Success!", "Update service adv schedule success!", "success").
                                then((result) => {
                                    hideModal("modal-add-service");
                                    searchSvAdvSchedule();
                                });
                            //alert('Import success: ' + result.content);
                        } else {
                            swal("Update service adv schedule failed!", result.content, "error");
                            //alert('Import failed: ' + result.content);
                        }
                    },
                    error: function (err) {
                        swal("Update service adv schedule failed!", err.statusText, "error");
                        //alert(err.statusText);
                    }
                });
            } else {
                swal("Failed!", "FormData is not supported.", "error");
                //alert("FormData is not supported.");
            }
        }


        function editSvAdvSchedule(scheduleId) {
            // load sv adv
            loadServiceAdv(scheduleId);
            $("#btnAddService").hide();
            $("#btnUpdateInfo").show();
            showModal("modal-add-service");

            //console.log(scheduleId);
            //// get service info
            //$.ajax({
            //    url: subDomain + "/Admin/GetSvAdvScheduleById",
            //    data: {
            //        scheduleId: scheduleId
            //    },
            //    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
            //            $("#scheduleId").val(service.adv_id);
            //            $("#fromDate").val(service.from_date);
            //            $("#toDate").val(service.to_date);
            //            $("#scheduleName").val(service.schedule_name);

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

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

        function removeSvAdvSchedule(id) {
            console.log(id);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/UpdateSvAdvScheduleStatus",
                data: {
                    scheduleId: id,
                    status: "0",
                    codeType: $("#codeType").val()
                },
                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 {
                        searchSvAdvSchedule();
                    }
                },
                error: function (data) {
                    console.log(data.error_code);
                }
            })
        }

        function enableSvAdvSchedule(id) {
            console.log(id);
            // get service info
            $.ajax({
                url: subDomain + "/Admin/UpdateSvAdvScheduleStatus",
                data: {
                    scheduleId: id,
                    status: "1",
                    codeType: $("#codeType").val()
                },
                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 {
                        searchSvAdvSchedule();
                    }
                },
                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='editSvAdvSchedule(\"" + service.id + "\")'></span> "
                        + (service.status == 1 ? "<span class='fa fa-remove  text-danger cursor-pointer' onclick='removeSvAdvSchedule(\"" + service.id + "\")'></span></td >"
                            : "<span class='fa fa-undo text-primary cursor-pointer' onclick='enableSvAdvSchedule(\"" + service.id + "\")'></span></td >");
                    html += "<td class='text-left'>" + service.schedule_name + "</td>";
                    html += "<td class='text-center'>" + moment(service.from_date).format("DD/MM/YYYY HH:mm:ss") + "</td>";
                    html += "<td class='text-center'>" + moment(service.to_date).format("DD/MM/YYYY HH:mm:ss") + "</td>";
                    html += "<td class='text-right'>" + service.max_total_msg + "</td>";
                    html += "<td class='text-left'>";
                    for (var j = 0; j < service.list_adv.length; j++) {
                        let adv = service.list_adv[j];
                        html += "<span style='display:block'>" + adv.adv_name + ": " + adv.percent + "%</span>";
                    }
                    html += "</td>";
                    html += "</tr>";

                }
            }
            $("#gridbody").html(html);
        }


    </script>
}