//         <meta name='robots' content='max-image-preview:large' />
<link rel='dns-prefetch' href='//widget.tagembed.com' />
<link rel='dns-prefetch' href='//cdn.socket.io' />
<link rel='dns-prefetch' href='//cdnjs.cloudflare.com' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/kooora.jayshreesoftware.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.3.2"}};
/*! This file is auto-generated */
!function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 0.07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
	<link rel='stylesheet' id='wp-block-library-css' href='https://kooora.jayshreesoftware.com/wp-includes/css/dist/block-library/style.min.css?ver=6.3.2' type='text/css' media='all' />
<style id='classic-theme-styles-inline-css' type='text/css'>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>
<style id='global-styles-inline-css' type='text/css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
</style>
<link rel='stylesheet' id='socket-io-game-css' href='https://kooora.jayshreesoftware.com/wp-content/plugins/socket-io-chat-plugin/socket-io-game.css?ver=6.3.2' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css?ver=6.3.2' type='text/css' media='all' />
<script type='text/javascript' src='https://kooora.jayshreesoftware.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.0' id='jquery-core-js'></script>
<script type='text/javascript' src='https://kooora.jayshreesoftware.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1' id='jquery-migrate-js'></script>
<link rel="https://api.w.org/" href="https://kooora.jayshreesoftware.com/index.php?rest_route=/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://kooora.jayshreesoftware.com/xmlrpc.php?rsd" />
<meta name="generator" content="WordPress 6.3.2" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -->

    <div id="app">
        <div id="dialog" >
            <div class="popup-container" v-if="dialog">
            <h2>Login Required</h2>
            <p>You need to login to access the chat. Click the button below to log in.</p>            
        <style>
            .googleBtn{
                display: table;
                margin: 0 auto;
                background: #4285F4;
                padding: 15px;
                border-radius: 3px;
                color: #fff;
            }
        </style>
    <a class="googleBtn" href="https://accounts.google.com/o/oauth2/auth?response_type=code&access_type=online&client_id=588952314377-90dogvgrg9tb9r9tuslgmdo2lnvj8fin.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%2Fkooora%2Fwp-admin%2Fadmin-ajax.php%3Faction%3Dvm_login_google&state&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.login%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&approval_prompt=auto">Login With Google</a>            <button class="close-button" @click="closePopup">&times;</button>
                </div>
                </div>
                        
        <div id="dialoguecontainer" >
            <div v-for="(i,index) in msgboxes" :key="i.id" id="drawer" class="drawer touchmovebox" style="resize:both;">
                <transition name="fade" mode="in-out">
                    <div class="container"  :draggable="true" :id="'DirectionsBackground'+i.id" >
                        <div id="cancel" class="cancel" @click="hidepopup(index)">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </div>
                        <div class="chatbox" :style="{'background':i.color}" v-if="selectchatbox"  >
                            <br><br>
                            <div class="img">
                                <img :src="getTeamLogo(i.hometeam)">
                                <img :src="getTeamLogo(i.awayteam)">
                            </div>
                            <h3>{{ i.hometeam }}</h3>
                            <h3>{{ i.awayteam }}</h3>        
                        </div>  
                        <div class="chat-container">
                            <div id="myDIV" class="header">
                                <div class="comment-list">
                                    <ul id="myUL">
                                        <li v-for="(comment, cIndex) in i.comments" :key="cIndex" class="chat-message" >
                                                                                        <div class="user-name" style="color : #34495e;">
                                                {{ comment.display_name }}
                                            </div>
                                            <div class="message"> {{ comment.comment }}</div>
                                        </li>
                                        
                                        <!-- <li v-for="(item, index) in i.msglist" :key="index" class="chat-message">
                                            <div class="user-name" style="color: ;">
                                            
                                                {{item.display_name}}
                                            </div>

                                            <div class="message">{{ item.msg }}</div>
                                        </li> -->
                                    </ul>
                                </div>
                                <div id="name-container">
                                    <input type="text" name="name" id="name" v-model="i.msg" placeholder="Write Comment" class="comment-input">
                                    <span class="addBtn" name="submit"  @click="open(i)">
                                    <i class="fa-solid fa-angles-right"></i>
                                    </span>                                
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>
            </div>

            <!-- navbar -->
            <!-- <div id="mySidepanel" class="sidepanel">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <a href="#">Matches Data</a>
                <a href="#">Chat Rooms</a>
                <a href="#">Login/Sign up</a>
                <a href="#">Contact Us</a>
            </div> -->


            <div class="unavbar">
                <!-- <i onclick="openNav()"></i> -->
                <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/logo.png">
                <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
            </div>

            
        <style>
            .googleBtn{
                display: table;
                margin: 0 auto;
                background: #4285F4;
                padding: 15px;
                border-radius: 3px;
                color: #fff;
            }
        </style>
    <a class="googleBtn" href="https://accounts.google.com/o/oauth2/auth?response_type=code&access_type=online&client_id=588952314377-90dogvgrg9tb9r9tuslgmdo2lnvj8fin.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%2Fkooora%2Fwp-admin%2Fadmin-ajax.php%3Faction%3Dvm_login_google&state&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.login%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&approval_prompt=auto">Login With Google</a>            <div class="Mnavbar">

                <div class="box-1" v-for="(item,index) in chatbox" :key="item.id">
                    <div class="Mmatch" >
                        <div class="match1">
                        <div class="word">
                            <div class="img">
                                <img :src="getTeamLogo(item.hometeam)">
                            </div>
                            {{ item.hometeam}}
                        </div>
                        </div>
                        <div class="time">
                            <div class="time">
                                Time <br>
                                {{item.time}}
                            </div>
                        </div>
                        <div class="match2">
                            <div class="word">
                                <div class="img">
                                    <img :src="getTeamLogo(item.awayteam)">
                                </div>
                                {{item.awayteam}}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="box-1">
                    <div class="Mmatch">
                        <div class="match1">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/r.png" alt="" height="20px" width="20px">
                            Real Madrid
                        </div>
                        <div class="time">
                            <div class="time">
                                Time <br>
                                6:45
                            </div>
                        </div>
                        <div class="match2">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/m.png" alt="" height="20px" width="20px">
                            M.City
                        </div>
                    </div>
                </div>
                <div class="box-1">
                    <div class="Mmatch">
                        <div class="match1">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/r.png" alt="" height="20px" width="20px">
                            Real Madrid
                        </div>
                        <div class="time">
                            <div class="time">
                                Time <br>
                                6:45
                            </div>
                        </div>
                        <div class="match2">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/m.png" alt="" height="20px" width="20px">
                            M.City
                        </div>
                    </div>
                </div>
                <div class="box-1">
                    <div class="Mmatch">
                        <div class="match1">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/r.png" alt="" height="20px" width="20px">
                            Real Madrid
                        </div>
                        <div class="time">
                            <div class="time">
                                Time <br>
                                6:45
                            </div>
                        </div>
                        <div class="match2">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/m.png" alt="" height="20px" width="20px">
                            M.City
                        </div>
                    </div>
                </div>
                <div class="box-1">
                    <div class="Mmatch">
                        <div class="match1">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/r.png" alt="" height="20px" width="20px">
                            Real Madrid
                        </div>
                        <div class="time">
                            <div class="time">
                                Time <br>
                                6:45
                            </div>
                        </div>
                        <div class="match2">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/m.png" alt="" height="20px" width="20px">
                            M.City
                        </div>
                    </div>
                </div>
                <div class="box-1">
                    <div class="Mmatch">
                        <div class="match1">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/r.png" alt="" height="20px" width="20px">
                            Real Madrid
                        </div>
                        <div class="time">
                            <div class="time">
                                Time <br>
                                6:45
                            </div>
                        </div>
                        <div class="match2">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/m.png" alt="" height="20px" width="20px">
                            M.City
                        </div>
                    </div>
                </div>
                <div class="box-1">
                    <div class="Mmatch">
                        <div class="match1">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/r.png" alt="" height="20px" width="20px">
                            Real Madrid
                        </div>
                        <div class="time">
                            <div class="time">
                                Time <br>
                                6:45
                            </div>
                        </div>
                        <div class="match2">
                            <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/m.png" alt="" height="20px" width="20px">
                            M.City
                        </div>
                    </div>
                </div> -->

            </div>
            
        
            <!-- chat box -->
            <div class="chat">
                <h2>Matches Live Chat</h2>
                <!-- <div class="box" id="item1"></div>
                <div class="box" id="item2"></div>
                <div class="box" id="item3"></div> -->
                <div class="boxes" >
                <!-- :style="{ background: getRandomColor() }"  -->
                    <div v-for="(item,index) in chatbox" :key="item.id" class="chatbox " :style="{ 'background':getcolore(item.color)}"  @click="koooragetroomsbyid(item)">
                            <br><br>
                            <div class="img">
                                <img :src="getTeamLogo(item.hometeam)">
                                <img :src="getTeamLogo(item.awayteam)">
                            </div>
                            <!-- <div class="img1">
                                    <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/r.png">
                                    <img src="https://kooora.jayshreesoftware.com/wp-content/themes/socket-io-chat-theme/m.png">
                            </div> -->
                            <h3>{{ item.hometeam }}</h3>
                            <h3>{{ item.awayteam }}</h3>
                        <!-- <h3>Home Team:{{ item.scores && item.scores.length > 0 ? item.scores[0].score : 'N/A' }}</h3>
                        <h3>Away Team:{{ item.scores && item.scores.length > 0 ? item.scores[1].score : 'N/A' }}</h3> -->
                    </div>
                </div>
            </div>

            <span class=""></span><div style="width:; height:;overflow: auto;" class="tagembed-container"><div style="width:100%; height:100%;" class="tagembed-socialwall tagembed-analystic" data-wall-id="126896"></div></div>            <br><br>

            <span class=""></span><div style="width:; height:;overflow: auto;" class="tagembed-container"><div style="width:100%; height:100%;" class="tagembed-socialwall tagembed-analystic" data-wall-id="126902"></div></div>            
    </div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- <script>
    const App = {
        data() {
                return {
                    dragid:'',
                    msgboxes:[],
                    msglist:[],
                    msg:"",
                    // message: "Hello Element Plus",
                    connection:null,
                    chatbox:[],
                    chat:[],
                    selectchatbox:[],
                    showpopup:false,
                    }
     },
        methods:{
            refresh(){
                let data = { active: 1 };
                const config = {
                        headers:{'Access-Control-Allow-Origin' : '*'
                        }
                        };
                        var url = "/ChatRoomWS/api/index.php?controller=chatroomlist&action=getChatroom"; 
                axios.post(url,config)
                .then(response =>{
                    debugger
                    this.chatbox = response.data;
                    // console.log(this.chatbox);
                    //add mglist aray properties in each chatbox
                })
                .catch(e => {
                    // this.apierror(e);
                })
            },
            drag_over(event) {
                    event.preventDefault();
                    return false;
                },
                drop(event) {
                    debugger
                    var offset = event.dataTransfer.getData("text/plain").split(",");
                    var id = document.querySelector('#'+offset[0])
                    id.style.left =
                            (event.clientX + 200 )+ "px";
                            id.style.top =
                            (event.clientY + 300) + "px";
                        event.preventDefault();

                  
                },
                drag_start(event) {
                    
                    var id = "";
                    if(event.currentTarget){
                        id = event.currentTarget.id;
                    }
                    var style = window.getComputedStyle(event.target, null);
                    var left = style.getPropertyValue("left");
                    var top = style.getPropertyValue("top");
                    var newstr = id+"," +
                        (event.clientX) +
                        "," +
                        (event.clientY)
                        if(event.dataTransfer){
                            event.dataTransfer.setData("text/plain", newstr);
                        }
                },        
                makeDraggable(id) {
                    debugger
                    var dm = document.querySelector('#DirectionsBackground'+id)
                    var dropid = document.querySelector("#dialoguecontainer")
                    if (dm) {
                        dm.addEventListener("dragstart", this.drag_start, false);
                        dropid.addEventListener("dragover", this.drag_over, false);
                        dropid.addEventListener("drop", this.drop, false);
                    }
                },
                sendmsg(){

                //while sending add user and the chat id (team id, companyid) in content
                //add a prperty mglist in chatbox
                //
                var data = {
                    id:this.id,
                    msg:this.msg
                };
                // let data = { active: 1 };
                const config = {
                        headers:{'Access-Control-Allow-Origin' : '*'
                        }
                        };
                        debugger
                        var url = "/ChatRoomWS/api/index.php?controller=chatmessage&action=savechat";
                axios.post(url,config)
                .then(responce =>{
                    debugger
                    this.refresh();
                    this.connection.send(JSON.stringify(data));
                    this.msglist.push(data);
                    this.msg = "";
                })
                .catch(e => {
                    // this.apierror(e);
                })

                
            },
            openpopup(chatboxdata){
                debugger
                var dd = this.msgboxes.find(x => x.roomname == chatboxdata.roomname);
                if(!dd){
                    this.msgboxes.push(chatboxdata);
                    // this.showpopup = true;
                    // this.selectchatbox = chatboxdata;
                    var id = chatboxdata.roomname;
                    this.$nextTick(()=>{
                        this.makeDraggable(id);
                    });
                }
            },
            hidepopup(index){
                
                // this.showpopup=false;
                this.msgboxes.splice(index,1)
                console.log(this.msgboxes);
            },
            
            // getdata(){
            //     debugger
            //     const config = {
            //             headers:{'Access-Control-Allow-Origin' : '*'
            //             }
            //             };
            //             var url1 = "/ChatRoomWS/api/index.php?controller=chatroomlist&action=getChat";
            //     axios.post(url1,config)
            //     .then(response =>{
            //         this.chat = response.data;
            //     })
            //     .catch(e => {
            //         // this.apierror(e);
            //     })
            // }
        },
        mounted(){
            this.$nextTick(this.makeDraggable());
        },
        created(){

            this.connection = new WebSocket('ws://localhost:8080')
            this.connection.onopen = () => {
                console.log('Connection established!');
            };
            this.connection.onmessage = (e) => {
        

                const getData = JSON.parse(e.data);

                //in loop of cmpanies check msglist and push to matchig msglist 0000000.    

                this.msglist.push(JSON.stringify(getData)); 



            };
            this.connection.onerror = (error) => {
                console.error('WebSocket Error:', error);   
            };
            this.refresh();
            // this.getdata();
        }
        };
        const app = Vue.createApp(App);
        
        app.mount("#app");
</script> -->
 



<!-- <div id="wrapper">
        <div id="container">
            <h1>WebSockets Client</h1>
            <div id="chatLog">
            </div>
            <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>
            <input id="text" type="text" />
            <button id="disconnect">Disconnect</button>
        </div>
    </div> -->


<script type='text/javascript' src='https://widget.tagembed.com/embed.min.js?ver=4.6' id='__tagembed__embbedJs-js'></script>
<script type='text/javascript' src='https://cdn.socket.io/4.6.0/socket.io.min.js?ver=4.6.0' id='socketio-js'></script>
<script type='text/javascript' id='socketio-chat-js-extra'>
/* <![CDATA[ */
var socketio_chat_params = {"socket_server_url":" ws:\/\/localhost\/kooora.live:8080"};
/* ]]> */
</script>
<script type='text/javascript' src='https://kooora.jayshreesoftware.com/wp-content/plugins/socket-io-chat-plugin/socket-io-chat.js?ver=1.0' id='socketio-chat-js'></script>