<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Title -->
		<title>{{site_title}}</title>

		<!-- Required Meta Tags Always Come First -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<meta name="title" content="{{site_title}}">
		<meta name="description" content="{{site_desc}}">
		<meta name="keywords" content="<?php echo $music->config->keyword;?>">


		<?php echoOGTrackTags();?>
		<!-- Favicon -->
		<link rel="shortcut icon" href="{{theme_url}}/img/icon.png" />

		<!-- Google Fonts -->
		<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
		<link href="//fonts.googleapis.com/css?family=Muli:300,400" rel="stylesheet">
		
		<script src="{{theme_url}}/js/jquery.min.js"></script>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<script src="{{CONFIG theme_url}}/js/jquery-ui.min.js"></script>
		<!-- CSS -->
		<link rel="stylesheet" href="{{theme_url}}/css/bootstrap.min.css">
		<link rel="stylesheet" href="{{theme_url}}/css/owl.carousel.min.css">
		<link rel="stylesheet" href="{{theme_url}}/css/style.css">
		<script src="{{theme_url}}/js/wavesurfer.min.js"></script>

		<script type="text/javascript" src="{{theme_url}}/js/tag-it.min.js"></script>
		<link rel="stylesheet" href="{{theme_url}}/css/jquery.tagit.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script>

		<script type="text/javascript" src="{{theme_url}}/js/fastclick.js"></script>

		<!-- <script src="https://unpkg.com/wavesurfer.js"></script> -->
		<?php if ($music->config->recaptcha == 'on') { ?>
	    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
	    <?php } ?>
		<script src="{{theme_url}}/js/emojionearea.min.js"></script>
		<link rel="stylesheet" href="{{theme_url}}/css/emojionearea.min.css">
		 <?php if (!empty($music->config->google)) { ?>
	     <script>
	      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	      ga('create', '{{CONFIG google}}', 'auto');
	      ga('send', 'pageview');
	    </script> 
	    <?php } ?>
		<script>
            window.run_station = null;
            $(document).ready(function() {
                // $(".emoji_comment_btn").emojioneArea({
                //     standalone: true,
                //     autocomplete: false,
                //     pickerPosition: "bottom",
                //     emojiPlaceholder: "",
                //     inline: true,
                //     dir            : "ltr",
                //     placement : 'absright'
                // 	// container: "#container",
                // 	// hideSource: false,
                // 	// useSprite: false
                // });
                window.init_emojioneArea = function() {
                    $(".comment_input").emojioneArea({
                        useInternalCDN: true,
                        events: {
                            keyup: function (editor, event) {
                                let emojioneArea = this; //this is instance of EmojioneArea
                                if (event.which === 13 && !event.shiftKey) {
                                    // $scope.onPressKeyTextarea(event);
									var audioid = $( $(this)[0].source[0]).attr('data-audio-id');
                                    registerComment(emojioneArea.getText(), audioid, event, $(this));
                                    emojioneArea.setText('');
                                    emojioneArea.hidePicker();
                                    emojioneArea.editor.focus();
                                    event.preventDefault();
                                }
                            }
                        },
                        search: false,
                        recentEmojis: false,
                        filtersPosition: "bottom",
                        tones: false,
                        autocomplete: true,
                        filters: {animals_nature: false, food_drink: false, activity: false, travel_places: false, objects: false, symbols: false, flags: false}
                    });
                }
				window.init_emojioneArea();
				
				window.init_blogemojioneArea = function() {
                    $(".blog_comment_input").emojioneArea({
                        useInternalCDN: true,
                        events: {
                            keyup: function (editor, event) {
                                let emojioneArea = this; //this is instance of EmojioneArea
                                if (event.which === 13 && !event.shiftKey) {
                                    // $scope.onPressKeyTextarea(event);
									var audioid = $( $(this)[0].source[0]).attr('data-article-id');
                                    registerBlogComment(emojioneArea.getText(), audioid, event, $(this));
                                    emojioneArea.setText('');
                                    emojioneArea.hidePicker();
                                    emojioneArea.editor.focus();
                                    event.preventDefault();
                                }
                            }
                        },
                        search: false,
                        recentEmojis: false,
                        filtersPosition: "bottom",
                        tones: false,
                        autocomplete: true,
                        filters: {animals_nature: false, food_drink: false, activity: false, travel_places: false, objects: false, symbols: false, flags: false}
                    });
                }
                window.init_blogemojioneArea();
            });
		</script>

		<script>
		$(document).ready(function() {
		  $.ajaxSetup({ 
		    data: {
		        hash_id: getHashID()
		    },
		    cache: false 
		  });
		});
		$(window).on("popstate", function () {
			if (history.state.ajax_url) {
				goToAjaxLink(history.state.ajax_url);
			}
		});
        window.search_url = '{{LINK search/songs/}}';
        window.chatfetch = false;
			$(document).on('click', '[data-load]', function(event) {
				if ($(this).attr('data-load') == '') {window.open($(this).attr('href'), '_blank'); 
					if (parseInt($('.ss_track_play_pause').attr('data_is_ad')) > 0) {
				 		is_sent = 1;
				 		song_id = $('#current-track').attr('value');
				 		onTimesUp(song_id);
				 		return false;
				 	}
					return false;
				}
				  //$('.sections li').removeClass('active');
			      $('#bar_loading').show().animate({width:20 + 80 * Math.random() + "%"}, 200);
			      event.preventDefault();
			      var url = $(this).attr('data-load');
			      $.ajax({
			        url: siteUrl() + '/ajax-load.php?path=' + url,
			        type: 'GET',
			        dataType: 'html'
			      })
			      .done(function(data_html, textStatus, request) {
			      	if (request.status == 201) {
			      		$('#login_box').modal('show');
			      	} else {
                        if(window.run_station !== null){
                            window.run_station.pause();
                        }

			      		data = JSON.parse($(data_html).filter('#json-data').val());
				        window.history.pushState({state:'new', ajax_url: url},'', data.url);

                        if(data.page_name == 'messages'){
                            window.chatfetch = true;
						}else{
                            window.chatfetch = false;
						}

				        if(data.page_name !== 'search'){
				            $('#search_keyword').val('');
						}

				        $('#container_content').html(data_html);
				        $('meta[name=title]').attr('content', data.site_title);
				        $('#page').attr('data-page', data.page_name);
				        $('meta[name=description]').attr('content', data.description);
				        $('meta[name=keywords]').attr('content', data.keyword);
				        $('title').html(data.site_title);
				        if (data.page_name) {
				        	setTimeout(function () {
				        		updateWaves = false;
				        		if ($('#current-track').val()) {
				        			if (Amplitude.getActiveSongMetadata().id == $('#current-track').val()) {
					        			updateWaves = true;
					        		} else {
					        			$('body').removeClass('player_running');
					        		}
				        		} else {
				        			updateWaves = true;
				        		}
				        		if (updateWaves == true) {
				        			var getCurrentPlaying = Number($('.amplitude-song-played-progress').attr('value')) * 100;
					        		$('#light-wave, #light-waves').width(getCurrentPlaying + '%');
					        		updateWaveForm();
				        		}
				        	}, 100);
                            if( data.page_name == 'blogs' ){
                                window.search_url = '{{LINK blogs/tag/}}';
                            }
				        }
				        if (Amplitude.getActiveSongMetadata().id && $('#page').attr('data-page') == 'track') {
				        	if (Amplitude.getActiveSongMetadata().id == $('#current-track').val()) {
				        		$('body').addClass('player_running');
				        	}
				        }
				        if (Amplitude.getActiveSongMetadata().u_id && $('#page').attr('data-page') != 'track') {
				        	$('.playlist-list-song[data-id=' + Amplitude.getActiveSongMetadata().u_id + ']').addClass('playing');
				        	$('.list-recommended[data-id=' + Amplitude.getActiveSongMetadata().u_id + ']').addClass('playlist-list-song playing');
				        	if ($('.feed_post[data-id="' + Amplitude.getActiveSongMetadata().u_id + '"]').length > 0) {
				        		$.get('{{CONFIG ajax_url}}/get-song-info', {id: Amplitude.getActiveSongMetadata().id}, function(data) {
				        			if (data.status == 200) {
				        				$('body').attr('song-duration', data.duration);
				        				if (data.songWaves.length > 0) {
											$('.feed_post[data-id="' + data.songID + '"]:first').find('.waveform-small').html(data.songWaves);
											$('#light-wave img').width($('#dark-wave').width() + 'px');
											$('#light-waves img').width($('#dark-wavez').width() + 'px');
											$('.feed_post[data-id="' + data.songID + '"]:first').find('.post-actions').removeClass('hidden');
											$('.feed_post[data-id="' + data.songID + '"]:first').find('.ssong_comments').removeClass('hidden');
											$('.feed_post[data-id="' + data.songID + '"]:first').find('.mus_feeds_bodycoms').removeClass('hidden');
											$('.feed_post[data-id="' + data.songID + '"]:first').find('.art-info').removeClass('hidden');
				    						$('.feed_post[data-id="' + data.songID + '"]:first').find('.comment_list').html(data.comments);
				    						$('.feed_post[data-id="' + data.songID + '"]:first').find('.comment-waves').html(data.waves);
				    						var getCurrentPlaying = Number($('.amplitude-song-played-progress').attr('value')) * 100;
					        		        $('#light-wave, #light-waves').width(getCurrentPlaying + '%');
				    						updateWaveForm();
										}
				        			}
				        		});
				        	}
				        }
                        $('#music-user-ads-table').find('[type="checkbox"]').each(function(index, el) {
                            $(el).bootstrapToggle();
                        });
                        if( data.page_name === 'station'){
                            setTimeout(function () {
                                $('body').addClass('player_running');
                            }, 100);
                        }
			      	}
			        
			      })
			      .fail(function() {
			         window.location.href = siteUrl()+'/404';
			      })
			      .always(function() {
			      	if (typeof data !== 'undefined') {
			      		if (data.page_name == 'user' && data.scroll == true) {
				        	$('html,body').animate({
						        scrollTop: $('#myTab').offset().top - 350
						    });
				        } else {
				        	$('html,body').animate({
						        scrollTop: $('body').offset().top
						    });
				        }
                        window.init_emojioneArea();
			      	}
			        $('#bar_loading').animate({width:"100%"}, 200).fadeOut(300, function() {
			           $(this).width("0");
			        });
			      });
			  });
			window.artist_sell = '<?php echo $music->config->artist_sell;?>';
		</script>

		<script src="{{theme_url}}/js/header.js<?php echo ($music->update_cache !== '') ?$music->update_cache:'?'.rand(1111,4444); ?>"></script>

		<?php if ($_COOKIE['mode'] !== 'night') { ?>
		<link rel="stylesheet" href="{{CONFIG theme_url}}/css/day.style.css<?php echo $music->update_cache; ?>" id="night-mode-css">
		<?php } ?>

		<link rel="stylesheet" href="{{CONFIG theme_url}}/css/custom.style.css<?php echo ($music->update_cache !== '') ?$music->update_cache:'?'.rand(1111,4444); ?>" id="custom.style.css">
		<?php if ($music->language_type == 'rtl'){?>
		<link rel="stylesheet" href="{{CONFIG theme_url}}/css/rtl.style.css">
		<?php }?>

		<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
		<link rel="stylesheet" href="{{CONFIG theme_url}}/js/lib/sweetalert2/dist/sweetalert2.min.css">
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
	</head>
	
	<body class="{{classes}}" data-lang="<?php if ($music->language_type == 'rtl'){?>rtl<?php } else {?>ltr<?php } ?>">	
	<?php $loadPage = loadPage('thirdparty/theme-changer'); echo (!empty($loadPage)) ? $loadPage : '';?>	
		<div class="music_app">
			<div class="ma_container" id="page" data-page="<?php echo $music->site_pagename?>">
				<!-- Start Sidebar  -->	
				{{site_sidebar}}
				<!-- End Sidebar  -->	

				<!-- Header  -->
				<div id="main-header">
					{{site_header}}
				</div>
				<div id="bar_loading"></div>
				<!-- End Header  -->

				<!-- Content  -->
				<div id="container_content">
					{{site_content}}
				</div>
				<!-- End Content  -->
				
				<!-- Footer -->
				<div class="ma_footer">
					<?php echo GetAd('footer');?>
	
					<div class="ma_footer_cright">
						<?php
							$lang_copy = lang("© |DATE| |NAME|");
							$lang_copy = str_replace('|NAME|', $music->config->name, $lang_copy);
							echo $lang_copy = str_replace('|DATE|', date('Y'), $lang_copy);
						?>
						<div class="ma_footer_links">
							<a href="{{LINK blogs}}" data-load="blogs">{{LANG Blogs}}</a> • <a href="{{LINK terms/dmca}}" data-load="terms/dmca">{{LANG DMCA}}</a> • <a href="{{LINK terms/about}}" data-load="terms/about">{{LANG About Us}}</a> • <a href="{{LINK terms/terms}}" data-load="terms/terms">{{LANG Terms}}</a> • <a href="{{LINK contact}}" data-load="contact">{{LANG Contact}}</a> • <a href="{{LINK terms/privacy}}" data-load="terms/privacy">{{LANG Privacy Policy}}</a>
							<?php $pages = GetCustomPages();
		                    if (!empty($pages)) {
		                     ?>
		                     • <div class="lang_select dropup">
									<button type="button" class="btn dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{LANG More}}</button>
									<div class="dropdown-menu dropdown-menu-right mat-dropdown">
										<ul class="list-unstyled mb-0">
											<?php foreach($pages as $key => $page) { ?>
												<li><a href="{{LINK site_pages/<?php echo($page['page_name']) ?>}}"><?php echo $page['page_title'];?></a></li>
											<?php } ?>
										</ul>
									</div>
								</div>
							<?php } ?>
							 • <div class="lang_select dropup">
								<button type="button" class="btn dropdown-toggle" data-display="static" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo ucfirst($_SESSION['lang']); ?></button>
								<div class="dropdown-menu dropdown-menu-right mat-dropdown">
									<ul class="list-unstyled mb-0">
										<?php foreach($music->langs as $lang) { ?>
											<li><a href="?lang=<?php echo $lang; ?>"><?php echo ucfirst($lang); ?></a></li>
										<?php } ?>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- End Footer -->
			</div>
			<!-- Player  -->
			{{site_player}}
			<!-- End Player  -->
		</div>
		
		<!-- Login Modal  -->
		{{site_loginForm}}
		<!-- End Login Modal  -->
		
		<!-- Signup Modal  -->
		{{site_signupForm}}
		<!-- End Signup Modal  -->

		<!-- Modals -->
		<?php echo loadPage('modals/delete-song')?>
		<?php echo loadPage('modals/delete-comment')?>
		<?php echo loadPage('modals/delete-post')?>
		<?php echo loadPage('modals/reposted')?>
		<?php echo loadPage('modals/purchase-song')?>
		<?php echo loadPage('modals/age-restrcited')?>
		<?php echo loadPage('modals/copyright')?>
		<?php echo loadPage('modals/comment-report')?>
		<?php echo loadPage('modals/blog-comment-report')?>
		<?php echo loadPage('modals/track-report')?>
		<?php echo loadPage('modals/track-review')?>
		<?php echo loadPage('modals/payment-modal')?>
		<?php if ($music->config->paypal_payment == 'on') {?>
		<?php echo loadPage('modals/paymentpro-modal')?>
        <?php } ?>
		<?php echo loadPage('modals/bank-payment')?>
		<?php echo loadPage('modals/logout-modal')?>
		<?php echo loadPage('modals/two-factor')?>
		<?php echo loadPage('modals/buy_album')?>

		<div class="modal fade" id="albums_success" role="dialog" aria-labelledby="albums" aria-hidden="true" data-id="{{t_id}}">
			<div class="modal-dialog mat_box" role="document">
				<div class="modal-content add_to_plist">
					<div class="modal-body" style="background: #1b711e;">
						<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
						<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="50" height="50">
