@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}
@using NEducation.Content.Texts;
@using NEducation.Controllers;;
@using NEducation.Models;

@model EbookModel

@section navMenu{

    <a href="/Home/" class="nav-link">@Lang.Home</a>
    <a href="/Voca/" class="nav-link">@Lang.Vocabulary</a>
    <a href="/Grammar/" class="nav-link">@Lang.Grammar</a>
    <a href="/Listening/" class="nav-link">@Lang.Listening</a>
    @*<a href="/Ebook/" class="nav-link">
            @Lang.Ebook
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>*@
    @*<li class="menu-item-has-children header-menu-link ">
        <a href="#" class="">
            E-Library
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>
        <ul class="" style=" margin-left: 20px;">
            <li><a href="/Ebook/">@Lang.Ebook</a></li>
            <li><a href="/Ebook/Video">Children's Video</a></li>
        </ul>
    </li>*@
    <a href="/MiniGame" class="header-menu-link ">@Lang.MiniGame</a>
    @*<a href="/Music/" class="nav-link">Music</a>*@
}

@section menu{
    <a href="/Common" class="header-menu-link ">@Lang.Home</a>
    <a href="/Common/Course" class="header-menu-link ">@Lang.Library</a>
    <a href="/Voca/" class="header-menu-link ">
        @Lang.Vocabulary
    </a>
    <a href="/Grammar/" class="header-menu-link ">
        @Lang.Grammar
    </a>
    <a href="/Listening/" class="header-menu-link ">
        @Lang.Listening
    </a>
    @*<a href="/Ebook/" class="header-menu-link">
            @Lang.Ebook
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>*@
    @*<li class="menu-item-has-children header-menu-link ">
        <a href="#" class="">
            E-Library
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>
        <ul class="" style=" margin-left: 20px;">
            <li><a href="/Ebook/">@Lang.Ebook</a></li>
            <li><a href="/Ebook/Video">Children's Video</a></li>
        </ul>
    </li>*@
    <a href="/MiniGame" class="header-menu-link ">@Lang.MiniGame</a>
}

<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;
    }

    .color-1 {
        background: #f26522 !important;
        color: white !important;
    }

    .color-2 {
        background: #F39C12 !important;
        color: white !important;
    }

    .color-3 {
        background: #ff6a00 !important;
        color: white !important;
    }
</style>

<form action="@Url.Action("Index", "Ebook")" method="post" id="form-show-event-list">
    <input type="hidden" name="id" id="id" value="" />
</form>

<div style="max-width:1200px; margin:auto">
    <ul class="nav nav-tabs nav-justified mb-4" role="tablist" style="max-width: 1180px;    margin: auto;">
        @{
            for (int i = 0; i < Model.ebooks.Count; i++)
            {
                Ebook ebook = Model.ebooks[i];
                <li class="nav-item tab-@ebook.id" value="@ebook.id">
                    <a class="tab-@ebook.id nav-link color" data-toggle="tab" href="#@ebook.name" style="text-transform: uppercase; font-size: 18px;">@ebook.name</a>
                </li>
            }
        }
    </ul>

    <div class="tab-content">
        <div id="@Model.id" class="container tab-pane fade in active show" style=" min-width: 100%; margin: 0; padding: 0; overflow: auto;">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th scope="col" class="text-center">#</th>
                        <th scope="col" class="text-center">Menu</th>
                        <th scope="col" class="text-center">Book</th>
                        <th scope="col" class="text-center">Description</th>
                        <th scope="col" class="text-center">Download</th>
                    </tr>
                </thead>
                <tbody>
                    @{
                        int count = 0;
                        for (int i = 0; i < Model.now.menus.Count; i++)
                        {
                            Menu menu = Model.now.menus[i];

                            for (int j = 0; j < menu.books.Count; j++)
                            {
                                Book book = menu.books[j];
                                for (int k = 0; k < book.descriptions.Count; k++)
                                {
                                    Description description = book.descriptions[k];
                                    for (int l = 0; l < description.downloads.Count; l++)
                                    {
                                        Download download = description.downloads[l];
                                        <tr>
                                            <td scope="row" class="text-center">@(count + 1)</td>
                                            <td class="text-center">@menu.name</td>
                                            <td class="text-center">@book.name</td>
                                            <td class="text-center">@description.name</td>
                                            <td class="text-left">
                                                <a href="@download.link">@download.name</a>
                                            </td>
                                        </tr>
                                        count++;
                                    }
                                }
                            }
                        }
                    }
                </tbody>
            </table>
        </div>
    </div>

    <script>
        $(".nav-link").each(function () {
            $(this).removeClass("active");
        });

        $(".color").each(function () {
            $(this).removeClass("color-1");
            $(this).removeClass("color-2");
            $(this).removeClass("color-3");

        });
        $(".nav-item").each(function () {
            $(this).removeClass("active");
        });

        $(".tab-@Model.id").addClass("active");
        $(".tab-@Model.id").addClass("color-@Model.id");


        $(".nav-item").on("click", function (e) {
            e.preventDefault();
            $(this).addClass("active");
            $("#page").val("1");
            var id = $(this).attr("value");
            $("#id").val(id);
            $("#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();
        })
    </script>

    <style>
        .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>

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