<? global $vis_language;   ?>
<style type="text/css"> .filestyle{ left:-100% !important;}
#vis_popup_msg_div {height: 30px; top: 0px;
	left: 0px;
	width: 100%;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	text-align: center;
	z-index: 9999;
	line-height: 30px;
	font-size: 13px;
	position: relative;
	margin: 0px auto;
	padding: 0px;
}
#loading{ background:url(../design/images/ajax-loader.gif) center no-repeat #000; height:35px; z-index: 9;
	position: absolute;
	bottom: 0px;
	opacity: 0.5;
	text-align: center;
	font-size: 20px;
	color: #fff; display:none;
	width:57px;
	right:15px;
}
.notes{color: #ff0000;
	font-size: 12px;
	font-style: italic;
}

.info{color:#ff0000; padding-left:12px;}
.info li{ font-size:15px; color:#ff0000;}
.info span{ font-size:12px; color:#788288; line-height:20px;}
.btndontask{background:#E74C3C; color:#fff !important; border:none;}
.btnremind{background:#777777; color:#fff !important; border:none;}
.btndontask:hover,.btnremind:hover{color:#fff !important; opacity:0.8;}
.popheader{ color:#fff !important;}
 </style>
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header bg-primary popheader">
        	<h4 class="modal-title">Quick setup</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-sm-12">
                <div id="vis_popup_msg_div" class="alert" style="display: none;"></div>
                    <section class="panel panel-default">
                    <form class="form-horizontal" role="form" id="vis_first_login_manage_form" name="vis_first_login_manage_form" method="post">
                        <header class="panel-heading text-right bg-light clearfix">
                            <ul class="nav nav-tabs pull-left"  id="tabs">
                                <li  id="manageportal" class="active">
                                <a data-toggle="tab" oncontextmenu="return false;" onclick="$('#vis_details_list').visExecution('load_operations',{'vis_module':'setting', 'vis_operation':'manage_portal_setting_popup'});set_active_tab('manageportal');" href="#vis_details_list" >Branding</a>
                                </li>
                                <li  id="mailqueue" >
                                <a data-toggle="tab" oncontextmenu="return false;" onclick="$('#vis_details_list').visExecution('load_operations',{'vis_module':'setting', 'vis_operation':'mailqueue_details_popup'});set_active_tab('mailqueue');" href="#vis_details_list" >Incoming Email</a>
                                </li>
                                <li  id="smtp" >
                                <a data-toggle="tab" oncontextmenu="return false;" onclick="$('#vis_details_list').visExecution('load_operations',{'vis_module':'setting', 'vis_operation':'new_smtp_popup'}); set_active_tab('smtp');" href="#vis_details_list" >Outgoing Email</a>
                                </li>
                                <!--<li id="info"><a data-toggle="tab" oncontextmenu="return false;" onclick="$('#vis_details_list').visExecution('load_operations',{'vis_module':'setting', 'vis_operation':'popup_info'}); set_active_tab('info');" href="#vis_details_list" >Information</a></li>-->
                            </ul>
                        </header>
                    </form>
                    <div class="panel-body">
                    <div class="tab-content">
                    <div id="vis_details_list" class="tab-pane active">
                    <script>$('#vis_details_list').visExecution('load_operations',{'vis_module':'setting', 'vis_operation':'manage_portal_setting_popup'});</script>
                    </div>
                    </div>
                    </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="modal-footer">
        
        <a class="btn btndontask" data-dismiss="modal" id="clospop" onclick="vis_update_first_login();" >Don't ask me again</a>
        <a class="btn btnremind" id="remindlet" data-dismiss="modal" onclick="vis_update_firstlogin_status();">Remind Letter</a>
        </div>
    </div>
</div>

<script>

function vis_update_first_login(){
	var data = {'vis_firstlogin':'0' };
    $.ajax({
		url: 'index.php?vis_module=home&vis_operation=update_firsttime_status',
		data: data,
		type: "POST",
		dataType: "json",
		success: function(data) {
			//alert(data.vis_result);
			loadtips();
		},
		error: function(xhr, ajaxOptions, thrownError) {$("#vis_global_msg_div").visInterface("load_global_message", "Error: "+xhr.status+" - "+thrownError);}
	});
}

function vis_update_firstlogin_status(){
	var data = {'vis_firstlogin':'2' };
    $.ajax({
		url: 'index.php?vis_module=home&vis_operation=update_fsttime_status_remindletter',
		data: data,
		type: "POST",
		dataType: "json",
		success: function(data) {
			//alert(data.vis_result);
			loadtips();
		},
		error: function(xhr, ajaxOptions, thrownError) {$("#vis_global_msg_div").visInterface("load_global_message", "Error: "+xhr.status+" - "+thrownError);}
	});
}

function set_active_tab(tab_id){
        var active = $("#tabs .active").attr("id");
        $("#"+active).removeClass("active");
        $("#"+tab_id).addClass("active").show();
        var parent_div = $("#vis_details_list").parent().parent();
        if($("#vis_first_login_manage_form #tabs #manageportal.active").length
        || $("#vis_first_login_manage_form #tabs #mailqueue.active").length
		|| $("#vis_first_login_manage_form #tabs #smtp.active").length
		|| $("#vis_first_login_manage_form #tabs #info.active").length
        )
            parent_div.addClass("p-l-none").addClass("p-r-none");
        else parent_div.removeClass("p-l-none").removeClass("p-r-none");
    }
	
function loadtips()
{
	<? if($checkfirstimeload==1){ //only check first time ?>
	+function ($) {
  $(function(){
    var intro = introJs();
    intro.setOptions({
      steps: [
      {
			element: '#ticketmenu',
			intro: '<div class="h5 text-uc introhead">Filters</div><p>This section shows a list of default and custom ticket filters, you can create custom filters from Inbox >> Advance search section.</p>',
			position: 'bottom'
        },
		{
          element: '#homenav',
          intro: '<div class="h5 text-uc introhead">Dashboard</div><p>This section shows quick summary of tickets, customer, tasks and few other modules. It also shows list of staff members that are currently signed in. Additionally it shows ticket activity tree.</p>',
          position: 'bottom'
        },
		{
          element: '#inboxnav',
          intro: '<div class="h5 text-uc introhead">Inbox</div><p>From inbox section you can manage all ticket related activity, Optionally you can filter the ticket list using left panel department and ticket status tree.</p>',
          position: 'bottom'
        },
		{
          element: '#clientnav',
          intro: '<div class="h5 text-uc introhead">Clients</div><p>Under clients section you can manage end users and their profile. You can track each customer’s tickets, their organization details and their sub contacts.</p>',
          position: 'bottom'
        },
		{
          element: '#toolbardiv',
          intro: '<div class="h5 text-uc introhead">Modules</div><p>Vision Helpdesk offers several modules, like blabby, solutions, tasks, billing, reports and more. From this section you can jump to respective module pages.</p>',
          position: 'bottom'
        },
		{
          element: '#vis_global_searchbar',
          intro: '<div class="h5 text-uc introhead">Quick Search</div><p>Here you can search tickets with its hash, subject, customers with their name and email address.</p>',
          position: 'bottom'
        },
        {
          element: '#newdiv',
          intro: '<div class="h5 text-uc introhead">+New</div><p>This section allows you to create new ticket, add client and more.</p>',
          position: 'bottom'
        },
		{
          element: '#vis_notify_container',
          intro: '<div class="h5 text-uc introhead">Notification</div><p>You should see new ticket, new client and various module alerts in this section.</p>',
          position: 'left'
        },
        {
          element: '#vis_top_user_detail_menu',
          intro: '<div class="h5 text-uc introhead">Staff Profile</div><p>Staff can manage their profile, create email alert rules, set ticket listing views and manage macros from this section.</p>',
          position: 'left'
        },
		{
          element: '#setingdiv',
          intro: '<div class="h5 text-uc introhead">Admin Settings</div><p>This section is visible to admin users only and it allows admin users to manage admin settings.</p>',
          position: 'left'
        }
		
      ],
      showBullets: false,
	  keyboardNavigation:false,
	  exitOnOverlayClick:false,
	  showStepNumbers:false,
    });

    intro.start();
  });
  
  /*start*/ 
 setInterval(function () {
    $(".introjs-helperLayer").css("border-color", function () {
        this.switch = !this.switch
        return this.switch ? "#ffff00" : ""
    });
	$(".top").attr("class", function () {
        this.switch = !this.switch
        return this.switch ? "topfade introjs-arrow top" : "introjs-arrow top"
    });
}, 300);
 /*end*/ 
 
}(jQuery);

//vis_update_first_login();
<? } ?>
}
</script>