<g>
	<g>
		<path fill="currentColor" d="M449.716,239.842c-0.543-7.535-7.082-13.191-14.628-12.661c-7.536,0.543-13.204,7.092-12.662,14.628
			c0.337,4.655,0.506,9.431,0.506,14.191c0,109.061-88.726,197.787-197.786,197.787C116.086,453.787,27.36,365.06,27.36,256
			S116.086,58.214,225.147,58.214c43.191,0,84.21,13.668,118.62,39.525c6.041,4.538,14.615,3.321,19.154-2.718
			c4.54-6.04,3.323-14.616-2.717-19.154c-39.189-29.447-85.891-45.012-135.058-45.012C101.001,30.854,0,131.855,0,256
			s101.001,225.145,225.147,225.145S450.292,380.146,450.292,256C450.292,250.586,450.097,245.15,449.716,239.842z"/>
	</g>
</g>
<g>
	<g>
		<path fill="currentColor" d="M496.395,61.77c-20.808-20.807-54.666-20.807-75.474,0l-197.11,197.108l-69.874-69.875
			c-20.808-20.807-54.666-20.807-75.474,0c-20.808,20.808-20.808,54.666,0,75.474l120.341,120.341
			c6.895,6.895,15.951,10.342,25.007,10.342c9.057,0,18.113-3.447,25.008-10.342l247.576-247.576
			C517.201,116.435,517.201,82.579,496.395,61.77z M477.049,117.897L229.472,365.475c-3.12,3.12-8.2,3.12-11.32,0L97.811,245.133
			c-10.141-10.141-10.141-26.64,0-36.781c5.07-5.072,11.729-7.606,18.39-7.606s13.321,2.535,18.39,7.606l71.882,71.882
			c4.632,4.631,10.791,7.181,17.339,7.181c6.551,0,12.71-2.551,17.341-7.182L440.268,81.116c10.138-10.141,26.64-10.141,36.781,0
			C487.189,91.257,487.189,107.756,477.049,117.897z"/>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
						<br><br>
						<b>{{LANG The track has been moved to this album successfully.}}</b>
					</div>
				</div>
			</div>
		</div>

		<div class="queue_overlay" onclick="javascript:$('body').removeClass('data-queue-open');"></div>
		<div class="sidenav_overlay" onclick="javascript:$('body').removeClass('side_open');"></div>
		
		<!--  Scripts-->
		<script>
			function ajaxUrl() {
				return '{{CONFIG ajax_url}}';
			}
			function siteUrl() {
				return '{{LINK }}';
			}
		</script>
		<?php echo loadPage('extrajs/content');?>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.0.3/fingerprint2.min.js"></script>
		<script src="{{theme_url}}/js/jquery.form.min.js"></script>
		<script src="{{theme_url}}/js/popper.min.js"></script>
		<script src="{{theme_url}}/js/bootstrap.min.js"></script>
		<script src="{{theme_url}}/js/owl.carousel.min.js"></script>
		<script src="{{theme_url}}/js/simplebar.min.js"></script>
		<script src="{{theme_url}}/js/amplitude.min.js"></script>
		<script src="{{theme_url}}/js/script.js"></script>
		<script src="{{theme_url}}/js/Chart.min.js"></script>
		<script src="{{CONFIG theme_url}}/js/highcharts/highcharts.js"></script>
		<script src="{{CONFIG theme_url}}/js/footer.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
		<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
		<script src="{{CONFIG theme_url}}/js/lib/sweetalert2/dist/sweetalert2.js"></script>
		<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
		<input type="hidden" class="main_session" value="<?php echo createMainSession();?>">
        <?php echo LoadPage('timeago/content');?>
		<script>

			<?php if( isset($_GET['invite']) && !empty($_GET['invite']) ){?>
			$('#signup_box').modal('show');
			<?php }?>

            $('#rmjs-1').readmore({
                speed: 75,
                collapsedHeight: 190,
                moreLink: '<a href="#" class="hash"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg> {{LANG Read more}}</a>',
				lessLink: '<a href="#" class="hash"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg> {{LANG Read less}}</a>',
                afterToggle: function(trigger, element, expanded) {
                    //if(! expanded) {
                        // The "Close" link was clicked
                        $('html, body').animate({scrollTop: element.offset().top}, {duration: 100});
                    //}
                }
            });
            var running = false;
            $( document ).on( 'change', '#chat_message_upload_media_file', function(e){
                if( running === true ){
                    running = false;
                    return false;
                }
                running = true;
                var countFiles = $(this)[0].files.length;
                var imgPath = $(this)[0].value;
                var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();

                if(countFiles > 1) {
                    M.toast({html: 'Please select Four Images only.'});
                } else if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {

                    let from = $( '#user-id' ).val();
                    let formData = new FormData();
                    formData.append( "media", $(this)[0].files[0],$(this)[0].files[0].value );
                    formData.append( 'to' , $('#user-id').val() );
                    formData.append( 'message_id' , window.message_id );

                    var img = $('<img style="width: 300px;border-radius: 20px;">');
                    //if (typeof(FileReader) != "undefined") {
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        img.attr('src', e.target.result);
                    };
                    reader.readAsDataURL($(this)[0].files[0]);
                    //}

                    $('.lds-facebook').removeClass('hide');
                    $('#btn_chat_f_send').addClass('hide');

                    $( '.chat_message_upload_media_imgprogress' ).removeClass( 'hide' );
                    $( '.chat_message_upload_media_imgstatus' ).removeClass( 'hide' );
                    $.ajax({
                        xhr: function() {
                            let xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function(evt){
                                if (evt.lengthComputable) {
                                    let percentComplete = evt.loaded / evt.total;
                                    percentComplete = parseInt(percentComplete * 100);
                                    //console.log( 'prog: ' + percentComplete + '%');
                                    $( '#chat_message_upload_media_imgstatus' ).html( percentComplete + '%');
                                    $( '.chat_message_upload_media_imgdeterminate' ).css({'width': percentComplete + '%'});
                                    if (percentComplete === 100) {
                                        $( '.chat_message_upload_media_imgprogress' ).addClass( 'hide' );
                                        $( '.chat_message_upload_media_imgstatus' ).addClass( 'hide' );
                                        $( '#chat_message_upload_media_imgstatus' ).html( '' );
                                    }
                                }
                            }, false);
                            return xhr;
                        },
                        beforeSend: function() {
                            $('.messages').append('<div class="data_message" data-id="' + window.message_id + '"><div class="message to-user pull-right" data-id=""><div class="user-message"></div><div class="clear"></div></div><div class="clear"></div></div>');
                            img.appendTo($('.data_message[data-id="' + window.message_id + '"]').find('.user-message'));
                            $('.user-messages').scrollTop($('.user-messages')[0].scrollHeight);
                            window.message_id = makeid();
                        },
                        url: '{{LINK endpoints/messages/upload_media}}?hash_id=' + $('.main_session').val(),
                        type: "POST",
                        async: true,
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        timeout: 60000,
                        dataType: false,
                        success: function(data) {
                            $('.data_message[data-id="' + data.message_id + '"]').replaceWith(data.message);
                            running = false;
                        }
                    });

                }else{
                    M.toast({html: 'Please select only Images.'});
                }
            });

            // update user last seen
            function getRandomBetween(min, max) {
                return min + Math.random() * (max - min);
            }
            function UpdateLastSeen() {
                $.get('{{LINK endpoints/user/update_lastseen}}', { }, function () {
                    setTimeout(UpdateLastSeen, getRandomBetween(60000, 120000));
                });
            }
            setTimeout(UpdateLastSeen, getRandomBetween(60000, 120000));
		</script>
		<script src="{{CONFIG theme_url}}/js/footer.js<?php echo ($music->update_cache !== '') ?$music->update_cache:'?'.rand(1111,4444); ?>"></script>
	</body>
</html>