@extends('layouts.app')

@section('content')
	
			<!-- CRM CONTENT BODY -->
		
				<!-- TOPBAR -->
				<div class="top_bar page-content">
					<!-- LOADER -->
					<div class="loader">
						<div class="top_status_bar load">
							<div class="progress_bar bar" style="left: 0px;">
							</div>
						</div>
					</div>
					<!-- END LOADER -->
					<!-- BREADCRUMBS -->
					<div class="breadcrumbs">
						<ul>
							<li><a href="">Home</a></li>
							<li><a href="#" class="">team</a></li>
						</ul>
						<button class="btn btn-large pull-right help theme_btn help_btn">?</button>
					</div>
					<!-- END BREADCRUMBS -->
				</div>
				<!-- END TOPBAR -->
				<!-- PAGE CONTENT -->
				<div class="page-content">
					<div class="row">
						<div class="col-md-12">
							<!-- Begin: life time stats -->
							<div class="portlet">
								<div class="portlet-title">
									<div class="caption">
										<h2>Team List
											<span class="subtitle"> All the team members registered under employee section listed here, you can filter results based on values for better management.</span>
										</h2>
									</div>
									<div class="actions success_actions" style="">
										<a href="javascript:void(0);" data-toggle="modal" data-target="#new_filesAdd" class="add_new portal_add_btn">
											<i class="fa fa-plus"></i>
										</a>
										<ul class="nav navbar-nav netsec_menucontent">
											<li class="actions_dropdown dropdown">
												<a href="#">Actions</a>
												<ul class="actions_list dropdown-menu">
													<li>
														<a href="javascript:void(0);" data-toggle="modal" data-target="#new_filesAdd" class="add_new">New Employee</a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
								</div>

								<div class="portlet-body flip-scroll">
									<!--------------------FILTER---------------------->
									<div class="row form-group">
										<div class="col-md-2">
											<select name="column_drop" id="column_drop" class="form-control select2 column_drop select2-hidden-accessible" tabindex="-1" aria-hidden="true">
												<option value=""></option>
												<option value="display_name">Name</option>
												<option value="department_uuid">Department</option>
												<option value="designation_uuid">Designation</option>
												<option value="status">Employee status</option>
												<option value="email">Email</option>
												<option value="mobile">Mobile</option>
												<option value="whatsapp">Whatsapp</option>
											</select>
											
										</div>
										<div class="col-md-2 value-drop">
											<select name="value_drop" id="value_drop" disabled="" class="form-control select2 option_filters select2-hidden-accessible" tabindex="-1" aria-hidden="true">
												<option value=""></option>
											</select>
										</div>
										<div class="col-md-4 pr_0">
											<button class="theme_btn_round btn filter_all" type="button" name="load" value="Filter" style="">Filter</button>
											<button class="theme_btn_round btn reset_filter" type="button" name="" value="Clear All" >Clear All</button>
											<form id="export_excel" method="post" action="" style="display: inline-block;">
												<input type="hidden" name="_token" value="">                                            
												<button class="theme_btn_round btn export_excel" style="" type="submit">
													Export
												</button>
											</form>
										</div>
										<div class="column_filters" style="display: block;">
											<span class="each_filter" data-index="display_name" data-filter="value_drop" data-selected_text="Mr Hazem Galal" data-selected_val="Mr Hazem Galal">
												Mr Hazem Galal 
												<i class="fa fa-trash remove_filter"></i>
											</span>
										</div>
										
										<div class="leads_action_grey actions_selected">
											<div class="actions_dropdown_grey">
												<span>Lead options</span>
												<ul class="actions_list_grey">
													<li class="option 1">Option 1</li>
												</ul>
											</div>
										</div>
									</div>
									<!--------------------FILTER---------------------->

									<!--------------------Search---------------------->
									<div class="tb_search">
										<input type="text" id="search_input_all" onkeyup="FilterkeyWord_all_table()" placeholder="Search.." class="form-control">
									</div>
									<table id="table-id" class="table filterable table-striped table-bordered table-hover custom_table">
										<thead class="flip-content thead">
											<tr>
												<th></th>
												<th class="th_2 ">Name</th>
												<th class="th_3 ">Employee Id</th>
												<th class="th_4 ">Department</th>
												<th class="th_5 ">Designation</th>
												<th class="th_6 ">Status</th>
												<th class="th_7 ">Email</th>
												<th class="th_8 ">Mobile</th>
												<th class="th_9 ">Whatsapp</th>
												<th class="th_10 ">Time Spent</th>
												<th class="th_11 ">Tasks</th>
												<th class="th_12 ">Opportunities</th>
												<th class="th_13 ">Leads</th>
												<th>
													<img class="dots_menu_grey" src="images/dots_menu_grey.png">
													<div class="dropdown_row table_option_checkboxes" style="">
														<span class="dropdown_row_option head">Select Columns</span>
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" checked="" style="height: auto !important;" name="table_option[]" class="tb_options" value="Name^2" id="Name">
																	<label for="Name"></label>
																</div>
															</section>
															<span>Name</span>
														</span>
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" checked="" style="height: auto !important;" name="table_option[]" class="tb_options" value="Employee Id^3" id="Employee Id">
																	<label for="Employee Id"></label>
																</div>
															</section>
															<span>Employee Id</span>
														</span>
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" style="height: auto !important;" name="table_option[]" class="tb_options" value="Department^4" id="Department">
																	<label for="Department"></label>
																</div>
															</section>
															<span>Department</span>
														</span>
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" style="height: auto !important;" name="table_option[]" class="tb_options" value="Designation^5" id="Designation">
																	<label for="Designation"></label>
																</div>
															</section>
															<span>Designation</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" style="height: auto !important;" name="table_option[]" class="tb_options" value="Status^6" id="Status">
																	<label for="Status"></label>
																</div>
															</section>
															<span>Status</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" checked="" style="height: auto !important;" name="table_option[]" class="tb_options" value="Email^7" id="Email">
																	<label for="Email"></label>
																</div>
															</section>
															<span>Email</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" checked="" style="height: auto !important;" name="table_option[]" class="tb_options" value="Mobile^8" id="Mobile">
																	<label for="Mobile"></label>
																</div>
															</section>
															<span>Mobile</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" checked="" style="height: auto !important;" name="table_option[]" class="tb_options" value="Whatsapp^9" id="Whatsapp">
																	<label for="Whatsapp"></label>
																</div>
															</section>
															<span>Whatsapp</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" style="height: auto !important;" name="table_option[]" class="tb_options" value="Time Spent^10" id="Time Spent">
																	<label for="Time Spent"></label>
																</div>
															</section>
															<span>Time Spent</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" style="height: auto !important;" name="table_option[]" class="tb_options" value="Tasks^11" id="Tasks">
																	<label for="Tasks"></label>
																</div>
															</section>
															<span>Tasks</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" style="height: auto !important;" name="table_option[]" class="tb_options" value="Opportunities^12" id="Opportunities">
																	<label for="Opportunities"></label>
																</div>
															</section>
															<span>Opportunities</span>
														</span>
														
														<span class="dropdown_row_option">
															<section title="" class="section_squaredThree">
																<div class="squaredThree">
																	<input type="checkbox" style="height: auto !important;" name="table_option[]" class="tb_options" value="Leads^13" id="Leads">
																	<label for="Leads"></label>
																</div>
															</section>
															<span>Leads</span>
														</span>
														<div class="tbl_actions">
															<button class="tbl_btn cancel_tbl_option">Cancel</button>
															<button class="tbl_btn apply_tbl_option">Apply</button>
														</div>
													</div>
												</th>
											</tr>
										</thead>
										<tbody class="tbody">
										<!--=====================-->
										<!--=====================-->
											<tr> 
												<td> 
													<div class="img_wrap contact_list">
														<div class="dp_name">
															<img src="images/avatar1.png" class="dp">
														</div>
													</div> 
												</td> 
												<td> 
													<a href="team_view.php" class="editable_name edit restrict_edit">Mr Ahmed Rizvi</a> 
													<span class="address designation_title">Account Manager</span> 
												</td>
												<td><span class="employee_id">100098</span></td>
												<td><span class="department">Sales</span></td>
												<td><span class="designation_">Account Manager</span></td> 
												<td ><span class="status">Active</span></td> 
												<td class="color_theme"><span class="email">rizvi@gbs.com.sa</span></td> 
												<td class="color_theme"><span class="mobile">+966550887085</span></td>
												<td class=""><span class="whatsapp">+966550887085</span></td>
												<td class=""><span class="spent_time">00:00</span></td>
												<td class=""><span class="total_tasks">0</span></td>
												<td class=""><span class="ongoing_number_opp">0</span></td>
												<td class=""><span class="ongoing_number_lead">0</span></td> 
												<td style="width: 20px;"> 
													<img class="dots_menu_grey" src="images/dots_menu_grey.png">
													<div class="dropdown_row" style="">
														<span class="dropdown_row_option delete_from_list" data-uuid="">Delete</span> 
														<span class="dropdown_row_option update_load_form" data-uuid="">Update</span>
														<span class="dropdown_row_option view_employee" data-uuid="">View</span>
													</div>
												</td>
											</tr>
											<tr> 
												<td> 
													<div class="img_wrap contact_list">
														<div class="dp_name">
															<img src="images/avatar2.png" class="dp">
														</div>
													</div> 
												</td> 
												<td> 
													<a href="team_view.php" class="editable_name edit restrict_edit">Mr Hazem Galal</a> 
													<span class="address designation_title">Account Manager</span> 
												</td> 
												<td><span class="employee_id">100145</span></td>
												<td><span class="department">Sales</span></td>
												<td><span class="designation_">Account Manager</span></td> 
												<td><span class="status">Active</span></td> 
												<td class="color_theme"><span class="email">hazem@gbs.com.sa</span></td> 
												<td class="color_theme"><span class="mobile">+966596993369</span></td>
												<td class=""><span class="whatsapp">+966596993369</span></td>
												<td class=""><span class="spent_time">00:00</span></td>
												<td class=""><span class="total_tasks">0</span></td>
												<td class=""><span class="ongoing_number_opp">54</span></td>
												<td class=""><span class="ongoing_number_lead">0</span></td> 
												<td style="width: 20px;"> 
													<img class="dots_menu_grey" src="images/dots_menu_grey.png">
													<div class="dropdown_row">
														<span class="dropdown_row_option delete_from_list" data-uuid="">Delete</span> 
														<span class="dropdown_row_option update_load_form" data-uuid="">Update</span>
														<span class="dropdown_row_option view_employee" data-uuid="">View</span>
													</div>
												</td>
											</tr>


											
										</tbody>
									</table>

									<div class="bottom_custom">
										<div class="rows">
											<select class="form-control" name="state" id="maxRows">
												<option value="10">10</option>
												<option value="15">15</option>
												<option value="20">20</option>
												<option value="50" selected="">50</option>
												<option value="100">100</option>
												<option value="1000">1000</option>
											</select>
											<span>Records</span>
										</div>
										<div class="pagination-container">
											<button class="load_more_listing" last_id="2" disabled="disabled">
												<span class="load_more_list" style="display: inline;">Load More</span> 
												<span class="list_loading" style="display: none;">Loading 
													<i class="fa fa-spinner fa-spin"></i>
												</span>
											</button>
										</div>
										<div class="rows_count">Showing 10 of 37 entries</div>
										<span class="now_showing_count hide">37</span>
										<span class="total_records hide">37</span>
									</div>
								</div>
							</div>
							<!-- End: life time stats -->
						</div>
					</div>
				</div>
				<!-- END PAGE CONTENT -->
		
			<!-- END CRM CONTENT BODY -->
			
	
		<!-- END CONTAINER WRAP -->

		<!-- BEGIN BOTTOM INNER -->
		
		<!-- END BOTTOM INNER -->

		<!-- //UPDATE CONTACT MODAL START// -->
		<div class="modal scrollable fade bs-modal right modal-fullscreen r_u_sure in" id="new_filesAdd" role="dialog" aria-hidden="false" style="">
			<div class="sweet-overlay" tabindex="-1"></div>
    		<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<form method="post" id="updateEmployee" class="employee_update_form">
						<div class="modal-header">
							<button type="button" class="close close_popup" data-dismiss="modal">×</button>
							<h3 class="pop_heading">ADD NEW STAFF</h3>
						</div>
						<div class="modal-body">
							<div class="body_wrap">
								<div class="row">
									<!--LEFT SIDE-->
									<div class="col-md-4 left_side_task p_0">
										<div class="rows_wrap">
											<div class="sidebar_list">
												<div class="display_pic">
													<a class="overlay btn-image-upload" data-toggle="modal" href="#modal_image_uplaod" data-modal-name="Customer Profile Images" data-modal-field="customer_profile_pic_path">
														<i class="fa fa-camera"></i>
													</a>
													<img class="display_picture" src="images/avatar2.png">
												</div>


												<!-- <div class="display_pic">
													<a class="overlay btn-image-upload" data-toggle="modal" href="#modal_image_uplaod" data-modal-name="Customer Profile Images" data-modal-field="customer_profile_pic_path">
														<i class="fa fa-camera"></i>
													</a>
													<img class="display_picture" src="images/avatar2.png" />
												</div> -->
												<span class="each_option basic_info active_option" id_attr="basic_info">Basic information</span>
												<span class="each_option staff_info" id_attr="staff_info">Staff information</span>
												<span class="each_option system_user_info" id_attr="system_user_info">System user information</span>
												<span class="each_option social_profile" id_attr="social_profile">Social profile</span>
												<span class="each_option additional_information" id_attr="additional_information" style="display: none;">Additional information</span>
											</div>
										</div>
									</div>
									<!--LEFT SIDE-->
									<!--RIGHT SIDE-->
									<div class="col-md-8 pl_pr_0 right_side_task update_staff_data ">
										<div id="basic_info">
											<span class="main_label">Basic Information</span>
											<div class="rows_wrap">
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="title">Title *</label>
															<select class="form-control select2 title filter validate select2-hidden-accessible" name="title" id="title" tabindex="-1" aria-hidden="true">
																<option value=""></option>
																<option value="Mr">Mr</option>
																<option value="Mrs">Mrs</option>
																<option value="Ms">Ms</option>
																<option value="Dr">Dr</option>
																<option value="Sh">Sh</option>
															</select>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="firstname">First name *</label>
															<input class="form-control first_name validate" id="first_name" type="text" name="first_name" value="" autocomplete="off">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="lastname">Last name *</label>
															<input class="form-control last_name validate" id="last_name" type="text" name="last_name" value="" autocomplete="off">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="mobile">Mobile *</label>
															<!-- <input id="int_phone" name="phone" type="tel"> -->
															<input id="int_phone" name="mobile" type="tel" class="form-control just_number mobile validate phone" value="">
															<!-- <input id="mobile" name="mobile" class="form-control just_number mobile validate phone" type="text" value=""> -->
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="whatsapp">WhatsApp</label>
															<input class="form-control last_name validate" id="whatsApp" type="text" name="whatsApp" value="" autocomplete="off">
															<div class="intl-tel-input allow-dropdown">
																<div class="flag-container">
																	<div class="selected-flag" tabindex="0" title="Saudi Arabia (&#8235;المملكة العربية السعودية&#8236;&lrm;): +966">
																		<div class="iti-flag sa"></div>
																		<div class="iti-arrow"></div>
																	</div>
																	<ul class="country-list hide">
																		<li class="country preferred" data-dial-code="971" data-country-code="ae">
																			<div class="flag-box">
																				<div class="iti-flag ae"></div>
																			</div>
																			<span class="country-name">United Arab Emirates (&#8235;الإمارات العربية المتحدة&#8236;&lrm;)</span>
																			<span class="dial-code">+971</span>
																		</li>
																		<li class="country preferred active" data-dial-code="966" data-country-code="sa">
																			<div class="flag-box">
																				<div class="iti-flag sa"></div>
																			</div>
																			<span class="country-name">Saudi Arabia (&#8235;المملكة العربية السعودية&#8236;&lrm;)</span>
																			<span class="dial-code">+966</span>
																		</li>
																		<li class="divider"></li>
																		<li class="country" data-dial-code="93" data-country-code="af">
																			<div class="flag-box">
																				<div class="iti-flag af"></div>
																			</div>
																			<span class="country-name">Afghanistan (&#8235;افغانستان&#8236;&lrm;)</span>
																			<span class="dial-code">+93</span>
																		</li>
																		<li class="country" data-dial-code="355" data-country-code="al">
																			<div class="flag-box">
																				<div class="iti-flag al"></div>
																			</div>
																			<span class="country-name">Albania (Shqipëri)</span>
																			<span class="dial-code">+355</span>
																		</li>
																		<li class="country" data-dial-code="213" data-country-code="dz">
																			<div class="flag-box">
																				<div class="iti-flag dz"></div>
																			</div>
																			<span class="country-name">Algeria (&#8235;الجزائر&#8236;&lrm;)</span>
																			<span class="dial-code">+213</span>
																		</li>
																	</ul>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="email">Email *</label>
															<input name="email" class="form-control validate email" type="text" value="">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="conferencing">Conferencing</label>
															<input name="conferencing" class="form-control conferencing" type="text" value="">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="country">Country *</label>
															<select name="country" class="select2 gbs_country staff_country validate select2-hidden-accessible" tabindex="-1" aria-hidden="true">
																<option value=""></option>
																<option value="1">Afghanistan</option>
																<option value="2">Albania</option>
																<option value="3">Algeria</option>
																<option value="4">American Samoa</option>
																<option value="5">Andorra</option>
															</select>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="state">State / Province*</label>
															<select name="state" class="select2 state validate select2-hidden-accessible" tabindex="-1" aria-hidden="true">
																<option value=""></option>
																<option value="3151">Eastern Province</option>
																<option value="3152">Hail</option>
																<option value="3153">Jawf</option>
																<option value="3154">Jizan</option>
															</select>
															<span class="spin_icon" style="display: none;"><i class="fa fa-spinner fa-spin"></i></span>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="city">City *</label>
															<select name="city" class="select2 city validate select2-hidden-accessible" tabindex="-1" aria-hidden="true">
																<option value=""></option>
															</select>
															<span class="spin_icon"><i class="fa fa-spinner fa-spin"></i></span>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="address">Address</label>
															<input id="address" name="address" class="form-control address" type="text" value="" maxlength="100">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="zip_code">Zip-code</label>
															<input id="zip_code" name="zip_code" class="form-control zip_code" type="text" value="">
														</div>
													</div>
												</div>
											</div>
										</div>
										<div id="staff_info">
											<span class="main_label">Staff Information</span>
											<div class="rows_wrap">
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="employee_id">Employee ID *</label>
															<input class="form-control employee_id validate" type="text" name="employee_id" value="" autocomplete="off">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="department">Department *</label>
															<select class="form-control select2 department filter validate select2-hidden-accessible" name="department" tabindex="-1" aria-hidden="true">
																<option value=""></option>
																<option value="">Information Technology</option>
																<option value="">Technical</option>
																<option value="">Service</option>
																<option value="">Human Resources</option>
															</select>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="designation">Designation *</label>
															<select class="form-control select2 designation filter validate select2-hidden-accessible" name="department" tabindex="-1" aria-hidden="true">
																<option value=""></option>
																<option value="">Information Technology</option>
																<option value="">Technical</option>
															</select>
															<span class="spin_icon"><i class="fa fa-spinner fa-spin"></i></span>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="work_location">Work Location *</label>
															<select class="form-control select2 designation filter validate select2-hidden-accessible" name="department" tabindex="-1" aria-hidden="true">
																<option value=""></option>
																<option value="">Saudi Arabia</option>
																<option value="">Al Khobar</option>
																<option value="">Riyadh</option>
															</select>
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="date_of_joining">Date of Joining *</label>
															<div class="input-group datepicker_wrap">
																<input id="date_joining_wrap" name="date_of_joining" class="form-control date_of_joining validate calender_popup_date_open" value="" type="text">
																<span class="input-group-btn">
																	<button class="btn default custom_calender_date_open" type="button" style="margin: 0" value="">
																		<i class="fa fa-calendar"></i>
																	</button>
																</span>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div id="system_user_info">
											<span class="main_label">System user information <span class="pass_change green">Change Password</span></span>
											<!-- <span class="main_label">System user information</span> -->
											<div class="rows_wrap">
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="system_user_name">User name</label>
															<input type="hidden" id="user_name_updated" value="">
															<input class="form-control system_user_name" type="text" name="system_user_name" value="" autocomplete="off">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="group">Group</label>
															<select class="form-control select2 group filter select2-hidden-accessible" name="group" tabindex="-1" aria-hidden="true">
																<option value=""></option>
																<option value="ab67a780-9185-11e9-a233-75d199b69f0e">Management</option>
																<option value="a1fa8ec0-918a-11e9-8096-3f0ab41313f9">Technical</option>
																<option value="4d5e9a40-918c-11e9-aab8-1dd2a840d2ca">Head Of Projects</option>
																<option value="cc37dee0-918d-11e9-a175-43af8b862eb6">Riyadh Branch Team</option>
															</select>
															<span class="spin_icon"><i class="fa fa-spinner fa-spin"></i></span>
														</div>
													</div>
												</div>
												<div class="row m_0 password_wrap" style="display: none;">
													<div class="col-md-12">
														<div class="form-group">
															<label for="password">Password</label>
															<input class="form-control password" type="password" name="password" value="" autocomplete="off">
														</div>
													</div>
												</div>
											</div>
										</div>
										<div id="social_profile">
											<span class="main_label">Social Profile</span>
											<div class="rows_wrap">
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="linked_in">Linked-in</label>
															<input id="linked_in" name="linked_in" class="form-control url linked_in" type="text" placeholder="https://www.linkedin.com/">
															<input type="hidden" class="update_social_link linked_in_update" name="linked_in_update" value="0">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="twitter">Twitter</label>
															<input id="twitter" name="twitter" class="form-control url twitter" type="text" placeholder="https://twitter.com/">
															<input type="hidden" class="update_social_link twitter_update" name="twitter_update" value="0">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="facebook">Facebook</label>
															<input id="facebook" name="facebook" class="form-control url facebook" type="text" placeholder="https://www.facebook.com/">
															<input type="hidden" class="update_social_link facebook_update" name="facebook_update" value="0">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="google">Google</label>
															<input name="google" class="form-control url google" type="text" placeholder="https://plus.google.com">
															<input type="hidden" class="update_social_link google_update" name="google_update" value="0">
														</div>
													</div>
												</div>
											</div>
										</div>
										<div id="additional_information" style="display: none;">
											<span class="main_label">Additional information</span>
											<div class="rows_wrap">
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="created_by">Created by</label>
															<input class="form-control created_by" value="" id="created_by" disabled="disabled" type="text" name="created_by" autocomplete="off">
														</div>
													</div>
												</div>
												<div class="row m_0">
													<div class="col-md-12">
														<div class="form-group">
															<label for="created_at">Created at</label>
															<input class="form-control created_at" id="created_at" disabled="disabled" type="text" name="created_at" value="" autocomplete="off">
														</div>
													</div>
												</div>

											</div>
										</div>
									</div>
									<!--RIGHT SIDE-->
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<div class="row" style="">
								<div class="col-sm-6">
									<div class="alert_box">There are errors on page</div>
								</div>
								<div class="col-sm-6">
									<button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
									<button type="submit" class="btn theme_btn_round save_staff" data-save="1"> Save</button>
								</div>
							</div>
						</div>
					</form>
				</div>
				<!-- /.modal-Task -->
				<!-- <div class="alert_box">There are errors on page</div>-->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- //UPDATE CONTACT MODAL END// -->
		<!-- //UPLOAD SECTION START// -->
		<div class="modal fade uplaod_wrap" id="modal_image_uplaod">
			<div class="modal-dialog modal-content uplodImg" style="width: 390px;">
				<form id="upload_pr_pc" class="modal-content" action="" enctype="multipart/form-data" method="POST">
					<input type="hidden" name="_token" value="">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">Upload Photo</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-12 text-center">
								<div id="upload-demo" style="width: 360px; position: relative;">
									<button style="font-size:24px; position: absolute; top: 30px; right: 30px; z-index: 9999;" id="upload1"><i class="fa fa-upload"></i></button>
								</div>
								<input type="file" id="upload" value="" name="image" style="display: none;">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default pull-left"  data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-success upload-customer-image">Upload Image</button>
					</div>
				</form>
			</div>
		</div>
		<!-- //UPLOAD SECTION END// -->

		<!-- //SWEET_ALERT START// -->
		<div id="sweetalert_wrap" class="sweet_alert_wrap">
			<!-- Sweet alert -->
			<div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" >
				<div class="sa-icon sa-warning pulseWarning" style="display: block;">
					<span class="sa-body pulseWarningIns"></span>
					<span class="sa-dot pulseWarningIns"></span>
				</div>
				<h2>Are You Sure?</h2>
				<p>Your recently changed data in this model will be lost.</p>
				<div class="sa-button-container">
					<button class="cancel" tabindex="2">Cancel</button>
					<div class="sa-confirm-button-container">
						<button class="confirm" tabindex="1">Confirm</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //SWEET_ALERT END// -->
        @endsection
        @section('admin_css')
        <style>
			* {
				box-sizing: border-box;
				-moz-box-sizing: border-box; 
			}
			.iti__hide {display: none;}
			pre {
				margin: 0 !important;
				display: inline-block;
			}
			.token.operator,
			.token.entity,
			.token.url,
			.language-css .token.string,
			.style .token.string,
			.token.variable {background: none; }
			.iti input, .iti button {
				height: 35px;
				margin: 0;
				padding: 6px 12px;
				border-radius: 2px;
				font-family: inherit;
				font-size: 100%;
				color: inherit; 
			}
			input[disabled], button[disabled] {background-color: #eee;}
			::-webkit-input-placeholder {color: #BBB;}
			::-moz-placeholder {
				/* Firefox 19+ */
				color: #BBB;
				opacity: 1; 
			}
			:-ms-input-placeholder {color: #BBB; }
			#result {margin-bottom: 100px; }
			.page-header-fixed .page-container {margin-top: 0;}
			.page-header-fixed .page-content-wrapper {margin-top: 60px;}


			/* body .page-container {height: 100%;} */
			body .page-container {
				background-color: #ffffff;
				min-height: 100%;
				height: auto !important;
				margin: 60px auto -33px;
			}
			body .page-container {
				min-height: 100%;
			}
			body .page-footer {
				background-color: #364150;
				height: 33px;
				position: relative;
			}
			.page-sidebar-wrapper .page-sidebar {margin-top: 60px;}
        </style>
        @stop
        @section('admin_js')
		

		<script type="text/javascript">
			// $(document).ready(function(){
			// 	$('.date_of_joining').datepicker();
			// });

			//RESTRICT DATE FROM YEAR TO DATE//
			var date = new Date();
			//Date open either previous or upcoming
			$('.calender_popup_date_open').datepicker({
				format: 'dd-mm-yyyy',
				pickerPosition: "top-left",
				autoclose: true,
				//startDate: date
			}).on('hide.bs.modal', function (event) {
				// prevent datepicker from firing bootstrap modal "show.bs.modal"
				event.stopPropagation();
			});
			$('.modal-fullscreen.modal .modal-body').scroll(function(){
				$("#date_joining_wrap").datepicker("hide");
				$("#date_joining_wrap").blur();
			});
			$('body').on('click', '.custom_calender_date_open', function () {
				$(this).parent().parent().find('.calender_popup_date_open').trigger('focus');
			});
			var datePicker = $(".calendar").datepicker({});
			var t ;
			$( document ).on(
				'DOMMouseScroll mousewheel scroll',
				'#myModal', 
				function(){       
					window.clearTimeout( t );
					t = window.setTimeout( function(){            
						$('.calendar').datepicker('place')
					}, 100 );        
				}
			);

		</script>
		<script type="text/javascript">
			var input = document.querySelector("#int_phone");
			window.intlTelInput(input, {
			// allowDropdown: false,
			// autoHideDialCode: false,
			// autoPlaceholder: "off",
			// dropdownContainer: document.body,
			// excludeCountries: ["us"],
			// formatOnDisplay: false,
			// geoIpLookup: function(callback) {
			//   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
			//     var countryCode = (resp && resp.country) ? resp.country : "";
			//     callback(countryCode);
			//   });
			// },
			// hiddenInput: "full_number",
			// initialCountry: "auto",
			// localizedCountries: { 'de': 'Deutschland' },
			// nationalMode: false,
			// onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
			// placeholderNumberType: "MOBILE",
			// preferredCountries: ['cn', 'jp'],
			// separateDialCode: true,
			utilsScript: "js/utils.js",
			});
		</script>
		<script  type="text/javascript">
			$(document).ready(function(){
				$(document).on('click','.sweet-overlay',function(){
			$('#sweetalert_wrap').show();
			});
				$(document).on('click','.cancel',function(){
					$('#sweetalert_wrap').hide();
				});
			});





			/*
			|--------------------------------------------------------------------------
			| Upload display picture
			|--------------------------------------------------------------------------
			*/
			$(document).ready(function () {
				$('.upload-customer-image').on('click', function (ev) {
					ev.preventDefault();
					var url = $('#upload_pr_pc').attr('action');
	//            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
					$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
					$uploadCrop.croppie('result', {
						type: 'canvas',
						size: 'viewport'
					}).then(function (resp) {
						$('#busyloading').show();
						var file_data = $('#upload').prop('files')[0];
						var formData = new FormData($('#upload_pr_pc')[0]);
						formData.append('image', file_data);
						formData.append('contact_display_picture', $('#contact_display_picture').val());
						formData.append('dp_type', $('#dp_type').val());
						formData.append('thumbnail', resp);
						var img_ext = openFile(file_data['name'])
						if(img_ext == 0){
							alertbox('danger', file_data['name']+' this file desnot valied image, please upload png,bmp,jpeg and jpg!');
							$('#busyloading').hide();
						}
						if(file_data['size'] > 2000000){
							alertbox('danger', file_data['name'] +' this image size too large, upload to less than 2MB!');
							$('#busyloading').hide();
						}
						$.ajax({
							url: url,
							type: "POST",
							contentType: false,
							processData: false,
							data: formData,
							success: function (result) {
								var image_path = result.thumbnail;
								if (result.status == 1000) {
									$('.display_picture').attr('src', image_path);
									$('#modal_image_uplaod').modal('hide');
								}
								$('#busyloading').hide();
							}
						});
					});
				});
			});
			//PASSWORD CHANGE START
			$('body').on('click', '.update_load_form', function (e) {
				if (e) {
					$('.password_wrap').hide();
					$('.pass_change').text('Change Password').show();
				} else {
					$('.password_wrap').show();
					$('.pass_change').hide();
				}
			});
			$('body').on('click', '.pass_change', function () {
				var this_text = $(this).text();
				if (this_text == 'Change Password') {
					$('.password_wrap').slideDown('slow');
					$(this).text('Cancel');
				} else {
					$('.password_wrap').slideUp('slow');
					$(this).text('Change Password');
				}
			});
			//PASSWORD CHANGE END

		</script>
	


@stop