{extends file="layouts/base.tpl"}
{block name="head_extras_from_layout"}

<script>
    var clx_admin_layout = 1;
 

</script>
 

<style>

 .image-container-perfil-header {
        position: relative;
        display: inline-block;
    }

    .img-avatar-small-header {
        position: absolute;
        bottom: 34px;
        right: -8px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #000000;
    }
    .img-avatar-header {
     /* border-radius: 50%; */ 
     width: 1.7rem; 
     height: auto;
    }
</style>


{if !empty($config['admin_dark_theme'])}
<style>
    html body {
        background-color: #1E1E2C;
        color: #fff;
    }
    html body a {
        color: #3699ff;
    }
    .page-header {
        background-color: #1E1E2C;
    }

    .page-content {
        background-color: #151520;
    }
    .panel, .card {
        background-color: #1E1E2C;
    }
    .panel-hdr {
        background: #1E1E2C;
    }
    .panel-hdr h2 {
        color: #fff;
    }
    .table-bordered td, .table-bordered th {
        border: 1px solid #323248;
    }
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #2B2C3F;
    }
    .text-dark {
        color: #fff!important;
    }
    .text-muted, .text-muted-green {
        color: #dedee0!important;
    }
    .panel {
        border: 0;
    }

    .table thead th {
        border-bottom: 2px solid #323248;
    }

    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        color: #fff;
    }
    .table {
        color: #fff;
    }

    .btn-default {
        background-color: #565773;
        background-image: none;
        color: #fff;
    }
    .fc-head-container thead tr {
        background-image: none;
    }
    .fc-other-month {
        background-image: none;
        background-color: #15151F;
        background-size: 1rem 1rem;
    }
    .progress {
        background-color: #323347;
    }
    .alert-info {
        color: #fff;
        background-color: #2f264f;
        border-color: transparent;
    }

    .badge.badge-outline-danger {
        color: #f64e60;
        background-color: #3a2434;
    }

    .page-content {
        color: #fff;
    }

    .symbol .symbol-label {
        background-color: #565772;
    }

    .clx-avatar {
        background: #372533;
        color: #E45B64;
    }

    .form-control {
        background-color: #1b1b29;
        border-color: #1b1b29;
        color: #92929f;
    }

    .select2-container--default .select2-selection--single {
        background-color: #1b1b29;
        border: 1px solid #1b1b29;
        border-radius: 4px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #fff;
    }

    .form-control:focus {
        background-color: #171723;
        border-color: #171723;
        color: #92929f;
    }

    .custom-control-label::before {
        background-color: #2B2C3F;
        border: #3c3d5a solid 2px;
    }

    .settings-panel .list:hover {
        color: #6d6d80;
        background: #323347;
    }

    .table td, .table th {
        padding: .75rem;
        vertical-align: top;
        border-top: 1px solid #6d6d80;
    }



    .table-hover tbody tr:hover {
        color: #fff;
        background: #323347;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        color: #6d6d80;
        background-color: #323347;
    }

    .settings-panel h5 {
        color: #fff;
    }

    .alert-danger {
        border-color: rgba(255,168,0,.5);
        color: #fff;
        background-color: #392f28;
    }

    .page-link {
        color: #fff;
        background-color: #3699ff;
        border-color: transparent;
    }
    .pagination .page-item:first-child:not(.active) .page-link, .pagination .page-item:last-child:not(.active) .page-link, .pagination .page-item.disabled .page-link {
        background: #232F47;
    }

    .input-group-text {

        background-color: #1b1b29;
        border: 1px solid #1b1b29;
    }

    .select2-dropdown {
        background-color: #171723;
        border-color: #171723;
    }

    .select2-results__message {
        color: #92929f !important;
    }

    .select2-container--default .select2-selection--multiple {
        background-color: #171723;
        border-color: #171723;
        color: #fff;
    }
    .select2-search--dropdown:before {
        color: #fff;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        background-color: #171723;
        border-color: #171723;
        color: #fff;
    }

    .table-bordered {
        border: none;
    }

    .table thead th {
        background-color: #1E1E2B;
    }

    .list-group-item {
        background-color: #1E1E2B;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        background-color: #1E1E2B;

    }

    .nav-tabs-clean .nav-item .nav-link.active {
        border-bottom: 1px solid #3699ff;
        color: #3699ff;
    }

    .nav-tabs .nav-item .nav-link.active:not(:hover) {
        color: #3699ff;
    }

    .form-control:disabled, .form-control[readonly] {
        background-color: #1b1b29;
        border-color: #1b1b29;
        color: #92929f;
    }

    .redactor-box, .redactor-editor {
        background-color: #1b1b29;
    }
    .redactor-toolbar {
        background: #323347;
    }
    .redactor-toolbar li a {
        color: #fff;
    }
    .redactor-editor {
        border: 1px solid #2b2b40;
    }


    .dashboard-stat2 {

        background-color: #1b1b29;

    }

    .alert-success {
        color: #ffffff;
        background-color: #063a31;
        border-color: #a3ebe4;
    }

    code {
        background: #1c1c29;
    }
    .badge.badge-outline-success {
        color: #ffffff;
        background-color: #047051;
    }

    .table-striped>tbody>tr:nth-of-type(odd)>* {
        color: #ffffff!important;
    }

    .thead-light th {
        background-color: #5d6675;
    }

    .swal2-popup {
        background: #000;
    }

    .swal2-title {
        color: #ffffff;
    }

    .form-control {
        background-color: #3d3d4c;
        color: #bebec1;
    }

    .form-control:focus {
        background-color: #5c5c64;
        color: #bebec1;
    }


    .text-black {
        color: #fff!important;
    }

    .bg-white {
        background-color: #000000 !important;
    }

    .subheader-title {
        color: #ffffff;
        text-shadow: #000 0 1px;
    }

    .dropdown-item {
        color: #ffffff;
    }

    .table-hover > tbody > tr:hover > * {
        --bs-table-accent-bg: black;
        color: #ffffff;
    }

    .dropzone {
        background: #000000;
    }

    .form-select {
        color: #bebec1;
        background-color: #3d3d4c;
        border: none;
    }

    .select2-container--default.select2-container--disabled .select2-selection--single {
        background-color: #3d3d4c;
    }

    .datepicker-content li {
        background-color: #3d3d4c;
    }

    .datepicker-week li, .datepicker-week li:hover {
        background-color: #15151f;
    }

    .card-header {
        background-color: #3d3d4c;
    }

    .daterangepicker{
        background-color: #3d3d4c;
    }

    .daterangepicker .ranges li:hover {
        background-color: #151E29;
    }

    .daterangepicker .calendar-table{
        background-color: #3d3d4c;
    }

    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
        background-color: #3d3d4c;
    }

    .dropdown-menu {
        background: #1e1f2c;
    }

    .dropdown-item:hover, .dropdown-item:focus {
        color: #fff;
        background-color: #2E2E3C;
    }

    
    .image-container-perfil-header {
        position: relative;
        display: inline-block;
    }

    .img-avatar-small-header {
        position: absolute;
        bottom: 34px;
        right: -8px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #000000;
    }

    .img-avatar-header {
    /* border-radius: 50%; */
    width: 1.7rem;
    height: auto;
}


