<?php require_once('assets/common/session/session_start.php'); 
    $app = !empty($_GET['app']);
?>
<!DOCTYPE html>
<html lang="es">
    <head>
        <?php include 'assets/common/head.php'; ?>
        <title>Pago Online - Santa Clara | Medicina Prepaga</title>

        <!-- Primary Meta Tags -->
        <meta name="title" content="Pago Online - Santa Clara S.A. Medicina Prepaga" />
        <meta name="description" content="santa, clara, medicina, prepaga, pago, online, factura" />
        <meta name="keywords" content="Realizá el pago de tu factura desde donde estés." />
        <meta name="robots" content="index,nofollow" />
        
        <!-- Open Graph / Facebook -->
        <meta property="og:title" content="Pago Online - Santa Clara S.A. Medicina Prepaga" />
        <meta property="og:description" content="Realizá el pago de tu factura desde donde estés." />
        <meta property="og:url" content="https://santaclara.com.py/pago_online.php" />

        <!-- Estilos del sitio -->
        <link href="assets/pages/pago_online/pago_online.css?v=4" rel="stylesheet">

        <?php if($app){ ?>
            <style>
                .jarallax{
                    min-height: 109vh !important;
                }
            </style>
        <?php } ?>
    </head>

    <body>
        <?php
            if(!$app)
                include 'assets/common/header.php'; 
        ?>
        <div class="container-fluid position-relative px-0 px-lg-2">
            <div id="inicio" class="jarallax main position-absolute w-100 h-100 top-0 left-0" style="min-height: 0; height:100%;">
            </div>
            <div id="consulta" style="display: none;" class="jarallax main position-absolute w-100 h-100 top-0 left-0" style="min-height: 0; height:100%;">
            </div>
            <div class="py-lg-4"></div>
            <section class="pt-2 pt-lg-3 pb-md-4" id="contenedor">
                <h1 class="text-secondary text-center strong position-relative">PAGO ONLINE DE FACTURAS</h1>
                <div class="row align-items-center justify-content-center" id="paso1">
                    <div class="col-12 col-sm-8 col-md-10 px-0">
                        <div class="card primary-color-translucent">
                            <div class="card-body py-md-3">
                                <div class="row text-center justify-content-center" id="aviso_pago" <?php echo !isset($_GET['p']) ? 'style="display: none;"':''?>>
                                    <div class="col-auto" id="retorno-consulta">
                                        <?php 
                                            if($_GET['p'] == 1) {
                                                echo '  <div id="cargando-consulta" class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
                                                            <span class="sr-only">Cargando...</span>
                                                        </div><br>';
                                                /*echo '<i class="fas fa-check fa-7x wow bounceIn"></i>
                                                    <p>Pago realizado.</p>';*/
                                            }else{
                                                echo '<i class="fas fa-times fa-7x wow bounceIn"></i>
                                                    <p>Pago rechazado o cancelado.</p>';
                                            }
                                        ?>
                                        <button class="btn btn-primary" id="volver_pago">Volver al inicio</button>
                                        
                                    </div>
                                </div>
                                <div class="row align-items-center" id="formulario" <?php echo isset($_GET['p']) || estaLogueado() ? 'style="display: none;"':''?>>
                                    <div class="col-12 col-md-6 text-center">
                                        <img class="img-fluid shadow" src="assets/img/carnet_asegurado.png" alt=""/>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <form id="guia-medica-form1" method="POST">
                                            <p class="text-center">Ingrese el Nro de cliente o su Número de Cédula</p>
                                            <input type="hidden" name="metodo" value="ingresar">
                                            <div class="md-form input-group mb-3">
                                                <input type="text" id="id_cliente" name="id_cliente" class="form-control">
                                                <label for="id_cliente">ID de cliente</label>
                                            </div>
                                            <div class="md-form input-group mb-3">
                                                <input type="text" id="ci" name="ci" class="form-control">
                                                <label for="ci">Número de Cédula</label>
                                            </div>
                                            <div class="d-flex py-3">
                                                <div class="g-recaptcha align-self-center" id="gm_recaptcha"></div>
                                            </div>
                                            <p class="error text-center text-warning strong text-shadow my-1"></p>
                                            <div class="d-flex">
                                                <button class="btn strong btn-block btn-primary mt-2" type="submit">Consultar</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="row" id="cargando-form1" <?php echo !estaLogueado() ? 'style="display: none;"':'' ?>>
                                    <div class="col-12 text-center">
                                        <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
                                            <span class="sr-only">Cargando...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <section id="paso2" style="display: none;">
                    <div class="row justify-content-center">
                        <div class="col-auto text-center">
                            <?php if(estaLogueado()){ 
                                    if(!$app) {?>
                                        <a class="btn btn-primary p-2 m-0" href="gestion-online.php#pago-online">
                                            <i class="fas fa-lg fa-arrow-left text-white"></i> Volver
                                        </a>
                            <?php   }
                                }else{ ?>
                                <a class="btn btn-primary p-2 volver m-0"
                                    href="#"
                                    id="facturas-tab"
                                    role="tab" 
                                    aria-controls="facturas" 
                                    aria-selected="true">
                                    <i class="fas fa-lg fa-arrow-left text-white"></i> Volver
                                </a>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-12 col-md-10 col-lg-6 px-0 px-lg-2" id="facturas">
                            
                        </div>
                    </div>
                    
                </section>
            </section>
        </div>

        <?php
            if(!$app)
                include 'assets/common/footer.php'; 
            
                include 'assets/common/scripts.php'; 
        ?>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
        <script type="text/javascript" src="assets/js/modules/material-select.js"></script>

        <?php require_once('assets/common/session/variables_js.php'); ?>

        <script>
            let consPago = <?php echo !empty($_GET['p']) ? 1:0; ?>,
                shopid = <?php echo !empty($_GET['shopid']) ? $_GET['shopid']:0; ?>;
        </script>
        <script type="text/javascript" src="assets/pages/pago_online/pago_online.js?v=10"></script>
    </body>

</html>
