@using System.Data
@model ALConsultoria.Web.Models.Treinos
<!-- START JUMBOTRON -->
<!-- END JUMBOTRON -->
<!-- START CONTAINER FLUID -->
<style>
    .table-detailed tr td {
        padding: 0.75rem 0.4rem;
    }

        .table-detailed tr td .progress {
            margin: 0;
        }
</style>

<style>
    .table-lims {
        margin-bottom: 10px;
    }

    .table.table-lims {
        font-size: 12px;
    }

    .table-lims tr {
    }

    .table.table-condensed thead tr th {
        white-space: normal;
        overflow: initial;
        text-overflow: initial;
        padding-left: 5px;
        padding-right: 5px;
    }

    .table.table-condensed tbody tr td {
        padding-left: 5px;
        padding-right: 5px;
    }


    .container-lims {
        width: 100%;
    }

    .tabela1 {
        width: 95%;
    }

    .tabela2 {
        text-align: center;
        width: 70%;
        margin-right: 15%;
        margin-left: 15%;
    }


    .nav-tabs-simple > li > a:after {
        background-color: #1dbb99;
    }

    .tabela1 thead tr td {
        padding: 2px 2px 2px 15px;
        background-color: black;
        margin: 0;
        color: #fff;
    }

    .tabela1 thead tr th:nth-child(2) {
        text-align: center;
    }

    .tabela1 tbody tr td {
        background-color: #EDEDED;
    }

    .tabela2 {
        border: black;
    }

        .tabela2 thead tr td {
            background-color: #7B7B7B;
            padding: 0;
        }

            .tabela2 thead tr td h5 {
                color: #fff;
                padding: 0;
                margin: 0;
                font-weight: 400;
            }

        .tabela2 tbody tr td h5 {
            margin: 0;
            font-weight: bold;
            color: #D9A600;
        }

        .tabela2 tbody .divisao-treinos {
            background-color: #E2E2E2;
        }

        .tabela2 tbody tr td h6 {
            margin: 0;
            font-weight: bold;
        }

    .tabela3 {
        text-align: center;
    }

        .tabela3 tr:nth-child(3) {
            background-color: #A7E0FF;
        }

            .tabela3 tr:nth-child(3) th {
                color: black;
                text-align: center;
                border-right: solid .05px #a4a4a4;
                border-left: solid .05px #a4a4a4;
            }

        .tabela3 tr:nth-child(even) td {
            background-color: #fff;
        }


        .tabela3 tr:nth-child(odd) td {
            background-color: #EDEDED;
        }

        .tabela3 thead tr td {
            background-color: #EDEDED;
        }

        .tabela3 thead tr td {
            background-color: #EDEDED;
            padding: 0;
        }

            .tabela3 thead tr td h4 {
                padding-left: 20px;
                font-weight: bold;
                color: #5B5B5B;
            }

            .tabela3 thead tr td h5 {
                margin: 0;
                color: #5B5B5B;
                font-weight: bold;
                padding: 5px 0 0 20px;
            }

        .tabela3 thead tr:nth-child(2) td {
            background-color: #EDEDED;
        }

        .tabela3 tbody tr:last-child td {
            text-align: left;
        }
</style>

