<script type="text/javascript">

    $(document).on('click', '#abrirCamera', function (event) {

        // rating_star
        var pathArray = window.location.pathname.split('/');

        var idMorador = $(this).attr('idMoradorFoto');
        var urlFoto = $(this).attr('urlFotoMorador');

        var site_upload = pathArray[0] + "/site/morador/editarFoto?idMorador=" + idMorador + "&foto=" + urlFoto;

        console.log(site_upload);
        var camera = $('#camera'), screen = $('#screen');
        webcam.set_api_url(site_upload);
        screen.html(webcam.get_html(screen.width(), screen.height()));

        var shootEnabled = false;
        $(".takeWebcam").click(function () {
            $(".webcam").show('blind');
            return false;
        });
        $("#closeButton").click(function () {
            $(".webcam").hide('blind');
            return false;
        });
        $('#takeButton').click(function () {
            webcam.snap();
            $("#retakeButton").show();
            $(this).hide();
            return false;
        });
        $('#retakeButton').click(function () {
            webcam.reset();
            $("#takeButton").show();
            $(this).hide();
            return false;
        });
        $('#uploadAvatar').click(function () {
            webcam.upload(site_upload, function () {
            });
            webcam.set_hook('onComplete', my_callback_function());
            //togglePane()
            webcam.reset();
            return false;
        });
        webcam.set_hook('onLoad', function () {
            shootEnabled = true;
        });
        webcam.set_hook('onError', function (e) {
            screen.html(e);
        });

    });
</script>
<style type="text/css">
    .webcam {
        display: none;
    }

    #retakeButton {
        display: none;
    }

    #screen {
        width: 250px;
        height: 250px;
        margin: 5px 0px 20px 0px;
        border: 2px #f5f5f5 solid;
        background: #000000;
        text-align: center;
        color: #666;
    }

    a {
        text-decoration: none;
    }
</style>

<div class="m-b-md">
    <h3 class="m-b-none">Cadastro de Moradores - Ativos com Foto.</h3>
    <div align="right">
        <div class="dt-buttons btn-group">
            <a class="btn btn-default" id=""
               href="<?php echo base_url() . 'morador/listarMorador' ?>" title="Entries"><span><i
                        class="fa fa-bars"></i></span>
            </a>
        </div>
    </div>
</div>
<!-- /.portlet-header -->

