@{
    ViewBag.Title = "MenuDetail";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

@using NEducation.Content.Texts

<link type="text/css" rel="stylesheet" href="~/Content/assets/css/product-intro.css" />
<link type="text/css" rel="stylesheet" href="~/Content/assets/css/learning-diary.css" />
<link rel="stylesheet" href="~/Content/assets/css/home-voca.css" />
<link rel="stylesheet" href="~/Content/assets/css/common-lesson-view.css" />
@*<link rel="stylesheet" href="~/Content/assets/css/dialog.css" />*@



@*@using NEducation.Content.Texts;
    @using NEducation.NEduService;*@
@using NEducation.Controllers;
@using NEducation.Code;
@model NEducation.Models.HfModel
@using System.Globalization;
@using System.Linq;
@using System.Threading;
@{
    List<HfData> hfDatas = Session["categories"] as List<HfData>;
    HfData menu = hfDatas.Find(x => x.PathParent == "/menu");
    HfData gym = hfDatas.Find(x => x.PathParent == "/gym");
    HfData nutrition = hfDatas.Find(x => x.PathParent == "/nutrition");

    List<SubInfo> subInfo = Session["subInfo"] as List<SubInfo>;
    SubInfo homefitness = null;
    if (subInfo != null)
    {
        homefitness = subInfo.Find(x => x.subServiceName == UtilsController.Constant.EDU_HOME_FITNESS_REG);
    }
}

@section navMenu{
    <a href="/Home/" class="nav-link">@Lang.Home</a>
    <a href="/HomeFitness/Menu?id=@(menu != null ? menu.Id : "")" class="navigation-all nav-link">@Lang.menu</a>
    @*Không Ngôn Ngữ*@
    @*<a href="/HomeFitness/Menu?id=@(nutrition != null ? nutrition.Id : "")" class="navigation-all nav-link">@Lang.nutrition</a>*@
    <a href="/HomeFitness/Menu?id=@(nutrition != null ? nutrition.Id : "")" class="navigation-all nav-link">nutrition</a>
    <a href="/HomeFitness/Menu?id=@(gym != null ? gym.Id : "")" class="navigation-all nav-link">@Lang.gym</a>
}

@section menu{
    <a href="/Home/" class="header-menu-link ">@Lang.Home</a>
    <a href="/HomeFitness/Menu?id=@(menu != null ? menu.Id : "")" class="navigation-all header-menu-link">@Lang.menu</a>
    @*Không Ngôn Ngữ*@
    <a @*href="/HomeFitness/Menu?id=@(nutrition != null ? nutrition.Id : "")" class="navigation-all header-menu-link ">@Lang.nutrition</a>*@
         <a href="/HomeFitness/Menu?id=@(nutrition != null ? nutrition.Id : "")" class="navigation-all header-menu-link ">nutrition</a>
    <a href="/HomeFitness/Menu?id=@(gym != null ? gym.Id : "")" class="navigation-all header-menu-link ">@Lang.gym</a>
}

@{
    CultureInfo currentCulture = Thread.CurrentThread.CurrentCulture;
    String nameCulture = currentCulture.Name;
}
<!-- Body -->
<div class="main-body">
    <div class="main-body-container product-detail-container">

        <!-- Banner -->
        <div class="product-detail-banner">
            <img class="img-banner" alt="Prepare For National Exam" src="~/Content/assets/homefitness/imgs/Home Fitness_image/@Model.hfDataParent.Icon" />
        </div>

        <!-- Product detail body -->
        <div class="product-detail-body">
            <!-- Infor -->
            <div class="product-detail-infor">
                <div class="block-infor">
                    <h2 class="infor-name">
                        @{
                            if (nameCulture == "vi")
                            {
                                @Model.hfDataParent.NameGlobal
                            }
                            else
                            {
                                @Model.hfDataParent.NameLocal
                            }
                        }
                    </h2>
                    <p class="infor-level">
                        @{
                            if (nameCulture == "vi")
                            {
                                @Model.hfDataParent.DescriptionGlobal
                            }
                            else
                            {
                                @Model.hfDataParent.DescriptionLocal
                            }
                        }
                    </p>
                </div>
                @{
                    if (homefitness == null)
                    {
                        <form class="block-button">
                            @Html.AntiForgeryToken()
                            <a id="buy-button" class="button-ranking"
                               data-toggle="modal"
                               data-target="#signup-dialog"
                               href="#">
                                @Lang.registerhf
                            </a>
                        </form>
                    }
                }

                <div class="clearfix"></div>
                <div class="product-tab-group">
                    <a data-toggle="tab" id="product-tab-lesson" class="product-tab-lesson product-tab-active" href="#tab-lesson">
                        @(Model.hfDataParent.PathParent.Contains("/nutrition") ? Lang.toolCal :
    Model.hfDataParent.PathParent.Contains("/menu") ? Lang.menu : Lang.gym)
                        @*<span id="product-tab-lesson">1</span>*@
                    </a>
                    <a data-toggle="tab" id="product-tab-intro" class="product-tab-intro" href="#tab-intro">@Lang.Introduction</a>
                </div>
            </div>
            <!-- Lesson -->
            <div class="tab-content">
                <div class="product-detail-lesson tab-pane fade in active" id="tab-lesson">
                    <div class="row lesson-list">
                        @if (Model.hfDataParent.PathParent == "/nutrition/tdee")
                        {
                            <div class="hf-nutrition-container  hf-nutrition-row">
                                <h3 style="font-weight:700;">
                                    @*Không Ngôn Ngữ*@
                                    @*@Lang.caloTool*@
                                    <span>caloTool</span>
                                </h3>
                                <div class="row hf-row">
                                    <div class="col-md-4 hf-nutrition-title">
                                        <h4>@Lang.height</h4>
                                    </div>
                                    <div class="col-md-8 hf-nutrition-box">
                                        <input class="box" id="tdee-height" type="number" placeholder="cm" />
                                    </div>
                                    <div class="col-md-4 hf-nutrition-title">
                                        <h4>@Lang.weight</h4>
                                    </div>
                                    <div class="col-md-8 hf-nutrition-box">
                                        <input class="box" id="tdee-weight" type="number" placeholder="kg" />
                                    </div>
                                    <div class="col-md-4 hf-nutrition-title">
                                        <h4>@Lang.sex</h4>
                                    </div>
                                    <div class="col-md-8 hf-nutrition-box" style="text-align: initial;">
                                        <form id="sex-container">
                                            <input type="radio" id="sex1" name="sex" value="0" checked>
                                            <label for="sex1">@Lang.female</label><br>
                                            <input type="radio" id="sex2" name="sex" value="1">
                                            <label for="sex2">@Lang.male</label><br><br>
                                        </form>
                                    </div>

                                    <div class="col-md-4 hf-nutrition-title" style=" margin-top: 30px;">
                                        <h4>@Lang.age</h4>
                                    </div>
                                    <div class="col-md-8 hf-nutrition-box" style=" margin-top: 30px;">
                                        <input class="box" id="tdee-age" type="number" placeholder="" />
                                    </div>

                                    @*<div class="col-md-5 hf-nutrition-title" style=" margin-top: 10px;">
                                            <h4>@Lang.needToLoose</h4>
                                        </div>
                                        <div class="col-md-7 hf-nutrition-box" style=" margin-top: 10px;">
                                            <input class="box" id="tdee-need-lose" type="number" placeholder="kg" />
                                        </div>*@
                                    <div class="col-md-4 hf-nutrition-title">
                                        <h4>@Lang.act</h4>
                                    </div>
                                    <div class="col-md-8 hf-nutrition-box" style="text-align:initial;">
                                        <form id="act-container">
                                            <input type="radio" id="act1" name="act" value="1.2" checked>
                                            <label for="act1">@Lang.act_des_1</label><br>
                                            <input type="radio" id="act2" name="act" value="1.375">
                                            <label for="act2">@Lang.act_des_2</label><br>
                                            <input type="radio" id="act3" name="act" value="1.55">
                                            <label for="act3">@Lang.act_des_3</label><br>
                                            <input type="radio" id="act4" name="act" value="1.725">
                                            <label for="act4">@Lang.act_des_4</label><br><br>
                                        </form>
                                    </div>
                                </div>
                                <div>
                                    <button class="hf-butrition-button" onclick="tdeeClick()">
                                        @*Không Ngôn Ngữ*@
                                        @*Lang.caloCal*@
                                        caloCal
                                    </button>
                                </div>
                                <div class="col-md-12 hf-nutrition-box" style=" margin-top: 25px; text-align: center;">
                                    <p readonly id="tdee-result" class="box" value="" style="width: 100%; height: auto; text-align: center; font-size: 20px;">
                                        @*Không Ngôn Ngữ*@
                                        @*@Lang.needToEat XXXX @Lang.calo*@
                                        @Lang.needToEat XXXX
                                    </p>
                                </div>
                            </div>
                        }
                        else if (Model.hfDataParent.PathParent == "/nutrition/bmi")
                        {
                            <div class="hf-nutrition-container  hf-nutrition-row">
                                <h3 style="font-weight:700;">
                                    @*Không Ngôn Ngữ*@
                                    @*@Lang.caloTool*@
                                    caloTool
                                </h3>
                                <div class="row hf-row">
                                    <div class="col-md-4 hf-nutrition-title">
                                        <h4>@Lang.height</h4>
                                    </div>
                                    <div class="col-md-8 hf-nutrition-box">
                                        <input class="box" id="bmi-height" type="number" placeholder="cm" />
                                    </div>
                                    <div class="col-md-4 hf-nutrition-title">
                                        <h4>@Lang.weight</h4>
                                    </div>
                                    <div class="col-md-8 hf-nutrition-box">
                                        <input class="box" id="bmi-weight" type="number" placeholder="kg" />
                                    </div>
                                </div>

                                <div>
                                    <button class="hf-butrition-button" onclick="bmiClick()">
                                        @*Không Ngôn Ngữ*@
                                        @*@Lang.caloCal*@
                                        <span>caloCal</span>
                                    </button>
                                </div>

                                <div class="col-md-12 hf-nutrition-box" style=" margin-top: 25px; text-align: center;">
                                    <p readonly id="bmi-result" class="box" value="@Lang.bmiNum XXX, @Lang.bodyStatus YY" style="width: 100%; height: auto; text-align: center; font-size: 20px;">
                                        @Lang.bmiNum XXX, @Lang.bodyStatus YY
                                    </p>
                                </div>
                            </div>
                        }
                        else
                        {
                            for (int i = 0; i < Model.hfDatas.Count; i++)
                            {
                                <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 lesson-item">
                                    <div style="max-width:200px;">
                                        <div class="lesson-image">
                                            <img src="~/Content/assets/homefitness/imgs/Home Fitness_image/@Model.hfDatas[i].Icon" alt="@if (nameCulture == "vi")
                                            {
                                                @Model.hfDatas[i].NameGlobal
                                            }
                                            else
                                            {
                                                @Model.hfDatas[i].NameLocal
                                            }">
                                        </div>
                                        <p class="lesson-name">
                                            @if (nameCulture == "vi")
                                            {
                                                @Model.hfDatas[i].NameGlobal
                                            }
                                            else
                                            {
                                                @Model.hfDatas[i].NameLocal
                                            }
                                        </p>

                                        @if (homefitness != null)
                                        {
                                            <a href="/HomeFitness/MenuContent?id=@Model.hfDatas[i].Id" class="lesson-button button-learn-now">
                                                @Lang.LearnNow
                                            </a>
                                        }
                                        else
                                        {
                                            <a href="#" class="lesson-button button-lock">
                                                @Lang.Locked
                                            </a>
                                        }
                                    </div>
                                </div>
                            }
                        }
                    </div>
                </div>
                <div class="product-detail-lesson tab-pane fade" id="tab-intro">
                    @{
                        if (nameCulture == "vi")
                        {
                            @Html.Raw(@Model.hfDataParent.IntroductionGlobal)
                        }
                        else
                        {
                            @Html.Raw(@Model.hfDataParent.IntroductionLocal)
                        }
                    }

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="~/Content/assets/homefitness/js/hf-main.js"></script>

<script>
    function tdeeClick() {
        let height = $("#tdee-height").val();
        let weight = $("#tdee-weight").val();
        let age = $("#tdee-age").val();

        let sex = $('input[name="sex"]:checked').val();
        let act = $('input[name="act"]:checked').val();

        console.log("height: " + height);
        console.log("weight: " + weight);
        console.log("age: " + age);
        console.log("sex: " + sex);
        console.log("act: " + act);

        let check = 1;
        if (height == null || height == "") {
            $("#tdee-height").addClass("red-box");
            check *= 0;
        }
        if (weight == null || weight == "") {
            $("#tdee-weight").addClass("red-box");
            check *= 0;
        }
        if (age == null || age == "") {
            $("#tdee-age").addClass("red-box");
            check *= 0;
        }
        console.log("check: " + check);

        if (check == 1) {
            let BMR = 0;
            if (sex == "0") {
                BMR = 655.1 + (9.563 * parseInt(weight)) + (1.85 * parseInt(height)) - (4.676 * parseInt(age));

            } else {
                BMR = 66.47 + (13.75 * parseInt(weight)) + (5.003 * parseInt(height)) - (6.755 * parseInt(age));
            }
            console.log("BMR: " + BMR);

            let TDEE = (BMR * parseFloat(act)).toFixed(0);
            console.log("TDEE: " + TDEE);

            @*document.getElementById('tdee-result').innerHTML = '@Lang.needToEat' + " " + TDEE + " " + '@Lang.calo'*@
            document.getElementById('tdee-result').innerHTML = '@Lang.needToEat' + " " + TDEE

        }

    }

    function bmiClick() {
        let height = $("#bmi-height").val();
        let weight = $("#bmi-weight").val();

        console.log("height: " + height);
        console.log("weight: " + weight);

        let check = 1;
        if (height == null || height == "") {
            $("#bmi-height").addClass("red-box");
            check *= 0;
        }
        if (weight == null || weight == "") {
            $("#bmi-weight").addClass("red-box");
            check *= 0;
        }
        if (check == 1) {
            let BMI = (parseInt(weight) / (parseInt(height) * 2) * 100).toFixed(1);
            console.log("BMI: " + BMI);
            if (BMI < 18.5) {
                document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " " + '@Lang.slim';
            } else if (BMI > 18.6 && BMI <= 24.9) {
                document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " " + '@Lang.normal';
            } else if (BMI > 24.9 && BMI <= 29.9) {
                    /*Không Ngôn Ngữ*/
                @*document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " " + '@Lang.overWeight';*@
                document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " " ;
            } else if (BMI > 29.9 && BMI <= 34.9) {
                /*Không Ngôn Ngữ*/
                @*document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " " + '@Lang.fat1'*@
                document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " ";
            } else if (BMI > 34.9 && BMI <= 39.9) {
                @*document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " " + '@Lang.fat2'*@
                document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " ";
            } else if (BMI > 39.9) {
                @*document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " " + '@Lang.fat2'*@
                document.getElementById('bmi-result').innerHTML = '@Lang.bmiNum' + BMI + ", " + '@Lang.bodyStatus' + " ";
            }
        }
    }
</script>