@extends('layouts.default')
@section('title', 'Dashboard')

@section('new_button')
<div class="col-md-3 col-lg-3 col-sm-12 pull-left">
    <div class="btn btn-default btn-sm date-range-pic">  
        <div id="data-range" class="range-padding">
            <i class="material-icons dateRangeIcon" style="font-size:10px;top:0px;"> calendar_today </i>&nbsp;
            <input type="text" class="text-black" id="dataRange" value="This Month" style="font-size:12px;">
        </div>
    </div>    
</div>
@endsection

<style>
	.linethrough {
		text-decoration: line-through;
	}

	.table-height-372 {
		height: 372px !important;
		overflow: auto;
	}
</style>

@section('content')
<style>
	.height-overflow {
	height: 300px !important;
	overflow: auto !important;
	}
    .list-group {
	overflow-y: scroll;
	height: 427px;
	}
	.list-grouppersonal {
	overflow-y: scroll;
	/* height: 427px; */
	}
	.card-header .badge {
	position: relative;
	top: -10px;
	}
    .count {
	position: absolute;
	width: 10px;
	height: 20px;
	line-height: 20px;
	color: white;
	font-weight: bold;
	}
	.mapael .mapTooltip {
	position: absolute;
	background-color: #474c4b;
	moz-opacity: 0.70;
	opacity: 0.70;
	filter: alpha(opacity=70);
	border-radius: 10px;
	padding: 10px;
	z-index: 1000;
	max-width: 200px;
	display: none;
	color: #fff;
	}
	.map circle {
	color: black;
	transform-origin: 50% 50%;
	}

.modal-dialog {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	max-width: 500rem;
	margin: 0 auto;
	height: auto;
	padding: 50px 0 50px 0;
}
</style>

