@extends('layouts.admin.master')

@section('title')Lead
 {{ $title }}
@endsection


@push('css')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/date-picker.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/datatables.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/datatable-extension.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-multiselect.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/select2.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/prism.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/daterange-picker.css') }}">


<style>
    .grid-widget-container{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.p-t-0{
    padding-top:0
}
.grid-widget {
    flex: 1;
    box-sizing: border-box;
    /* padding: 0; */
    height: 100%;
    min-height: 0;
    width: 100%;
    overflow: auto;
}

.chart-wrapper {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
</style>
@endpush
@section('content')	
@php
    $fList_arr = $fList->toArray();
     $task_list = array_diff(array_column($fList_arr,'nextFollowupDate'),['']);
     $task_count = count($task_list);

     $call_feed_arr = array();
     $counter = 1;
     $user_arr = array();
     $userWise_arr_count = array_count_values(array_column($fList_arr,'followupBy'));     

     $leadUserList = getUserList('Lead|Admission');
     $userWise = [];
     foreach($leadUserList as $lead_user)
     {
        $userWise[$lead_user->name] = isset($userWise_arr_count[$lead_user->id]) ?$userWise_arr_count[$lead_user->id] : 0; 
     }

     list($userWise_x,$userWise_y) = getGraphData($userWise);

     $call_dispositionList = getLeadFeedbackType("Call");
     $feedback_list = array_count_values(array_diff(array_column($fList_arr,'feedbackType'),['']));
     #  // $feedback_list = array_count_values(array_column(array_diff(array_column($fList_arr,'nextFollowupDate'),['']),'feedbackType'));

     $callingFeedback = [];
     foreach($call_dispositionList as $dis_key=>$dis_value)
     {
        $callingFeedback[$dis_value] = isset($feedback_list[$dis_value]) ? $feedback_list[$dis_value] : 0;
     }

     list($callingWise_x,$callingWise_y) = getGraphData($callingFeedback);
     Session::forget('page')
     
@endphp
<div class="container-fluid">
    <div class="page-header">
      <div class="row">
        <div class="col-lg-6">
          <h3>Follow up</h3>          
          <ol class="breadcrumb">
            <!-- <li class="breadcrumb-item"><a href="javascript:void(0)">Lead</a></li>    
            <li class="breadcrumb-item"><a href="javascript:void(0)">List</a></li>             -->
          </ol>
        </div>   
        <div class="col-lg-6">
          <div class="bookmark">
            <ul>
            <li><a class="btn btn-primary-light" href="javascript:void(0)">Add Graph</a></li>   
            </ul>            
          </div>          
        </div>     
      </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-xl-3 col-lg-6">
            <div class="card o-hidden border-0">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="align-self-center text-center"><i data-feather="database"></i></div>
                        <div class="media-body">
                            <span class="m-0">Total Lead</span>
                            <h4 class="mb-0 counter">{{$total}}</h4>
                            <!-- <i class="icon-bg" data-feather="database"></i> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3 col-lg-6">
            <div class="card o-hidden border-0">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="align-self-center text-center"><i data-feather="shopping-bag"></i></div>
                        <div class="media-body">
                            <span class="m-0">Today lead</span>
                            <h4 class="mb-0 counter">{{$today}}</h4>
                            <!-- <i class="icon-bg" data-feather="shopping-bag"></i> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3 col-lg-6">
            <div class="card o-hidden border-0">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="align-self-center text-center"><i data-feather="message-circle"></i></div>
                        <div class="media-body">
                            <span class="m-0">Today Register</span>
                            <h4 class="mb-0 counter">{{$todayFollowupCount}}</h4>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3 col-lg-6">
            <div class="card o-hidden border-0">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="align-self-center text-center"><i data-feather="user-plus"></i></div>
                        <div class="media-body">
                            <span class="m-0">Task Created today</span>
                            <h4 class="mb-0 counter">{{$task_count}}</h4>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Enquire vs Registration
                    <span class="pull-right mt-0" style="margin-right:1.5rem"> 
                          <div class="dropdown d-inline-block">
                                <a class="dropdown-toggle d-inline-block f-12 py-1 px-2 border rounded text-light-gray"
                                href="#"
                                data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                Last 30 days
                                </a>
                                <div class="dropdown-menu theme-form dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0)">Last week</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 6 month</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 1 year</a>
                                    <a class="dropdown-item daterange input-group" href="javascript:void(0)">Custom</a>
                                </div>
                            </div> 
                    </span>                        
                    </h5>  
                    <div class="setting-list">
                        <ul class="list-unstyled setting-option">
                            <li>
                                <div class="setting-primary"><i class="icon-settings"></i></div>
                            </li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                            <li><i class="icofont icofont-chart-line-alt"></i></li>
                            <li><i class="icofont icofont-chart-bar-graph"></i></li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                        </ul>
                    </div>                                
                </div>    
                <div class="card-body p-t-0">
                    <div id="enquire-line"></div>
                </div>           
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Registration Source
                    <span class="pull-right mt-0" style="margin-right:1.5rem"> 
                          <div class="dropdown d-inline-block">
                                <a class="dropdown-toggle d-inline-block f-12 py-1 px-2 border rounded text-light-gray"
                                href="#"
                                data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                Last 30 days
                                </a>
                                <div class="dropdown-menu theme-form dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0)">Last week</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 6 month</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 1 year</a>
                                    <a class="dropdown-item daterange input-group" href="javascript:void(0)">Custom</a>
                                </div>
                            </div> 
                    </span>                        
                    </h5>  
                    <div class="setting-list">
                        <ul class="list-unstyled setting-option">
                            <li>
                                <div class="setting-primary"><i class="icon-settings"></i></div>
                            </li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                            <li><i class="icofont icofont-chart-line-alt"></i></li>
                            <li><i class="icofont icofont-chart-bar-graph"></i></li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                        </ul>
                    </div>                                
                </div>    
                <div class="card-body p-t-0">
                    <div id="enquire-line"></div>
                </div>           
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xl-6">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>calling feedback
                    <span class="pull-right mt-0" style="margin-right:1.5rem"> 
                          <div class="dropdown d-inline-block">
                                <a class="dropdown-toggle d-inline-block f-12 py-1 px-2 border rounded text-light-gray"
                                href="#"
                                data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                Last 30 days
                                </a>
                                <div class="dropdown-menu theme-form dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0)">Last week</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 6 month</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 1 year</a>
                                    <a class="dropdown-item daterange input-group" href="javascript:void(0)">Custom</a>
                                </div>
                            </div> 
                    </span>                        
                    </h5>  
                    <div class="setting-list">
                        <ul class="list-unstyled setting-option">
                            <li>
                                <div class="setting-primary"><i class="icon-settings"></i></div>
                            </li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                            <li><i class="icofont icofont-chart-line-alt"></i></li>
                            <li><i class="icofont icofont-chart-bar-graph"></i></li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                        </ul>
                    </div>                                
                </div>
                <div class="card-body p-t-0">
                    <div id="basic-bar"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-xl-6 box-col-6">
            <div class="card">
                <div class="card-header pb-0 ">
                    <h5>User wise followup
                        <span class="pull-right mt-0" style="margin-right:1.5rem"> 
                          <div class="dropdown d-inline-block">
                                <a class="dropdown-toggle d-inline-block f-12 py-1 px-2 border rounded text-light-gray"
                                href="#"
                                data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                Last 30 days
                                </a>
                                <div class="dropdown-menu dropdown-menu-right ">
                                    <a class="dropdown-item" href="javascript:void(0)">Last week</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 6 month</a>
                                    <a class="dropdown-item daterange" href="javascript:void(0)">Custom</a>
                                </div>
                            </div> 
                        </span>  
                    </h5>
                    <div class="setting-list">
                        <ul class="list-unstyled setting-option">
                            <li>
                                <div class="setting-primary"><i class="icon-settings"></i></div>
                            </li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                            <li><i class="icofont icofont-chart-line-alt"></i></li>
                            <li><i class="icofont icofont-chart-bar-graph"></i></li>
                            <li><i class="icofont icofont-chart-pie-alt"></i></li>
                        </ul>
                    </div> 
                </div>
                <div class="card-body p-t-0">
                    <div id="column-chart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xl-6">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Source wise</h5>
                </div>
                <div class="card-body p-t-0 apex-chart">
                    <div id="source-pie"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-xl-6 box-col-6">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Follow type</h5>
                </div>
                <div class="card-body p-t-0 apex-chart">
                    <div id="followType-donut"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header" style="padding:20px">
                    <h5>Enquire </h5>
                    <span class="pull-right mt-0" style="margin-right:1.5rem"> 
                          <div class="dropdown d-inline-block">
                                <a class="dropdown-toggle d-inline-block f-12 py-1 px-2 border rounded text-light-gray"
                                href="#"
                                data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                Last 30 days
                                </a>
                                <div class="dropdown-menu theme-form dropdown-menu-right">
                                    <a class="dropdown-item" href="javascript:void(0)">Last week</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 6 month</a>
                                    <a class="dropdown-item" href="javascript:void(0)">Last 1 year</a>
                                    <a class="dropdown-item daterange input-group" href="javascript:void(0)">Custom</a>
                                </div>
                            </div> 
                    </span>
                    <span class="pull-righ f-w-400 f-18 pr-2">Showing </span>
                        <span class="float-end f-w-400 f-18 ml-2" style="margin-right:2rem">
                            <button class="btn btn-icon btn-icon-only btn-foreground-alternate shadow "
                                data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="heading1" type="button">
                                    Filter
                            </button>
                        </span>
                </div>    
                <div class="card-block row">
                    <div class="table-responsive">
                        <table class="table f-12" id="followup-dt">
                            <thead class="table-primary">
                            <tr>
                                <th class="d-none">*</th>
                                <th>#</th>
                                <th>Date</th>
                                <th>Name</th>
                                <th>Contact</th>
                                <th>Course</th>
                                <th>FUP-BY</th>
                                <th>Mode</th>
                                <th>At</th>
                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody>                   
                                @php
                                    $count = 1;
                                    $userList = getUserList();
                                    $courseList = getCourse('All');
                                    $courseArr = $courseList->toArray();
                                    $courseArr = array_column($courseArr,'courseName','courseId');
                                @endphp                                        
                               @foreach($fList as $list)
                                <tr>
                                    <td class="d-none">dd</td>
                                    <th scope="row" style="text-align:center">{{$count++}}</th>
                                    <td>{{$list->enquireDate}}</td>
                                    <td><a href="{{route('detailEnquire',['Id'=>encrypt_decrypt('encrypt',$list->enquire_id)])}}" class="f-w-600">{{$list->Name}}</a></td>
                                    <td>{{$list->PrimaryContact}}</td>
                                    <td>{{$list->ForClass ? $courseArr[$list->ForClass] :""}}</td>
                                    <td>{{$list->followupBy ? $userList[$list->followupBy] : 'Not Assigned'}}</td>
                                    <td><div class="span badge rounded-pill pill-badge-primary">{{$list->followupType}}</div></td>
                                    <td>{{$list->fDate}}</td>
                                    <td><div class="span badge rounded-pill pill-badge-primary">{{$list->feedbackType ? $list->feedbackType : "N/A"}}</div></td>                                    
                                </tr>    
                                @endforeach           
                            </tbody>                    
                        </table>
                    </div>
                </div>            
            </div>                
            <div>
                <ul id="pagination-demo" class="pagination justify-content-center pagination-primary"></ul>						
           </div>
        </div>
    </div>
</div>
@push('scripts')
<script src="{{asset('assets/js/app.min.js')}}"></script>

    <script src="{{asset('assets/js/counter/jquery.waypoints.min.js')}}"></script>
    <script src="{{asset('assets/js/counter/jquery.counterup.min.js')}}"></script>
    <script src="{{asset('assets/js/counter/counter-custom.js')}}"></script>
    <script src="{{ asset('assets/js/chart/apex-chart/apex-chart.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
    <!-- <script src="{{ asset('assets/js/chart/apex-chart/stock-prices.js') }}"></script> -->
    <script src="{{ asset('assets/js/chart/apex-chart/custom.js') }}"></script>    
    <!-- <script src="{{asset('assets/js/prism/prism.min.js')}}"></script> -->
  <script src="{{asset('assets/js/clipboard/clipboard.min.js')}}"></script>
  <script src="{{asset('assets/js/custom-card/custom-card.js')}}"></script>
  <script src="{{ asset('assets/js/datepicker/daterange-picker/moment.min.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/daterange-picker/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/daterange-picker/daterange-picker.custom.js') }}"></script>
  <!-- <script src="{{asset('assets/js/tooltip-init.js')}}"></script> -->

    <script>
    
var options3 = barVChart({!! $userWise_x !!},{!! $userWise_y !!})
var chart3 = new ApexCharts(
    document.querySelector("#column-chart"),
    options3
);

chart3.render();

var callingOption = barHChart({!! $callingWise_x !!},{!! $callingWise_y !!})
var callingChart = new ApexCharts(
    document.querySelector('#basic-bar'),
    callingOption
)

callingChart.render();

    </script>
@endpush
@endsection