<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="panel">
<div class="panel-heading">Experience Details</div>
<div class="panel-body">
<div class="team-list">
<div class="team-details">
<div class="individual-fields">
<div class="input-divs hidden-div">
<input type="hidden" name="team_id[]" value="">
</div>
<div class="text-right">Organization Name</div>
<div class="right-float">
<div class="input-divs ui-widget left-float">
<input type="text" name="team_name[]" class="organisation-name form-control">
</div>
<div class="close-div-button close-added-div hidden-div"><a class="delete" style="cirsor:pointer" title="Delete"> <i class="fa fa-trash-o"></i></a></div>
<div class="reset-button hidden-div"><a class="tooltip reset" title="Reset"><i class="fa fa-undo"></i></a></div>
<div class="organization-options"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="individual-fields">
<div class="text-right">Designation</div>
<div class="right-float">
<div class="input-divs uli-widget">
<input type="text" name="Designation[]" class="designation-tags">
</div>
<div class="designation-options"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="individual-fields">
<div class="text-right">Period</div>
<div class="right-float">
<div class="date-div input-divs">
<div class="inline">
<span class="">From</span>
<div class="select">
<select name="from_month[]">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
<div class="select from-year">
<select name="from_year[]">
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
</select>
</div>
</div>
<div class="inline to">
<span class="">To</span>
<div class="current-position hidden-div">Present</div>
<div class="select to-month">
<select name="to_month[]">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>
<div class="select to-year">
<select name="to_year[]">
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000"> 2000</option>
<option value="2001"> 2001</option>
<option value="2002">2002</option>
<option value="2003"> 2003</option>
<option value="2004"> 2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012"> 2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
</select>
</div>
<div class="current-field-checkbox experience-checkbox">
<label for="isCurrentExperience">
<input type="checkbox" name="current_experience[]" id="isCurrentExperience"> I still work here.
</label>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div class="add-more teams"><a><span>+</span>Add another organization</a></div>
</div>
</div>
$(function(){
// when use click on close button
$('.team-list').on("click",".close-div-button",function(){
if($(this).parents('.team-details').find('input[name^=team_id]').val()!='')
{
var id=$(this).parents('.team-details').find('input[name^=team_id]').val();
var r=confirm('Are you sure you want to delete this location?');
if(r==true)
{
$(this).parents('.team-details').remove();
$.ajax({
url: "/index.php/creative/delete_team",
type:"post",
data:{"id":id},
success:function(data){
console.log(data);
}
});
$('.team-list').find('.team-details').last().css("border-bottom","0px");
}
else if(r==false){
return;
}
}
else{
$(this).parents('.team-details').remove();
$('.team-list').find('.team-details').last().css("border-bottom","0px");
}
});
// when use click on reset button
$('.team-list').on("click",".reset-button",function(){
var team_container=$(this).parents('.team-details');
console.log(team_container);
$(team_container).find("input").not("input[name^=team_id]").val('');
// $(team_container).find("select").val('');
$(team_container).find("textarea").val('');
$(team_container).find("select").each(function(){
$('option:selected',this).removeAttr('selected');
// $(this).val('');
});
$(team_container).find('.gmaps-output-latitude').html('');
$(team_container).find('.gmaps-output-longitude').html('');
$(team_container).find("select[name='from_month[]'] option[value='January']").attr("selected","selected");
$(team_container).find("select[name='from_year[]'] option[value='2016']").attr("selected","selected");
$(team_container).find("select[name='to_month[]'] option[value='January']").attr("selected","selected");
$(team_container).find("select[name='to_year[]'] option[value='2021']").attr("selected","selected");
$(team_container).find('.to').next().removeClass('inlineBlock');
$(team_container).find('.to').next().addClass('hidden-div');
$(team_container).find('.current-position').hide();
$(team_container).find('.current-field-checkbox').show();
$(team_container).find('.to-month').show();
$(team_container).find('.to-year').show();
$(team_container).find("input[type=checkbox]").prop("checked",false);
$(team_container).find('.tagit-choice').remove();
});
// when use click on add more item button
var i=0;var a=0;
var country="";
var state="";
$('select[name=country]').val(country);
$('select[name=state]').val(state);
$('.country').each(function(){
if($(this).val()!='India')
{
$(this).parents('.individual-fields').siblings('.state').hide();
}
});
if($('#location-country').val()!="India")
{
$('#location-state').hide();
}
else{
$('select[name=state]').addClass('required');
}
});
var i=0;
$('.teams').on("click",function(){
i++;
console.log('cp1');
var team_div =$('.team-details')[0];
var cloned_team_div=$(team_div).clone();
$(cloned_team_div).find("input").val('')
$(cloned_team_div).find('.tagit-choice,.tagit-new').remove();
$('.team-details').css("border-bottom","1px solid #DCE0E0");
$(cloned_team_div).css("border-bottom","0px");
$(cloned_team_div).find("textarea").html('');
$(cloned_team_div).find("textarea").val('');
$(cloned_team_div).find("select").each(function(){
var value=$(this).val();
$('option:selected',this).removeAttr('selected');
});
$(cloned_team_div).find("select[name='from_month[]'] option[value='January']").attr("selected","selected");
$(cloned_team_div).find("select[name='from_year[]'] option[value='2015']").attr("selected","selected");
$(cloned_team_div).find("select[name='to_month[]'] option[value='January']").attr("selected","selected");
$(cloned_team_div).find("select[name='to_year[]'] option[value='2015']").attr("selected","selected");
// $(cloned_team_div).find('.type-of-experience').val('creative');
$(cloned_team_div).find('.tags-div').show();
$(cloned_team_div).find('.current-position').removeClass('inlineBlock');
$(cloned_team_div).find('.current-position').addClass('hidden-div');
$(cloned_team_div).find('.to-month').css("display","inline-block");
$(cloned_team_div).find('.to-year').css("display","inline-block");
$(cloned_team_div).find('.close-div-button').show();
$(cloned_team_div).find('.reset-button').hide();
$(cloned_team_div).find('input[type=checkbox]').prop("checked",false);
$(cloned_team_div).find('input[type=checkbox]').val()==0;
$(cloned_team_div).clone().appendTo('.team-list');
});