<div class="portlet-content">

    <div align="right">
        <a href="<?php echo base_url(); ?>morador/adicionar" class="btn btn-s-md btn-success"><i
                class="fa fa-user-plus fa-2x"></i> Adicionar</a>


    </div>

    <div class="col-md-12 col-sm-12" style="margin: 2%">
        <form class="form-inline" id="formPesquisar" action="<?php echo base_url() . 'morador/gerenciar'; ?>"
              method="post">

            <input type="checkbox" id="isWhere" name="isWhere" style="display: none">

            <div class="input-group has-success col-sm-2">
                <input type="text" class="form-control ui-autocomplete-input" name="unidade" id="unidade"
                       placeholder="Unidade" maxlength="4" size="4" onchange="habilitarBloco();"
                ><span role="status" aria-live="polite"
                       class="ui-helper-hidden-accessible"></span>
                                                <span class="input-group-addon">
                                                    <span class="fas fa-home"></span>
                                                </span>
            </div>

            <div class="input-group col-sm-2">
                <select name="blocoUnidade" id="blocoUnidade" class="form-control" disabled>
                    <option value="">Selecione o Bloco</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                    <option>D</option>
                    <option>E</option>
                    <option>F</option>
                </select>
                                                        <span class="input-group-addon">
                                                    <span class="fas fa-check-circle"></span>
                                                </span>
            </div>

            <div class="input-group col-sm-3">
                <input type="text" class="form-control ui-autocomplete-input" name="cpfMorador" id="cpfMorador"
                       placeholder="CPF do Morador" maxlength="11" size="11">
                                                        <span class="input-group-addon">
                                                    <span class="fas fa-users"></span>
                                                </span>
            </div>

            <div class="input-group col-sm-3">
                <input type="text" class="form-control" name="nomeMorador" id="nomeMorador"
                       placeholder="Nome do Morador" maxlength="10">
                                                <span class="input-group-addon"><span
                                                        class="glyphicon-calendar glyphicon"></span>
                                                </span>
            </div>

            <button id="botaoPesquisar" class="btn btn-blue-nutrisoft"><span class="fas fa-search"></span> Pesquisar
            </button>

        </form>
    </div>
    <div class="warper container-fluid" id="listaMorador">


        <div id="paginacao">
            <ul id="ulItens" class="pagination3" style="list-style: none; margin-left: -4%">

                <?php
                foreach ($results as $r) {
                    ?>
                    <li>
                        <div class="col-lg-4 col-md-6 col-sm-12">
                            <div class="panel panel-default panel-body" style="height: 216px;">
                                <div class="btn-group" style="position: absolute; right: 20px; margin-top: -15px;">
                                    <button class="btn btn-link btn-xs dropdown-toggle" data-toggle="dropdown"><span
                                            class="caret"></span></button>
                                    <div class="dropdown-menu dropdown-menu-right menuPacientes">

                                        <div>
                                            <a href="<?php echo base_url() . 'morador/editar/' . $r->ID_NOTA ?>"><span
                                                    class="fa fa-pencil-square-o"></span> Editar
                                                Morador</a>
                                        </div>
                                        <div><a href="#modal-form" id="lnkPacientesExcluir"
                                                morador="<?php echo $r->ID_NOTA; ?>"
                                                data-toggle="modal">
                                                <span class="fa fa-trash-o"></span> Remover Morador</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="padd-xs display-flex">
                                    <div>
                                        <img id="img_15"
                                             src="<?php

                                             $foto = $r->ID_NOTA == null ? 'semFoto.jpg' : $r->ID_NOTA;

                                             echo base_url() . "documentos/fotos_morador/" . $foto ?>"
                                             width="128"
                                             style="">


                                    </div>


                                    <div class="flex-1"
                                         style="height: 140px; overflow: hidden; margin-top: -5px; margin-left: 10px;">
                                        <p style="overflow: hidden; text-overflow: ellipsis;"><a
                                                href="<?php echo base_url() . 'morador/editar/' . $r->ID_NOTA ?>"><strong><?php echo $r->ID_NOTA . ' - ' . $r->ID_NOTA ?></strong></a>
                                            <br>
                                            <small>
                                                <!--                                                -->
                                                <?php //echo $interval->format('%Y Anos e %m Meses') ?><!--<br>-->
                                                <!--                                            Email: -->
                                                <?php //echo $r->emailPacientes ?><!--<br>-->
                                                <strong>Relação:</strong> <?php echo $r->ID_NOTA ?><br>
                                                <strong>Unidade: </strong><?php echo $r->ID_NOTA . '-' . $r->ID_NOTA ?>
                                                <br>
                                                <strong>Data
                                                    Entrada.</strong> <?php echo date('d/m/Y', strtotime($r->ID_NOTA)) ?>
                                                <br>
                                                <strong>CPF: </strong><?php echo $r->ID_NOTA ?><br>
                                                <strong>Celular:</strong> <?php echo $r->ID_NOTA ?>
                                            </small>
                                            <br>
                                            <a href="#modalCadastrarFotoCamera" rule='button' data-toggle="modal"
                                               style=""
                                               id="abrirCamera"
                                               idMoradorFoto="<?php echo $r->ID_NOTA; ?>"
                                               urlFotoMorador="<?php echo $foto; ?>">
                                                <i class="fa fa-camera"></i> Câmera
                                            </a>
                                        </p>
                                    </div>
                                </div>
                                <div class="padd-xs display-flex">
                                    <a href="" id="fichaCadastral"
                                       style="margin-right: 5px; padding-left: 5px; padding-right: 5px;"
                                       class="btn btn-green flex-1" idPacienteResultados="
                                    <?php echo $r->ID_NOTA; ?>">

                                        <span class="fa fa-line-chart"

                                              style="font-size: 1.3em;"></span> &nbsp;Resumo Morador
                                    </a>


                                    <a href="<?php echo base_url(); ?>morador/editar/<?php echo $r->ID_NOTA ?>"
                                       style="margin-right: 5px; padding-left: 5px; padding-right: 5px;"
                                       class="btn btn-blue-nutrisoft flex-1"><span class="fa fa-pencil"
                                                                                   style="font-size: 1.3em;"></span>
                                        &nbsp;Editar Morador
                                    </a>

                                </div>
                            </div>
                        </div>
                    </li>
                <?php } ?>


            </ul>

        </div>
        <footer class="footer ">
            <div class="row">
                <div class="col-sm-6 text-left font-bold">
                    <ul class="pagination">
                        <li class="prev page">
                            <?php
                            //                            if ($paginacao) {
                            //                                echo $result_count;
                            //                            }
                            ?>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-6 text-right">
                    <!--                    --><?php //echo $this->pagination->create_links(); ?>

                    <?php
                    if ($paginacao) {
                        echo $this->pagination->create_links();
                    } ?>
                </div>
            </div>
        </footer>
    </div>

</div>
<!-- /.portlet-content -->


