<?php 
$userid = $_SESSION['uid'];
$qry = $this->db->prepare("select * from tbl_widget where user_id = '$userid'");
$qry->execute();
$count = $qry->rowCount();
?> 
<!-- Start content area  -->
<div class="main-content">
	<div class="card">
		<div class="card-body">
			 <div class="qz-page-title">
				<div class="container-fluid">
					<div class="row">
						<div class="col-12">
							<div class="d-flex justify-content-between align-items-center">
								<h2><?=$count > 0 ? "Edit" : "Add" ?> Widget</h2>
								<span class="sidebarToggler">
									<i class="fa fa-bars d-lg-none d-block"></i>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End page title -->
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-12">
							<?php
							if($count > 0){
							$query = $this->db->query("select * from tbl_widget where user_id = '$userid'");
							$query->execute();
							$val = $query->fetch(PDO::FETCH_ASSOC);
							?>
                            <form id="updateForms" role="form" method="post" class="form-horizontal" enctype="multipart/form-data">
							
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<label>Streaming Link</label>
											 <input type="text" class="form-control" value="<?=$val['stream']?>" id="stream" name="stream">
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Platform (Shoutcast / Icecast)</label>
											 <select class="form-control" name="platform" id="platform">
												<option value="sc" <?=$val['platform']=="sc" ? "selected":"" ?>>Shoutcast</option>
												<option value="ic" <?=$val['platform']=="ic" ? "selected":"" ?>>Icecast </option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Theme</label>
											<select class="form-control" name="theme" id="theme">
												<option value="light" <?=$val['theme']=="light" ? "selected":"" ?>>Light</option>
												<option value="dark" <?=$val['theme']=="dark" ? "selected":"" ?>>Dark</option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Station Name</label>
											<input type="text" class="form-control" value="<?=$val['title']?>" id="title" name="title">
											
										</div>
									</div>
									
									<div class="col-md-6">
										<div class="form-group">
											<label>Station Slogan</label>
											<input type="text" class="form-control" value="<?=$val['salogan']?>" id="salogan" name="salogan">
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Show Song History</label>
											<select class="form-control" name="history" id="history">
												<option value="true" <?=$val['history']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['history']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
    								<div class="col-md-6">
    									<div class="form-group">
    										<label>Volume</label>
    										<div class="colsm">
    										<select class="form-control" name="volume" id="volume">
												<option>Select Volume Range</option>
												<option value=".15" <?=$val['volume']==".15" ? "selected":"" ?>>.15</option>
												<option value=".25" <?=$val['volume']==".25" ? "selected":"" ?>>.25</option>
												<option value=".35" <?=$val['volume']==".35" ? "selected":"" ?>>.35</option>
												<option value=".45" <?=$val['volume']==".45" ? "selected":"" ?>>.45</option>
												<option value=".55" <?=$val['volume']==".55" ? "selected":"" ?>>.55</option>
												<option value=".65" <?=$val['volume']==".65" ? "selected":"" ?>>.65</option>
												<option value=".75" <?=$val['volume']==".75" ? "selected":"" ?>>.75</option>
												<option value=".85" <?=$val['volume']==".85" ? "selected":"" ?>>.85</option>
												<option value=".95" <?=$val['volume']==".95" ? "selected":"" ?>>.95</option>
												<option value="1" <?=$val['volume']==".100" ? "selected":"" ?>>.100</option>
											</select>
    										</div>
    									</div>
    								</div>
    								<div class="col-md-6">
    									<div class="form-group">
    										<label>Player Background Color</label>
    										<div class="colsm">
    										<input type="color" value="<?=$val['background']?>" class="form-control" id="background" name="background">
    										</div>
    									</div>
    								</div>
    								<div class="col-md-6">
										<div class="form-group" id="cimage">
											<label>Station Logo Image</label>
											<div class="colsm">
											<input type="file" name="logo" id="logo" class="dropify-image" data-max-file-size="10M" data-default-file="<?php if($val['logo'] !=""){ echo dirname(siteUrl).'/'.$val['logo'];}?>" data-allowed-file-extensions="jpg jpeg png gif" />
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group" id="bimage">
											<label>Default Cover Image</label>
											<div class="colsm">
											<input type="file" name="cover_image" id="cover_image" class="dropify-image" data-max-file-size="10M" data-default-file="<?php if($val['cover_image'] !=""){ echo dirname(siteUrl).'/'.$val['cover_image'];}?>" data-allowed-file-extensions="jpg jpeg png gif" />
											</div>
										</div>
									</div>
									<input type="hidden" id="old_logo" name="old_logo" value="<?=$val['logo']?>">
									<input type="hidden" id="old_cover" name="old_cover" value="<?=$val['cover_image']?>">
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Logo</label>
											<select class="form-control" name="hidelogo" id="hidelogo">
												<option value="true" <?=$val['hidelogo']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['hidelogo']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Cover Image</label>
											<select class="form-control" name="hidecover" id="hidecover">
												<option value="true" <?=$val['hidecover']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['hidecover']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Volume Bar</label>
											<select class="form-control" name="hidevolume" id="hidevolume">
												<option value="true" <?=$val['hidevolume']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['hidevolume']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Show Static Station name and Slogan</label>
											<select class="form-control" name="statictitle" id="statictitle">
												<option value="true" <?=$val['statictitle']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['statictitle']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Station name and Slogan</label>
											<select class="form-control" name="hidetitle" id="hidetitle">
												<option value="true" <?=$val['hidetitle']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['hidetitle']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Social Share Button</label>
											<select class="form-control" name="hidesocial" id="hidesocial">
												<option value="true" <?=$val['hidesocial']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['hidesocial']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Auto Play</label>
											<select class="form-control" name="autoplay" id="autoplay">
												<option value="true" <?=$val['autoplay']=="true" ? "selected":"" ?>>True</option>
												<option value="false" <?=$val['autoplay']=="false" ? "selected":"" ?>>False</option>
											</select>
										</div>
									</div>
								</div>
                                <div class="row">
                                    <div class="col-lg-6">
                                     <input type="hidden" name="edit_id" value="<?=$val['id']?>">
									<input type="submit" name="" value="Update player widget" class="btn btn-info" onclick="update('widget','<?=siteUrl;?>')">
                                    </div>
                                </div>
                                <center><div id="uploadStatus"></div></center>
                            </form>
							<?php }else{ ?>
							<form id="createplayerForm" role="form" method="post" class="form-horizontal" enctype="multipart/form-data">
							<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<label>Streaming Link</label>
											<div class="colsm">
												<input type="text" class="form-control" id="stream" name="stream">
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Platform (Shoutcast / Icecast)</label>
											<div class="colsm">
												<select class="form-control" name="platform" id="platform">
												    <option value=""></option>
													<option value="sc">Shoutcast</option>
													<option value="ic">Icecast</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Theme</label>
											<div class="colsm">
												<select class="form-control" name="theme" id="theme">
													<option value="light" selected="selected">Light</option>
													<option value="dark">Dark</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Station Name</label>
											<div class="colsm">
												<input type="text" class="form-control" id="title" name="title">
											</div>
										</div>
									</div>
									
									<div class="col-md-6">
										<div class="form-group">
											<label>Station Slogan</label>
											<div class="colsm">
												<input type="text" class="form-control" id="salogan" name="salogan">
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Show Song History</label>
											<div class="colsm">
												<select class="form-control" name="history" id="history">
													<option value="true" selected="selected">True</option>
													<option value="false">False</option>
												</select>
											</div>
										</div>
									</div>
    								<div class="col-md-6">
    									<div class="form-group">
    										<label>Volume</label>
    										<div class="colsm">
												<select class="form-control" name="volume" id="volume">
													<option>Select Volume Range</option>
													<option value=".15">.15</option>
													<option value=".25">.25</option>
													<option value=".35">.35</option>
													<option value=".45">.45</option>
													<option value=".55">.55</option>
													<option value=".65">.65</option>
													<option value=".75" selected="selected">.75</option>
													<option value=".85">.85</option>
													<option value=".95">.95</option>
													<option value="1">.100</option>
												</select>
    										</div>
    									</div>
    								</div>
    								<div class="col-md-6">
    									<div class="form-group">
    										<label>Player Background Color</label>
    										<div class="colsm">
												<input type="color" value="#7e4efd" class="form-control" id="background" name="background">
    										</div>
    									</div>
    								</div>
    								<div class="col-md-6">
										<div class="form-group" id="cimage">
											<label>Station Logo Image</label>
											<div class="colsm">
												<input type="file" name="logo" id="logo" class="dropify-image" data-max-file-size="10M" data-allowed-file-extensions="jpg jpeg png gif" />
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group" id="bimage">
											<label>Default Cover Image</label>
											<div class="colsm">
												<input type="file" name="cover_image" id="cover_image" class="dropify-image" data-max-file-size="10M" data-allowed-file-extensions="jpg jpeg png gif" />
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Logo</label>
											<div class="colsm">
												<select class="form-control" name="hidelogo" id="hidelogo">
													<option value="true">True</option>
													<option value="false" selected="selected">False</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Cover Image</label>
											<div class="colsm">
												<select class="form-control" name="hidecover" id="hidecover">
													<option value="true">True</option>
													<option value="false" selected="selected">False</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Volume Bar</label>
											<div class="colsm">
												<select class="form-control" name="hidevolume" id="hidevolume">
													<option value="true">True</option>
													<option value="false" selected="selected">False</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Show Static Station name and Slogan</label>
											<div class="colsm">
												<select class="form-control" name="statictitle" id="statictitle">
													<option value="true">True</option>
													<option value="false" selected="selected">False</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Station name and Slogan</label>
											<div class="colsm">
												<select class="form-control" name="hidetitle" id="hidetitle">
													<option value="true">True</option>
													<option value="false" selected="selected">False</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Hide Social Share Button</label>
											<div class="colsm">
												<select class="form-control" name="hidesocial" id="hidesocial">
													<option value="true">True</option>
													<option value="false" selected="selected">False</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Auto Play</label>
											<div class="colsm">
												<select class="form-control" name="autoplay" id="autoplay">
													<option value="true" selected="selected">True</option>
													<option value="false">False</option>
												</select>
											</div>
										</div>
									</div>
								</div>
							<input type="hidden" name="user_id" value="<?=$userid?>">
							<div class="row">
								<div class="col-lg-6">
								<button type="submit" onclick="GetPlayer('widget','<?=siteUrl?>')"; id="btn" class="btn btn-info" name=" Add new player widget" value=" Add new player widget">
								  Add new player widget                                     </button>  
								</div>
							</div>
							<center><div id="uploadStatus"></div></center>
						</form>
							<?php } ?>
					</div>
				</div>
			</div>
			<div class="container p-4">
				<div class="card">
					<div class="card-body">
					<?php if($count > 0){
						$vals = $qry->fetch(PDO::FETCH_ASSOC);
						$playerurl = dirname(siteUrl).'/player.php?token='.$vals['token'];?>
						<div id="resultplayer"><iframe name="contenedorPlayer" class="" allow="autoplay" width="100%" frameborder=0 scrolling=no  src="<?=$playerurl?>"></iframe></div>
						<hr>
						<b><h4>Embed Code</h4></b>
						
						<div id="resultcode"><textarea class="form-control" style="height:150px !important;"><meta name="viewport" content="width=device-width, initial-scale=1"><iframe name="contenedorPlayer" class="contentPlayer" allow="autoplay" width="100%" frameborder=0 scrolling=no  src="<?=$playerurl?>"></iframe><style>iframe.contentPlayer {width: 100%;min-height: 500px;left: 0;overflow: hidden;position: fixed;bottom: 0;}</style></textarea></div>
						<div id="csscode" style="display:none;"></div>
						<?php }else{?>
						<div id="resultcode"></div>
						<div id="csscode" style="display:none;"></div>
						<?php } ?>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	