<style>
    .chat-style {
        height: 100vh;
        background: #ffffff;
        box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);
    }

    .chat-input-section .show {
        display: block;
    }

    .chat-input-section .chat-input-collapse {
        position: absolute;
        bottom: 92px;
        left: 0;
        right: 0;
        border-top: 1px solid var(--bs-border-color);
        overflow: hidden;
    }
</style>
<div class="container">
    <div class="panel-header">
        <div class="page-wrapper has-sidebar">
            <div class="page-sidebar" style="box-shadow: 4px 0px 10px rgba(69, 65, 78, 0.06);">
                <header class="sidebar-header d-xl-none">
                    <a class="back">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>Atras
                    </a>
                </header>
                <div class="page-sidebar-section pb-3">
                    <div class="page-navs bg-white mb-4">
                        <div class="nav-scroller pt-4">
                            <div class="nav nav-tabs nav-line nav-color-secondary">
                                <a class="nav-link active show" data-toggle="pill" href="#chat" role="tab" aria-controls="chat" aria-selected="true" style="padding: 0px 0px 20px 0 !important;">Chat</a>
                                <a class="nav-link " data-toggle="pill" href="#contactos" role="tab" aria-controls="contactos" aria-selected="false" style="padding: 0px 0px 20px 0 !important;">Contactos</a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content mt-4">
                        <div class="tab-pane fade show active" id="chat">
                            <div>
                                <div class="px-4">
                                    <div class="d-flex align-items-start">
                                        <div class="flex-grow-1">
                                            <h2 class="mb-4">Chats</h2>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom" title="Crear Chat">

                                                <!-- Button trigger modal -->
                                                <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addChat-exampleModal">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <form>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control bg-light border-0 pe-0" id="serachChatUser" onkeyup="searchUser()" placeholder="Buscar.." aria-label="buscar" aria-describedby="searchbtn-addon" autocomplete="off">
                                            <button class="btn btn-light-gray" type="button" id="searchbtn-addon"><i class='fas fa-search align-middle'></i></button>
                                        </div>
                                    </form>

                                </div> <!-- .p-4 -->

                                <div class="chat-room-list">
                                    <!-- Start chat-message-list -->
                                    <span class="mb-3 px-4 mt-4 text-muted text-uppercase" style="font-size: 11px;">Recientes</span>
                                    <div class="list-group list-group-messages list-group-flush active-user">
                                        <div class="m-2">
                                            <div class="item-list px-4">
                                                <div class="d-flex">
                                                    <div class="avatar">
                                                        <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle">
                                                    </div>
                                                    <div class="flex-1 pt-1 ml-2">
                                                        <h6 class="fw-bold mb-1">CSS</h6>
                                                        <small class="text-muted">Cascading Style Sheets</small>
                                                    </div>
                                                    <div class="d-flex ml-auto align-items-center">
                                                        <span class="badge badge-info">0</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex align-items-center px-4 mt-2 mb-2">
                                        <div class="flex-grow-1">
                                            <span class="mb-0 text-muted text-uppercase" style="font-size: 11px;">Favoritos</span>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom" title="New Message">

                                                <!-- Button trigger modal -->
                                                <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target=".contactModal">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="list-group list-group-messages list-group-flush">
                                        <div class="m-2">
                                            <div class="item-list px-4">
                                                <div class="d-flex">
                                                    <div class="avatar">
                                                        <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle">
                                                    </div>
                                                    <div class="flex-1 pt-1 ml-2">
                                                        <h6 class="fw-bold mb-1">CSS</h6>
                                                        <small class="text-muted">Cascading Style Sheets</small>
                                                    </div>
                                                    <div class="d-flex ml-auto align-items-center">
                                                        <span class="badge badge-info">0</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex align-items-center px-4 mb-2">
                                        <div class="flex-grow-1">
                                            <span class="mb-0 text-muted text-uppercase" style="font-size: 11px;">Grupos</span>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom" title="Create group">

                                                <!-- Button trigger modal -->
                                                <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addgroup-exampleModal">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="list-group list-group-messages list-group-flush">
                                        <div class="m-2">
                                            <div class="item-list px-4">
                                                <div class="d-flex">
                                                    <div class="avatar">
                                                        <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle">
                                                    </div>
                                                    <div class="flex-1 pt-1 ml-2">
                                                        <h6 class="fw-bold mb-1">CSS</h6>
                                                        <small class="text-muted">Cascading Style Sheets</small>
                                                    </div>
                                                    <div class="d-flex ml-auto align-items-center">
                                                        <span class="badge badge-info">0</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade" id="contactos">
                            <div>
                                <div class="px-4">
                                    <div class="d-flex align-items-start">
                                        <div class="flex-grow-1">
                                            <h2 class="mb-4">Contactos</h2>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <div data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="bottom" title="Crear Contacto">

                                                <!-- Button trigger modal -->
                                                <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addChat-exampleModal">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <form>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control bg-light border-0 pe-0" id="serchContactUser" placeholder="Buscar.." aria-label="buscar" aria-describedby="searchbtn-addon" autocomplete="off">
                                            <button class="btn btn-light-gray" type="button" id="searchbtn-addon"><i class='fas fa-search align-middle'></i></button>
                                        </div>
                                    </form>

                                </div>
                                <div class="chat-room-list">
                                    <div class="list-group list-group-messages list-group-flush active-user">
                                        <div class="m-2">
                                            <div class="item-list px-4">
                                                <div class="d-flex">
                                                    <div class="avatar">
                                                        <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle">
                                                    </div>
                                                    <div class="flex-1 pt-1 ml-2">
                                                        <h6 class="fw-bold mb-1">CSS</h6>
                                                        <small class="text-muted">Cascading Style Sheets</small>
                                                    </div>
                                                    <div class="d-flex ml-auto align-items-center">
                                                        <span class="badge badge-info">0</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-inner page-inner-fill">
                <div class="conversations">
                    <div class="message-header">
                        <div class="message-title">
                            <div class="user ml-2">
                                <div class="avatar avatar-offline">
                                    <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle border border-white">
                                </div>
                                <div class="info-user ml-2">
                                    <a href="#" class="quick-sidebar-toggler"><span class="name">Chad</span></a>
                                    <span class="last-active">Active 2h ago</span>
                                </div>
                            </div>
                            <div class="ml-auto">
                                <button class="btn btn-info btn-sm">
                                    <b>Reabrir</b>
                                </button>
                                <button class="btn btn-light-gris btn-sm page-sidebar-toggler d-xl-none">
                                    <i class="fa fa-angle-double-left"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="conversations-body">
                        <div class="conversations-content">
                            <div class="message-content-wrapper">
                                <div class="message message-in">
                                    <div class="avatar avatar-sm">
                                        <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="name">Chad</div>
                                            <div class="content">Hello, Rian</div>
                                        </div>
                                        <div class="date">12.31</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-out">
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="content">
                                                Hello, Chad
                                            </div>
                                        </div>
                                        <div class="message-content">
                                            <div class="content">
                                                What's up?
                                            </div>
                                        </div>
                                        <div class="date">12.35</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-in">
                                    <div class="avatar avatar-sm">
                                        <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="name">Chad</div>
                                            <div class="content">
                                                Thanks
                                            </div>
                                        </div>
                                        <div class="message-content">
                                            <div class="content">
                                                When is the deadline of the project we are working on ?
                                            </div>
                                        </div>
                                        <div class="date">13.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-out">
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="content">
                                                The deadline is about 2 months away
                                            </div>
                                        </div>
                                        <div class="date">13.10</div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content-wrapper">
                                <div class="message message-in">
                                    <div class="avatar avatar-sm">
                                        <img src="<?= asset('assets/img/default.png'); ?>" alt="..." class="avatar-img rounded-circle border border-white">
                                    </div>
                                    <div class="message-body">
                                        <div class="message-content">
                                            <div class="name">Chad</div>
                                            <div class="content">
                                                Ok, Thanks !
                                            </div>
                                        </div>
                                        <div class="date">13.15</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chat-input-collapse chat-input-collapse1 collapse" id="chatinputmorecollapse">
                        <div class="card mb-0">
                            <div class="card-body py-3">
                                <!-- Swiper -->
                                <div class="swiper chatinput-links">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="text-center px-2 position-relative">
                                                <div>
                                                    <input id="attachedfile-input" type="file" class="d-none" accept=".zip,.rar,.7zip,.pdf" multiple>
                                                    <label for="attachedfile-input" class="avatar-sm mx-auto stretched-link">
                                                        <span class="avatar-title font-size-18 bg-primary-subtle text-primary rounded-circle">
                                                            <i class="fas fa-paperclip"></i>
                                                        </span>
                                                    </label>
                                                </div>
                                                <h5 class="font-size-11 text-uppercase mt-3 mb-0 text-body text-truncate">Documentos</h5>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="text-center px-2">
                                                <div class="avatar-sm mx-auto">
                                                    <div class="avatar-title font-size-18 bg-primary-subtle text-primary rounded-circle">
                                                        <i class="fas fa-camera"></i>
                                                    </div>
                                                </div>
                                                <h5 class="font-size-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link" onclick="cameraPermission()">Camera</a></h5>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="text-center px-2 position-relative">
                                                <div>
                                                    <input id="galleryfile-input" type="file" class="d-none" accept="image/png, image/gif, image/jpeg" multiple>
                                                    <label for="galleryfile-input" class="avatar-sm mx-auto stretched-link">
                                                        <span class="avatar-title font-size-18 bg-primary-subtle text-primary rounded-circle">
                                                            <i class="fas fa-images"></i>
                                                        </span>
                                                    </label>
                                                </div>
                                                <h5 class="font-size-11 text-uppercase text-truncate mt-3 mb-0">Imagenes</h5>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="text-center px-2">
                                                <div>
                                                    <input id="audiofile-input" type="file" class="d-none" accept="audio/*" multiple>
                                                    <label for="audiofile-input" class="avatar-sm mx-auto stretched-link">
                                                        <span class="avatar-title font-size-18 bg-primary-subtle text-primary rounded-circle">
                                                            <i class="fas fa-headphone"></i>
                                                        </span>
                                                    </label>
                                                </div>
                                                <h5 class="font-size-11 text-uppercase text-truncate mt-3 mb-0">Audio</h5>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="text-center px-2">
                                                <div class="avatar-sm mx-auto">
                                                    <div class="avatar-title font-size-18 bg-primary-subtle text-primary rounded-circle">
                                                        <i class="fas fa-location"></i>
                                                    </div>
                                                </div>

                                                <h5 class="font-size-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link" onclick="getLocation()">Location</a></h5>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="text-center px-2">
                                                <div class="avatar-sm mx-auto">
                                                    <div class="avatar-title font-size-18 bg-primary-subtle text-primary rounded-circle">
                                                        <i class="bx bxs-user-circle"></i>
                                                    </div>
                                                </div>
                                                <h5 class="font-size-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link" data-bs-toggle="modal" data-bs-target=".contactModal">Contacts</a></h5>
                                            </div>
                                        </div>

                                        <div class="swiper-slide d-block d-sm-none">
                                            <div class="text-center px-2">
                                                <div class="avatar-sm mx-auto">
                                                    <div class="avatar-title font-size-18 bg-primary-subtle text-primary rounded-circle">
                                                        <i class="fas fa-microphone"></i>
                                                    </div>
                                                </div>
                                                <h5 class="font-size-11 text-uppercase text-truncate mt-3 mb-0"><a href="#" class="text-body stretched-link">Audio</a></h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="messages-form">
                        <div class="messages-form-control">
                            <div class="row g-0 align-items-center">
                                <div class="file_Upload"></div>
                                <div class="col-auto">
                                    <div class="chat-input-links me-md-2">
                                        <div class="links-list-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="Documentos" data-bs-original-title="Documentos">
                                            <button type="button" class="btn btn-link text-decoration-none btn-sm waves-effect" data-bs-toggle="collapse" data-bs-target="#chatinputmorecollapse" aria-expanded="false" aria-controls="chatinputmorecollapse">
                                                <i class="fas fa-ellipsis-h align-middle" style="font-size: 18px;"></i>
                                            </button>
                                        </div>
                                        <div class="links-list-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="Emoji" data-bs-original-title="Emoji">
                                            <button type="button" class="btn btn-link text-decoration-none btn-sm waves-effect emoji-btn" id="emoji-btn">
                                                <i class="fas fa-smile align-middle" style="font-size: 18px;"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col" style="padding-right: 0px;padding-left: 0px;">
                                    <div class="position-relative">
                                        <input autocomplete="off" type="text" class="form-control chat-input" autofocus="" id="chat-input" placeholder="Escriba aqui!">
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <div class="chat-input-links ms-2 gap-md-1">
                                        <div class="links-list-item">
                                            <button type="button" class="btn btn-link text-decoration-none btn-sm waves-effect" onclick="audioPermission()">
                                                <i class="fas fa-microphone align-middle" style="font-size: 18px;"></i>
                                            </button>
                                            <button type="submit" class="btn btn-primary btn-sm chat-send waves-effect waves-light" data-bs-toggle="collapse" data-bs-target=".chat-input-collapse1.show">
                                                <i class="fas fa-paper-plane align-middle" id="submit-btn"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="quick-sidebar">
        <a href="#" class="close-quick-sidebar">
            <i class="flaticon-cross"></i>
        </a>
        <div class="quick-sidebar-wrapper">
            <ul class="nav nav-tabs nav-line nav-color-secondary" role="tablist">
                <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#perfil" role="tab" aria-selected="true">Perfil</a> </li>
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#notas" role="tab" aria-selected="false">Notas</a> </li>
            </ul>
            <div class="tab-content mt-3">
                <div class="tab-chat tab-pane fade show active" id="perfil" role="tabpanel">
                  
                </div>
                <div class="tab-pane fade" id="notas" role="tabpanel">
                    <div class="quick-wrapper tasks-wrapper">
                        <div class="tasks-scroll scrollbar-outer">
                            <div class="tasks-content">
                                <span class="category-title mt-0">Recientes</span>
                                <ul class="tasks-list">
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">xxxxxx</span>
                                            <span class="task-action">
                                                <a href="#" class="link text-danger">
                                                    <i class="flaticon-interface-5"></i>
                                                </a>
                                            </span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span class="custom-control-label">xxxxx</span>
                                            <span class="task-action">
                                                <a href="#" class="link text-danger">
                                                    <i class="flaticon-interface-5"></i>
                                                </a>
                                            </span>
                                        </label>
                                    </li>
                                </ul>

                                <span class="category-title">Anteriores</span>
                                <ul class="tasks-list">
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span class="custom-control-label">xxxxxxx </span>
                                            <span class="task-action">
                                                <a href="#" class="link text-danger">
                                                    <i class="flaticon-interface-5"></i>
                                                </a>
                                            </span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="custom-checkbox custom-control checkbox-secondary">
                                            <input type="checkbox" class="custom-control-input"><span class="custom-control-label">xxxxxxxxx </span>
                                            <span class="task-action">
                                                <a href="#" class="link text-danger">
                                                    <i class="flaticon-interface-5"></i>
                                                </a>
                                            </span>
                                        </label>
                                    </li>
                                </ul>

                                <div class="mt-3">
                                    <div class="btn btn-primary btn-rounded btn-sm">
                                        <span class="btn-label">
                                            <i class="fa fa-plus"></i>
                                        </span>
                                        Agregar notas
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?= asset('assets/js/panel/bbundle.min.js'); ?>"></script>