<div class="page-content-wrapper">
    <div class="content">
        <div class="card-block">
            @Html.Partial("Breadcrumb")
            <div class="">

                @using (Html.BeginForm("Salvar", "PlanoDeTreino", FormMethod.Post, new { id = "form-personal", role = "form", @autocomplete = "off" }))
                {
                    @Html.HiddenFor(c => c.Id)
                    <div class="card card-defaut">
                        <div class="card-block">

                            <div class="row clearfix">
                                <div class="col-md-4">
                                    <div class="form-group form-group-default typehead form-group-default-select2">
                                        <label>NOME</label>
                                        @Html.DropDownListFor(c => c.Idcliente, (SelectList)ViewBag.Clientes, new { @class = "full-width", @id = "selectnome", required = "required", data_init_plugin = "select2", @style = "width:100%" })
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default">
                                        <label>OBSERVAÇÃO CLIENTE</label>
                                        <input type="text" class="form-control" id="txtobs" disabled />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group form-group-default ">
                                        <label>OBJETIVO</label>
                                        @Html.TextBoxFor(c => c.Objetivo, new { @class = "form-control" })
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-3">
                                    <div class="form-group form-group-default ">
                                        <label>EXERCÍCIO</label>
                                        @Html.TextBoxFor(c => c.Exercicio, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group form-group-default ">
                                        <label>TEMPO</label>
                                        @Html.TextBoxFor(c => c.Tempo, new { @class = "form-control", required = "required" })
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group form-group-default  form-group-default-select2">
                                        <label>INTENSIDADE</label>
                                        @Html.DropDownListFor(c => c.Idintensidade, (SelectList)ViewBag.Intensidade, new { @class = "full-width", required = "required", data_placeholder = "Selecione", data_init_plugin = "select2", @style = "width:100%" })
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group form-group-default ">
                                        <label>FREQUÊNCIA</label>
                                        @Html.TextBoxFor(c => c.Frequencia, new { @class = "form-control", type = "number" })
                                    </div>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-2">
                                    <div class="form-group form-group-default ">
                                        <label>DATA DO ÍNICIO</label>
                                        @Html.TextBoxFor(c => c.Dataini, new { @class = "form-control", @type = "date" })
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group form-group-default ">
                                        <label>VALIDADE DA FICHA</label>
                                        @Html.TextBoxFor(c => c.Dataval, new { @class = "form-control", @type = "date" })
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group form-group-default  form-group-default-select2">
                                        <label>Divisão Ficha</label>
                                        @Html.DropDownListFor(c => c.IdDivisaoFicha, (SelectList)ViewBag.DivisaoFichas, new { @class = "full-width", required = "required", data_placeholder = "Selecione", data_init_plugin = "select2", @style = "width:100%" })
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group form-group-default  form-group-default-select2">
                                        <label>Semana</label>
                                        @Html.DropDownListFor(c => c.IdSemana, (SelectList)ViewBag.Semanas, new { @class = "full-width", required = "required", data_placeholder = "Selecione", data_init_plugin = "select2", @style = "width:100%" })
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-defaut">
                        <div class="card-block">
                            <h4>DIVISÃO DE TREINAMENTO</h4>
                            <div class="row divisao">

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

                    <div class="card card-borderless">
                        <ul class="nav nav-tabs nav-tabs-simple d-none d-md-flex d-lg-flex d-xl-flex" role="tablist" data-init-reponsive-tabs="dropdownfx">
                        </ul>
                        <div class="tab-content">

                        </div>
                    </div>
                    <div class="card card-defaut">
                        <div class="card-block">
                            <div class="form-group form-group-default">
                                <label>Orientações</label>
                                @Html.TextAreaFor(c => c.Orientacoe, new { @class = "form-control", @resize="none", style="height:200px;"})
                            </div>
                        </div>
                    </div>
                    <div class="card card-defaut">
                        <div class="card-block">
                            <div class="form-group form-group-default">
                                <label>Observações</label>
                                @Html.TextAreaFor(c => c.ObservacaoCliente, new { @class = "form-control", @resize="none", style="height:200px;"})
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-10">
                            <input id="enviar" name="enviar" class="btn btn-success " type="submit" value='Salvar' />
                        </div>
                    </div>
                }

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



@section Scripts{

    <script>
        $( document ).ready(function() {
            $("#selectnome").change(function () {
                var selectedValue = $(this).val();
                getObservacao(selectedValue);
            });
        });

        function getObservacao(idCliente) {
            $.ajax({
                url: "@Url.Action("GetObservacoes")",
                type: "get",
                data: { id: idCliente },
                success: function (response) {
                    $("#txtobs").val(response);
                    console.log(response);
                }
            });
        };


        function AtualizarIndexExercicio() {
            var count = 0;
            $('.tab-pane table.table-exercicios tbody tr.Exercicios').each(function (i) {
                count++;
                var antigo = $(this).attr("data-index");
                $(this).attr("data-index", i);
                $(this).find("td b").html(count);
                $(this).find("input, select").each(function () {
                    var id = $(this).attr("id");
                    var name = $(this).attr("name");

                    id = id.replace (antigo, i);
                    name = name.replace( antigo,  i);

                    $(this).attr("id", id);
                    $(this).attr("name",name);
                });
            });

            $('.tab-pane table.table-exercicios tbody tr.Hiits').each(function (i) {
                count++;
                var antigo = $(this).attr("data-index");
                $(this).attr("data-index", i);
                $(this).find("td b").html(count);
                $(this).find("input, select").each(function () {
                    var id = $(this).attr("id");
                    var name = $(this).attr("name");

                    id = id.replace (antigo, i);
                    name = name.replace( antigo,  i);

                    $(this).attr("id", id);
                    $(this).attr("name",name);
                });
            });
        }

        $(document).on('click', '.remover', function (e) {
            $(this).closest("tr").remove();
            AtualizarIndexExercicio();
        });

          function InitExercicio() {
              $(".IdExercicio").select2({
                ajax: {
                    url: '@Url.Action("PesquisaExercicio")',
                    data: function (params) {
                        var query = {
                            pesquisa: params.term,
                            idmembro: $(this).closest(".tab-pane").find(".IdMembro").val(),
                            hiit: false,
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    }
                }
              });

               $(".ComboHiit").select2({
                    ajax: {
                        url: '@Url.Action("PesquisaExercicio")',
                        data: function (params) {
                            var query = {
                                pesquisa: params.term,
                                idmembro: $(this).closest(".tab-pane").find(".IdMembro").val(),
                                hiit: true,
                            }
                            return query;
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        }
                    }
               });

               $(".IdMetodo").select2({
                    ajax: {
                        url: '@Url.Action("PesquisaMetodo")',
                        data: function (params) {
                            var query = {
                                pesquisa: params.term,
                            }
                            return query;
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        }
                    }
            });
        }


        $(document).on('change', '.IdMembro', function (e) {
            var id = $(this).val();
            var text = $(this).find(" option:selected" ).text();
            var Nome = $(this).closest(".info").attr("data-treino");

            $("#treino" + Nome + " .IdMembro").val(id);
            $("#treino" + Nome + " .Metodo").html(text);

            InitExercicio();
        });

        $(document).on('click', '.add-exercicio', function (e) {
            var index = $(this).closest(".tab-pane").find('table.table-exercicios tbody tr.Exercicios').length;
            var numero = $(this).closest(".tab-pane").find('table.table-exercicios tbody tr').length  + 1;
            var tbody = $(this).closest(".tab-pane").find('table.table-exercicios tbody');

            $.get('@Url.Action("GetExercicio")?index=' + index + '&numero=' + numero + '&idsemana=' + $("#IdSemana").val() + '&hiit=false&indexdado=' + $(this).attr("data-val"), function (obj) {
                console.log(obj);
                if (obj != null) {
                    tbody.append(obj.HTML);
                    InitExercicio();
                }
            });
         });
         $(document).on('click', '.add-Hiit', function (e) {
            var index = $(this).closest(".tab-pane").find('table.table-exercicios tbody tr.Hiits').length;
            var numero = $(this).closest(".tab-pane").find('table.table-exercicios tbody tr').length + 1;
            var tbody = $(this).closest(".tab-pane").find('table.table-exercicios tbody');

            $.get('@Url.Action("GetExercicio")?index=' +index+'&numero=' +numero+'&idsemana='+$("#IdSemana").val()+'&hiit=true&indexdado='+$(this).attr("data-val") , function( obj ) {
                console.log(obj);
                if (obj != null) {
                    tbody.append(obj.HTML);
                    InitExercicio();
                }
            });
        });


        $(document).on('change', '.ComboHiit', function (e) {
            $(this).closest(".Hiits").find(".Exercicio").val( $(this).find(" option:selected").text());
        });
         $(document).on('change', '.IdExercicio', function (e) {
            $(this).closest(".Exercicios").find(".Exercicio").val( $(this).find(" option:selected").text());
         });
         $(document).on('change', '.IdMetodo', function (e) {
            $(this).closest(".Exercicios").find(".Metodo").val( $(this).find(" option:selected").text());
         });

          $(document).on('change', '.IdMembro', function (e) {
            $(this).closest(".form-group").find(".NomeMembro").val( $(this).find(" option:selected").text());
          });

         $(document).on('change', '.IdAquecimento', function (e) {
            $(this).closest(".tab-pane").find(".NomeAquecimento").val( $(this).find(" option:selected").text());
          });

          $(document).on('tab-pane', '.IdAquecimento2', function (e) {
            $(this).closest(".Exercicios").find(".NomeAquecimento2").val( $(this).find(" option:selected").text());
          });


        $(document).on('change', '#IdDivisaoFicha', function (e) {

            $.get('@Url.Action("GetDivisaoTreino")?iddivisao=' + $(this).val() , function( obj ) {
                console.log(obj);
                if (obj != null) {
                    $('.divisao').html("");
                    $('.nav-tabs').html("");
                    $('.tab-content').html("");
                    for (var i = 0; i < obj.lista.length; i++) {
                        var html = obj.lista[i].HTML;
                        $('.divisao').append(html);
                    }

                    for (var i = 0; i < obj.dados.length; i++) {
                        var html = obj.dados[i].HTML;
                        var li = '<li class="nav-item"><a href="#" data-toggle="tab" role="tab" data-target="#treino'+obj.dados[i].Nome+'" class="'+ (i == 0 ? "active show" : "") + '" aria-selected="false">Treino '+obj.dados[i].Nome+'</a></li>';
                        $('.nav-tabs').append(li);
                        $('.tab-content').append(html);
                    }

                    $(".divisao .IdMembro").select2();

                    $(".IdAquecimento").select2({
                        ajax: {
                            url: '@Url.Action("PesquisaExercicio")',
                            data: function (params) {
                                var query = {
                                    pesquisa: params.term,
                                    idmembro: $(this).closest(".tab-pane").find(".IdMembro").val(),
                                    aquecimento: true,
                                }
                                return query;
                            },
                            processResults: function (data) {
                                return {
                                    results: data
                                };
                            }
                        }
                   });

                }
            });
        });

    </script>

}