<div class="row clearfix">
	{{ Form::hidden('total_consultants', $all['total'], ['id'=>'total_consultants_hidden'])}}
	{{-- ALL --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-Consultants-Dashboard"></span>
			</div>
			<a class="div10 10total" href="#" onclick="gotoList('all')">
				<div class="card-DboardStats-Count">
					<div class="card-DboardStats-CountNum" id="card1">{{ $all['today'] }}</div>
					<p>Consultnats</p>
				</div>
			</a>
		</div>
	</div>
	{{-- ENQUIRY --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-Enquiry-Dashboard"></span>
			</div>
			<a class="div11 11total" href="#" onclick="gotoList('enquiry')">
				<div class="card-DboardStats-Count">
					<div class="card-DboardStats-CountNum" id="card2">{{ $enquiry['today'] }}</div>
					<p>Enquiry</p>
				</div>
			</a>
		</div>
	</div>
	{{-- PROSPECTS --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-Admins-Dashboard"></span>
			</div>
			<a class="div12 12total" href="#" onclick="gotoList('prospects')">
				<div class="card-DboardStats-Count">
					<div class="card-DboardStats-CountNum" id="card3">{{ $prospects['today'] }}</div>
					<p>Prospects</p>
				</div>
			</a>
		</div>
	</div>
	{{-- IN TRAINING --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-inTraining-Dashboard"></span>
			</div>
			<a class="div13 13total" href="#" onclick="gotoList('in_training')">
				<div class="card-DboardStats-Count">
					<div class="card-DboardStats-CountNum" id="card4">{{ $inTraining['today'] }}</div>
					<p>In Training</p>
				</div>
			</a>
		</div>
	</div>
	{{-- ON BENCH --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-onBench-Dashboard"></span>
			</div>
			<a class="div2 2total" href="#" onclick="gotoList('on_bench')">
				<div class="card-DboardStats-Count">
					<div class="card-DboardStats-CountNum" id="card5">{{ $onBench['today'] + $openBench['today'] }}</div>
					<p>Bench</p>
				</div>
			</a>
		</div>
	</div>
	{{-- IN JOB --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-inJob-Dashboard"></span>
			</div>
			<a class="div3 3total" href="#" onclick="gotoList('in_job')">
				<div class="card-DboardStats-Count">
					<div class="card-DboardStats-CountNum" id="card6">{{ $inJob['today'] }}</div>
					<p>In Job</p>
				</div>
			</a>
		</div>
	</div>
	{{-- DROPPED --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-Dropped-Dashboard"></span>
			</div>
			<a class="div14 14total" href="#" onclick="gotoList('dropped')">
				<div class="card-DboardStats-Count">
					<div class="card-DboardStats-CountNum"  id="card7">{{ $dropped['today'] }}</div>
					<p>Dropped</p>
				</div>
			</a>
		</div>
	</div>
	{{-- VISA TYPES --}}
	<div class="col-lg-3">
		<div class="card-DboardStats">
			<div class="icon60">
				<span class="icon24 icon-Visatypes-Dashboard"></span>
			</div>
			<div id="span">
				<a href="{{ url('consultant_list/all') }}">
					<div class="card-DboardStats-Count">
						<div class="card-DboardStats-CountNum">{{ $all['total'] }}</div>
						<p>Total Visas</p>
					</div>
				</a>
			</div>
			{!! Form::select('visa_status', $visas + ['total'=>'Total Visas'], 'total', ['id'=>'visa_status_1',
			'class'=>'selectpicker'])
			!!}
		</div>
	</div>
</div>

{{ Form::open(['url'=>'consultant_list', 'method'=>'POST', 'id'=>'listForm', 'style'=>'display: none;']) }}
{{ Form::hidden('type', null, ['id'=>'listType']) }}
{{ Form::hidden('list_dates', null, ['id'=>'listDates']) }}
{{ Form::close() }}
<script>
	function gotoList(type) {
		var ldates = $("#dataRange").val();
		$("#listType").val(type);
		$("#listDates").val(ldates);
		$("#listForm").submit();
	}
</script>

{{-- Consultant Calls --}}
{{ Form::hidden('load_more1', 0, ['id'=>'load_more1']) }}
<div class="row clearfix">
	<div class="col-md-7 col-sm-12 col-xs-12">
		<h4 class="ml-3">My Tasks</h4>
		<table class="table table-horizantal table-filter">
			<thead>
				<tr>
					<th>Call back date</th>
					<th>Consultant</th>
					<th>Call Status</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody id="loadMoreDiv1">
				<tr>
					<td colspan="6" class="text-right">
						<a type="button" href="javascript::void(0)" onclick="loadMore1()">load more...</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-md-5 col-sm-12 col-xs-12">
		<h4 class="ml-3">
			To Do List 
			<button class="btn btn-xs btn-primary float-right" onclick="$('#addTaskRow').slideDown();">
				<i class="material-icons" style="font-size: 12px;">add</i>
			</button>
		</h4>
		<table class="table table-bordered table-striped">
			<thead>
				<tr>
					<th>Task</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody id="taskList"></tbody>
		</table>
	</div>
</div>

{{-- Consultant List --}}
{{ Form::hidden('load_more2', 0, ['id'=>'load_more2']) }}
<div class="row clearfix">
	<h4 class="ml-3">Recent Consultants List</h4>
	<div class="col-md-12 col-sm-12 col-xs-12">
		<table class="table table-striped table-bordered dt-responsive nowrap jambo_table table-filter" cellspacing="0">
			<thead>
				<tr>
					<th>Date</th>
					<th>Consultant</th>
					<th>Mobile</th>
					<th>Email</th>
					<th>Technologies</th>
					<th>Visa Type</th>
					<th>Status</th>
					<th>Creater</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody id="loadMoreDiv2">
				<tr>
					<td colspan="9" class="text-right">
						<a href="javascript::void(0)" type="button" onclick="loadMore2()">load more...</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

{{-- Consultant Submissions --}}
@if(count($submissions) > 0)
<div class="row clearfix">
	<h4 class="ml-3">Recent Vendor Submissions</h4>
	<div class="col-md-12 col-sm-12 col-xs-12">
		<table class="table table-striped table-bordered table-filter">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Consultant</th>
                    <th>Job Title</th>
                    <th>Job Location</th>
                    <th>Client Name</th>
                    <th>Client Location</th>
                    <th>Interview Date</th>
                    <th>Job Status</th>
                    <th>Submitted By</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($submissions as $li)
                <tr>
                    <td>{{ date(env('APP_DATE'), strtotime($li->created_at)) }}</td>
					<td><a href="/consultants/{{ $li->consultant?->id }}">{{ ucfirst($li->consultant?->name) }}</a></td>
                    <td>{{ ucwords($li->job?->title) }}</td>
                    <td>{{ ucwords($li->job?->country?->name) }}</td>
                    <td>{{ ucwords($li->job?->client?->name) }}</td>
                    <td>{{ ucwords($li->job?->client?->country?->name) }}</td>
                    <td>{{ ($li->interview_date != '')?date(env('APP_DATE'), strtotime($li->interview_date)):'' }}</td>
                    <td id="sub{{ $li->id }}">
                        @if($li->status != 'joined')
						{{ $vendor_statuses[$li->status] }}
                        @else
                        Joined
                        @endif
                    </td>
                    <td>{{ ucwords($li->creater?->name) }}</td>
                    <td style="display: flex" id="action{{ $li->id }}">
                        <a title="Edit" href="/vendor_submissions/{{$li->id}}/edit"
                            class="btn btn-outline-info btn-circle-iconic btn34"> <i class="material-icons">create</i></a>
                        <a title="Send Mail" onclick="get_mail('{{ $li->consultant?->email }}')"
                            class="btn btn-outline-secondary btn-circle-iconic btn34"> <i class="material-icons"> mail </i></a>
                        <button title="Add Comment" class="btn btn-outline-secondary btn-circle-iconic btn34" type="button"
                                onclick="addComment({{ $li->consultant?->id }})"> <i class="material-icons"> comment </i> </button>
                    </td>
                </tr>             
                @endforeach
            </tbody>
        </table>
	</div>
</div>
@endif

{{-- Consultant Graph --}}
<div class="row clearfix">
	<div class="col-md-12 col-sm-12 col-xs-12">
		<div class="dashboard_graph">
			<div class="card">
				<div class="row ">
					<div class="col-sm-6 col-lg-3">
						{!! Form::select('consultants_select', $statuses, null,
						['class'=>'selectpicker get_graph_data', 'id'=>'consultants_type']) !!}
					</div>
					<div class="col-sm-6 col-lg-3">
						{!! Form::selectYear('consultants_joined_year', 1990, date('Y'), date('Y'), ['class'=>'selectpicker get_graph_data',
						'id'=>'consultants_joined_year']) !!}
					</div>
				</div>
				<div id="consultants_graph" class="demo-placeholder"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>

{{-- Chats --}}
<div class="row clearfix" id="app">
	<div class="col-lg-4 col-sm-12">
		@include('chat.dashboard_chat')
	</div>
	<div class="col-lg-8 col-md-8 col-sm-12 mb-3">
		@include('chat.personal_chat')
	</div>
</div>

{{-- Weather widgets --}}
<div class="row clearfix">
	<!-- start of weather widget -->
	<div class="col-lg-6 ">
		<div class="col-md-12 col-lg-12 m-0 p-0">
			<div class="col-md-12 col-sm-12 col-xs-12 pl-0" style="height: 315px !important;">
				<a class="weatherwidget-io" href="https://forecast7.com/en/39d77n86d16/new-york/?unit=us"
					data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original">NEW YORK WEATHER</a>
				<div id="awtd1504522389802" class="aw-widget-36hour" data-locationkey="349727" data-unit="f"
					data-language="en-us" data-useip="false" data-uid="awtd1504522389802" data-editlocation="true"
					style="height: 417px; "></div>
				<script>
					!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
				</script>
			</div>
		</div>
		<div class="col-md-12 card mt-3">
			@include('includes.weather-time')
		</div>
		<div class="col-md-12 mt-2 card">
			@include('includes.timezone')
		</div>
	</div>
	{{-- Client & Consultant Location --}}
	<div class="col-lg-6 ">
		<div class="card" style="height: 100%;">
			<div class="row">
				<div class="col-sm-8">
					<h3>States Wise <span id="list_type"> Clients </span> Map</h3>
				</div>
				<div class="col-sm-4">
					<div class="form-group">
						{!! Form::select('map_data_type', ['clients'=>'Client', 'consultants' => 'Consultant'],
						'consultants', ['class'=>'selectpicker', 'style'=>'width:100%;','id'=>'map_data_type', 'onchange'=>'mapLoadData($(this).val())']) !!}
						<div class="help-block with-errors"></div>
					</div>
				</div>
			</div>
			<div class="mapcontainer mapcontainer_refresh mt-3">
				<div class="map"><span>Alternative content for the map</span></div>
			</div>
		</div>
	</div>
	<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
		<div class="row">
			<a href="https://www.accuweather.com/en/br/indianopolis/2725881/current-weather/2725881"
				class="aw-widget-legal">
			</a>
			<div id="awtd1504522389802" class="aw-widget-36hour" data-locationkey="2725881" data-unit="f"
				data-language="en-us" data-useip="false" data-uid="awtd1504522389802" data-editlocation="true"
				style="height: 420px;"></div>
			<script type="text/javascript" src="https://oap.accuweather.com/launch.js"></script>
		</div>
	</div>
	<!-- end of weather widget -->
</div>

<!-- New Mail Modal -->
@include('includes.new-mail')
{{-- Ends New Mail --}}

{{-- Add Comment --}}
@include('includes.new-comment')
{{-- Ends Add Comment --}}

{{-- Live Data --}}
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="liveData">
	<div class="modal-dialog modal-lg">
	  <div class="modal-content">
		<div class="modal-body">
			<div class="row">
				<div class="col-lg-3">
					<div class="card-DboardStats">
						<a class="div" href="#">
							<div class="card-DboardStats-Count">
								<div class="card-DboardStats-CountNum" id="card1">{{ $ttl_opts }}</div>
								<p>Total OPT</p>
							</div>
						</a>
					</div>
				</div>

				<div class="col-lg-3">
					<div class="card-DboardStats">
						<a class="div10 10total" href="#" onclick="gotoList('all')">
							<div class="card-DboardStats-Count">
								<div class="card-DboardStats-CountNum" id="card1">{{ $ttl_consultants }}</div>
								<p>Consultnats</p>
							</div>
						</a>
					</div>
				</div>

				<div class="col-lg-3">
					<div class="card-DboardStats">
						<a class="div2 2total" href="#" onclick="gotoList('on_bench')">
							<div class="card-DboardStats-Count">
								<div class="card-DboardStats-CountNum" id="card5">{{ $ttl_training }}</div>
								<p>Training</p>
							</div>
						</a>
					</div>
				</div>

				<div class="col-lg-3">
					<div class="card-DboardStats">
						<a class="div2 2total" href="#" onclick="gotoList('on_bench')">
							<div class="card-DboardStats-Count">
								<div class="card-DboardStats-CountNum" id="card5">{{ $ttl_marketing }}</div>
								<p>Marketing</p>
							</div>
						</a>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-4">
					<canvas id="myChart" width="250" height="250"></canvas>
				</div>
				
				<div class="col-md-4">
					<canvas id="myChartline" width="250" height="250"></canvas>
				</div>

				<div class="col-md-4" id="optCharts">
					<opt-charts :width="width" :height="height"></opt-charts>
				</div>

				<div class="col-md-4" id="barChart">
					<bar-charts :labelsapp="labelsApp" :width="width" :height="height"></bar-charts>
				</div>

				<div class="col-md-4" id="lineChart">
					<line-charts :cdata="cdata" :clabels="clabels" :width="width" :height="height"></line-charts>
				</div>
			</div>
		</div>
	  </div>
	</div>	
  </div>
{{-- End Live Data --}}

{{-- Includes --}}
@include('includes.date-range-script')
@include('includes.morris-graph')
@include('includes.datepicker')

{{-- Chart JS --}}
{{-- <script src="{{ asset('theme/plugins/chart.js-3.9.1/package/dist/chart.js') }}"></script> --}}

<script>
const ctx = document.getElementById('myChart');

const data = {
  labels: [
    'Enquiry    ',
    'Marketing   ',
    'In Job'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [@json($ttl_enquiry), @json($ttl_marketing), @json($ttl_injob)],
    backgroundColor: [
      'rgb(255, 165, 0, .5)',
      'rgb(255, 0, 0, .5)',
      'rgb(60, 179, 113, .5)'
    ]
  }]
};
const myChart = new Chart(ctx, {
    type: 'polarArea',
    data: data,
	
    options: {
		responsive: true,
		scales: {
			r: {
				pointLabels: {
					display: true,
					centerPointLabels: true,
					font: {
						size: 18
					}
				}
			}
		},
		legend: {
			position: 'top',
		},
		plugins: {
			title: {
				display: true,
				text: 'Consultants'
			}
		}
	}
});

// Line Graph
const DATA_COUNT = 12;
const llabels = [];
for (let i = 0; i <= DATA_COUNT; ++i) {
  llabels.push(i.toString());
}

const datapoints = [0, 20, 20, 60, 60, 120, 0, 180, 120, 125, 105, 110, 170];
const datapoints1 = [0, 10, 30, 40, 50, 100, 50, 120, 120, 125, 105, 110, 170];
const datapoints2 = [0, 5, 15, 20, 30, 90, 30, 90, 120, 125, 80, 90, 170];
const lineData = {
  labels: llabels,
  datasets: [
    {
      label: 'Enquiry   ',
      data: datapoints,
      borderColor: 'red',
      fill: false,
      cubicInterpolationMode: 'monotone',
      tension: 0.4
    }, {
      label: 'Marketing   ',
      data: datapoints1,
      borderColor: 'blue',
      fill: false,
      tension: 0.4
    }, {
      label: 'In Job',
      data: datapoints2,
      borderColor: 'green',
      fill: false
    }
  ]
};

const lctx = document.getElementById('myChartline');
const config = new Chart(lctx, {
  type: 'line',
  data: lineData,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Consultants'
      },
    },
    interaction: {
      intersect: false,
    },
    scales: {
      x: {
        display: true,
        title: {
          display: true
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Value'
        },
        suggestedMin: 0,
        suggestedMax: 200
      }
    }
  },
});
</script>


{{-- Call Status --}}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#callStatusMd" id="statusModalBtn"></button>
  
  <!-- Modal -->
  <div class="modal fade" id="callStatusMd" tabindex="-1" role="dialog" aria-labelledby="callStatusMdTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeBtn">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
			{{ Form::textGroup('callback_date', 'Callback Date', '', ['id' => 'callback_date', 'class' => 'form-control', 'data-inputmask' => '\'alias\': \'yyyy-mm-dd\'']) }}

			{{ Form::hidden('cl_status', null, ['id'=>'cl_status']) }}
			{{ Form::hidden('lead_id', null, ['id'=>'lead_id']) }}
			{{ Form::hidden('lead_id', null, ['id'=>'selectId']) }}
		</div>
	  </div>
	</div>
  </div>
{{-- Ends Call Status --}}

{{-- MAP --}}
<script src="{{ asset('theme/plugins/map/maph.js') }}"></script>
<script src="{{ asset('theme/plugins/map/us_aea.js') }}"></script>

<script>
	function modifyData(id) {
	    var type = $("#type"+id).val();
	    $(".div"+id).hide();
	    $("."+id+type).show();
	}
	
	// Visa consultants count on change
	    $("#visa_status_1").change(function(){
	        var status = $(this).val();
			var mdate = $("#dataRange").val();
			
			var sts = status.replace('_', ' ').replace(/\b[a-z]/g, function(letter) {
					return letter.toUpperCase();
				});
				
	        if(status!='total'){
	            $(this).parent("span").siblings("a").remove();
	            $.ajax({
	                url: '/visa_consultant_count',
					data: 'status='+status+'&mdates='+mdate,
	                success: function(result){
	                    var getResult = JSON.parse(result);
	                    var count = getResult.count;
	                    var percentage = getResult.percentage;
	                    var color = percentage>0?'green':'red';
	                    var sort = percentage>0?'asc':'desc';
	                    
	                	var content = '<a href="visa_consultant_list/'+status+'"><div class="card-DboardStats-Count"><div class="card-DboardStats-CountNum">'+count+'</div><p>'+sts+'</p></div>';
						
						$("#span").html(content);
	                }
	            });
	        } else {
				var ttl = $("#total_consultants_hidden").val();

				var content = '<a href="consultant_list/all"><div class="card-DboardStats-Count"><div class="card-DboardStats-CountNum">'+ttl+'</div><p>Total Visas</p></div>';

				$("#span").html(content);
			}
	    });
	
	// Graph Function
	    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
	
	    var chart = Morris.Area({
	        element: 'consultants_graph',
	        resize: true,
	        data: {!! $consultant_graph_count !!},
	        xkey: 'month',
	        ykeys: ['count'],
	        labels: ['Consultants'],
	        lineColors:['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
	        xLabelFormat: function(x){
	            var month = months[x.getMonth()];
	            return month;
	        },
	        dateFormat: function(x){
	            var month = months[new Date(x).getMonth()];
	            return month;
	        },
	    });
	
	    $(".get_graph_data").change(function(){
	        var type = $("#consultants_type").val();
	        var year = $("#consultants_joined_year").val();
	        $.ajax({
	            url: '/consultants_graph',
	            data: 'type='+type+'&year='+year,
	            success: function(result){
	                document.getElementById('consultants_graph').innerHTML = "";
	                Morris.Area({
	                    element: 'consultants_graph',
	                    resize: true,
	                    data: JSON.parse(result),
	                    xkey: 'month',
	                    ykeys: ['count'],
	                    labels: ['Joined Consultants'],
	                    lineColors:['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
	                    xLabelFormat: function(x){
	                        var month = months[x.getMonth()];
	                        return month;
	                    },
	                    dateFormat: function(x){
	                        var month = months[new Date(x).getMonth()];
	                        return month;
	                    },
	                });
	            }
	        });
	    });
	
	// Datapicker
		var today = new Date();
		$('#datepicker1').inputmask('yyyy-mm-dd', { placeholder: 'yyyy-mm-dd' });
		$('#datepicker1').datepicker({
			format: 'yyyy-mm-dd',
			todayHighlight: true,
			clearBtn: true,
			endDate: today
		});
	
		$('#callback_date').inputmask('yyyy-mm-dd', { placeholder: 'yyyy-mm-dd' });
		$('#callback_date').datepicker({
			format: 'yyyy-mm-dd',
			todayHighlight: true,
			clearBtn: true,
			endDate: today
		});
	
	// TimePicker
		$('input.timepicker123').timepicker({
			timeFormat: 'HH:mm:ss',
			minTime: '11:45:00', // 11:45:00 AM,
			maxHour: 20,
			maxMinutes: 30,
			startTime: new Date(0,0,0,15,0,0), // 3:00:00 PM - noon
			interval: 15 // 15 minutes
		});
	
	
	// MAP    
		mapLoadData('consultants');

		function mapLoadData(dataType){
			var vectorData =  {"HI" : {text : { content :'HI' }}, "AK" : {text : { content :'AK' }}, "FL" : {text : { content :'FL' }}, "NH" : {text : { content :'NH' }}, "MI" : {text : { content :'MI' }}, "VT" : {text : { content :'VT' }}, "ME" : {text : { content :'ME' }}, "RI" : {text : { content :'RI' }}, "NY" : {text : { content :'NY' }}, "PA" : {text : { content :'PA' }}, "NJ" : {text : { content :'NJ' }}, "DE" : {text : { content :'DE' }}, "MD" : {text : { content :'MD' }}, "VA" : {text : { content :'VA' }}, "WV" : {text : { content :'WV' }}, "OH" : {text : { content :'OH' }}, "IN" : {text : { content :'IN' }}, "IL" : {text : { content :'IL' }}, "CT" : {text : { content :'CT' }}, "WI" : {text : { content :'WI' }}, "NC" : {text : { content :'NC' }}, "DC" : {text : { content :'DC' }}, "MA" : {text : { content :'MA' }}, "TN" : {text : { content :'TN' }}, "AR" : {text : { content :'AR' }}, "MO" : {text : { content :'MO' }}, "GA" : {text : { content :'GA' }}, "SC" : {text : { content :'SC' }}, "KY" : {text : { content :'KY' }}, "AL" : {text : { content :'AL' }}, "LA" : {text : { content :'LA' }}, "MS" : {text : { content :'MS' }}, "IA" : {text : { content :'IA' }}, "MN" : {text : { content :'MN' }}, "OK" : {text : { content :'OK' }}, "TX" : {text : { content :'TX' }}, "NM" : {text : { content :'NM' }}, "KS" : {text : { content :'KS' }}, "NE" : {text : { content :'NE' }}, "SD" : {text : { content :'SD' }}, "ND" : {text : { content :'ND' }}, "WY" : {text : { content :'WY' }}, "MT" : {text : { content :'MT' }}, "CO" : {text : { content :'CO' }}, "ID" : {text : { content :'ID' }}, "UT" : {text : { content :'UT' }}, "AZ" : {text : { content :'AZ' }}, "NV" : {text : { content :'NV' }}, "OR" : {text : { content :'OR' }}, "WA" : {text : { content :'WA' }}, "CA" : {text : { content :'CA' }}, }
			
			if(dataType == 'clients'){
				$('#list_type').html('Clients');
			}else{
				$('#list_type').html('Consultants');
			}
		
			$(".mapcontainer").mapael({
				map: {
					name: "usa_states",
					defaultArea: {					
						attrs: {
							fill: "#ffffff",
							stroke: "#212529",
							"stroke-width": 2
						}
					}
				},
				areas: vectorData,					
			});
		
			$.ajax({
				headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				url:'{{ url('vector_map') }}',
				type: 'POST',
				data: 'dataType='+dataType,
				success:function(data){
				var updatedOptions = {'areas': {} , 'plots' : {}};
					$.each(data,function(i,item){
						if(i){
						if(item[0].clients_count != 0 && typeof item[0].clients_count != 'undefined'){
							fillArea = '#0c6dff';
							hrefLink = "{{ url('clientslist_by_map') }}"+'/'+item[0].id;
						}else if(item[0].consultants_count != 0 && typeof item[0].consultants_count != 'undefined'){
							fillArea = '#0c6dff';
							hrefLink = "{{ url('consultants_by_state') }}"+'/'+item[0].id;
						}else if(item[0].implementor_count != 0 && typeof item[0].implementor_count != 'undefined'){
							fillArea = '#0c6dff';
							hrefLink = "{{ url('implementorlist_by_map') }}"+'/'+item[0].id;
						}else{
							fillArea = '#ffffff';
							hrefLink = "#";
						}
						if(typeof item[0].clients_count != 'undefined'){
							updatedOptions.areas[i] = {
								text: { content: "0", attrs: {"font-size": 15} }, 
								tooltip: {
									content: "<span style=\"font-weight:bold;\">"+item[0].name+"<br \/>Clients :"+item[0].clients_count+"<\/span>"
								},
								href: hrefLink,
								attrs: {
								fill: fillArea
								},
							size: 5
							};
						}else if(typeof item[0].implementor_count != 'undefined'){
							updatedOptions.areas[i] = {
								text: { content: "0", attrs: {"font-size": 15} }, 
								tooltip: {
									content: "<span style=\"font-weight:bold;\">"+item[0].name+"<br \/>Implementers :"+item[0].implementor_count+"<\/span>"
								},
								href: hrefLink,
								attrs: {
								fill: fillArea
								},
							size: 5
							};
						}else{
							updatedOptions.areas[i] = {
								text: { content: "0", attrs: {"font-size": 15} }, 
								tooltip: {
									content: "<span style=\"font-weight:bold;\">"+item[0].name+"<br \/>Consultants :"+item[0].consultants_count+"<\/span>"
								},
								href: hrefLink,
								attrs: {
								fill: fillArea
								},
							size: 5
							};
						}
						}
					});
				
					$.each(data,function(i,item){
						if(i){
						if(item[0].clients_count != 0 && typeof item[0].clients_count != 'undefined'){
							var html = $("text[data-id="+i+"]").html();
							var value = html.split("</tspan>",2);
							$("text[data-id="+i+"]").html(value[0] + ' </br>' + '<tspan font-size="1em">' +item[0].clients_count  +'</tspan>'+'</tspan>');
		
						}else if(item[0].consultant_count != 0 && typeof item[0].consultant_count != 'undefined'){
							var html = $("text[data-id="+i+"]").html();
							var value = html.split("</tspan>",2);
		
							$("text[data-id="+i+"]").html(value[0] +  item[0].consultant_count +'</tspan>');
						}else{
							//var html = $("text[data-id="+i+"]").html();
							//$("text[data-id="+i+"]").remove();
						}
						}
					});
					$(".mapcontainer_refresh").trigger('update', [{
						mapOptions: updatedOptions,
						animDuration: 1000
					}]);
					
				},
				error:function(){
		
				}
			});
		}
	
	// Personal Chat
		function sendEmail(e){
			var id = $(e).attr('id');
		if(id){
			$(".emailBtn").prop('disabled', true);
			$.ajax({
				url:'/chatHistory/'+id,
				success:function(e){
					$(".emailBtn").prop('disabled', false);
					$(e).attr('id').hide();
					},error:function(e){
						$(".emailBtn").prop('disabled', false);
					}
				});
			}
		}
	
	
	// Change call status
		function changeCallStatus(lid, ld) {
			var lead_id = lid;
			var status = ld.value;

			$("#lead_id").val(lead_id);
			$("#cl_status").val(status);
			$("#selectId").val(lid);

			if(status == 'call_me_later') {
				$("#statusModalBtn").click();
			} else {
				updatecallstatus();
			}
		}

		$("#callback_date").on('change', function() {
			if(confirm('Click ok to save changes') == true){
				updatecallstatus();
			} else {
				var siid = $("#selectId").val();
				$('#closeBtn').trigger('click');
				$("#cl_status").val('');
				$("#lead_id").val('');
				$("#selectid").val('');
				$("#callback_date").val('');

				$("#select"+siid).val('default').selectpicker("refresh");
				return false;
			}
		})

		function updatecallstatus() {
			var lead_id = $("#lead_id").val();
			var status = $("#cl_status").val();		
			var callback_date = $("#callback_date").val();	
			var siid = $("#selectId").val();	

			$.ajax({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				type: 'POST',
				url: '/update_call',
				data: 'lead_id='+lead_id+'&status='+status+'&callback_date='+callback_date,
				success: function(result) {
					if(result == 1) {
						$("#cl_status").val('');
						$("#lead_id").val('');
						$("#selectid").val('');
						$("#callback_date").val('');

						$("#tr"+siid).remove();
						$('#closeBtn').trigger('click');
					}
				}
			})
		}

	// Card data
		var start = moment().startOf('month');
		var end = moment().endOf('month');

		$(function() {
			function dRange(start,end) {
				$('#dataRange').val(start.format('L') + ' - ' + end.format('L'));
				if(start != 1) {
					getCardData();
				}
			}

			$('#data-range').daterangepicker({
				startDate: start,
				endDate: end,
				ranges: {
					'Today': [moment(), moment()],
					'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
					'This Week' : [moment().startOf('isoWeek'), moment().endOf('isoWeek')],
					'Last 7 Days': [moment().subtract(6, 'days'), moment()],
					'Last 30 Days': [moment().subtract(29, 'days'), moment()],
					'This Month': [moment().startOf('month'), moment().endOf('month')],
					'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
					'This Quarter': [moment().subtract(2, 'months').startOf('month'), moment().endOf('month')],
					'Previous Quarter': [moment().subtract(5, 'months').startOf('month'), moment().subtract(3, 'months').endOf('month')],
					'This Year': [moment().startOf('year'), moment().endOf('year')],
					'Previous Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]	
				}
			}, dRange);

			dRange(start, end);
		});
	
	// card function
		function getCardData() {
			var dates = $("#dataRange").val();
			$.ajax({
				url: '/get_card_data',
				data: 'dates='+dates,
				success: function(result) {
					$("#card1").html(result['card1']);
					$("#card2").html(result['card2']);
					$("#card3").html(result['card3']);
					$("#card4").html(result['card4']);
					$("#card5").html(result['card5']);
					$("#card6").html(result['card6']);
					$("#card7").html(result['card7']);
				}
			})
		}
	
	// Loading Call leads
	$(document).ready(function() {
		loadMore1();
		loadMore2();
	})
	function loadMore1() {
		var pageId = $("#load_more1").val();
		var nextPage = +pageId + +1;
		$.ajax({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url: '/dashboard_call_leads?page='+nextPage,
			success: function(result) {
				if(result != 1) {
					$("#loadMoreDiv1").prepend(result);
					$(".selectpicker").selectpicker('refresh');
					$("#load_more1").val(nextPage);
				} else {
					console.log('No more');
				}
			}
		})
	}

	function loadMore2() {
		var pageId = $("#load_more2").val();
		var nextPage = +pageId + +1;
		$.ajax({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url: '/dashboard_consultants_lists?page='+nextPage,
			success: function(result) {
				if(result != 1) {
					$("#loadMoreDiv2").prepend(result);
					$(".selectpicker").selectpicker('refresh');
					$("#load_more2").val(nextPage);
				} else {
					console.log('No more');
				}
			}
		})
	}

	function getTimezones() {
		$.ajax({
            headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
            url: '/get_timezone_dates',
            success: function(result) {
                $("#timezoneDiv").html('');
                $("#timezoneDiv").html(result);
            }
        })
	}

	// Recall timezone times for 1min
	var intervalId = window.setInterval(function(){
		getTimezones();
	}, 60000);

	// Get data page onload 
	todayTasks();

	// Get Today Tasks
	function todayTasks() {
		$.ajax({
			type: 'get',
			url: '/notes',
			success: function(result) {
				$("#taskList").html('');
				$("#taskList").html(result);
			}
		})
	}

	// Saving task
	function saveTask() {
		var note = $("#note").val();
		if(note != '') {
			$.ajax({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				type: 'POST',
				url: '/notes',
				data: 'note='+note,
				success: function(result) {
					$("#note").val('');
					$("#addTaskRow").hide();
					todayTasks();
				}
			})
		}
	}

	// Task Completion
	function completeTask(id) {
		$.ajax({
			type: 'get',
			url: '/notes/'+id,
			data:'id='+id,
			success: function() {
				todayTasks();
			}
		})
	}
</script>
<style>
	.tt{
		height: 400px;
    	overflow: auto;
	}
</style>
@stop