<div class="modal fade" id="modal-form">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="<?php echo base_url() ?>morador/excluir" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5 id="myModalLabel">Excluir Morador</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="idMorador" name="id" value=""/>
                    <h5 style="text-align: center">Deseja realmente excluir este morador?</h5>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
                    <button class="btn btn-danger">Excluir</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="modalCadastrarFotoCamera">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" enctype="multipart/form-data">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5 id="myModalLabel">Editar imagem para o Morador #<?php ?></h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="idContrato" name="id" value="<?php ?>"/>
                    <input type="hidden" id="produtoEditarFoto" name="produtoEditarFoto" value="visitante"/>
                    <h5 style="text-align: center">Tirar uma nova foto</h5>

                    <div class="line line-dashed b-b line-lg pull-in"></div>
                    <div class="" style="height: 290px;">
                        <div id="screen" class="editarfotomodal" style="margin:5px 0px 20px 158px;"></div>
                        <a id="takeButton" style="margin-left: 160px;" class="submit btn btn-primary"><span
                                class="fa fa-camera" style="font-size: 1.3em;"></span> Tirar foto</a>
                        <a id="retakeButton" style="margin-left: 160px;" class="submit btn btn-primary"><span
                                class="fa fa-camera" style="font-size: 1.3em;"></span> Tirar outra</a>
                    </div>
                    <img id="image_preview" style=" margin-top: 10px;"/>

                </div>
                <div class="modal-footer">
                    <button class="btn" onclick="parent.location.reload(true)"><span class="fa fa-save"
                                                                                     style="font-size: 1.3em;"></span>
                        Salvar
                    </button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<script type="text/javascript">
    $(document).on('click', 'a', function (event) {
        var moradorid = $(this).attr('morador');
        $('#idMorador').val(moradorid);
        var situacaoMoradorMor = $(this).attr('situacaoMorador');
        $('#situacaoMoradorAtual').val(situacaoMoradorMor);
        $('#idMoradorInativo').val(moradorid);
    });

</script>

<script>

    function habilitarBloco() {
        $('#blocoUnidade').attr('disabled', false);
    }
    jQuery("#formPesquisar").submit(function () {
        if ($("#unidade").val() != ''
            || $("#blocoUnidade").val() != ''
            || $("#cpfMorador").val() != ''
            || $("#nomeMorador").val() != ''
        ) {
            document.getElementById("isWhere").checked = true;
        }
    });

    $(document).on('click', '#lnkPacientesExcluir', function (event) {
        $('#itemAExcluir').val($(this).attr('pacientesExcluir'));
        document.excluirItens.action = "<?php echo base_url() ?>pacientes/excluir"
    });

    $(document).ready(function () {


    });


    $(document).on('click', '#lnkPacientesExcluir', function (event) {
        $('#itemAExcluir').val($(this).attr('pacientesExcluir'));
        document.excluirItens.action = "<?php echo base_url() ?>pacientes/excluir"
    });
    $("a").on('click', function (e) {
        $('#idPacienteFaturar').val($(this).attr('pacientesFaturar'));
        $('#idPacienteShow').html($(this).attr('pacientesFaturar'));
    });
</script>


<script type="text/javascript">
    $("a1").on('click', function (e) {
        var url = "<?php echo base_url() ?>morador/visualizarResumoMorador/691";
        var win = window.open(url, name = "_blank", "left=400,top=300,width=700,height=500,location=no,menubar=no,toolbar=no");
//        win.print();
    })
</script>

<style>

    .display-flex {
        /* display: -webkit-box; */
        display: -moz-box;
        display: -ms-flexbox;
        /* display: -webkit-flex; */
        display: flex;
    }

    .padd-xs {
        padding: 5px;
    }

    .flex-1 {
        -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1; /* OLD - Firefox 19- */
        -webkit-flex: 1; /* Chrome */
        -ms-flex: 1; /* IE 10 */
        flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .panel {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }

    .panel-default {
        border-color: #ddd;
    }

    .panel-body {
        padding: 15px;
    }

    .btn-green {
        background-color: #70ba63;
        border-color: #579e4b;
        color: #fff;
    }

    .btn-green:hover,
    .btn-green:focus,
    .btn-green:active,
    .btn-green.active,
    .open .dropdown-toggle.btn-purple {
        background-color: #579e4b;
        color: #fff;
    }

    .open {
        background-color: #27ae60;
        color: #fff;
    }

    .btn-blue-nutrisoft {
        background-color: #3498db;
        border-color: #2980b9;
        color: #fff;
    }

    .btn-blue-nutrisoft:hover,
    .btn-blue-nutrisoft:focus,
    .btn-blue-nutrisoft:active,
    .btn-blue-nutrisoft.active,
    .open .dropdown-toggle.btn-blue-nutrisoft {
        background-color: #2980b9;
        color: #fff;
    }

    .menuPacientes a {
        display: block;
        padding: 3px 20px;
        color: #333;
    }

    .menuPacientes a:hover {
        background-color: lightgrey;
        color: blue;
    }

    a {
        color: #428bca;
        text-decoration: none;
    }

    .portlet {
        border: 1px solid #D5D5D5;
        -webkit-border-radius: 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 4px;
        -moz-background-clip: padding;
        border-radius: 4px;
        background-clip: padding-box;
    }

    .portlet-content {
        padding: 22px 15px;
        background: mintcream;
        -webkit-border-radius: 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 4px;
        -moz-background-clip: padding;
        border-radius: 4px;
        background-clip: padding-box;
    }
</style>

