@using WineCreate.Core.Models.ProductManagement
@model Dictionary<string, List<WineCreate.Core.ProductManagment.Models.Project.Project>>

@{
    var projectsList = Model.Values.First().OrderBy(n => n.Code);
    var country = System.Threading.Thread.CurrentThread.CurrentCulture.TextInfo.ToTitleCase(Model.Keys.First().ToLower());
}

<div class="mt-element-list">
    <div class="mt-list-head list-simple ext-1 font-white bg-blue-chambray">
        <div class="list-head-title-container">
            <h4 class="list-title">@country</h4>
        </div>
    </div>
    <div class="mt-list-container list-simple ext-1 group">

        @*Projects*@
        <a class="list-toggle-container" data-toggle="collapse" href="#projects-list" aria-expanded="true">
            <div class="list-toggle done"> @WineCreate.Language.App_GlobalResources.Menu.Projects
                <span class="badge badge-default pull-right bg-white font-green bold">@projectsList.Count()</span>
            </div>
        </a>
        <div class="panel-collapse collapse in" id="projects-list" aria-expanded="true" style="">
            <ul style="height: 330px; overflow-y: auto;">
            @foreach (var project in projectsList)
            {
                if (project.Conception.StateConception == WorkflowStatus.Approved)
                 {
                     <li class="mt-list-item done" data-projectId="@project.Id" style="font-size: 12px">@project.Code - @project.Title</li>
                 }
                 else if (project.Conception.StateConception == WorkflowStatus.NotApproved)
                 {
                     <li class="mt-list-item " data-projectId="@project.Id" style="font-size: 12px">@project.Code - @project.Title</li>
                }
                else
                {
                    <li class="mt-list-item" data-projectId="@project.Id" style="font-size: 12px">@project.Code - @project.Title</li>
            }
            }
            </ul>
        </div>

        @*Samples*@
        @*<a class="list-toggle-container collapsed" data-toggle="collapse" href="#samples-list" aria-expanded="false">
            <div class="list-toggle"> Samples
                <span class="badge badge-default pull-right bg-white font-dark bold">@projectsList.Count</span>
            </div>
        </a>
        <div class="panel-collapse collapse" id="samples-list" aria-expanded="false" style="height: 0px;">
            @foreach (var project in projectsList)
            {
                <ul>
                    <li class="mt-list-item" style="font-size: 12px">@project.Code - @project.Title</li>
                </ul>
            }
        </div>*@
    </div>
</div>

<script>
    $(document).ready(function () {
        checkContainer();
    });

    function checkContainer() {
        debugger;
        if ($('#countryDetails:has(*)').length) {
            $('#countryDetails').removeClass('hidden');
            $('#container').removeClass('col-md-12');
            $('#container').addClass('col-md-8');
            chart.reflow();
        } else {
            setTimeout(checkContainer, 50);
        }
    }

    $('li[data-projectId]').on('click', function () {
        var projectId = $(this).attr('data-projectId');
        var projectTitle = $(this).text();
        var urlProjectDetails = '@Url.Action("WfDetails","Projects", new {area = "ProductManagement"})';

        $('#detailsProject').removeClass('hidden');
        $('#projectTitleDetails').text(projectTitle);

        $('#projectDetails').load(urlProjectDetails, { id: projectId }, function () {
            $('#projectDetails').LoadingSpin('hide');
            $('#projectDetails div.portlet-footer').remove();
        });
    });

    $('.list-toggle-container').on('click', function () {
        var elements = document.getElementsByClassName("panel-collapse collapse in");
        for (var i = elements.length - 1; i >= 0; --i) {
            elements[i].className = "panel-collapse collapse";
        }
    });
</script>