<style>
    th {

        text-align: center;
    }

    .titleTh {

        font-size: 24px;
    }

    .espaciado {

        padding-top: 5px;
        padding-bottom: 5px;
    }
</style>

<!--chat estilo-->

<style>
    /* Button used to open the chat form - fixed at the bottom of the page */
    .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 75px;
        right: 28px;
        width: 280px;
    }

    /* The popup chat - hidden by default */
    .chat-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 9;
    }

    /* Add styles to the form container */
    .form-container {
        max-width: 300px;
        padding: 10px;
        background-color: white;
    }

    /* Full-width textarea */
    .form-container .textareaEsp {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
        resize: none;
        min-height: 200px;
    }

    .form-container .textareaMensaje {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
        resize: none;
        min-height: 40px;
    }

    /* When the textarea gets focus, do something */
    .form-container .textareaMensaje:focus {
        background-color: #ddd;
        outline: none;
    }

    /* Set a style for the submit/send button */
    .form-container .btn {
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    /* Add a red background color to the cancel button */
    .form-container .cancel {
        background-color: red;
    }

    /* Add some hover effects to buttons */
    .form-container .btn:hover,
    .open-button:hover {
        opacity: 1;
    }
</style>

<!--chat estilo-->


<div id="chats" style="margin-top:0px;">
    <div style="text-align:center;margin-top:5%">
        <h3>Chats</h3>
    </div>
    <div class="row pl-2 pr-2" style="text-align:center;">
        <div class="card-panel white z-depth-5 hoverable col s12 pt-3 pb-3 pl-2 pr-2">
            <table class="striped responsive-table bordered">
                <tr>
                    <th class="titleTh">Nombre</th>
                    <th class="titleTh">Campaña</th>
                    <th class="titleTh">Lista</th>
                    <th class="titleTh">Estatus</th>
                    <th class="titleTh">fecha de creación</th>
                    <th class="titleTh">fecha de Modificación</th>
                    <th class="titleTh">
                        <a class="btn waves-effect waves-light indigo darken-4 btn modal-trigger" href="#modal1" title="Agregar nuevo chat">
                            <i class="material-icons">add</i>
                        </a>
                    </th>
                </tr>
                <tr>
                    <th>Chat 1</th>
                    <th>Liverpool</th>
                    <th>Lista 1</th>
                    <th>Activo</th>
                    <th>2019-08-17</th>
                    <th>2019-09-17</th>
                    <th>
                        <a class="btn waves-effect waves-light green darken-1 btn modal-trigger" href="#modal3" title="Modificar chat">
                            <i class="material-icons">mode_edit</i>
                        </a>
                        <a class="btn waves-effect waves-light cyan accent-4 btn modal-trigger" href="#modal2" title="Participantes">
                            <i class="material-icons">file_download</i>
                        </a>
                        <a class="btn waves-effect waves-light red darken-4 btn modal-trigger" title="Eliminar Chat">
                            <i class="material-icons">delete</i>
                        </a>
                    </th>
                </tr>
            </table>
        </div>

    </div>
    <?php require_once "modals/addChat.php"; ?>
    <?php require_once "modals/editChat.php"; ?>
    <!-- Chat -->
    <button class="open-button" onclick="openForm()">Chat</button>

    <div class="chat-popup" id="myForm">
        <form v-on:submit.prevent="" class="form-container">
            <div class=" col s4">
                <label for="chatSel">Sala de chat:</label>
                <select id="chatSel" v-modal="salaActiva">
                    <option v-for="(value,key) in Array.from(listaSalasActivas)" v-bind:value="key">{{value}}</option>
                </select>
            </div>

            <textarea class="textareaEsp" readonly id="conver"></textarea>

            <textarea class="textareaMensaje" placeholder="escribe mensaje..." id="mensaje"></textarea>

            <div class="row">
                <div class="col s6">
                    <button type="button" class="btn">Enviar</button>
                </div>
                <div class="col s6">
                    <button type="button" class="btn cancel" onclick="closeForm()">Cerrar</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Chat -->

</div>

<!-- ================================================
    Scripts
    ================================================ -->
<!-- jQuery Library -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jquery-3.2.1.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- chartjs -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>chartjs/chart.min.js"></script>
<!-- sparkline -->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>sparkline/jquery.sparkline.min.js"></script>
<!-- google map api -->
<!--jvectormap-->
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="<?= VENDORS_ADMIN; ?>jvectormap/vectormap-script.js"></script>
<!--google map-->

<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>plugins.js"></script>
<!--card-advanced.js - Page specific JS-->
<script type="text/javascript" src="<?= JS_ADMIN; ?>scripts/dashboard-analytics.js"></script>
<!--custom-script.js - Add your own theme custom JS
    <script type="text/javascript" src="<?= JS_ADMIN; ?>custom-script.js"></script>-->
<script src="<?= JS_ADMIN; ?>vue.js"></script>
<script src="<?= JS_ADMIN; ?>Chart.min.js"></script>
<script src="<?= JS_ADMIN; ?>gauge.min.js"></script>
<script src="<?= JS_ADMIN; ?>raphael.js"></script>
<script src="<?= JS_ADMIN; ?>justgage.js"></script>
<script src="<?= LIB_JS; ?>sweetalert2.js" type="text/javascript"></script>

<?php include UTILS_PATH . "components" . DIRECTORY_SEPARATOR . "modal.component.php"; ?>