<input type="hidden" id="page-menu-id" name="" value="#menu_master" />
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Manage Event</h1>
</div>
@if (!Html.ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger">
        @Html.ValidationSummary(false, "Error ! ไม่สามารถทำการบันทึกข้อมูลได้")
    </div>
}
<div class="card mb-4">
    <div class="card-header">
        ระบุข้อมูล
    </div>
    <div class="card-body">
        <div class="form-group row">
            <div class="col-sm-2">
                <label for="" class="col-form-label">Case Type Name<sup class="text-danger">*</sup></label>
            </div>
            <div class="col-sm-4">
                <input class="form-control" style="background-color:lightgray;" value="@Model.CaseType.CaseTypeName" />

            </div>
            <div class="col-sm-2">
                <label for="" class="col-form-label">Country<sup class="text-danger">*</sup></label>
            </div>
            <div class="col-sm-4">
                @{
                    string countryName = "TH";
                    if (Model.CaseType.CountryId == 2)
                    {
                        countryName = "MM";
                    }
                    else if (Model.CaseType.CountryId == 3)
                    {
                        countryName = "KH";
                    }else if (Model.CaseType.CountryId == 4)
                    {
                        countryName = "LA";
                    }

                }
                <input class="form-control" style="background-color:lightgray;" value="@countryName" />
                <input type="hidden" id="HD_CASE_TYPE_ID" name="HD_CASE_TYPE_ID" value="@Model.CaseType.CaseTypeId" />

            </div>
        </div>
        <p>
            <a href="javascript:;" data-toggle="modal" data-target="#eventModal" class="btn btn-danger"><i class="fas fa-plus-square"></i> Add Event</a>
        </p>

        @*<nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Event Setting</a>
            </div>
        </nav>*@
        <div id="event_pagination" style="position:relative;">
            <div class="table-loader text-center" style="display:none;">
                <div class="overlay">
                    <i class="fas fa-3x fa-spinner fa-pulse"></i>
                </div>
                @*style="display:none;"*@

            </div>
            <table class="table table-hover table-bordered ">
                <thead>
                    <tr>
                        <th><a href="javascript:;" onclick="sortTable('#event_pagination',this,'loadCaseEvent')" data-by="EventId" data-direction="" class="order sorting">No.</a></th>
                        <th><a href="javascript:;" onclick="sortTable('#event_pagination',this,'loadCaseEvent')" data-by="EventName" data-direction="" class="order sorting">Event Name</a></th>
                        <th>Deadline</th>
                        <th>FreeText</th>
                        <th>Timesheet</th>
                        <th>Status</th>
                        <th style="width:180px;">-</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <br /><br />
            <div class="supplierPager">
                <div class="row">
                    <div class="col-md-6">
                        <input type="hidden" class="page" value="@Model.Request.PageNumber" />
                        <input type="hidden" class="page-size" value="@Model.Request.PageSize" />
                        <input type="hidden" class="numrows" value="0" />
                        <input type="hidden" class="orderBy" value="@Model.Request.OrderBy" />
                        <input type="hidden" class="orderDirection" value="@Model.Request.OrderDirection" />
                        <input type="hidden" class="params" value="@Model.QueryString" />
                        แสดงรายการ <span class="start-record"></span> ถึง <span class="end-record"></span> จากทั้งหมด <span class="total-record"></span> รายการ
                    </div>
                    <div class="col-md-6 text-right pagination-zone">

                    </div>
                </div>
            </div>
        </div>
        <br /><br />
        @*<button class="btn btn-primary btn-icon-split">
                <span class="icon text-white-50">
                    <i class="far fa-save"></i>
                </span>
                <span class="text">Save</span>
            </button>*@
        <a href="@Url.Action("Index")" class="btn btn-secondary btn-icon-split">
            <span class="icon text-white-50">
                <i class="fas fa-arrow-left"></i>
            </span>
            <span class="text">Back</span>
        </a>
    </div>
</div>
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="createEventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="" method="post" id="event-form">
                <div class="modal-body">
                    <div class="alert alert-danger" id="error_event" style="display:none;">
                        <span ></span>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-1">&nbsp;</div>
                        <div class="col-md-3">Event <sup class="text-danger">*</sup></div>
                        <div class="col-md-6">
                            <select class="form-control" name="EventId" id="ddl_events">
                                <option value="">Select Event</option>
                            </select>
                        </div>
                        <div class="col-md-2">&nbsp;</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="BTN_SUBMIT">Save</button>
                </div>
            </form>

        </div>
    </div>
