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


@using System.Threading;
@using SuperAdmin.Controllers;
@using SuperAdmin.Models.View;
@using SuperAdmin.Models.Object;

@model EventViewModel

@section Styles{

    <style>
        .button-event {
            margin: 10px 0 0 0 !important;
            padding: revert;
            height: 30px;
            min-width: 100px;
            width: 100%;
        }

        .card-show {
            margin: 5px;
            border-radius: 10px;
        }

        .nav-justified {
            margin-top: 50px;
        }

        .pagination-ul {
            /*float: right;*/
            /* position: absolute; */
            /* right: 0; */
            margin-top: 20px;
            padding-right: 15px;
        }

        .pagination-active {
            background: #4c84ff !important;
            color: #ffffff !important;
        }

        .pagination-disable {
            pointer-events: none;
        }
    </style>
}

@{
    if (Model == null)
    {
        @*<script>
                window.location.href = @Url.Action("Index", "Tree");
            </script>*@
    }
    else
    {
        int page = 1;
        int totalPage = 1;
        string status = UtilsController.Constant.WAIT_APPROVAL;


        if (Model.page != null)
        {
            page = int.Parse(Model.page);
        }

        if (Model.status != null)
        {
            status = Model.status;
        }

        if (Model.totalPage != null)
        {
            totalPage = int.Parse(Model.totalPage);
        }

        <div class="content-header row">
            <div class="content-header-left col-md-6 col-xs-12 mb-1">
                <h2 class="content-header-title">Notice Approval</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="/Tree/Index">Notice</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#">Approves</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="tree-container">



            <ul class="nav nav-tabs nav-justified mb-4" role="tablist">
                <li class="nav-item nav-status" value="@UtilsController.Constant.WAIT_APPROVAL">
                    <a class="tab-@UtilsController.Constant.WAIT_APPROVAL nav-link tab-status" data-toggle="tab" href="#draft" style="text-transform: uppercase;">Wait Approval</a>
                </li>
                <li class="nav-item nav-status" value="@UtilsController.Constant.APPROVED">
                    <a class="tab-@UtilsController.Constant.APPROVED nav-link tab-status" data-toggle="tab" href="#approval" style="text-transform: uppercase;">Approved</a>
                </li>
                <li class="nav-item nav-status" value="@UtilsController.Constant.REJECTED">
                    <a class="tab-@UtilsController.Constant.REJECTED nav-link tab-status" data-toggle="tab" href="#published" style="text-transform: uppercase;">Rejected</a>
                </li>
            </ul>


            <div class="tab-content">
                <div id="draft" class="container tab-pane fade in active show" style="min-width:100%">
                    <table class="table table-striped table-bordered  table-hover">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center">#</th>
                                <th scope="col" class="text-center">Action</th>
                                <th scope="col" class="text-center">Name</th>
                                <th scope="col" class="text-center">From Date</th>
                                <th scope="col" class="text-center">To Date</th>
                                <th scope="col" class="text-center">Status</th>
                                @*<th scope="col" class="text-center">Action</th>*@
                            </tr>
                        </thead>
                        <tbody>
                            @{
                                for (int i = 0; i < Model.events.data.Count; i++)
                                {
                                    RowStructure eventDetail = Model.events.data[i];
                                    <tr>
                                        <td scope="row" class="text-center">@(i + 1)</td>
                                        <td class="text-center"><img class="icon-style edit-btn" value="100207" src="/img/icons8-edit-96.png" onclick="approvesData(@eventDetail.id)"></td>
                                        <td class="text-left"><a onclick="approvesData(@eventDetail.id)">@eventDetail.name_global</a></td>
                                        <td class="text-center">@eventDetail.from_date</td>
                                        <td class="text-center">@eventDetail.to_date</td>
                                        <td class="text-center">@UtilsController.GetStatus(eventDetail.is_show)</td>
                                        @*<td class="text-center">
                                                <img class="icon-action approve-event" src="~/img/icons8-rubber-stamp-80.png" value="@eventDetail.id" />
                                                <img class="icon-action reject-event" src="~/img/icons8-unavailable-90.png" value="@eventDetail.id" />
                                                <img class="icon-action edit-event" src="~/img/icons8-edit-64.png" value="@eventDetail.id" />
                                            </td>*@
                                    </tr>
                                }
                            }
                        </tbody>
                    </table>
                </div>
                <div id="approval" class="container tab-pane fade" style="min-width:100%">

                </div>
                <div id="published" class="container tab-pane fade" style="min-width:100%">

                </div>
                <div id="expired" class="container tab-pane fade" style="min-width:100%">

                </div>
                <div id="rejected" class="container tab-pane fade" style="min-width:100%">
                </div>
            </div>


            <div class="category-post-pagination col-xs-12 pagination-style" style="text-align: center;">
                <ul class="pagination clearfix pagination-ul">
                    @if (page > 1)
                    {
                        <li class="pagination-prev">
                            <a href="@Url.Action("Approves", "Tree", new { page = 1, status = status })">‹‹</a>
                        </li>
                    }
                    @if (page > 1)
                    {
                        <li class="pagination-prev @(page == 1 ? "disabled pagination-disable" : "")">
                            <a href="@Url.Action("Approves", "Tree", new { page = page - 1, status = status })">‹</a>
                        </li>
                    }
                    <li class="current"><a href="@Url.Action("Approves", "Tree", new { page = page, status = status })" class="pagination-active">@(page)</a></li>
                    @if (totalPage >= page + 1)
                    {
                        <li><a href="@Url.Action("Approves", "Tree", new { page = page + 1, status = status })">@(page + 1)</a></li>
                    }
                    @if (totalPage >= page + 2)
                    {
                        <li><a href="@Url.Action("Approves", "Tree", new { page = page + 2, status = status })">@(page + 2)</a></li>
                    }
                    @if (totalPage >= page + 3)
                    {
                        <li><a href="@Url.Action("Approves", "Tree", new { page = page + 3, status = status })">@(page + 3)</a></li>
                    }
                    @if (totalPage >= page + 4)
                    {
                        <li><a href="@Url.Action("Approves", "Tree", new { page = page + 4, status = status })">@(page + 4)</a></li>
                    }
                    @if (totalPage >= page + 1)
                    {
                        <li class="pagination-next ">
                            <a href="@Url.Action("Approves", "Tree", new { page = page + 1, status = status })">›</a>
                        </li>

                    }
                    @if (totalPage > page + 4)
                    {
                        <li class="pagination-next ">
                            <a href="@Url.Action("Approves", "Tree", new { page = page + 1, status = status })">››</a>
                        </li>
                    }
                </ul>
            </div>

            <form action="@Url.Action("Approves", "Tree")" method="post" id="form-show-event-list">
                <input type="hidden" name="page" id="page" value="1" />
                <input type="hidden" name="status" id="status" value="" />
            </form>

            <form action="@Url.Action("EventEditing", "Tree")" method="post" id="form-edit-event">
                <input type="hidden" name="eventID" class="eventID" value="" />
            </form>

            <form action="@Url.Action("DeleteAction", "Tree")" method="post" id="form-delete-event">
                @Html.AntiForgeryToken()
                <input type="hidden" name="eventID" class="eventID" value="" />
            </form>

            <form action="@Url.Action("ResendAction", "Tree")" method="post" id="form-resend-event">
                @Html.AntiForgeryToken()
                <input type="hidden" name="eventID" class="eventID" value="" />
            </form>

            <script>
                $(".tab-status").each(function () {
            $(this).removeClass("active");
        });
        $(".tab-@status").addClass("active");

                $(".nav-status").on("click", function (e) {
            e.preventDefault();
            $("#page").val("1");
            var status = $(this).attr("value");
            $("#status").val(status);
            $("#form-show-event-list").submit();
        })

        $(".edit-event").on("click", function () {
            var eventId = $(this).attr("value");
            console.log("id: ", eventId);
            $(".eventID").val(eventId);
            console.log("id con: ", $(".eventID").val());

            $("#form-edit-event").submit();
        })

        function edit_event(eventID) {
            // change to another page
            $(".eventID").val(eventID);
            $.ajax({
                url: urlConfig("/Partial/ResendEvent"),
                type: "POST",
                data: {
                    __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                },
                success: function (data) {
                    $('#modalContent').html(data);
                    $('#myModal').modal('show');
                }
            });
            //$("#form-edit-event").submit();
        }

        function delete_event(eventID) {
            // hold on
            $(".eventID").val(eventID);
            $.ajax({
                url: urlConfig("/Partial/DeleteEvent"),
                type: "POST",
                data: {
                    __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                },
                success: function (data) {
                    $('#modalContent').html(data);
                    $('#myModal').modal('show');
                }
            });
            //$("#form-delete-event").submit();
        }

        function resend_event(eventID) {
            // hold on
            $(".eventID").val(eventID);
            $("#form-resend-event").submit();
        }

            </script>
        </div>
    }
}