marcosdosea_DoeVida/Codigo/DoeVidaWeb/Views/Agendamento/Index.cshtml
@model IEnumerable<DoeVidaWeb.ViewModels.AgendamentoListDTOViewModel>

@{
    ViewData["Title"] = "Agendamentos";
}

<div style="display: flex; flex-direction: row; width: 100%">

    <div id="main">
        <div id="header-action">
            <div id="search">
                <input placeholder="Digite o nome de um doador que deseja buscar"
                    type="text" name="search" id="input-search" />
                <i class="fas fa-search"></i>
            </div>
            <a asp-action="Create" id="button-new">Novo agendamento</a>
            @*<a asp-action="Create" id="button-new" data-bs-toggle="modal" data-bs-target="#exampleModal" >Novo agendamento</a>*@
        </div>
        <table class="table">
            <thead>
                <tr >
                    <th style="width: 33%;">Nome</th>
                    
                    <th style="width: 33%; text-align: center;">Data de atendimento / Horário</th>

                    <th style="text-align: center;">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td style="width: 33%;">
                            @Html.DisplayFor(modelItem => item.NomePessoa)
                        </td>
                        <td style="width: 33%; text-align: center;">
                            <span style="margin-right: 47px;">
                                @Html.DisplayFor(modelItem => item.Data)
                            </span>
                            <span>
                                @Html.DisplayFor(modelItem => item.HorarioAgendamento)
                            </span>
                        </td>
                        <td style="text-align: center;" id="actions">
                            <a class="icon-action clicavel" onclick="SeeSide('@item.IdPessoa', '@item.IdAgendamento')"><i class="fas fa-eye icon-action"></i></a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    <div id="sider">
        <div id="header-sider">
            <span style="color: var(--white)">Dados do doadores</span>
            <a style="color: var(--white);" class="clicavel" onclick="closeSider()">
                <i class="fas fa-times"></i>
            </a>
        </div>
        <div id="container-info">
            <div class="container-title-dados">
                <span class="title-dados">Dados pessoais</span>
            </div>
            <div>
                <div class="container-info-item">
                    <span class="label">Nome</span>
                    <span id="nome-dados"></span>
                </div>
                <div style="display: flex; flex-direction: row; justify-content: space-between">
                    <div class="container-info-item">
                        <span class="label">Telefone</span>
                        <span id="telefone-dados"></span>
                    </div>
                    <div class="container-info-item">
                        <span class="label">Data de nascimento</span>
                        <span id="nascimento-dados"></span>
                    </div>
                </div>
                <div class="container-info-item">
                        <span class="label">Email</span>
                        <span id="email-dados"></span>
                    </div>
                <div class="container-title-dados">
                    <span class="title-dados">Endereço</span>
                </div>
                <div style="display: flex; flex-direction: row; justify-content: space-between">
                    <div class="container-info-item">
                        <span class="label">CEP</span>
                        <span id="cep-dados"></span>
                    </div>
                    <div class="container-info-item">
                        <span class="label">Estado</span>
                        <span id="estado-dados"></span>
                    </div>
                </div>
                <div style="display: flex; flex-direction: row; justify-content: space-between">
                    <div class="container-info-item">
                        <span class="label">Cidade</span>
                        <span id="cidade-dados"></span>
                    </div>
                    <div class="container-info-item">
                        <span class="label">Bairro</span>
                        <span id="bairro-dados"></span>
                    </div>
                </div>
                <div class="container-info-item">
                    <span class="label">Rua</span>
                    <span id="rua-dados"></span>
                </div>
                <div style="display: flex; flex-direction: row; justify-content: space-between">
                    <div class="container-info-item" id="numero-dados"></div>
                    <div class="container-info-item" id="complemento-dados"></div>
                </div>
            </div>
            <div style="margin-top: 60px;">
                <a onclick="alterState()" class="button">Atender</a>
            </div>
        </div>
    </div>

