<?php
function contentCampaign()
{   
    echo "<style>
        @font-face {
            font-family: 'Manjari';
            src: url('".plugins_url('../../assets/fonts/Manjari/Manjari-Regular.ttf', __FILE__)."');
        }
        @font-face {
            font-family: 'Outfit';
            src: url('".plugins_url('../../assets/fonts/Outfit/Outfit-VariableFont_wght.ttf', __FILE__)."');
        }
    </style>";

    if($_SESSION['perfil']=='1'){ 
        
        global $wpdb;        
        $query = "SELECT cam.id as id, cam.id_cliente as id_cliente, cli.razon_social AS raz, cam.nom_campaign as nom_campaign, cam.slug as slug, cam.img_credencial as img_credencial, cam.created_at as created_at, cam.f_inicio as f_inicio, cam.f_fin as f_fin, cam.c_formulario as c_formulario, cam.c_foto as c_foto, cam.c_credencial as c_credencial, cam.sel_design as sel_design, cam.c_nombre as c_nombre, cam.tipografia as tipografia, cam.alineacion as alineacion FROM saas_campaign AS cam INNER JOIN saas_clientes AS cli ON cam.id_cliente = cli.id";
        $result = $wpdb->get_results($query);
    }else{

        global $wpdb;
        $tbl_1 = "saas_campaign";
        $query = "SELECT * FROM $tbl_1 WHERE id_cliente='" . $_SESSION['cliente'] . "'";
        $result = $wpdb->get_results($query);
        $id_cliente = $_SESSION['cliente'];

    }

    $tbl_2 = "saas_clientes";
    $query = "SELECT * FROM $tbl_2";
    $clientes = $wpdb->get_results($query);
?>
    <style>
        @font-face {
            font-family: 'Manjari';
            src: url('<?php echo plugins_url('../../assets/fonts/Manjari/Manjari-Regular.ttf', __FILE__) ?>');
        }
        @font-face {
            font-family: 'Outfit';
            src: url('<?php echo plugins_url('../../assets/fonts/Outfit/Outfit-VariableFont_wght.ttf', __FILE__) ?>');
        }
    </style>
    <script>
        var s_global_array=[];
        s_global_array=<?php echo json_encode($result) ?>;
        console.log(s_global_array);
    </script>

    <style>
        .btn-warning{
            background-color: #FF9700 !important;
            border-color: #FF9700 !important;
        }
    </style>
        
    <?php
        if(isset($_GET['open'])) {
            if($_GET['open']=='new'){
    ?>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                document.getElementById("btn_nuevo").click();
            });
        </script>
    <?php
        }
    }
    ?>
    <?php echo sidebar() ?>
    <div class="wrapper d-flex flex-column min-vh-100">
        <?php echo navbar() ?>    
        <div class="container" style="font-family: manjari;">        
            <section>
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <h2><b>Mis Share Waves</b></h2>
                            </div>
                            <div class="col-md-6" style="text-align: right;">
                                <button id="btn_nuevo" type="button" class="btn btn-dark" data-coreui-toggle="modal" data-coreui-target="#modal_nuevo">
                                    <i class="fa fa-plus" aria-hidden="true"></i> Nueva Campaña  
                                </button>                            
                            </div>    
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-6 mb-2">
                                <label for="f_nombre" class="form-label">Buscar:</label>
                                <input type="text" class="form-control" id="f_nombre" placeholder="<?php if($_SESSION['perfil']=='1'){echo 'Escribe el nombre de la campaña (o del cliente)';}else{echo 'Escribe el nombre de la campaña';} ?>" value="">
                                <div id="f_nombre_list" class="list-group position-absolute" style="z-index: 999;"></div>
                            </div>
                            <div class="col-xs-12 col-md-2 mb-2">
                                <label for="f_start" class="form-label">Fecha de Inicio:</label>
                                <input type="date" class="form-control" id="f_start" name="trip-start" value="<?php echo date("Y-m-d") ?>" />
                            </div>
                            <div class="col-xs-12 col-md-2 mb-2">
                                <label for="f_end" class="form-label">Fecha de fin:</label>
                                <input type="date" class="form-control" id="f_end" name="trip-start" value="<?php echo date("Y-m-d") ?>" />
                            </div>                            
                            <div class="col-xs-12 col-md-2 mb-2" style="text-align: right;">
                                <button id="btn_buscar" type="button" class="btn btn-dark form-control" style="margin-top: 30px;" onclick="buscarCampaign()">
                                    <i class="fa fa-search" aria-hidden="true"></i> Buscar  
                                </button>                            
                            </div>    
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="modal_nuevo">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Nueva Campaña:</h5>
                                        <button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">

                                        <?php if($_SESSION['perfil']=='1'){ ?>
                                            
                                        <div class="col-xs-12 col-md-6 mb-2">
                                            <label for="id_cliente" class="form-label">Cliente:</label>
                                            <select id="id_cliente" name="id_cliente" class="form-select">
                                            <option value="0">Seleccionar Cliente</option>
                                            <?php foreach($clientes as $row){ ?>
                                                <option value="<?php echo $row->id ?>"><?php echo $row->ruc.' - '.$row->razon_social ?></option>                
                                            <?php } ?>
                                            </select>
                                        </div>                                        

                                        <?php }else{ ?>                                        

                                        <div class="mb-3 mt-3" style="display:none;">
                                            <label for="id_cliente" class="form-label">Id Cliente:</label>
                                            <input disabled type="text" class="form-control" id="id_cliente" name="id_cliente" value="<?php echo $id_cliente ?>">
                                        </div>

                                        <?php } ?>

                                        <div class="mb-3 mt-3">
                                            <label for="new_nombre" class="form-label">Nombre Campaña:</label><span style="color: red;"><strong>*</strong></span>
                                            <input type="text" class="form-control" id="new_nombre" placeholder="Ingrese el nombre de la campaña" name="new_nombre">
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 col-md-6 mb-2">
                                                <label for="url" class="form-label">URL de la campaña:</label>
                                                <input disabled type="text" class="form-control" id="url" name="url" value="<?php echo home_url() ?>/">
                                            </div>

                                            <div class="col-xs-12 col-md-6 mb-2">
                                                <input type="text" style="margin-top: 32px;" class="form-control" id="slug" placeholder="Ingrese el url de la campaña" name="slug">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 col-md-6 mb-3">
                                                <label for="start" class="form-label">Fecha de Inicio:</label>
                                                <input type="date" class="form-control" id="start" name="trip-start" value="<?php echo date("Y-m-d") ?>" min="<?php echo date("Y-m-d") ?>" max="2030-12-31" />
                                            </div>
                                            <div class="col-xs-12 col-md-6">
                                                <label for="end" class="form-label">Fecha de fin:</label>
                                                <input type="date" class="form-control" id="end" name="trip-start" value="<?php echo date("Y-m-d") ?>" min="<?php echo date("Y-m-d") ?>" max="2030-12-31" />
                                            </div>
                                        </div>

                                        <div class="row">
                                            <p style="text-align: justify;">Recuerde que al finalizar la campaña se eliminarán las imágenes de las credenciales generadas por los participantes de su campaña. Si desea conservarlas, puede descargar un archivo comprimido con las imágenes antes de la fecha de fin de campaña.</p>
                                        </div>

                                        <div class="mb-3">
                                            <div id="result"></div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button id="btn_insert" type="submit" class="btn btn-warning" onclick="insertarCampaign(jQuery('#id_cliente').val(),jQuery('#new_nombre').val(),jQuery('#slug').val(),jQuery('#start').val(),jQuery('#end').val(),'Editar el texto de la descripcion.','Editar el texto de la agradecimiento.','Editar el texto para compartir.','Editar el texto de bienvenida.')"><i class="fa fa-check" aria-hidden="true"></i> Guardar</button>
                                        <button type="button" class="btn btn-dark" data-coreui-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="modal_editar">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Editar Campaña: <span id="span_nom_edt"></span></h5>
                                        <button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">

                                        <div class="mb-3 mt-3" style="display:none;">
                                            <label for="edt_id_campaign" class="form-label">Id Campaña:</label>
                                            <input disabled type="text" class="form-control" id="edt_id_campaign" name="edt_id_campaign">
                                        </div>

                                        <?php if($_SESSION['perfil']=='1'){ ?>
                                        
                                        <div class="col-xs-12 col-md-6 mb-2">
                                            <label for="edt_id_cliente" class="form-label">Cliente:</label>
                                            <select id="edt_id_cliente" name="edt_id_cliente" class="form-select">
                                            <option value="0">Seleccionar Cliente</option>
                                            <?php foreach($clientes as $row){ ?>
                                                <option value="<?php echo $row->id ?>"><?php echo $row->ruc.' - '.$row->razon_social ?></option>                
                                            <?php } ?>
                                            </select>
                                        </div>

                                        <?php }else{ ?>

                                        <div class="mb-3 mt-3" style="display:none;">
                                            <label for="edt_id_cliente" class="form-label">Id Cliente:</label>
                                            <input disabled type="text" class="form-control" id="edt_id_cliente" name="edt_id_cliente">
                                        </div>

                                        <?php } ?>

                                        <div class="mb-3 mt-3">
                                            <label for="edt_nombre" class="form-label">Nombre Campaña:</label><span style="color: red;"><strong>*</strong></span>
                                            <input type="text" class="form-control" id="edt_nombre" placeholder="Ingrese el nombre de la campaña" name="edt_nombre">
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 col-md-6 mb-2">
                                                <label for="edt_url" class="form-label">URL de la campaña:</label>
                                                <input disabled type="text" class="form-control" id="edt_url" placeholder="https://app.sharewave.io/" name="edt_url" value="https://app.sharewave.io/">
                                            </div>

                                            <div class="col-xs-12 col-md-6 mb-2">
                                                <input type="text" style="margin-top: 32px;" class="form-control" id="edt_slug" placeholder="Ingrese el url de la campaña" name="edt_slug">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xs-12 col-md-6 mb-3">
                                                <label for="edt_start" class="form-label">Fecha de Inicio:</label>
                                                <input type="date" class="form-control" id="edt_start" name="trip-start" value="<?php echo date("Y-m-d") ?>" min="<?php echo date("Y-m-d") ?>" max="2030-12-31" />
                                            </div>
                                            <div class="col-xs-12 col-md-6">
                                                <label for="edt_end" class="form-label">Fecha de fin:</label>
                                                <input type="date" class="form-control" id="edt_end" name="trip-start" value="<?php echo date("Y-m-d") ?>" min="<?php echo date("Y-m-d") ?>" max="2030-12-31" />
                                            </div>
                                        </div>

                                        <div class="row">
                                            <p style="text-align: justify;">Recuerde que al finalizar la campaña se eliminarán las imágenes de las credenciales generadas por los participantes de su campaña. Si desea conservarlas, puede descargar un archivo comprimido con las imágenes antes de la fecha de fin de campaña.</p>
                                        </div>

                                        <div class="mb-3">
                                            <div id="edt_result"></div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button id="btn_update" type="submit" class="btn btn-warning" onclick="updateCampaign(jQuery('#edt_id_campaign').val(),jQuery('#edt_id_cliente').val(),jQuery('#edt_nombre').val(),jQuery('#edt_slug').val(),jQuery('#edt_start').val(),jQuery('#edt_end').val())"><i class="fa fa-check" aria-hidden="true"></i> Actualizar</button>
                                        <button type="button" class="btn btn-dark" data-coreui-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="modal_eliminar">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Eliminar Campaña:</h5>
                                        <button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3 mt-3">
                                            <label for="del_id" class="form-label">Id Campaña:</label>
                                            <input disabled type="text" class="form-control" id="del_id" name="del_id">
                                        </div>   
                                        <div class="mb-3 mt-3">
                                            <label for="del_nombre" class="form-label">Nombre Campaña:</label>
                                            <input disabled type="text" class="form-control" id="del_nombre" placeholder="Ingrese título de la campaña" name="del_nombre">
                                        </div>
                                        <div class="mb-3 mt-3" style="display: none;">
                                            <label for="del_descripcion" class="form-label">Descripción:</label>
                                            <textarea disabled type="text" class="form-control" id="del_descripcion" placeholder="Ingrese la descripcion de la campaña" name="del_descripcion"></textarea>
                                        </div>
                                        <div class="mb-3 mt-3" style="display: none;">
                                            <label for="del_compartir" class="form-label">Texto compartir:</label>
                                            <textarea disabled class="form-control" rows="3" id="del_compartir" name="del_compartir" placeholder="Ingrese el texto de compartir"></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <div id="result"></div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">         
                                        <button id="btn_delete" type="button" class="btn btn-warning" onclick="eliminarCampaign(jQuery('#del_id').val())">Eliminar</button>
                                        <button type="button" class="btn btn-dark" data-coreui-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="modal_formulario">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel"><span>Editar formulario:</span> <span id="span_nom_form"></span></h5>
                                        <button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-12 col-lg-6">
                                                <div id="content-credencial-1" class="mb-3" style="border-color: #e5e5e5;border-style: solid; width:280px; height:416px; margin:auto; border-radius:20px; background-color: #005a87; padding-top: 45px;">
                                                    <p style="text-align: center;">
                                                        <span style="color: #FFFFFF;">Genera tu credencial</span>
                                                    </p>
                                                    <p style="text-align: center;">
                                                        <img src="<?php echo plugins_url('../../assets/images/sw_user.png', __FILE__)?>" style="width: 120px; border-radius: 50%;">
                                                    </p>
                                                    <p style="text-align: center;">
                                                        <input type="text" value="Nombres y apellidos" placeholder="" style="border-radius:10px; width:230px; height:36px; text-align: center;"/>
                                                    </p>
                                                    <p style="text-align: center; margin-top:-10px;"><button type="button" id="btn_foto_1" class="btn btn-primary" style="border-radius:10px; width:230px;"><b>Sube tu foto</b></button></p>
                                                    <p style="text-align: center; margin-top:-10px;"><button type="button" id="btn_cred_1" class="btn btn-primary" style="border-radius:10px; width:230px;"><b>Crea tu credencial</b></button></p>
                                                </div>

                                                <div id="content-credencial-2" class="mt-3 mb-3" style="border-color: #e5e5e5;border-style: solid; width:280px; height:416px; margin:auto; border-radius:20px; background-color: #000000; padding-top: 25px; display: none;">
                                                    <p style="text-align: center;">
                                                        <img src="<?php echo plugins_url('../../assets/images/avatar_old_2.png', __FILE__)?>" style="width: 120px; border-radius: 50%;">
                                                    </p>
                                                    <p style="text-align: center; margin-top:-10px; line-height: normal;">
                                                        <span style="color: #FFFFFF; text-align: center;">"Aquí va tu texto"</span>
                                                    </p>
                                                    <p style="text-align: center; margin-top:-10px;">
                                                        <textarea type="text" placeholder="Escribe como máximo 120 caracteres" rows="4" style="border-radius:10px; width:230px; pointer-events: none; text-align: center;"/>Escribe como máximo 120 caracteres.</textarea>
                                                    </p>
                                                    <p style="text-align: center; margin-top:-10px;"><button id="btn_foto_2" type="button" class="btn btn-primary" style="border-radius:10px; width:230px;"><b>Sube tu foto</b></button></p>
                                                    <p style="text-align: center; margin-top:-10px;"><button type="button" id="btn_cred_2" class="btn btn-primary" style="border-radius:10px; width:230px;"><b>Crea tu credencial</b></button></p>
                                                </div>

                                            </div>

                                            <div class="col-md-12 col-lg-6">
                                                <p style="text-align: center;">
                                                    <span>Diseño de plantilla de la campaña:</span>
                                                </p>
                                                <div class="mb-3 mt-3" style="display:none;">
                                                    <label for="id_campaign_form" class="form-label">ID Campaña:</label>
                                                    <input disabled type="text" class="form-control" id="id_campaign_form" name="id_campaign_form" style="margin-bottom: 15px;">
                                                </div>                                                
                                                <div class="mb-3 mt-3">
                                                    <label for="sel_design" class="form-label"><b>Seleccionar diseño:</b></label>
                                                    <select name="sel_design" id="sel_design" class="form-select">
                                                        <option value="1" selected="selected">Diseño 1</option>
                                                        <option value="2">Diseño 2</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3 mt-3">
                                                    <label for="c_form" class="form-label" style="vertical-align: bottom;"><b>Color del formulario:</b></label>
                                                    <input type="color" id="c_form" name="c_form" value="#000000" style="position: relative; margin-left:58px;">
                                                </div>
                                                <div class="mb-3 mt-3">
                                                    <label for="c_foto" class="form-label" style="vertical-align: bottom;"><b>Boton de subir foto:</b></label>
                                                    <input type="color" id="c_foto" name="c_foto" value="#000000" style="position: relative; margin-left:60px;">
                                                </div>
                                                <div class="mb-3 mt-3">
                                                    <label for="c_credencial" class="form-label" style="vertical-align: bottom;"><b>Boton de crear credencial:</b></label>
                                                    <input type="color" id="c_credencial" name="" value="#000000" style="position: relative; margin-left:13px;">
                                                </div>
                                                <div class="mb-3 mt-3">
                                                    <div id="result_form"></div>
                                                </div>                                                
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">         
                                        <button type="button" class="btn btn-warning" name="btnUpdateDesignFormulario" id="btnUpdateDesignFormulario" onclick="updateDesignFormulario(jQuery('#id_campaign_form').val(),jQuery('#c_form').val(),jQuery('#c_foto').val(),jQuery('#c_credencial').val(),jQuery('#sel_design').val())"><i class="fa fa-check" aria-hidden="true"></i> Actualizar</button>
                                        <button type="button" class="btn btn-dark" data-coreui-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="modal_credencial">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel"><span>Editar credencial:</span> <span id="span_nom_cred"></span></h5>
                                        <button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-12 col-lg-6">
                                                <p style="text-align: center;">
                                                    <img id="img_actual" style="width: 280px; border-radius: 20px; border: 1px solid #9E9E9E;">
                                                    <span id="span_test" style="position: absolute;margin-left: -240px;margin-top: 267px;width: 200px;">Texto de prueba</span> 
                                                </p>
                                                <div id="content-credencial" class="mt-3 mb-3" style="border-color: #e5e5e5;border-style: solid; width:280px; height:416px; margin:auto; border-radius:20px;display:none;">
                                                </div>                                                
                                            </div>
                                            <div class="col-md-12 col-lg-6">
                                                <p style="text-align: center;">
                                                    <span>Diseño de la credencial:</span>
                                                </p>
                                                <form method="POST" enctype="multipart/form-data" id="myformDesignCredential" style="margin-top: 20px;">
                                                    <div style="margin-bottom:20px;">
                                                        <div class="mb-3 mt-3" style="display:none;">
                                                            <label for="id_campaign_cred" class="form-label">ID Campaña:</label>
                                                            <input disabled type="text" class="form-control" id="id_campaign_cred" name="id_campaign_cred" style="margin-bottom: 15px;">
                                                        </div>
                                                        <div class="mb-3 mt-3">
                                                            <label for="idPImagen2">Cargar credencial:</label>
                                                            <input class="form-control" type="file" style="padding: 4px 5px 4px 5px; max-width: 350px;" id="idPImagen2" name="idPImagen2" onchange="previsualizarFondoCredencial(event);">
                                                            <div class="form-group" id="newImgFondoCredencial" style="display: none;">
                                                                <div class="text-center">
                                                                    <img src="" alt="imagen" id="idNwShowFondoCredencial" height="220" width="220" class="img-thumbnail mt-2">
                                                                </div>
                                                            </div>
                                                            <div class="mb-3 mt-3"> 
                                                                <label for="c_texto" class="form-label" style="vertical-align: bottom;"><b>Color del texto:</b></label>
                                                                <input type="color" id="c_texto" name="c_texto" value="#000000" style="position: relative; margin-left:10px;">
                                                            </div>
                                                            <div class="mb-3 mt-3"> 
                                                                <label for="tipografia" class="form-label" style="vertical-align: bottom;"><b>Tipografía:</b></label>
                                                                <select name="tipografia" id="tipografia" class="form-select" style="position: relative; margin-left:27px; display: inline; width: 180px;">
                                                                    <option value="Roboto">Seleccionar</option>
                                                                    <option value="Poppins">Poppins</option>
                                                                    <option value="Calibri">Calibri</option>
                                                                    <option value="Mirza">Mirza</option>
                                                                    <option value="Times">Times</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3 mt-3">
                                                                <label for="alineacion" class="form-label" style="vertical-align: bottom;"><b>Alinear texto:</b></label>
                                                                <select name="alineacion" id="alineacion" class="form-select" style="position: relative; margin-left:10px; display: inline; width: 180px;">
                                                                    <option value="center">Centro</option>
                                                                    <option value="left">Izquierda</option>
                                                                    <option value="right">Derecha</option>
                                                                </select>
                                                            </div>
                                                            <p style="text-align: left; font-size:12px;">
                                                                Tamaño recomendado de credencial: 1120 x 1664 px </br>
                                                                Dimensiones foto: 572 x 572 px </br>
                                                                Posición foto: X: 272 px, Y: 470 px </br>
                                                                Posición rectángulo para texto: X: 140 px Y: 283 px </br>
                                                            </p>
                                                            <div id="result_fondo"></div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">         
                                    <button type="button" class="btn btn-warning" name="btnUpdateDesignCredential" id="btnUpdateDesignCredential" onclick="updateDesignCredential(jQuery('#id_campaign_cred').val(),jQuery('#c_texto').val(),jQuery('#tipografia').val(),jQuery('#alineacion').val())"><i class="fa fa-check" aria-hidden="true"></i> Actualizar</button>
                                        <button type="button" class="btn btn-dark" data-coreui-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div id="div-table">
                            <table class="display nowrap table" style="width:100%" id="tabla_campaign">
                                <thead class="table-dark">
                                    <!--th style="text-align: center;">Nro.</th-->
                                    <?php if($_SESSION['perfil']=='1'){ ?><th style="text-align: center;">Cliente</th><?php } ?>
                                    <th style="text-align: center;">Campaña</th>
                                    <!--th style="text-align: center;">Página</th-->
                                    <th style="text-align: center;">Fecha de creación</th>
                                    <th style="text-align: center;">Fecha de inicio</th>
                                    <th style="text-align: center;">Fecha de fin</th>
                                    <th style="text-align: center; width: 180px;">Acciones</th>
                                </thead>
                                <tbody>
                                <?php
                                    foreach ($result as $dato) {

                                        $originalDate = $dato->created_at;
                                        $originalDate_inicio = $dato->f_inicio;
                                        $originalDate_fin = $dato->f_fin;

                                        $date = date("d-m-Y   h:i:s", strtotime($originalDate));
                                        $date_inicio = date("d-m-Y", strtotime($originalDate_inicio));
                                        $date_fin = date("d-m-Y", strtotime($originalDate_fin));

                                        $time = new DateTime($date);
                                        $fecha = $time->format('d-m-Y');
                                        $hora = $time->format('h:i:s');

                                        $time_inicio = new DateTime($date_inicio);
                                        $fecha_inicio = $time_inicio->format('d-m-Y');

                                        $time_fin = new DateTime($date_fin);
                                        $fecha_fin = $time_fin->format('d-m-Y');

                                        $timestamp_1 = strtotime($dato->created_at);
                                        $timestamp_inicio = strtotime($dato->f_inicio);
                                        $timestamp_fin = strtotime($dato->f_fin);
                                ?>
                                    <tr class="table-secondary">
                                        <!--td><?php echo $dato->id ?></td-->
                                        <?php if($_SESSION['perfil']=='1'){ ?><td><?php echo $dato->raz ?></td><?php } ?>
                                        <td style="text-wrap: balance;"><?php echo $dato->nom_campaign ?></td>
                                        <!--td><a href="<?php //echo home_url() . '/' . $dato->slug ?>" target="_blank" class="btn btn-info p-2"><i class="fa fa-eye" aria-hidden="true"></i></a></td-->
                                        <td style="text-align: center;" data-order="<?php echo $timestamp_1 ?>"><?php echo $fecha ?><?php //echo $hora ?></td>
                                        <td style="text-align: center;" data-order="<?php echo $timestamp_inicio ?>"><?php echo $fecha_inicio ?></td>
                                        <td style="text-align: center;" data-order="<?php echo $timestamp_fin ?>"><?php echo $fecha_fin ?></td>
                                        <td style="text-align: center;">
                                            <a href="<?php echo home_url() . '/' . $dato->slug ?>" target="_blank" class="btn btn-warning p-2" data-toggle="tooltip" title="Ver página"><i class="fa fa-eye" aria-hidden="true"></i></a>
                                            <button data-toggle="tooltip" title="Editar Campaña" data-edit_id='<?php echo $dato->id ?>' type="button" class="btn btn-dark btn_editar p-2"><i class="fa fa-id-badge" aria-hidden="true"></i></button>
                                            <button data-toggle="tooltip" title="Editar formulario" data-form_id='<?php echo $dato->id ?>' type="button" class="btn btn-warning btn_formulario p-2"><i class="fas fa-edit"></i></button>
                                            <button data-toggle="tooltip" title="Editar credencial" data-cred_id='<?php echo $dato->id ?>' type="button" class="btn btn-dark btn_credencial p-2"><i class="fa fa-id-badge" aria-hidden="true"></i></button>
                                            <a data-toggle="tooltip" title="Editar página" href='<?php echo home_url().'/editar-campaign?id='.$dato->id ?>' type="button" class="btn btn-warning p-2"><i class="fa fa-laptop" aria-hidden="true"></i></a>
                                            <button data-toggle="tooltip" title="Eliminar página" data-del_id='<?php echo $dato->id  ?>' type="button" class="btn btn-dark btn_eliminar p-2"><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                <?php
                                }
                                ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <?php echo footer() ?>
    </div>
    
