@extends('layouts.app')

@push('head-script')
    <style>
        .list-group{
            margin-bottom:0px !important;
        }
    </style>
@endpush
@section('page-title')
<div class="row title-row">
      <div class="col-md-12">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle)</h4>
        </div>
</div>
@push('head-script')
    <link rel="stylesheet" href="{{ asset('css/datatables/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/responsive.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/datatables/buttons.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <style>
.list-group{
            margin-bottom:0px !important;
        }
        .dashboard-stats .white-box .list-inline {
            margin-bottom: 0;
        }

        .dashboard-stats .white-box {
            padding: 10px;
        }

        .dashboard-stats .white-box .box-title {
            font-size: 13px;
            text-transform: capitalize;
            font-weight: 300;
        }
        #leads-table_wrapper .dt-buttons{
            display: none !important;
        }
    </style>
@endpush
<div class="row">
        <div class="col-md-12">
            <div class="white-box">

                @section('filter-section')
                <div class="row" id="ticket-filters">

                    <form action="" id="filter-form">
                        <div class="col-md-12">
                            <h5 >@lang('app.selectDateRange')</h5>
                            <div class="input-daterange input-group" id="date-range">
                                <input type="text" class="form-control" id="start-date" placeholder="@lang('app.startDate')"
                                       value=""/>
                                        <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                            <input type="text" class="form-control" id="end-date" placeholder="@lang('app.endDate')"
                                   value=""/>

                                       
                               
                            </div>
                        </div>
                         <div class="col-md-12">
                <div class="form-group">
                    <label class="control-label">@lang('modules.lead.leadSource')</label>
                    <select class="select2 form-control" data-placeholder="@lang('modules.lead.leadSource')" id="source_id" value="">
                        <option selected value="all">@lang('app.all')</option>
                        @foreach($lead_sources as $source)
                            <option value="{{ $source->id }}">{{ $source->type }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
                        <div class="col-md-12">
                            <h5>Sales Executive </h5>
                            <div class="form-group">
                                <div>
                                   <select class="select2 selectpicker form-control" data-placeholder="@lang('modules.tickets.chooseAgents')" id="agent_id" name="agent_id" value="">
                        <option value="all">@lang('modules.lead.all')</option>
                                       @foreach($leadAgents as $value)

                                             <option value="{{ $value->id }}">{{ ucwords($value->user->name) }} @if($value->user->id == $value->id)
                                                            (YOU) @endif</option>
                                                            @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                           <div class="col-md-12">
                            <h5>Lead Executive </h5>
                            <div class="form-group">
                                <div>
                                   <select class="select2 selectpicker form-control" data-placeholder="@lang('modules.tickets.chooseAgents')" id="client_id" name="client_id" value="">
                        <option value="all">@lang('modules.lead.all')</option>
                                        @foreach($employeeData as $empData)
                                <option id="employeeList{{ $empData->id }}" value="{{ $empData->id }}">{{ ucwords($empData->name) }} @if($empData->id == $user->id)
                                        (YOU) @endif</option>
                            @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                          <div class="col-md-12">
                            <h5 >Status</h5>
                            <div class="form-group">
                                <div>
                                    <select name="status" id="status_id" class="select2 form-control" value="">
                                        <option value="all">@lang('modules.lead.all')</option>
                                            @foreach($status as $sts)
                                            <option value="{{ $sts->id }}"> {{ $sts->type }}</option>
                                           

                                            @endforeach
                                        </select>
                                </div>
                            </div>
                        </div>

                      
                      
                        <div class="col-md-12">
                            <div class="form-group m-t-10">
                                <button type="button" id="apply-filters" class="themeBtn"> @lang('app.apply')</button>
                                <button type="button" id="reset-filters" class="themeBtnOutline">@lang('app.reset')</button>
                            </div>
                        </div>
                    </form>
                </div>
                @endsection

               
            </div>
        </div>
    </div>
<div id="newDataAppend" class="row dashboard_row"> 

@foreach($boardColumns as $key=>$column)
    <div class="panel col-md-4 board-column p-0" data-column-id="{{ $column->id }}" >
        <div class="dashboard_outer">
        <div class="panel-heading p-t-5 p-b-5" >
            <div class="panel-title">
               <h6 style="color: {{ $column->label_color }}">{{ ucwords($column->type) }}<span id="statusTotal{{$column->id}}"></span>&nbsp;&nbsp;@if(count($column->leads)!=0)(<span>{{count($column->leads)}}</span>)@endif
             
              </h6>
              <span class="price_span" style="color: {{ $column->label_color }}">{{ global_setting()->currency->currency_symbol.$column->leads->sum('value') }}</span>
            </div>
        </div>
        </div>
    </div>

@endforeach
</div>
 @endsection
@push('footer-script')
<script src="{{ asset('plugins/bower_components/morrisjs/morris.js') }}"></script>
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('js/datatables/responsive.bootstrap.min.js') }}"></script>
<script src="{{ asset('js/datatables/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>

{{-- {!! $dataTable->scripts() !!} --}}

<script src="{{ asset('js/Chart.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/raphael/raphael-min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/morrisjs/morris.js') }}"></script>

<script src="{{ asset('plugins/bower_components/waypoints/lib/jquery.waypoints.js') }}"></script>
<script src="{{ asset('plugins/bower_components/counterup/jquery.counterup.min.js') }}"></script>

<!--weather icon -->

<script src="{{ asset('plugins/bower_components/calendar/jquery-ui.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/fullcalendar.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/jquery.fullcalendar.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/locale-all.js') }}"></script>
{{-- <script src="{{ asset('js/event-calendar.js') }}"></script> --}}
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/Chart.min.js') }}"></script>

    
    <script>
        var startDate = '';
    var endDate = '';

    function getLatestDate(){
        startDate = $('#start-date').val();
        if (startDate == '') { startDate = null; }
        

        startDate = encodeURIComponent(startDate);
       
    }

    $(function() {
        jQuery('#date-range').datepicker({
            toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true
        });
    });
    $('#reset-filters').click(function () {
            $('.select2').val('all');
            $('.select2').trigger('change');
            loadData();
          

          
        })
        $('#apply-filters').click(function () {
            loadData();
        });
             function loadData () {

                    var startDate = $('#start-date').val();
                    if (startDate == '') {
                        startDate = null;
                    }
                    var endDate = $('#end-date').val();
                    if (endDate == '') {
                        endDate = null;
                    }

                    
                   var status_id = $('#status_id').val();
                    var agent_id = $('#agent_id').val();
                    var source_id = $('#source_id').val();
                    var client_id = $('#client_id').val();
              
            var url = '{{route('salesdashboard')}}';
            
                    $.easyAjax({
                        url: url,
                          type: "POST",
                          data: {_token:"{{csrf_token()}}",
                          "startDate":startDate,
                          "endDate":endDate,
                          "status_id":status_id,
                          "agent_id":agent_id,
                          "source_id":source_id,
                          "client_id":client_id,
                         
                      },
                        success: function (response) {
                            
                            $('#newDataAppend').html('');
                            $('#newDataAppend').html(response.view);
                        }
                    });




           }
          

       

     
    </script>
@endpush