<div class="container">
    <div class="row ">
        <div class="col-lg-6 col-lg-offset-3 col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1 col-xs-12">
            <div class="spacer" style="width: 987px; height: 60px;"></div>
            <div class="container" style=" width:auto;">
                <h2 id="respuestaDeLaMarcacion-heading2" style="color:#000000;text-align:center; font-weight: bold;">CERRAR PERMISOS</h2>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                    </div>
                    <div class="panel-body">
                        <div title="Cancelación de Permisos"  id="page4" class=" ">
                            <div>
                                <div class="spacer" style="height: 40px;"></div>
                                <div style="width: 420px;margin: auto;" class="list card " id="respuestaDeLaMarcacion-card22">
                                    <div class="item item-body " id="respuestaDeLaMarcacion-list-item-container2">
                                        <h3 style="color:#000000;text-align:center; font-weight: bold;">¿Desea cerrar o no usar el permiso?</h3><br>
                                        <div id="respuestaDeLaMarcacion-markdown2" style="color:#000000;font-size:18px;text-align:center;" class=" ">DATOS DEL PERMISO<br><br>
                                            NOMBRE SOLICITANTE: <strong><span><?= $Permiso->personaNOMBRES; ?>&nbsp;<?= $Permiso->personaAPELLIDOS ?></span></strong><br> FECHA Y HORA:
                                            <strong><?= $Permiso->permisoFCHPERMISO ?></strong>.
                                        </div><br>
                                        <div id="respuestaDeLaMarcacion-markdown4" style="color:#000000;font-size:18px;text-align:center;" class=" ">
                                            MOTIVO : <strong><span id="cedulaMarcacion"><?= $Permiso->permisoMotivoTITULO ?></span></strong>
                                        </div>
                                        <div class="spacer" style="height: 40px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="text-align: center;">
                        <div class="col-md-6">
                            <a href="javascript:void(0)" onclick="confirmaCerrar();"
                               class="btn btn-success" >Cerrar Permiso</a>
                        </div>
                        <div>
                            <a data-toggle="modal" data-target="#modal-justificacion"
                               class="btn btn-default" >No usar el Permiso</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-justificacion">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">JUSTIFICACIÓN DE NO USAR PERMISO</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <textarea id="Justificacion" name="Justificacion" class="form-control" required="true"></textarea>
            </div>
            <div class="modal-footer">
                <a onclick="confirmaNoUsar();"><button type="button" class="btn btn-success">Guardar</button></a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    function confirmaCerrar() {
        cargarVistaApps(
                'permisos', 'cerrado',
                'permisoID=<?= $Permiso->permisoID ?>'
                );
    }

    function confirmaNoUsar() {
        var justificacion = document.getElementById("Justificacion").value;
        if (justificacion !== "") {
            $('#modal-justificacion').modal('hide');
            cargarVistaApps(
                    'permisos', 'cerrado',
                    'permisoID=<?= $Permiso->permisoID ?>&justificacion='+ justificacion
                    );
        }
    }

</script>