@using ChatMvc

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "Form Example";
}

@section Styles {
    <style type="text/css">
        .bg-grayed {
            background-color: #D8D8D8
        }

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

<div class="container mt-5">
    <h2>@Resource.InitialFormTitle</h2>
    <br />
    <br />
    <form id="exampleForm">
        <div class="row">
            <div class="col-6">
                <div class="form-group">
                    <label for="email">@Resource.NameLabel</label>
                    <input type="name" class="form-control bg-grayed" id="name" disabled value="@User.FindFirst("FullName").Value" style="background-color: #D8D8D8">
                </div>
            </div>
            <div class="col-6">
                <div class="form-group">
                    <label for="email">@Resource.EmailLabel</label>
                    <input type="email" class="form-control bg-grayed" id="email" disabled value="@User.Identity.Name" style="background-color: #D8D8D8">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card mt-3 tab-card">
                    <div class="card-header tab-card-header">
                        <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true">Dados</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Links</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Tema</a>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
                            <div class="tab-content-inner" style="height: 320px;">
                                <h5 class="card-title">Dados iniciais</h5>
                                <div class="form-group">
                                    <label for="country">@Resource.CountryLabel</label>
                                    <select class="form-control" id="country" placeholder="@Resource.CountryPlaceholder" required>
                                        @if (Context.Request.Cookies["Language"] == "en")
                                        {
                                            <option value="1">@Resource.Country_EUA_Label</option>
                                            <option value="2">@Resource.Country_India_Label</option>
                                            <option value="3">@Resource.Country_Nigeria_Label</option>
                                            <option value="4">@Resource.Country_Paquistao_Label</option>
                                            <option value="5">@Resource.Country_UK_Label</option>
                                            <option value="6">@Resource.Country_Filipinas_Label</option>
                                            <option value="7">@Resource.Country_Canada_Label</option>
                                            <option value="8">@Resource.Country_Australia_Label</option>
                                            <option value="9">@Resource.Country_Gana_Label</option>
                                            <option value="10">@Resource.Country_Quenia_Label</option>
                                        }
                                        else if (Context.Request.Cookies["Language"] == "pt-BR")
                                        {
                                            <option value="11">@Resource.Country_Brasil_Label</option>
                                            <option value="12">@Resource.Country_Mocambique_Label</option>
                                            <option value="13">@Resource.Country_Angola_Label</option>
                                            <option value="14">@Resource.Country_Portugal_Label</option>
                                            <option value="15">@Resource.Country_GuineBissau_Label</option>
                                            <option value="16">@Resource.Country_TimorLeste_Label</option>
                                            <option value="17">@Resource.Country_CaboVerde_Label</option>
                                        }
                                    </select>
                                    <small id="countryHelp" class="form-text text-muted">@Resource.ChangeLanguage</small>
                                </div>
                                <div class="form-group">
                                    <label for="businessArea">@Resource.BusinessAreaLabel</label>
                                    <select class="form-control" id="country" placeholder="@Resource.CountryPlaceholder" required>
                                        <option value="1">@Resource.BU_Alimentacao</option>
                                        <option value="2">@Resource.BU_Vestuário</option>
                                        <option value="3">@Resource.BU_Construção</option>
                                        <option value="4">@Resource.BU_Saúde</option>
                                        <option value="5">@Resource.BU_TI</option>
                                        <option value="6">@Resource.BU_Beleza</option>
                                        <option value="7">@Resource.BU_Empreendedorismo</option>
                                        <option value="8">@Resource.BU_SetorPET</option>
                                        <option value="9">@Resource.BU_Educacao</option>
                                        <option value="10">@Resource.BU_TransporteLogistica</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="groupName">@Resource.GroupNameLabel</label>
                                    <input type="text" class="form-control" id="groupName" placeholder="@Resource.GroupPlaceHolder" required>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" id="next1Button">Próximo >></button>
                        </div>
                        <div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab">
                            <div class="tab-content-inner" style="height: 320px;">
                                <h5 class="card-title">Tab Card Two</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                            <button type="button" class="btn btn-primary" id="next2Button">Próximo >></button>
                        </div>
                        <div class="tab-pane fade p-3 " id="three" role="tabpanel" aria-labelledby="three-tab">
                            <div class="tab-content-inner" style="height: 320px;">
                                <h5 class="card-title">Tab Card Three</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                            <button type="submit" class="btn btn-primary" id="saveButton" disabled>@Resource.SaveButton</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@section Scripts {
    <script type="text/javascript" >
        const nextTab1 = $('#one-tab');
        const nextTab2 = $('#two-tab');
        const nextTab3 = $('#three-tab');

        nextTab2.addClass('disabled');
        nextTab3.addClass('disabled');

        $(document).ready(function () {
            $('#groupName, #businessArea').on('input', function() {
                var groupName = $('#groupName').val();
                var businessArea = $('#businessArea').val();

                if (groupName && businessArea) {
                    $.ajax({
                        url: '/validateGroup',
                        type: 'POST',
                        data: { groupName: groupName, businessArea: businessArea },
                        success: function(response) {
                            if (response.isValid) {
                                $('#saveButton').prop('disabled', false);
                            } else {
                                $('#saveButton').prop('disabled', true);
                            }
                        }
                    });
                } else {
                    $('#saveButton').prop('disabled', true);
                }
            });

            $('#next1Button').on('click', function () {
                nextTab2.removeClass('disabled');
                nextTab2.tab('show');;
            });

            $('#next2Button').on('click', function () {
                nextTab3.removeClass('disabled');
                nextTab3.tab('show');;
            });

            nextTab3.addEventListener('click', function () {
                // Aqui você pode adicionar a lógica para permitir que o usuário volte para as abas anteriores
            });

        });
    </script>
}