</div>
<div class="pagination-container @(ViewBag.totalPages <= 1 ? "disabled" : "")">
        <div class="pagination-count-container">
            <div class="pagination-count">
                @(ViewBag.currentPage + 1)
            </div>
                <span class="pagination-txt-count">DE @(ViewBag.totalPages)</span>
        </div>

        <a href="@("/Agendamento/Index/"+(ViewBag.currentPage - 1).ToString())" style="margin-right: 10px;" class="pagination-btn @(ViewBag.currentPage == 0 ? "disabled" : "")"><i class="fas fa-chevron-left"></i> </a>
        <a href="/@((ViewBag.currentPage == 0) ? "Agendamento/Index/" : "")@(ViewBag.currentPage + 1)" class="pagination-btn @(ViewBag.totalPages == (ViewBag.currentPage + 1) ? "disabled" : "")"><i class="fas fa-chevron-right"></i> </a>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="modalCreate" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content main" style="padding: 30px 30px;" >
        <div class="container-center">
            <h5 class="modal-title" id="modalCreate">Agendar doação</h5>
        </div>
        <div class="modal-body">
            <div class="form-horizontal" style="align-items: center;">
                <div class="form-group max-width" >
                    <label class="control-label">CPF</label>
                    <input placeholder="Digite o cpf do doador" class="form-control"
                            maxlength="14" />
                </div>
                <button type="button" class="button class-30" data-bs-dismiss="modal" style="margin-top: 11px;">Buscar</button>
            </div>
            <div class="form-group max-width">
                <label class="control-label">Nome</label>
                <input class="form-control" type="text" placeholder="Nome do doador">
            </div>
            <div class="form-horizontal" style="margin-bottom: 42px;">
                <div class="form-group form-vertical max-width" style="margin-right: 25px">
                    <label class="control-label">Data do agendamento</label>
                    <select name="" id=""></select>
                </div>
                <div class="form-group form-vertical max-width">
                    <label class="control-label">Horário</label>
                    <select name="" id=""></select>
                </div>
            </div>
            <div class="form-horizontal">
                <button type="button" class="button-outline" data-bs-dismiss="modal" style="margin-right: 25px;">Cancelar</button>
                <button type="button" class="button" data-bs-dismiss="modal">Cadastrar</button>
            </div>  
        </div>
      
    </div>
  </div>
</div>

<script>
    var scheduleAux; 

    function closeSider() {
        document.getElementById('main').style.width = '100%';
        document.getElementById('sider').style.display = 'none';
    }

    function SeeSide(id, scheduleId) {
        $.ajax({
            type: "GET",
            url: "Doador/Details/" + id,
            data: {},
            success: function (result, status, xhr) {
                scheduleAux = scheduleId;
                let data = new Date(result.dataNascimento);
                let dia = data.getDate() < 10 ? `0${data.getDate()}` : data.getDate();
                let dataFormatada = dia + "/" + ((data.getMonth() + 1)) + "/" + data.getFullYear();
                document.getElementById('main').style.width = '65%';
                document.getElementById('sider').style.display = 'block';
                document.getElementById('nome-dados').innerText = result.nome;
                document.getElementById('telefone-dados').innerText = result.telefone;
                document.getElementById('nascimento-dados').innerText = dataFormatada;
                document.getElementById('email-dados').innerText = result.email;
                document.getElementById('cep-dados').innerText = result.cep;
                document.getElementById('estado-dados').innerText = result.uf;
                document.getElementById('cidade-dados').innerText = result.cidade;
                document.getElementById('bairro-dados').innerText = result.bairro;
                document.getElementById('rua-dados').innerText = result.logradouro;
            },
            error: function (xhr, status, error) {
                console.log(status);
            }
        });
    }
    function alterState() {
        $.ajax({
            type: "POST",
            url: "Agendamento/EditStatus/" + scheduleAux,
            data: {},
            success: function (result, status, xhr) {
                alert(result)
            },
            error: function (xhr, status, error) {
                console.log('ERRO AJAX:',status);
            }
        });
    }
</script>