</style>
{/if}


{/block}

{block name="content_body"}

    <aside class="page-sidebar">

        <input type="text" disabled hidden id="user_id1" value="{$user->id}">
        <input type="text" disabled hidden id="ws_nombre_socket" value="{$ws_nombre_socket}">
      
        {if !empty($config['header_show_logo_as'])  && $config['header_show_logo_as'] == 'default_logo' && !empty($config['logo_default'])}

            <div class="admin-page-logo">
                <a href="{$_url}dashboard" class="logo-default">
                    <img style="width: 100%;" src="{{APP_URL}}/storage/system/{{$config['logo_default']}}" alt="{{$config['CompanyName']}}" aria-roledescription="logo">
                </a>
            </div>

        {else}

        <div class="page-logo">
            <a href="{$_url}dashboard" class="page-logo-link d-flex align-items-center position-relative">
                {if isset($config['logo_square'])}
                <img src="{{APP_URL}}/storage/system/{{$config['logo_square']}}" alt="{{$config['CompanyName']}}" aria-roledescription="logo">
                {elseif isset($config['default_logo'])}

                {else}
                <img src="{{APP_URL}}/storage/system/logo-512x512.png?v=2" alt="{{$config['CompanyName']}}" aria-roledescription="logo">
                {/if}

                {if isset($config['logo_square'])}
                <span class="page-logo-text text-info-alt mr-1 fw-bolder">{$config['logo_text']}</span>
                {else}
                <span class="page-logo-text text-info-alt fw-bolder mr-1">CloudOnex</span>
                {/if}
            </a>
        </div>

        {/if}

        <nav id="clx-primary-navigation" class="primary-nav" role="navigation">

            <ul id="clx-navigation-menu" class="nav-menu">
    
                {*
                {if has_access($user->roleid,'reports')}
                    <li {if $selected_navigation eq 'dashboard'}class="active"{/if}><a href="{$_url}{$config['redirect_url']}">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"></rect>
                                <rect fill="#000000" opacity="0.3" x="13" y="4" width="3" height="16" rx="1.5"></rect>
                                <rect fill="#000000" x="8" y="9" width="3" height="11" rx="1.5"></rect>
                                <rect fill="#000000" x="18" y="11" width="3" height="9" rx="1.5"></rect>
                                <rect fill="#000000" x="3" y="13" width="3" height="7" rx="1.5"></rect>
                            </g>
                        </svg>
                        <span class="nav-link-text">{$_L['Dashboard']}</span></a>
                    </li>
                {/if}
                *}

                {*
                {if has_access($user->roleid,'customers')}

                    <li class="{if $selected_navigation eq 'contacts'}active  open{/if}">
                        <a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                    <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                                </g>
                            </svg>
                            <span class="nav-link-text">{$_L['Customers']}</span>
                        </a>
                        <ul>
                            {if has_access($user->roleid,'customers','create')}
                            <li>
                                <a href="{$_url}contacts/add">
                                    <span class="nav-link-text">{$_L['Add Customer']}</span>
                                </a>
                            </li>
                            {/if}

                            <li>
                                <a href="{$_url}contacts/list">
                                    <span class="nav-link-text">{$_L['List Customers']}</span>
                                </a>
                            </li>

                            {if has_access($user->roleid,'companies','view') && ($config['companies'])}
                            <li>
                                <a href="{$_url}contacts/companies">
                                    <span class="nav-link-text">{$_L['Companies']}</span>
                                </a>
                            </li>
                            {/if}
                            <li>
                                <a href="{$_url}contacts/groups">
                                    <span class="nav-link-text">{$_L['Groups']}</span>
                                </a>
                            </li><li>
                                <a href="{$_url}contacts/drive">
                                    <span class="nav-link-text">{$_L['Files']}</span>
                                </a>
                            </li>

                        </ul>
                    </li>
    
                {/if}
                *}

                {foreach $menu_categorias_user as $item_categorias}

                    <li  {if $selected_navigation eq $item_categorias['key']}class="active open"{/if} >
                        <a href="{if empty($item_categorias['url']) || $item_categorias['url'] == '' || $item_categorias['url']|strstr:'#'}{$item_categorias['url']}{else}{$_url}{$item_categorias['url']}{/if}">
                            {$item_categorias["icono"]} 
                            <span class="nav-link-text">{$item_categorias["nombre"]}</span>
                        </a>
                        
                        {if count($item_categorias["subpermisos"]) != 0}
                            <ul>
                                {foreach $item_categorias["subpermisos"] as $item_subcategorias}
                                    <li>
                                        <a href="{$_url}{$item_subcategorias['url']}">
                                            <span class="nav-link-text">{$item_subcategorias["nombre"]}</span>
                                        </a>
                                    </li>
                                {/foreach}
                            </ul>
                        {/if}
                    </li>

                {/foreach}
    
                <li>
                    <a href="{$url_setting_CRM_Parnerts_prepared}" target="_blank">
                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                             <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                 <rect x="0" y="0" width="24" height="24"/>
                                 <path d="M5,8.6862915 L5,5 L8.6862915,5 L11.5857864,2.10050506 L14.4852814,5 L19,5 L19,9.51471863 L21.4852814,12 L19,14.4852814 L19,19 L14.4852814,19 L11.5857864,21.8994949 L8.6862915,19 L5,19 L5,15.3137085 L1.6862915,12 L5,8.6862915 Z M12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 Z" fill="#000000"/>
                             </g>
                         </svg>
                         <span class="nav-link-text">{$_L['Settings']} </span>
                    </a>
                </li>
    
    

    
                                                    
                                                        

                                                            
    

                                                                                
    
    


            </ul>
        </nav>

    </aside>

    {*Esto no es parte del menu*}
    <div class="page-content-wrapper">


    <header class="page-header" role="banner">
        <div class="header-left">

            <!-- hidden partner logo -->
            <a href="{$_url}dashboard" class="header-logo">
                {if isset($config['logo_square'])}
                <img src="{{APP_URL}}/storage/system/{{$config['logo_square']}}" width="25" alt="{{$config['CompanyName']}}">
                {else}
                <img src="{{APP_URL}}/storage/system/logo-512x512.png?v=2" width="25" alt="{{$config['CompanyName']}}">
                {/if}
                <span class="logo-text">
                    {if isset($config['logo_text'])}
                        {{$config['logo_text']}}
                    {else}
                        HDE Partner
                    {/if}
                </span>
            </a>
            <!-- hidden partner logo -->
                
            <!-- menu toggle -->
            <div class="menu-toggle">
                <button class="icon-btn menu-trigger" title="Toggle menu" data-action="toggle" data-class="nav-function-minify" title="Minify Navigation">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect x="0" y="0" width="24" height="24"></rect>
                            <rect fill="#000000" opacity="0.3" x="4" y="5" width="16" height="2" rx="1"></rect>
                            <rect fill="#000000" opacity="0.3" x="4" y="13" width="16" height="2" rx="1"></rect>
                            <path d="M5,9 L13,9 C13.5522847,9 14,9.44771525 14,10 C14,10.5522847 13.5522847,11 13,11 L5,11 C4.44771525,11 4,10.5522847 4,10 C4,9.44771525 4.44771525,9 5,9 Z M5,17 L13,17 C13.5522847,17 14,17.4477153 14,18 C14,18.5522847 13.5522847,19 13,19 L5,19 C4.44771525,19 4,18.5522847 4,18 C4,17.4477153 4.44771525,17 5,17 Z" fill="#000000"></path>
                        </g>
                    </svg>
                </button>
            </div>
            <!-- menu toggle -->

        </div>

        <div class="header-right">
            <!-- WhatsApp/SMS -->
            {if $user["roleid"] == 3 || $user["roleid"] == 2 || $user["roleid"] == 0}
            <a href="{$url_base_plantilla_admintpl}social/social-chat" class="icon-btn" title="WhatsApp/SMS">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 175.216 175.552"><defs><linearGradient id="b" x1="85.915" x2="86.535" y1="32.567" y2="137.092" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#57d163"/><stop offset="1" stop-color="#23b33a"/></linearGradient><filter id="a" width="1.115" height="1.114" x="-.057" y="-.057" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="3.531"/></filter></defs><path fill="#b3b3b3" d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0" filter="url(#a)"/><path fill="#fff" d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"/><path fill="url(#linearGradient1780)" d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"/><path fill="url(#b)" d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"/><path fill="#fff" fill-rule="evenodd" d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"/></svg>

                <span class="notify hidden signo_existe_mensaje_ws">
                    <span class="notify-ping"></span>
                </span>
            </a>
            {/if}

            <!-- Chat CRM -->
            <a href="{$url_base_plantilla_admintpl}social/chat-crm" class="icon-btn" title="CRM Chat">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="#667085" xmlns="http://www.w3.org/2000/svg" class="menu-item-icon-inactive">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00002 12.0957C4.00002 7.67742 7.58174 4.0957 12 4.0957C16.4183 4.0957 20 7.67742 20 12.0957C20 16.514 16.4183 20.0957 12 20.0957H5.06068L6.34317 18.8132C6.48382 18.6726 6.56284 18.4818 6.56284 18.2829C6.56284 18.084 6.48382 17.8932 6.34317 17.7526C4.89463 16.304 4.00002 14.305 4.00002 12.0957ZM12 2.5957C6.75332 2.5957 2.50002 6.849 2.50002 12.0957C2.50002 14.4488 3.35633 16.603 4.77303 18.262L2.71969 20.3154C2.50519 20.5299 2.44103 20.8525 2.55711 21.1327C2.6732 21.413 2.94668 21.5957 3.25002 21.5957H12C17.2467 21.5957 21.5 17.3424 21.5 12.0957C21.5 6.849 17.2467 2.5957 12 2.5957ZM7.62502 10.8467C6.93467 10.8467 6.37502 11.4063 6.37502 12.0967C6.37502 12.787 6.93467 13.3467 7.62502 13.3467H7.62512C8.31548 13.3467 8.87512 12.787 8.87512 12.0967C8.87512 11.4063 8.31548 10.8467 7.62512 10.8467H7.62502ZM10.75 12.0967C10.75 11.4063 11.3097 10.8467 12 10.8467H12.0001C12.6905 10.8467 13.2501 11.4063 13.2501 12.0967C13.2501 12.787 12.6905 13.3467 12.0001 13.3467H12C11.3097 13.3467 10.75 12.787 10.75 12.0967ZM16.375 10.8467C15.6847 10.8467 15.125 11.4063 15.125 12.0967C15.125 12.787 15.6847 13.3467 16.375 13.3467H16.3751C17.0655 13.3467 17.6251 12.787 17.6251 12.0967C17.6251 11.4063 17.0655 10.8467 16.3751 10.8467H16.375Z" fill="#667085"></path>
                </svg>
                
                <span class="notify hidden signo_existe_mensaje_crm">
                    <span class="notify-ping"></span>
                </span>
            </a>

            <!-- Notificaciones -->
            {if has_access($user->roleid, 'utilities')}
                <div class="dropdown-notification">
                    <a href="javasctipt:;" id="get_activity" class="icon-btn" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="#667085" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 2.29248C10.75 1.87827 10.4143 1.54248 10 1.54248C9.58583 1.54248 9.25004 1.87827 9.25004 2.29248V2.83613C6.08266 3.20733 3.62504 5.9004 3.62504 9.16748V14.4591H3.33337C2.91916 14.4591 2.58337 14.7949 2.58337 15.2091C2.58337 15.6234 2.91916 15.9591 3.33337 15.9591H4.37504H15.625H16.6667C17.0809 15.9591 17.4167 15.6234 17.4167 15.2091C17.4167 14.7949 17.0809 14.4591 16.6667 14.4591H16.375V9.16748C16.375 5.9004 13.9174 3.20733 10.75 2.83613V2.29248ZM14.875 14.4591V9.16748C14.875 6.47509 12.6924 4.29248 10 4.29248C7.30765 4.29248 5.12504 6.47509 5.12504 9.16748V14.4591H14.875ZM8.00004 17.7085C8.00004 18.1228 8.33583 18.4585 8.75004 18.4585H11.25C11.6643 18.4585 12 18.1228 12 17.7085C12 17.2943 11.6643 16.9585 11.25 16.9585H8.75004C8.33583 16.9585 8.00004 17.2943 8.00004 17.7085Z" fill=""></path>
                        </svg>
                    </a>

                    <div class="dropdown-menu dropdown-menu-end dropdown-xl p-0">
                        <div class="dropdown-header d-flex justify-content-center align-items-center rounded-top mb-2">
                            <h4 class="m-0 text-center">
                                {$_L['Notifications']}
                            </h4>
                        </div>
                        <div class="custom-scroll h-100" id="activity_loaded">
                            <div class="text-center my-3">
                                <div class="md-preloader">
                                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="32" width="32" viewbox="0 0 75 75">
                                        <circle cx="37.5" cy="37.5" r="33.5" stroke-width="6"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="py-2 px-3 bg-faded d-block rounded-bottom text-center border-faded border-bottom-0 border-right-0 border-left-0">
                            <a href="{$_url}util/activity" class="fs-xs fw-500 ms-auto">{$_L['See All Activity']}</a>
                        </div>
                    </div>
                </div>
            {/if}

            <!-- Perfil Usuario -->
            <div class="dropdown-account-settings">
            
                <a href="#" class="user-btn" data-bs-toggle="dropdown" data-bs-target="#user-dropdown-menu" aria-expanded="false">
                    {if $user['img'] eq ''}
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon icon-2">
                            <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                        </svg>
                    {else}
                        <img src="{$app_url}{$user['img']}"  class="profile-image rounded-circle" alt="{$user->fullname}">
                    {/if}
                </a>
                <div class="dropdown-menu dropdown-menu-end p-0" id="user-dropdown-menu">
                    <div class="dropdown-header d-flex flex-column py-4 rounded-top">
                        <span class="fs-lg text-truncate text-truncate-lg">{$user->fullname}</span>
                        <span class="text-truncate text-truncate-md opacity-80">{$user->username}</span>
                    </div>
                    <div class="dropdown-divider m-0"></div>
                    <a href="{$_url}settings/users-edit/{$user->id}" class="dropdown-item">
                        {$_L['Edit Profile']}
                    </a>

                    <a href="{$_url}settings/change-password" class="dropdown-item">
                        {$_L['Change Password']}
                    </a>



                    <div class="dropdown-divider m-0"></div>
                    <a class="dropdown-item fw-500 pt-3 pb-3" href="{$_url}logout">
                        {$_L['Logout']}
                    </a>
                </div>
            </div>
        </div>
    </header>


    <main id="clx-page-content" role="main" class="page-content {if isset($page_content_extra_class)} {$page_content_extra_class} {/if}">

        {*            {if empty($config['installation_id'])}*}
        {*            <div class="alert alert-danger mb-3">*}
            {*                <div class="d-flex justify-content-between align-items-center">*}
                {*                    <div>*}
                    {*                        <strong>{__('Please activate your item.')}</strong>*}
                {*                    </div>*}
                {*                    <div>*}
                    {*                        <a href="{$_url}settings/activate" class="btn btn-primary">Activate</a>*}
                {*                    </div>*}
            {*                </div>*}
        {*            </div>*}
        {*            {/if}*}

        {if isset($notify)}{$notify}{/if}

        {block name="content"}{/block}


    </main>

        <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>


        <div class="modal fade js-modal-notes modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-right">
                <div class="modal-content h-100">
                    <div class="dropdown-header bg-primary-900 d-flex align-items-center w-100">
                        <h3 class="text-white mt-2 mb-1">{$_L['Notes']}</h3>
                        <button type="button" class="btn btn-danger text-white position-absolute pos-top pos-right p-2 m-1 me-2" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fal fa-times"></i></span>
                        </button>
                    </div>
                    <div class="modal-body p-0 h-100 d-flex">
                        <textarea class="form-control rounded-0" id="clx_notes_clipboard" placeholder="{$_L['Whats on your mind']}">{$user->notes}</textarea>
                    </div>
                </div>
            </div>
        </div>



    </div>

                                                

    <input value="{$user["id"]}" hidden disabled id="ID_USUARIO_CHAT" />
    <input value="{$user["roleid"]}" hidden disabled id="ROLL_ID_USUARIO_CHAT" />
    <input value="{$base_datos_para_socket}" hidden disabled id="DB_socket_admin_tpl" />
    <input value="{$config_whatsapp_other_id_para_socket}" hidden disabled id="config_whatsapp_other_id_para_socket_admin_tpl" />

    <input value="{$url_ir_chat_empleado}" hidden disabled id="url_ir_chat_empleado_admin_tpl" />
    <input value="{$url_ir_chat_admin}" hidden disabled id="url_ir_chat_admin_admin_tpl" />

    <input value="{$url_ir_chat_crm}" hidden disabled id="url_ir_chat_crm_admin_tpl" />

    <input type="text" id="mi_directorio" hidden disabled value="{$directorio}" >

    <input type="text" id="url_base_plantilla" hidden disabled value="{$url_base_plantilla_admintpl}" >

     <input
         type="text"
         value="{$APP_URL_ORIGINAL_SOCKET}"
         disabled
         hidden
         id="APP_URL_ORIGINAL_SOCKET"
      />

                        
{literal}
<script type="module">

    const menuCategoriasUser = {/literal}{$menu_categorias_user|json_encode}{literal};

    //console.log("menuCategoriasUser");
    //console.log(menuCategoriasUser);
 
    if(Array.isArray(menuCategoriasUser) == true)
    {
        //menuCategoriasUser
        let existe_chat_ws = menuCategoriasUser.find((item) => item.key == "mnu-8");

        if(existe_chat_ws)
        { 
            let existe_ws = existe_chat_ws.subpermisos.find((item) => item.key == "mnu-8-1");

            if(existe_ws)
            {
                $(".opcion_ws_existente").css("display", "");
            }else{
                $(".opcion_ws_existente").css("display", "none");
            }

            let existe_mensajeria_crm = existe_chat_ws.subpermisos.find((item) => item.key == "mnu-8-2");

            if(existe_mensajeria_crm)
            {
                $(".opcion_tw_existente").css("display", "");
            }else{
                $(".opcion_tw_existente").css("display", "none");
            }
            
            //console.log("existe_chat_ws");
            //console.log(existe_chat_ws);
        }else{

            $(".opcion_tw_existente").css("display", "none");
            $(".opcion_ws_existente").css("display", "none");
        }
    }


      var APP_URL_ORIGINAL_SOCKET = document.getElementById('APP_URL_ORIGINAL_SOCKET').value;
      var WS_NOMBRE_SOCKET = document.getElementById('ws_nombre_socket').value;


 
        var directorio_ = document.getElementById('mi_directorio').value;
        var id_usuario_especial = document.getElementById('ID_USUARIO_CHAT').value;
        var roll_id_usuario_especial = document.getElementById('ROLL_ID_USUARIO_CHAT').value;
        var DB_socket_admin_tpl = document.getElementById('DB_socket_admin_tpl').value;
        var config_whatsapp_other_id_para_socket_admin_tpl = document.getElementById('config_whatsapp_other_id_para_socket_admin_tpl').value;

        var url_ir_chat_empleado_admin_tpl = document.getElementById('url_ir_chat_empleado_admin_tpl').value;
        var url_ir_chat_admin_admin_tpl = document.getElementById('url_ir_chat_admin_admin_tpl').value;

        var url_ir_chat_crm_admin_tpl = document.getElementById('url_ir_chat_crm_admin_tpl').value;

        var url_base_plantilla = document.getElementById('url_base_plantilla').value;

        console.log("APP_URL_ORIGINAL_SOCKET");
        console.log(APP_URL_ORIGINAL_SOCKET);
        //console.log("roll_id_usuario_especial");
        //console.log(roll_id_usuario_especial);
        //console.log("DB_socket_admin_tpl");
        //console.log(DB_socket_admin_tpl);
        //console.log("config_whatsapp_other_id_para_socket_admin_tpl");
        //console.log(config_whatsapp_other_id_para_socket_admin_tpl);
        //console.log("url_ir_chat_empleado_admin_tpl");
        //console.log(url_ir_chat_empleado_admin_tpl);
        //console.log("url_ir_chat_admin_admin_tpl");
        //console.log(url_ir_chat_admin_admin_tpl);

        var mensajes_encontrados = [];

        //signo_existe_mensaje_ws
        //signo_existe_mensaje_crm

        if(isEmpty(id_usuario_especial) != true)
        {

            console.log(APP_URL_ORIGINAL_SOCKET);
            //"https://xhde365.com"

             const socket = io(APP_URL_ORIGINAL_SOCKET, {
                //path: "/socket-chat/socket.io",
                path: "/" + WS_NOMBRE_SOCKET + "/socket.io",
                //transports: ["websocket"],
                  transports: ["polling"],  // Usar
            });

            socket.on("connect", () => {
                console.log("Conectado al servidor de Socket.IO");
            });

            // Manejar la desconexión
            socket.on("disconnect", () => {
                console.log("Desconectado del servidor de Socket.IO");
            });


            setInterval(() => ejecutarAsisteciaSocket(socket), 5000);
 
            if(isEmpty(roll_id_usuario_especial) != true){
                //en caso de que sea igual a 3 es para solo empleados
                if(roll_id_usuario_especial == "3" || roll_id_usuario_especial == 3)
                {
                    //console.log("empleado fs");

   
                    socket.on("chat-social/" + DB_socket_admin_tpl, (data) => {

                        //console.log("Datos de chat recibidos:", data);

                        var {
                            id,
                            tipo_producto,
                            error_codigo,
                            error_mensaje,
                            status,
                            wam_id,
                            sid,
                            phone_number_id,
                            from,
                            to,
                            mensaje,
                            url,
                            filename,
                            template_original,
                            template_data,
                            tipo_mensaje,
                            db,
                            esContacto,
                            fecha_creacion,
                            id_chat_number,
                            staff_id,
                            config_whatsapp_other_id,
                            donde_estamos,
                        } = data;

                        if (
                            isEmpty(tipo_mensaje) == true &&
                            isEmpty(tipo_producto) == true &&
                            isEmpty(esContacto) == true &&
                            isEmpty(status) == true
                        ) {
                                return;
                        }

                        if(esContacto == false)
                        {
                            return;
                        }

                        //$(".signo_existe_mensaje_ws").fadeIn();

                        toastr.clear();
                        toastr.options.preventDuplicates = true;

                        toastr.options.onclick = function () {
                            toastr.clear(); // Cierra todos los toastr activos
                            //alert("asa");
                            //window.location.href = url_ir_chat_crm_admin_tpl;
                        };

                        if (tipo_mensaje == "text") {
                            toastr.success(
                                mensaje,
                                "+" + to + " (" + tipo_producto.toUpperCase() + ")",
                            );
                        } else {
                            toastr.success(
                                "Received Attached file",
                                "+" + to + " (" + tipo_producto.toUpperCase() + ")",
                            );
                        }

                            

                        // Aquí puedes manejar los datos como necesites
                    });

                     //socket para chat soscial
                     /* socket.on(
                        "chat-social-empleados/" +
                        DB_socket_admin_tpl +
                        "/" +
                        id_usuario_especial +
                        "/" +
                        config_whatsapp_other_id_para_socket_admin_tpl,
                        (data) => {
                  
                            console.log("Datos de chat recibidos: xd");

                            //console.log("Datos de chat recibidos:", data);

                            var {
                                tipo_producto,
                                error_codigo,
                                error_mensaje,
                                status,
                                wam_id,
                                sid,
                                phone_number_id,
                                from,
                                to,
                                mensaje,
                                url,
                                filename,
                                tipo_mensaje,
                                db,
                                esContacto,
                                fecha_creacion,
                                id_chat_number,
                                staff_id,
                                config_whatsapp_other_id,

                                donde_estamos,
                            } = data;

                            if (
                                isEmpty(tipo_mensaje) == true &&
                                isEmpty(tipo_producto) == true &&
                                isEmpty(esContacto) == true &&
                                isEmpty(status) == true
                            ) {
                                return;
                            }

                            if(esContacto == false)
                            {
                                return;
                            }
                            
                            //$(".signo_existe_mensaje_ws").fadeIn();

                            toastr.clear();
                            toastr.options.preventDuplicates = true;

                            toastr.options.onclick = function () {
                                toastr.clear(); // Cierra todos los toastr activos
                                //alert("asa");
                                //window.location.href = url_ir_chat_empleado_admin_tpl;
                            };

                            if (tipo_mensaje == "text") {
                                toastr.success(
                                    mensaje,
                                    "+" + to + " (" + tipo_producto.toUpperCase() + ")",
                                );
                            } else {
                                toastr.success(
                                    "Received Attached file",
                                    "+" + to + " (" + tipo_producto.toUpperCase() + ")",
                                );
                            }

 
                        // Aquí puedes manejar los datos como necesites
                        },
                    ); */

                    //chat crm
                    socket.on(
                        "chat-sistema-usuarios/" + DB_socket_admin_tpl + "/" + id_usuario_especial,
                        (data) => {
                     
                        //console.log("Datos de chat recibidos:", data);

                        let {
                            id,
                            from_user_id,
                            to_user_id,
                            img_to_user,
                            rol_to_user,
                            fullname_from_user,
                            mensaje,
                            url,
                            filename,
                            tipo_mensaje,
                            fecha_creacion,
                            status,
                            unique_user_id,
                            db,
                            user_id,
                        } = data;

                        //console.log("-----------------------------------");
                        //console.log("id: ", id);
                        //console.log("from_user_id: ", from_user_id);
                        //console.log("to_user_id: ", to_user_id);
                        //console.log("img_to_user: ", img_to_user);
                        //console.log("rol_to_user: ", rol_to_user);
                        //console.log("fullname_from_user: ", fullname_from_user);
                        //console.log("mensaje: ", mensaje);
                        //console.log("url: ", url);
                        //console.log("filename: ", filename);
                        //console.log("tipo_mensaje: ", tipo_mensaje);
                        //console.log("status: ", status);
                        //console.log("unique_user_id: ", unique_user_id);
                        //console.log("-----------------------------------");

                        if (isEmpty(id) == true) {
                            return;
                        }

                        //$(".signo_existe_mensaje_crm").fadeIn();

                        toastr.clear();
                        toastr.options.preventDuplicates = true;

                        toastr.options.onclick = function () {
                            toastr.clear(); // Cierra todos los toastr activos
                            //alert("asa");
                            //window.location.href = url_ir_chat_crm_admin_tpl;
                        };

                        if (tipo_mensaje == "text") {
                            toastr.success(
                                mensaje,
                                fullname_from_user + " Chat CRM",
                            );
                        } else {
                            toastr.success(
                                "Received Attached file",
                               fullname_from_user + " Chat CRM",
                            );
                        }

                    });

                }else{
                    console.log("admin");
                    
                    //socket para chat soscial
                    socket.on("chat-social/" + DB_socket_admin_tpl, (data) => {

                        //console.log("Datos de chat recibidos:", data);

                        var {
                            id,
                            tipo_producto,
                            error_codigo,
                            error_mensaje,
                            status,
                            wam_id,
                            sid,
                            phone_number_id,
                            from,
                            to,
                            mensaje,
                            url,
                            filename,
                            template_original,
                            template_data,
                            tipo_mensaje,
                            db,
                            esContacto,
                            fecha_creacion,
                            id_chat_number,
                            staff_id,
                            config_whatsapp_other_id,
                            donde_estamos,
                        } = data;

                        if (
                            isEmpty(tipo_mensaje) == true &&
                            isEmpty(tipo_producto) == true &&
                            isEmpty(esContacto) == true &&
                            isEmpty(status) == true
                        ) {
                                return;
                        }

                        if(esContacto == false)
                        {
                            return;
                        }

                        //$(".signo_existe_mensaje_ws").fadeIn();

                        toastr.clear();
                        toastr.options.preventDuplicates = true;

                        toastr.options.onclick = function () {
                            toastr.clear(); // Cierra todos los toastr activos
                            //alert("asa");
                            //window.location.href = url_ir_chat_crm_admin_tpl;
                        };

                        if (tipo_mensaje == "text") {
                            toastr.success(
                                mensaje,
                                "+" + to + " (" + tipo_producto.toUpperCase() + ")",
                            );
                        } else {
                            toastr.success(
                                "Received Attached file",
                                "+" + to + " (" + tipo_producto.toUpperCase() + ")",
                            );
                        }

                            

                        // Aquí puedes manejar los datos como necesites
                    });

                    //socket para chat crm
                    socket.on(
                        "chat-sistema-usuarios/" + DB_socket_admin_tpl + "/" + id_usuario_especial,
                        (data) => {
                     

                        //console.log("Datos de chat recibidos:", data);

                        let {
                            id,
                            from_user_id,
                            to_user_id,
                            img_to_user,
                            rol_to_user,
                            fullname_from_user,
                            mensaje,
                            url,
                            filename,
                            tipo_mensaje,
                            fecha_creacion,
                            status,
                            unique_user_id,
                            db,
                            user_id,
                        } = data;

                        //console.log("-----------------------------------");
                        //console.log("id: ", id);
                        //console.log("from_user_id: ", from_user_id);
                        //console.log("to_user_id: ", to_user_id);
                        //console.log("img_to_user: ", img_to_user);
                        //console.log("rol_to_user: ", rol_to_user);
                        //console.log("fullname_from_user: ", fullname_from_user);
                        //console.log("mensaje: ", mensaje);
                        //console.log("url: ", url);
                        //console.log("filename: ", filename);
                        //console.log("tipo_mensaje: ", tipo_mensaje);
                        //console.log("status: ", status);
                        //console.log("unique_user_id: ", unique_user_id);
                        //console.log("-----------------------------------");

                        if (isEmpty(id) == true) {
                            return;
                        }

                        //$(".signo_existe_mensaje_crm").fadeIn();

                        toastr.clear();
                        toastr.options.preventDuplicates = true;

                        toastr.options.onclick = function () {
                            toastr.clear(); // Cierra todos los toastr activos
                            //alert("asa");
                            //window.location.href = url_ir_chat_admin_admin_tpl;
                        };

                        if (tipo_mensaje == "text") {
                            toastr.success(
                                mensaje,
                                fullname_from_user + " Chat CRM",
                            );
                        } else {
                            toastr.success(
                                "Received Attached file",
                               fullname_from_user + " Chat CRM",
                            );
                        }
                        

                        

                        
                         
                    });



                }

                //console.log( url_base_plantilla + "social/total-mensajes-no-leidos/" + roll_id_usuario_especial + "/" + id_usuario_especial);

                //api para verificar mensajes whatsapp/sms
                if(isEmpty(url_base_plantilla) != true)
                {
                    /* $.get(
                        url_base_plantilla + "social/total-mensajes-no-leidos-ws-crm/" + roll_id_usuario_especial + "/" + id_usuario_especial,
                        function (data) {
                            console.log(data);
                            try {
                                let info = JSON.parse(data);
                                if(info.type == "success")
                                {
                                    if(info.data == 0)
                                    {
                                         //$(".signo_existe_mensaje_ws").hide();
                                    }else{
                                         //$(".signo_existe_mensaje_ws").fadeIn();
                                    }

                                    if(info.data_crm == 0)
                                    {
                                         //$(".signo_existe_mensaje_crm").hide();
                                    }else{
                                         //$(".signo_existe_mensaje_crm").fadeIn();
                                    }

                                   
                                }
                                
                            } catch (error) {
                                console.log(
                                    "error en admin.tpl " +
                                        error.message,
                                );
                            
                            }
                        }
                    ).fail(function (jqXHR, textStatus, errorThrown) {
                        console.log(
                            "error en admin.tpl " +
                            textStatus +
                            " - " +
                            errorThrown
                        );
                    }); */

                    

                }
                 


            }

        }

 
 
 
        //console.log("inv");
        //console.log(inputElement);

        //console.log("ESTOY EN ADMIN.TPL");

         $('.abriendo_telefono').on('click', function() {
            //antes donde dice abriendo telefono estaba algo asi onclick="myFunction()"
            myFunction();
        });
        

        
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
 
    function myFunction() {

        //let directorio = $(".mi_directorio").val();

        var url = window.location.href;
        var url2=window.location.pathname;
        var url = url.split(url2);
        let params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=600,height=300,left=100,top=100';
        var user_id1=$('#user_id1').val();

        let ur_dinamic = url[0]+"/"+ directorio_ +"/voice/calls.php?&ui="+user_id1
     // let ur_dinamic = url[0]+"/"+"app"+"/voice/calls.php?&ui="+user_id1


        open(ur_dinamic, "test", params);
    }

    function isEmpty(variable) {
        if (variable === null || variable === undefined) {
            return true;
        }

        if (typeof variable === "string") {
            return variable.trim() === "";
        }

        if (Array.isArray(variable)) {
            return variable.length === 0;
        }

        if (typeof variable === "object") {
            return Object.keys(variable).length === 0;
        }

        return false;
    }

    function ejecutarAsisteciaSocket(socket)
    {
        const data = {
            staff_id: id_usuario_especial,
            fecha_login: formatDateJS(),
            db: DB_socket_admin_tpl,
        };

        socket.emit("estado-online-staff", data);

    }

    function formatDateJS() 
    {
        const now = new Date();
        
        const months = [
            "January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
        ];
        
        const month = months[now.getMonth()];
        const day = now.getDate();
        const year = now.getFullYear();
        
        let hours = now.getHours();
        const minutes = now.getMinutes().toString().padStart(2, "0");
        
        return `${month} ${day}, ${year}, ${hours}:${minutes}`;
    }

</script>
{/literal}

{/block}
