@extends('layouts.app')

<!-- Scripts -->
<!-- Main Content -->
@section('content')
<!-- Your Settings Dashboard -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success panel-border">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="livicon" data-name="doc-portrait" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i> Lead List
                    </h3>
                    <span class="pull-right">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                        <i class="glyphicon glyphicon-remove removepanel clickable"></i>
                    </span>
                </div>
                <div class="panel-body">
                    <div class="col-md-2 form-horizontal">
                        <div class="form-group">
                            <label class="control-label">Keyword Search:</label>
                            <input type="text" name="keyword" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="control-label">Office Locations:</label>
                            <select name="location" class="form-control">
                                <option value="0" selected>-</option>
                                @foreach($offices as $office)
                                <option value="{{$office->id}}">{{$office->OfficeName}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Builder:</label>
                            <select name="builder" class="form-control">
                                <option value="0" selected>-</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Subdivision:</label>
                            <select name="subdivision" class="form-control">
                                <option value="0" selected>-</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Salesperson:</label>
                            <select name="salesperson" class="form-control">
                                <option value="0" selected>-</option>
                                @foreach($users as $user)
                                <option value="{{$user->id}}">{{$user->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Sales Type:</label>
                            <select name="salestype" class="form-control">
                                <option value="0" selected>-</option>
                                @foreach($salesTypes as $salesType)
                                <option value="{{$salesType->id}}">{{$salesType->Name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Lead Source:</label>
                            <select name="lead_source" class="form-control">
                                <option value="0" selected>-</option>
                                @foreach($leadSourceTypes as $leadSourceType)
                                <option value="{{$leadSourceType->id}}">{{$leadSourceType->Name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Lead Status:</label>
                            <select name="lead_status" class="form-control">
                                <option value="0">All</option>
                                <option value="1" selected>Active</option>
                                @foreach($leadStatuss as $leadStatus)
                                <option value="{{$leadStatus->id}}">{{$leadStatus->Name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Assignment Status:</label>
                            <select name="assignment_status" class="form-control">
                                <option value="0" selected>All</option>
                                <option value="1">Assigned</option>
                                <option value="2">Unassigned</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Added:</label>
                            <select name="added" class="form-control">
                                <option value="1">Today</option>
                                <option value="7">Last 7 days</option>
                                <option value="14">Last 14 days</option>
                                <option value="30">Last 30 days</option>
                                <option value="90">Last 90 days</option>
                                <option value="0" selected>Unlimited</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-success form-control" data-toggle="modal" data-target="#modalAdd">Lead Graphs</button>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-success form-control" data-toggle="modal" data-target="#modalAddLead">Add Lead</button>
                        </div>
                        <div class="form-group">
                            <a data-toggle="modal" data-target="#modalExcelOutput" class="btn btn-success form-control" id="export">Export Leads</a>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="col-md-12">
                            <div class="col-md-6">
                                <p style="font-size: 25px;">Lead Analysis</p>
                            </div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3">
                                <a href="{{route('lead')}}">Lead Manager</a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-12" style="overflow-x: scroll;">
                                <div class="panel panel-primary" style="min-width: 700px;">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            <i class="livicon" data-name="linechart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i>New Lead By Day
                                        </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="new-lead" class="flotChart" style="height:300px; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12" style="overflow-x: scroll;">
                                <div class="panel panel-primary" style="min-width: 700px;">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            <i class="livicon" data-name="linechart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i>Assigned Lead By Day
                                        </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="assigned-lead" class="flotChart" style="height:300px; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="col-md-12" style="overflow-x: scroll;">
                                <div class="panel panel-primary" style="min-width: 700px;">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            <i class="livicon" data-name="linechart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i>Top 10 Leads By Source
                                        </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="top-ten-lead" class="flotChart" style="height:300px; width: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12" style="overflow-x: scroll;">
                                <div class="panel panel-primary" style="min-width: 400px;">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            <i class="livicon" data-name="piechart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i>Lead Analysis
                                        </h3>
                                    </div>
                                    <div class="panel-body">
                                        <div id="pie1" style="text-align: center;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('proedge.modal.lead.add_lead')
    @include('proedge.modal.lead.excel_output')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('vendors/d3/d3.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('vendors/d3pie/d3pie.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('vendors/c3/c3.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('vendors/morrisjs/morris.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){
    //start bar chart
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var start = new Date();
        start.setDate(date.getDate() - 15);
        var startYear = start.getFullYear();
        var startMonth = start.getMonth() + 1;
        var startDay = start.getDate();

        var curDate = (month<10 ? '0' : '') + month + '/' + (day<10 ? '0' : '') + day + '/' + year;
        var startDate = (startMonth<10 ? '0' : '') + startMonth + '/' + (startDay<10 ? '0' : '') + startDay + '/' + startYear;
        $.ajax({
            url     : '{{route("lead.new_lead_graph_data")}}',
            type    : 'get',
            async   : true,
            data    : {
                'curDate'   : curDate,
                'startDate' : startDate,
                '_token'  : '