<?php
}
?>
<?php
function contentEditarCampaign()
{

   
    //wp_register_script('campaign_js', plugins_url('../../assets/local/js/campaign.js', __FILE__));


    //echo '<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">';
    echo '<link href="https://cdn.jsdelivr.net/npm/quill-emoji/dist/quill-emoji.css" rel="stylesheet">';

    //echo '<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>';
    //wp_register_script('quill_emoji_js', plugins_url('../../assets/libs/quill/quill-emoji.js', __FILE__));
    

    //wp_register_style('styles_quill', plugins_url('../../assets/local/css/styles_quill.css', __FILE__));
    wp_register_script('js_quill', plugins_url('../../assets/local/js/js_quill.js', __FILE__));

  

    if(isset($_GET['id'])) {

        if($_SESSION['perfil']=='1'){

            global $wpdb;
            $tbl_1 = "saas_campaign";
            $query = "SELECT * FROM $tbl_1 WHERE id='".$_GET['id']."'";
            $campaign = $wpdb->get_results($query);

        }else{

            global $wpdb;
            $tbl_1 = "saas_campaign";
            $query = "SELECT * FROM $tbl_1 WHERE id_cliente='" . $_SESSION['cliente'] . "' and id='".$_GET['id']."'";
            $campaign = $wpdb->get_results($query);

        }

        if ($campaign[0]->img_campaign != "") {
            $img_campaign = json_decode($campaign[0]->img_campaign, true);
            $img_campaign = $img_campaign[0]['url'];
        } else {
            $img_campaign = plugins_url('../../assets/images/fondo_logo_default.png', __FILE__);
        }

?>

        <style>
            .nav-link {
                color: #FFFFFF;
                text-align: center;
            }
            .nav-item>a:hover {
                color: #000000;
            }
            .nav-link.active {
                //background-color: #FF9700 !important;
            }
            .swal2-icon {
                border-color: #FF9700 !important;
                color: #FF9700 !important;
            }
            .swal2-icon-content{
                border-color: #FF9700 !important;
                color: #FF9700 !important;
            }
            .swal2-success-ring{
                border-color: #FF9700 !important;
                color: #FF9700 !important;
            }
            .swal2-icon-success{            
                border-color: #FF9700 !important;
                color: #FF9700 !important;
            }            
        </style>

    <?php echo sidebar() ?>
        <div class="wrapper d-flex flex-column min-vh-100">
            <?php echo navbar() ?>
            <div class="container">
                <section>
                    <div class="row">
                        <div class="col-md-12">
                            <h2><b>Editar página: <?php echo $campaign[0]->nom_campaign ?></b></h2>
                        </div>
                        <div class="mb-3 mt-3" style="display:none;">
                            <label for="id_campaign" class="form-label">ID Campaña:</label>
                            <input disabled type="text" class="form-control" id="id_campaign" name="id_campaign" value="<?php echo $campaign[0]->id ?>">
                        </div>
                        <div class="col-md-12 mb-4">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs nav-justified">
                                <li class="nav-item waves-effect waves-light">
                                    <a class="nav-link active" data-coreui-toggle="tab" href="#panel1" role="tab" aria-selected="true">Editar Diseño Página</a>
                                </li>
                                <li class="nav-item waves-effect waves-light">
                                    <a class="nav-link" data-coreui-toggle="tab" href="#panel2" role="tab" aria-selected="false">Editar diseño de la página de agradecimiento</a>
                                </li>
                            </ul>
                            <!-- Tab panels -->
                            <div class="tab-content card">
                                <!-- Panel 1 -->
                                <div class="tab-pane fade in active show" id="panel1" role="tabpanel" style="margin-left: 15px; margin-right: 15px;">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row mt-1">
                                                <div class="col-md-6">
                                                    <div class="mb-3 mt-3">
                                                        <h5><span class="badge bg-dark">Vista previa</span></h5>
                                                    </div>
                                                    <div id="vista_prev_1" class="mb-3 mt-3" style="text-align: center;">
                                                        <iframe style="" src="<?php echo home_url() . '/' . $campaign[0]->slug ?>" height="800" width="65%" title="Iframe Example"></iframe>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3 mt-3">
                                                        <h5><span class="badge bg-dark">Página de inicio de la credencial</span></h5>
                                                    </div>
                                                    <div class="mb-3 mt-3">
                                                        <h6 class="form-label"><b>Texto de bienvenida:</b></h6>
                                                        <div id="toolbar_4" class="toolbar-quill"></div>
                                                        <div class="form-control editor-quill" rows="3" id="t_bienvenida" name="t_bienvenida" placeholder="Ingrese la descripcion de la campaña" style="height: 100px;"><?php echo $campaign[0]->t_bienvenida ?></div>
                                                    </div>                                                   
                                                    <div class="mb-3 mt-3">
                                                        <label for="c_header" class="form-label" style="vertical-align: bottom;"><b>Color de la cabecera:</b></label>
                                                        <input type="color" id="c_header" name="c_header" value="<?php echo $campaign[0]->c_header ?>" style="left: 45px; position: relative;">
                                                    </div>
                                                    <div class="mb-3 mt-3">
                                                        <label for="c_landing" class="form-label" style="vertical-align: bottom;"><b>Boton landing page:</b></label>
                                                        <input type="color" id="c_landing" name="c_landing" value="<?php echo $campaign[0]->c_landing ?>" style="left: 49px; position: relative;">
                                                    </div>
                                                    <div class="mb-3 mt-3">
                                                        <label for="c_fondo" class="form-label" style="vertical-align: bottom;"><b>Color de fondo:</b></label>
                                                        <input type="color" id="c_fondo" name="c_fondo" value="<?php echo $campaign[0]->c_fondo ?>" style="left: 84px; position: relative;">
                                                    </div>
                                                    <div class="row mb-3">
                                                        <div class="mb-3 mt-3">
                                                            <!-- Default switch -->
                                                            <div class="form-check form-switch">
                                                                <input <?php if($campaign[0]->chk_descripcion=='1'){echo 'checked';} ?> class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckText" value="flexSwitchCheckText" name="flexSwitchCheck" />
                                                                <label class="form-check-label" for="flexSwitchCheckText">Texto de descripción</label>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3 mt-3">
                                                            <!-- Checked switch -->
                                                            <div class="form-check form-switch">
                                                                <input <?php if($campaign[0]->chk_descripcion=='2'){echo 'checked';} ?> class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckImage" value="flexSwitchCheckImage" name="flexSwitchCheck" />
                                                                <label class="form-check-label" for="flexSwitchCheckImage">Imagen de campaña</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row" id="div-bienvenida" style="<?php if($campaign[0]->chk_descripcion=='1'){echo 'display: block;';}else{echo 'display: none;';} ?>">
                                                        <div class="mb-3">
                                                            <h5><span class="badge bg-dark">Texto de descripción</span></h5>
                                                            <p>Este texto solo aparecerá si no coloca una imagen de campaña.</p>
                                                            <div id="toolbar_1" class="toolbar-quill"></div>
                                                            <div class="form-control editor-quill" rows="3" id="t_descripcion" name="t_descripcion" placeholder="Ingrese la descripcion de la campaña" style="height: 100px;"><?php echo $campaign[0]->t_descripcion ?></div>
                                                        </div>
                                                    </div>
                                                    <div class="row" id="div-imagen" style="<?php if($campaign[0]->chk_descripcion=='2'){echo 'display: block;';}else{echo 'display: none;';} ?>">
                                                        <form method="POST" enctype="multipart/form-data" id="formImagenCampaign" style="margin-top: 20px;">
                                                            <div class="mb-3">
                                                                <h4><span class="badge bg-dark">Imagen de campaña</span></h4>
                                                            </div>
                                                            <div class="mb-3">
                                                                <p style="text-align: center;"><img id="img_campaign" src="<?php echo $img_campaign ?>" style="width:200px; background: #d3d3d3;"></p>
                                                            </div>
                                                            <div class="mb-3 mt-5">
                                                                <label for="ImagenCampaign"><b>Seleccionar Imagen de Campaña</b></label>
                                                                <p style="color: red; font-size: 16px; font-weight: bold;">Tamaño recomendado: 1080 x 1080 pixeles</p>
                                                                <input class="form-control" type="file" style="padding: 4px 5px 4px 5px; max-width: 350px;" id="ImagenCampaign" name="ImagenCampaign" onchange="previsualizarImagenCampaign(event);">
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="mb-5 mt-3">
                                                        <button id="btn_update_1" type="button" class="btn btn-dark" onclick="actualizarCampaignTab1()"><i class="fa fa-check" aria-hidden="true"></i> Actualizar datos</button>
                                                    </div>
                                                </div>
                                            </div>                                            
                                        </div>
                                    </div>
                                </div>
                                <!-- Panel 1 -->
                                <!-- Panel 2 -->
                                <div class="tab-pane fade" id="panel2" role="tabpanel" style="margin-left: 15px; margin-right: 15px;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div id="vista_prev_2" class="mb-3 mt-3" style="text-align: center;">

                                                <h5><badge for="edt_superior" class="badge bg-dark">Vista previa</badge></h5>
                                                                 
                                                <div class="d-flex justify-content-center" style="margin-bottom: 15px;">
                                                    <div style="min-width: 280px; width: 450px;">
                                                        <?php echo $campaign[0]->t_superior ?>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-center">
                                                    <div id="text-copy" style="border: 2px solid #005ea2; border-radius: 10px; padding: 10px; margin-bottom: 20px; min-width: 280px; width: 450px; font-size: 16px; line-height: 1.5;">
                                                        <?php echo $campaign[0]->t_compartir ?>
                                                    </div>
                                                </div>
                                                <div class="d-flex justify-content-center">
                                                    <div style="min-width: 280px; width: 450px;">
                                                        <button id="btn-copy" class="btn btn-success" style="width: 100%; margin-bottom: 10px; background-color: #1EB2F4; border-color: #1EB2F4; pointer-events: none;"><i class="fa fa-file" aria-hidden="true"></i> Copiar texto</button></br>
                                                    </div>
                                                </div>                                                
                                                <div class="d-flex justify-content-center">
                                                    <div style="min-width: 280px; width: 450px;">
                                                        <button class="btn btn-primary" style="width: 100%; margin-bottom: 10px; background-color: #0d6efd; pointer-events: none;"><i class="fa fa-download" aria-hidden="true"></i> Descargar</button>
                                                    </div>
                                                </div>                                                
                                                <div class="d-flex justify-content-center">
                                                    <div style="min-width: 280px; width: 450px;">
                                                        <a href="" class="btn btn-primary form-control" style="width: 100%; background-color: #6c757d; pointer-events: none;" role="button"><i class="fa fa-reply-all" aria-hidden="true"></i> Volver</a>
                                                    </div>
                                                </div>              
                                                
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3 mt-3" style="display:none;">
                                                <label for="edt_id" class="form-label">ID Campaña:</label>
                                                <input disabled type="text" class="form-control" id="edt_id" name="edt_id" value="<?php echo $campaign[0]->id ?>">
                                            </div>
                                            <div class="mb-5 mt-3">
                                                <h5><badge for="edt_superior" class="badge bg-dark">Texto de agradecimiento</badge></h5>
                                                <p>Coloca aquí el copy con el que deseas que tus asistente compartan su credencial en redes sociales.</p>
                                                <div id="toolbar_2" class="toolbar-quill"></div>
                                                <div class="form-control editor-quill" rows="3" id="edt_superior" name="edt_superior" placeholder="Ingrese el texto superior" style="height: 150px;"><?php echo $campaign[0]->t_superior ?></div>
                                            </div>
                                            <div class="mb-3 mt-3">
                                                <h5><badge for="edt_compartir" class="badge bg-dark">Texto compartir</badge></h5>
                                                <p>Coloque un texto que las personas puedan compartir en las redes sociales.</p>
                                                <div id="toolbar_3" class="toolbar-quill"></div>
                                                <div class="form-control editor-quill" rows="3" id="edt_compartir" name="edt_compartir" placeholder="Ingrese el texto inferior de compartir" style="height: 150px;"><?php echo $campaign[0]->t_compartir ?></div>
                                            </div>                                           
                                            <div class="mb-3">
                                                <div id="edt_result"></div>
                                            </div>
                                            <div class="mb-5">
                                                <button id="btn_update_2" type="button" class="btn btn-dark" onclick="actualizarCampaignTab2(jQuery('#edt_id').val())"><i class="fa fa-check" aria-hidden="true"></i> Actualizar datos</button>
                                            </div>
                                        </div>
                                    </div>        
                                </div>
                                <!-- Panel 2 -->              
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <?php echo footer() ?>
        </div>
<?php
    }else{
?>        
    <?php echo sidebar() ?>
        <div class="wrapper d-flex flex-column min-vh-100">
            <?php echo navbar() ?>
            <div class="container">
                <section>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-warning">
                                <strong>No hay campaña seleccionada.</strong>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <?php echo footer() ?>
        </div>
<?php
    }
?>   
<?php

    
    //wp_enqueue_script('campaign_js');
    //wp_enqueue_script('quill_emoji_js');
    wp_enqueue_style('styles_quill');
    wp_enqueue_script('js_quill');
}
?>