</div>
@section scripts{
    <script>
        function doEdit(eventId, eventName, status, deadline, freetext, timesheet) {
            $("#HD_EVENT_ID").val(eventId);
            $("#TXT_EVENT_NAME_EDIT").val(eventName);
            $("#CBO_STATUS_EDIT").val(status);
            $("#CBO_DEADLINE_EDIT").val(deadline);
            $("#CBO_FREETEXT_EDIT").val(freetext);
            $("#CBO_TIMESHEET_EDIT").val(timesheet);
            $('#editEventModal').modal('show');
        }

    </script>
    <script>
    $(document).ready(function () {

        $("#BTN_ADD").click(function () {
            var eventName = $.trim($("#TXT_EVENT_NAME").val());
            var status = $.trim($("#CBO_STATUS").val());
            var deadline = $.trim($("#CBO_DEADLINE").val());
            var freetext = $.trim($("#CBO_FREETEXT").val());
            var timesheet = $.trim($("#CBO_TIMESHEET").val());
            var caseTypeId =  $.trim($("#HD_CASE_TYPE_ID").val());

            if (eventName == "" ) {
                $("#SP_ERR_MSG_CREATE").html("Please input Event Name");

                return;
            } else {
                $("#SP_ERR_MSG_CREATE").html("");
            }

            $.ajax({
                type: 'POST',
                url: '@Url.Action("EventAdd", "MasterCase")',
                dataType: 'json',
                data: {
                    "eventName": eventName,
                    "status": status,
                    "deadline": deadline,
                    "freetext": freetext,
                    "timesheet": timesheet,
                    "caseTypeId": caseTypeId
                },
                beforeSend: function () {
                    //WaitDialog();
                },
                success: function (response) {
                    var data = $.parseJSON(response);
                    console.log(data);
                    if (data.status == 1) {
                        $('#createEventModal').modal('hide');
                        location.reload();
                    } else {
                        $("#SP_ERR_MSG_CREATE").html(data.msg);
                    }
                }
            });
        });

        $("#BTN_UPDATE").click(function () {
            var eventName = $.trim($("#TXT_EVENT_NAME_EDIT").val());
            var status = $.trim($("#CBO_STATUS_EDIT").val());
            var deadline = $.trim($("#CBO_DEADLINE_EDIT").val());
            var freetext = $.trim($("#CBO_FREETEXT_EDIT").val());
            var timesheet = $.trim($("#CBO_TIMESHEET_EDIT").val());
            var caseTypeId =  $.trim($("#HD_CASE_TYPE_ID").val());
            var eventId = $.trim($("#HD_EVENT_ID").val());
            if (eventName == "" ) {
                $("#SP_ERR_MSG_EDIT").html("Please input Event Name");

                return;
            } else {
                $("#SP_ERR_MSG_EDIT").html("");
            }

            $.ajax({
                type: 'POST',
                url: '@Url.Action("EventUpdate", "MasterCase")',
                dataType: 'json',
                data: {
                    "eventName": eventName,
                    "status": status,
                    "deadline": deadline,
                    "freetext": freetext,
                    "timesheet": timesheet,
                    "caseTypeId": caseTypeId,
                    "eventId": eventId
                },
                beforeSend: function () {
                    //WaitDialog();
                },
                success: function (response) {
                    var data = $.parseJSON(response);
                    console.log(data);
                    if (data.status == 1) {
                        $('#editEventModal').modal('hide');
                        location.reload();
                    } else {
                        $("#SP_ERR_MSG_EDIT").html(data.msg);
                    }


                }
            });
        });

    });
    </script>
    <script>
        var urlLoadCaseEvent = "@Url.Action("LoadMasterEvent")";
        var currentCaseTypeId = "@Model.CaseType.CaseTypeId";
        var urlLoadAllEvents = "@Url.Action("LoadAll","MasterEvent")";
        var urlCreate = "@Url.Action("ManageEventCreate")";
        var urlDelete = "@Url.Action("ManageEventDelete")";
    </script>
    <script src="<?php echo $path; ?>Scripts/jquery.validate.min.js"></script>
    <script src="<?php echo $path; ?>Scripts/pages/masterCaseEvent.js"></script>

}