<div id = "popup-novo-agendamento-dent" class = "popup-medio">
    <a href = "javascript:void(0)" class="btn-fechar-popup" onclick = "fechar_popup('popup-novo-agendamento-dent')">x</a href = "javascript.void(0)">
    <div class = "titulo-popup">Novo Agendamento</div>
    <div class = "conteudo-popup">

        <fieldset class = "grupo-campos">
            <label class="label-campo">Busque o Paciente</label>

            <input id = "busca" name="busca" type="text" class="campo" placeholder = "Nome ou CPF" autofocus>
        </fieldset>


        <form action="<?php echo site_url('cadastroAgenda') ?>" method="POST">
            <fieldset class = "campos-desabilitados">
                <div class = "conteiner-campo1">
                    <label class="label-campo">Paciente</label>
                    <input type="text" id="nomeP" name="nomeP" class = "campo" disabled>
                </div>

                <div class = "conteiner-campo1">
                    <label class="label-campo">CPF</label>
                    <input type="text" id="cpfP" name="cpfP" class = "campo" disabled>
                    <input type="hidden" id="id" name="id">
                </div>
            </fieldset>


            <div class = "conteiner-campo2">
                <label class = "label-campo">Dentista</label>
                <select name="dentista" id="dentista" class="campo" >
                    <?php foreach ($lista_dentistas as $dentistas) { ?>
                        <option value="<?php echo $dentistas->id_pessoa ?>"><?php echo $dentistas->nome ?></option>
                    <?php } ?>
                </select>
            </div>

            <div class = "conteiner-campo2">
                <label class = "label-campo">Ano</label>
                <select name="anos" id="ano" class="campo" >
                    <?php
                    $ano = date('Y');
                    echo "<option value = '" . $ano . "'>" . $ano . "</option>";
                    echo "<option value = '" . ($ano + 1) . "'>" . ($ano + 1) . "</option>";
                    ?>
                </select>
            </div>

            <div class = "conteiner-campo2">
                <label class = "label-campo">Mês</label>
                <select id = "meses" name="meses" class="campo" onchange="" >
                    <option value="" id="mes-selected">Selecione</option>
                    <?php
                    $meses = array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");
                    $mes = date('n');

                    for ($i = $mes - 1; $i < 12; $i++) {
                        echo "<option value = '" . ($i + 1) . "'>" . $meses[$i] . "</option>";
                    }
                    ?>
                </select>

            </div>

            <script>
                $(document).ready(function () {
                    var meses = $("#meses");
                    var dias = $("#dias");

                    meses.on('change', function () {
                        var ano = $("#ano").val();
                        var dentista = $("#dentista").val();
                        var mes = $(this).val();
                        //$("#horas").val().html("");

                        $.ajax({
                            url: '<?php echo base_url("listaDiaAtendimento") ?>',
                            type: 'get',
                            beforeSend: function () {
                                dias.html('<option> Carregando...</option>');

                            },
                            data: 'meses=' + mes + '&ano=' + ano + '&dentista=' + dentista,
                            success: function (data) {
                                dias.html(data);
                            }
                        })

                    });

                    $("#dentista").change(function () {
                        document.getElementById("mes-selected").removeAttribute("selected");
                        document.getElementById("dias").innerHTML = "";
                        document.getElementById("horas").innerHTML = "";
                        document.getElementById("mes-selected").setAttribute("selected", "true");
                    });

                   // $("#dentista").on('change', function () {


                    //});
                })
            </script>



            <div class = "conteiner-campo2">
                <label class = "label-campo">Dia</label>
                <select name="dias" id="dias" class="campo" >
                    <option value="">Selecione</option>

                </select>
            </div>

            <div class = "conteiner-campo2">
                <label class = "label-campo">Horário</label>
                <select name="horarios" id="horas" class="campo" >
                    <option value="">Selecione</option>
                </select>
            </div>

            <script>
                $(document).ready(function () {
                    var dias = $("#dias");
                    var horas = $("#horas");

                    dias.on('change', function () {
                        var ano = $("#ano").val();
                        var dentista = $("#dentista").val();
                        var mes = $("#meses").val();
                        var dia = $(this).val();

                        $.ajax({
                            url: '<?php echo base_url("listaHorarios") ?>',
                            type: 'get',
                            beforeSend: function () {
                                horas.html('<option> Carregando...</option>')
                            },
                            data: 'dias=' + dia + '&meses=' + mes + '&anos=' + ano + '&dent=' + dentista,
                            success: function (data) {
                                horas.html(data);
                            }
                        })

                    });
                })
            </script>
            <div class = "botoes">
                <button type="submit" name="button" id="button_form" class = "botao btn-salvar margin-direita" onclick="return validaAgenda(busca, nomeP, meses, dias, horarios);" value="cadastrar">Agendar</button>
                <button type="reset" class = "botao btn-cancelar" onclick = "fechar_popup('popup-novo-agendamento-dent');">Cancelar</button>
            </div>
        </form>


    </div>
</div>