<?php
/**
  * Ahead WebSoft Technologies Pvt Ltd.
  * @copyright  Copyright 2006-2026 Ahead WebSoft Technologies Pvt Ltd.
  * @license    https://www.socialengine.com/policies
*/
?>

<?php if (!$this->isAjax) { ?>
	<?php if ($this->viewer()->getIdentity()) { ?>
		<a href="stories/index/create" class="ajaxsmoothbox" id="create-stories" style="display:none;"><?php echo $this->translate('Create Story'); ?></a>
	<?php } ?>
	<script type="application/javascript">
		//function to fetch stories
		setTimeout(getStoriesData(), 2000);
		var executedViewStory = false;

		function getStoriesData() {
			scriptJquery.post(en4.core.baseUrl + 'widget/index/mod/stories/name/all-stories', {
				is_ajax: true
			}, function(response) {

				scriptJquery('.stories_allstories_<?php echo $this->identity; ?>').trigger('destroy.owl.carousel');
				scriptJquery(".Stories_content").html('<div class="stories_allstories stories_allstories_<?php echo $this->identity; ?>"></div>');
				scriptJquery(".stories_allstories").html(response);
				owlJqueryObject('.stories_allstories').owlCarousel({
					loop: false,
					dots: false,
					nav: true,
					margin: 0,
					<?php if ($orientation = ($this->layout()->orientation == 'right-to-left')) { ?>
						rtl: true,
					<?php } ?>
					autoWidth: true,
				})
				owlJqueryObject(".owl-prev").html('<i class="fas fa-chevron-left"></i>');
				owlJqueryObject(".owl-next").html('<i class="fas fa-chevron-right"></i>');

				<?php if (!empty($this->story_id) && !empty($this->user_id)) { ?>
					if (!executedViewStory) {
						setTimeout(() => {
							executedViewStory = true;
							selectedStoryId = <?php echo $this->story_id; ?>;
							selectedStoryUserId = <?php echo $this->user_id; ?>;
							//en4.core.runonce.add(function() {
							var isExist = scriptJquery("#story_id_" + selectedStoryUserId);
							if (isExist.length) {
								scriptJquery("#story_id_" + selectedStoryUserId).trigger("click");
							}
							//});
						}, 500);
					}
				<?php } ?>

			})
		}
	</script>

	<div class="stories_confirm_popup_container" id="success_stories_cnt">
		<div class="stories_confirm_popup">
			<div class="_head text-center">
				<?php echo $this->translate("Story Success!"); ?>
			</div>
			<div class="_cont" id="success_stories_create">

			</div>
			<div class="_footer">
				<button id="confirm_success_stories">
					<?php echo $this->translate("Okay") ?>
				</button>
			</div>
		</div>
	</div>

	<h3 class="stories_allstories_title"><?php echo $this->translate($this->title ? $this->title : "Stories"); ?> <a href="javascript:;" data-url="stories/index/archive" class="ajaxsmoothbox open_story_archive gap-2 d-flex font_color align-items-center"><span><?php echo $this->translate('Settings & Archive'); ?></span> <i class="fas fa-angle-right"></i></a></h3>
	<div class="stories_allstories_container">
		<section class="Stories_content">
			<div class="stories_allstories stories_allstories_<?php echo $this->identity; ?>">
			<?php } ?>
			<?php if ($this->isAjax) { ?>
				<?php if ($this->viewer()->getIdentity()) { ?>
					<div class="stories_allstories_item stories_allstories_item_owner">
						<div class="stories_allstories_item_img">
							<?php
							$image =  "";
							if (!empty($this->story['my_story']['story_content'])) {
								if (!empty($this->story['my_story']['story_content'][0]['photo'])) {
									$image = $this->story['my_story']['story_content'][0]['photo'];
								} else {
									$image = $this->story['my_story']['story_content'][0]['media_url'];
								}
							} else {
								$image = $this->story['my_story']['user_image'];
							}
							?>
							<img src="<?php echo $image; ?>" />
						</div>
						<div class="stories_allstories_item_owner_cont">
							<div class="stories_allstories_item_add">
								<a href="javascript:;" class="create_stories center_item"><i class="icon_add"></i></a>
							</div>
							<span class="d-block text-center"><?php echo $this->translate("Create story")?></span>
							<!-- <div class="stories_allstories_item_name">
								<?php // echo $this->viewer()->getTitle(); ?>
							</div> -->
						</div>
						<a href="javascript:;" id="story_id_<?php echo $this->viewer()->getIdentity(); ?>" rel="<?php echo $this->viewer()->getIdentity(); ?>" class="stories_allstories_item_link<?php if (empty($this->story['my_story']['story_content'])) { ?> create_stories <?php } else { ?> open_story <?php } ?>"></a>
					</div>
				<?php } ?>

				<?php foreach ($this->story['stories'] as $story) { ?>
					<?php
					$image =  "";
					if ($story['story_content'][0]['is_video']) {
						if ($story['story_content'][0]['photo']) {
							$image = $story['story_content'][0]['photo'];
						} else {
							$image = $story['user_image'];
						}
					} else {
						$image = $story['story_content'][0]['media_url'];
					}
					?>
					<div class="stories_allstories_item<?php echo $story["is_live"] ? ' _islive' : ''; ?>">
						<div class="stories_allstories_item_img">
							<img src="<?php echo $image ? $image : $story['user_image']; ?>" alt="" />
						</div>
						<span class="liveicon"><?php echo $this->translate("Live"); ?></span>
						<div class="stories_allstories_item_cont">
							<div class="stories_allstories_item_thumb">
								<img src="<?php echo $story['user_image']; ?>" />
							</div>
							<div class="stories_allstories_item_name">
								<?php echo $story['username']; ?>
							</div>
						</div>
						<?php
						if (!isset($story["is_live"]) || empty($story["is_live"])) {
						?>
							<a href="javascript:;" id="story_id_<?php echo $story["user_id"]; ?>" rel="<?php echo $story['user_id']; ?>" class="stories_allstories_item_link open_story"></a>
						<?php } else {
							$elivehost = Engine_Api::_()->getItem("elivehost", $story["elivehost_id"]);
							echo $elivehost->getRichContent('stories_allstories_item_link elivestreaming_data_a');
						?>
						<?php } ?>
					</div>
				<?php }
			} else { ?>
				<?php for ($i = 1; $i <= 4; $i++) { ?>
					<div class="stories_allstories_item stories_allstories_item_loading">
						<div class="stories_allstories_item_img">
						</div>
						<div class="stories_allstories_item_cont">
						</div>
					</div>
				<?php } ?>
			<?php } ?>
			<?php if (!$this->isAjax) { ?>
			</div>
		</section>
	</div>
<?php } ?>
<?php if (!$this->isAjax) { ?>

	<script type="text/javascript">
		en4.core.runonce.add(function() {
			owlJqueryObject('.stories_allstories_<?php echo $this->identity; ?>').owlCarousel({
				loop: false,
				dots: false,
				nav: true,
				margin:0,
				<?php if ($orientation = ($this->layout()->orientation == 'right-to-left')) { ?>
					rtl: true,
				<?php } ?>
				autoWidth: true,
			})
			owlJqueryObject(".owl-prev").html('<i class="fas fa-chevron-left"></i>');
			owlJqueryObject(".owl-next").html('<i class="fas fa-chevron-right"></i>');
		});
	</script>

	<div class="stories_story_view_main">
		<div class="stories_story_view">
			<a href="javascript:;" class="stories_story_view_close_btn"><i></i></a>
			<div class="stories_story_view_bg">
				<img src="" class="stories_content_bg_image" alt="" />
			</div>
			<div class="stories_story_view_container">
				<div class="stories_story_slider">
					<div class="stories_story_item">
						<div class="stories_story_slider_loader">

						</div>
						<div class="stories_story_item_header">
							<div class="stories_story_item_header_thumb">
								<img class="stories_user_image" src="" alt="" />
							</div>
							<div class="stories_story_item_header_info">
								<div class="stories_name"></div>
								<div class="stories_time"></div>
							</div>
						</div>
						<div class="stories_story_item_content">
							<?php  //Photo Story  
							?>
							<div class="stories_content"></div>
							<div class="stories_media_content">
								<div class="stories_story_item_caption"></div>
								<div class="stories_reaction_data"></div>
							</div>

							<!--Text Story-->
							<div class="stories_content_text" style="background-image:url(); display:none;">
								<div class="stories_content_text_inner">
									<div class="stories_contenttext" class="_txt"></div>
								</div>
							</div>
							<div class="stories_content_text_reaction stories_media_content" style="display:none;">
								<div class="stories_reaction_data"></div>
							</div>
						</div>
						<div class="stories_story_item_footer">
							<div class="stories_story_item_reply_box">
								<?php if (Engine_Api::_()->getDbtable('modules', 'core')->isModuleEnabled('activity')) { ?>
									<div class="_reaction comment_hoverbox_wrapper">
										<div class="comment_hoverbox">
											<?php $getReactions = Engine_Api::_()->getDbTable('reactions', 'comment')->getReactions(array('userside' => 1, 'fetchAll' => 1)); ?>
											<?php if (engine_count($getReactions) > 0): ?>
												<?php foreach ($getReactions as $getReaction): ?>
													<span>
														<span data-text="<?php echo $this->translate($getReaction->title); ?>" data-type="<?php echo $getReaction->reaction_id; ?>" class="storiescommentlike reaction_btn comment_hoverbox_btn">
															<div class="reaction comment_hoverbox_btn_icon"> <i class="react" style="background-image:url(<?php echo Engine_Api::_()->getDbTable('reactions', 'comment')->likeImage($getReaction->reaction_id); ?>)"></i> </div>
														</span>
														<div class="text">
															<div><?php echo $this->translate($getReaction->title); ?></div>
														</div>
													</span>
												<?php endforeach; ?>
											<?php endif; ?>
										</div>
										<a href="javascript:;"><i class="_icon stories_comment_d"></i></a>
									</div>
								<?php } ?>
								<div class="_input stories_message_cnt d-flex gap-2">
									<input class="stories_message_cnt_input" placeholder="Reply..." />
									<button class="stories_message_cnt_btn"><?php echo $this->translate("send") ?></button>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="stories_story_slider_nav">
					<a href="" class="_prev stories_previous"><i class="fas fa-chevron-left"></i></a>
					<a href="" class="_next stories_next"><i class="fas fa-chevron-right"></i></a>
				</div>
				<div class="stories_reply_success_msg" style="display: none;">
					<i class="fas fa-check-circle"></i>
					<span><?php echo $this->translate("Message sent successfully."); ?></span>
				</div>
			</div>
		</div>
	</div>

<?php } ?>
<script>
	var currentDateTime = '<?php echo date("Y-m-d H:i:s"); ?>';
	var storiesData = <?php echo json_encode($this->story); ?>;
	var stories_webstoryviewtime = "<?php echo Engine_Api::_()->getApi('settings', 'core')->getSetting('stories_storyviewtime', 5) * 2; ?>";
	var post_max_size_story = <?php echo (int)(Engine_Api::_()->getApi('settings', 'core')->getSetting('stories_videouplimit', 5)); ?>;
</script>

<?php if ($this->isAjax) {
	die; ?><?php } ?>