@extends('layouts/default')

@section('styles')
    <link rel="stylesheet" href="{{ asset('/assets/plugins/footable-standalone/css/footable.standalone.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/plugins/bootstrap-multiselect/css/bootstrap-multiselect.css') }}">
    <style type="text/css">
    .footable .pagination
    {
        float: left;
        margin-bottom: 0px;
    }

    .footable .label
    {
        float: right;
        margin-top:30px;
    }

    </style>
@stop

@section('content')

	<div class="toolbar row">
        <div class="col-sm-12 hidden-xs">
            <div class="page-header">
                <h1>Dashboard <small></small></h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li><a href="{{ URL::to('/') }}">{{ trans('general.dashboard') }}</a></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <!-- Notifications -->
            @include('notifications')
        </div>
    </div>

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-white">
				{{-- <div class="panel-heading">
					<h4 class="panel-title">Leads</h4>
				</div> --}}
				<div class="panel-body">
					<div class="form-inline">
						<div class="form-group">
							<input placeholder="Date range" type="text" class="form-control" id="date_range" name="date_range" value="{{ Request::input('date_range') }}" style="width:180px;">
						</div>

						<div class="form-group p-2">
							<button type="button" id="dashboard-search" class="btn btn-success">{{ trans('general.search-btn') }}</button>
							<button type="button" onclick="window.location='{{ route('dashboard') }}'" id="dashboard-search-reset" class="btn btn-danger">{{ trans('general.reset') }}</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
        <div class="col-md-8">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">Leads</h4>
					<div class="panel-tools">
						<div class="dropdown">
						<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
							<i class="fa fa-cog"></i>
						</a>
						<ul class="dropdown-menu dropdown-light pull-right" role="menu">
							<li>
								<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
							</li>
							<li>
								<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
							</li>
							<li>
								<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
							</li>
							<li>
								<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
							</li>
						</ul>
						</div>
						<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
					</div>
				</div>
				<div class="panel-body">
					<div id="demo-chart-6" class="height-300">
						<svg></svg>
					</div>
				</div>
			</div>
		</div>
		<form>
			<input type="hidden" id="created_date_range" value="{{date('d/m/Y').' - '.date('d/m/Y')}}">
		</form>
		<div class="col-md-4">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">Summary</h4>
				</div>
				<div class="panel-body">
					<div class="row">
						<div class="col-md-6">
							<div class="dashboard-sms-item">
								<i class="fa fa-dot-circle-o" aria-hidden="true" ></i>
								<div class="dashboard-sms-item-text" >
									<span id="total_leads_count">{{number_format($leadsCount)}}</span>
									<input type="hidden" id="total_leads_input" value="{{$leadsCount}}" />
									<label>Leads: </label>
								</div>
							</div>
						</div>
						<div class="col-md-6" >
							<div class="dashboard-sms-item">
								<i class="fa fa-money" aria-hidden="true" ></i>
								<div class="dashboard-sms-item-text">
									<span id="total_ftds_count"></span>
									<label>FTD's:</label>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="dashboard-sms-item" >
								<i class="fa fa-star" aria-hidden="true" ></i>
								<div class="dashboard-sms-item-text">
									<span id="total_conversion"></span><span>%</span>
									<label>CR:</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-white">
				<div class="panel-heading">
					<h4 class="panel-title">Today Leads</h4>
					<div class="panel-tools">
						<div class="dropdown">
						<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
							<i class="fa fa-cog"></i>
						</a>
						<ul class="dropdown-menu dropdown-light pull-right" role="menu">
							<li>
								<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
							</li>
							<li>
								<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
							</li>
							<li>
								<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
							</li>
							<li>
								<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
							</li>
						</ul>
						</div>
						<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
					</div>
				</div>
				<div class="panel-body">
					<div class="table-responsive" style="min-height: 500px; padding: 0px 15px 0px 0px;">
                        <table class="table table-bordered table-striped table-hover">
                            <thead>
                                <tr>
                                    {{-- <th  style="width: 40px;" class="center">
                                        <div class="checkbox-table">
                                            <label><input type="checkbox" class="flat-grey selectall"></label>
                                        </div>
                                    </th> --}}
                                    <th style="width:40px; display:none;" >#</th>
                                    <th style="width:50px; display:none;" class="rsorting "
                                        data-sortby="id" data-sort="">{{ trans('general.id') }}</th>
                                    {{-- @if($isAdmin) --}}
                                        <th style="width:140px;" class="rsorting "
                                            data-sortby="created_at" data-sort="">Created at</th>
                                    {{-- @endif --}}
                                    <th style="width:150px" class="rsorting "
                                        data-sortby="name" data-sort="">First Name</th>
                                    <th style="width:150px" class=" rsorting "
                                        data-sortby="surname" data-sort="">Last Name</th>
                                    <th style="width:150px;" class="rsorting "
                                        data-sortby="email" data-sort="">Email</th>
                                    {{-- <th style="width:60px;" class=" rsorting "
                                        data-sortby="country_code" data-sort="">Code</th> --}}
                                    <th style="width:100px;" class="rsorting "
                                        data-sortby="phone" data-sort="" >Phone Number</th>
                                    <th style="width:130px;" class="rsorting "
                                        data-sortby="country" data-sort="">Country</th>
                                    <th style="width:80px;" class="rsorting "
                                        data-sortby="language" data-sort="">Language</th>

                                    <th style="width:35px;">FTD</th>
									<th style="width:120px;" class="rsorting "
										data-sortby="first_deposit_date" data-sort="">FTD Date</th>

                                    <th style="width:160px;" class="rsorting "
                                        data-sortby="status" data-sort="">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($todayLeads as $item)
										<tr>
											{{-- <td class="center">
											<div class="checkbox-table">
												<label><input name="leads-ids[]" value="" type="checkbox" class="flat-grey foocheck leads-ids"></label>
											</div>
											</td> --}}
											<td style="display:none;">1 </td>
											<td style="display:none;">1</td>
											{{-- @if($isAdmin) --}}
												<td>{{ date('d/m/Y H:i:s', strtotime($item->created_at))}}</td>
											{{-- @endif --}}
											<td>
												{{ $item->first_name}}
											</td>
											<td>
												{{ $item->last_name}}
											</td>
											<td>
											{{ $item->email}}
											</td>

											<td>
												{{$item->phone_prefix}}{{$item->phone}}
											</td>
											<td>{{ $item->country_name}}</td>
											<td>{{ $item->language }}</td>
											<td>
												@if(!is_null($item->first_deposit_date))
													YES
												@else
													NO
												@endif
											</td>
											<td>
												@if(!is_null($item->first_deposit_date))
													{{ date('d/m/Y H:i:s', strtotime($item->first_deposit_date))}}
												@endif
											<td>
												{{ $item->client_status}}
											</td>

										</tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
					<div class="pull-left" style="padding: 0px 15px 0px 0px;">
                        <ul class="pagination">
                            @if($total_pages > 0)
                                @for($page = 1; $page <= $total_pages; $page++)
                                    <li class="page-item {{Request::input('page') == $page ? ' active': ''}}" > <a href="javascript::void(0)" class="page-link" data-value="{{$page}}">{{$page}}</a></li>
                                @endfor
                            @endif
                        </ul>
                    </div>
				</div>
			</div>
		</div>
	</div>

@stop

@section('scripts')
    @parent
	<script type="text/javascript">
	$(document).ready(function() {
		var runChart4 = function() {
			nv.addGraph(function() {
				var chart = nv.models.discreteBarChart().x(function(d) {
					return d.label;
				})//Specify the data accessors.
				.y(function(d) {
					return d.value;
				}).staggerLabels(true)//Too many bars and not enough room? Try staggering labels.
				.tooltips(true)//Don't show tooltips
				.showValues(true)//...instead, show the bar value right on top of each bar.
				.transitionDuration(350)
				.valueFormat(function(v) {
					if (v == 0) {
						return '';
					}
					return v;
				});

				chart.yAxis.tickFormat(function(d) {
					return d;
				});

				d3.select('#demo-chart-6 svg').datum(exampleData()).call(chart);

				nv.utils.windowResize(chart.update);

				return chart;
			});

			//Each bar represents a single discrete quantity.
			function exampleData() {
				return [{
					key : "Cumulative Return",
					values : {!! json_encode($leadsValues) !!}
				}];
			}

		};

		runChart4();
		//runChart6();
	});
	</script>

	{{ Html::script('assets/modules/dashboard/dashboard.js') }}
@stop