@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/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/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;
}
.card-margin{
    margin-bottom:15px !important;
}
.no-div{
    padding-left:0px !important;
}
.static-top-widget .media-body {
	padding-left: 12px !important;
}

.no-div > *{
    padding-left:0px !important;
}
.no-div > *:first-child{
    padding-left:10px !important;
}
.user-status table tbody tr td {
	font-weight: 800 !important;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white !important;
}

.first-col {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;
}

.table-scroll {
  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 350px;
}
.table-sroll tbody tr td:nth-child(1){
 position:relative;height:40px;background:#fff;min-width:50px;text-align:center;
}
.table-scroll thead th {
      background: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.sh-36 {
    height:18rem !important;
}
.sh-50 {
    height:25rem !important;
}
.sh-70 {
    height:35rem !important;
}
@media screen and (max-width: 1660px){

    .user-status table thead tr th:nth-child(3) {
	min-width: 0!important;
}
}
@media only screen and (max-width: 1800px){
    .user-status table thead tr th:nth-child(3) {
	min-width: 0!important;
}
}
</style>
@endpush
@section('content')
@php

$date = request()->get('date') ? request()->get('date') : "";
$date = str_replace("|"," - ",$date);


$followupListArr = $followuplist->toArray();
$user_arr = array();
$userWise_arr_count = array_count_values(array_column($followupListArr,'followupBy'));


$leadUserList = getUserList('Lead|All');


$userlist = array_column($leadUserList->toArray(),'name','id');

$userGroupConnect = $connectedFollowup->groupBy('followupBy')->toArray();
$userGroupNotConnect = $notconnectedFollowup->groupBy('followupBy')->toArray();
$userWise = [];
$connectedUser = [];
$notConnectedUser = [];
$feedbackUserList = [];

foreach ($leadUserList as $lead_user) {
    if(isset($userGroupConnect[$lead_user->id])) {
        $connectedUser[$lead_user->name] = isset($userGroupConnect[$lead_user->id]) ? array_sum(array_column($userGroupConnect[$lead_user->id],'CNT')) : 0;
        $feedbackUserList[] = $lead_user->name;
    }
     if(isset($userGroupNotConnect[$lead_user->id])) {
        $notConnectedUser[$lead_user->name] = isset($userGroupNotConnect[$lead_user->id]) ? array_sum(array_column($userGroupNotConnect[$lead_user->id],'CNT')) : 0;
        $feedbackUserList[] = $lead_user->name;
    }
    if (isset($userWise_arr_count[$lead_user->id])) {
        $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);

$feedback_list = array_count_values(array_diff(array_column($followupListArr,'feedbackType'),['']));
$callingWise_x = json_encode(array_values($feedback_list));
$callingWise_y = json_encode(array_keys($feedback_list));

$connectedFollowupUser = [];
$userBasedFeedback = [];

if (!empty($connectedFollowup->toArray())) {
    $connectedFollowupUser = array_count_values(array_column($connectedFollowup->toArray(),'followupBy'));

    foreach($connectedFollowup as $feed_user)
     {
        $userBasedFeedback[$feed_user->followupBy][$feed_user->feedbackType] = $feed_user->CNT;
     }
}


$notConnectedFollowupUser = [];
$notConnectedUserFeedback = [];
if (!empty($notconnectedFollowup->toArray())) {
    $notConnectedFollowupUser = array_count_values(array_column($notconnectedFollowup->toArray(),'followupBy'));
    foreach($notconnectedFollowup as $feed_user)
     {
        $notConnectedUserFeedback[$feed_user->followupBy][$feed_user->feedbackType] = $feed_user->CNT;
     }
}


@endphp
<div class="container-fluid">
    <div class="page-header" style="padding-bottom:15px;">
      <div class="row">
        <div class="col-lg-6">
          <h3>Follow up</h3>
          <ol class="breadcrumb">
          </ol>
        </div>
      </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="social-tab">
                <div class="input-group">
                    <input class="form-control datetimepicker-input digits" autocomplete="off" type="text" data-language="en" name="enquireDate" id="enquireDate"  value="{{$date}}"/><span class="input-group-text"> <i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Total Lead</span>
                            <h4 class="mb-0 counter">{{$total}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Today lead</span>
                            <h4 class="mb-0 counter">{{$today}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Register Today</span>
                            <h4 class="mb-0 counter">{{$registerCount}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Total follouwp</span>
                            <h4 class="mb-0 counter">{{$todayFollowupCount}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Connected</span>
                            <h4 class="mb-0 counter">{{$connectedFollowupCount}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Not connected</span>
                            <h4 class="mb-0 counter">{{$notconnectedFollowupCount}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Task Created Today</span>
                            <h4 class="mb-0 counter">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xxl-3 col-lg-4 col-xs-12">
            <div class="card">
                <div class="b-r-4 card-body">
                    <div class="media static-top-widget">
                        <div class="media-body">
                            <span class="m-0">Task Completed</span>
                            <h4 class="mb-0 counter">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- user wise followup total -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>User wise followup</h5>
                </div>
                <div class="card-body p-t-0">
                    <div id="column-chart"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- feedback type wise graph -->
     <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>calling feedback</h5>
                </div>
                <div class="card-body p-t-0">
                    <div id="basic-bar"></div>
                </div>
            </div>
        </div>
     </div>

     <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Connected Calls Disposition By User</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive sh-70" style="font-size:10px">
                        <table class="display" id="basic-scroller">
                        <thead style="font-size:10px">
                            <tr>
                                <th scope="col">Name</th>
                                @foreach(getConnectedFeedback() as $id => $name)
                                <th scope="col">{{$name}}</th>
                                @endforeach
                                <th scope="col">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $connectedTotal = 0;
                            @endphp
                            @foreach($connectedFollowupUser as $followuUserId => $value)
                            @php
                                $singlUserTotalFollowup = 0;
                            @endphp
                            <tr>
                                <td>
                                    <span>{{$userlist[$followuUserId]}}</span>
                                </td>
                                @foreach(getConnectedFeedback() as $id => $name)
                                @php
                                    $count = isset($userBasedFeedback[$followuUserId][$name]) ? $userBasedFeedback[$followuUserId][$name] : 0;
                                    $singlUserTotalFollowup = $singlUserTotalFollowup + $count;
                                @endphp
                                <td>{{$count}}</td>
                                @endforeach
                                <td>{{$singlUserTotalFollowup}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
     </div>

     <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Not Connected Calls Disposition By User</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive sh-70" style="font-size:10px">
                        <table id="not-connected" class="display">
                        <thead style="font-size:10px">
                            <tr>
                                <th scope="col">Name</th>
                                @foreach(getNotConnectedFeedback() as $id => $name)
                                <th scope="col">{{$name}}</th>
                                @endforeach
                                <th scope="col">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $notconnectedTotal = 0;
                            @endphp
                            @foreach($notConnectedFollowupUser as $followuUserId => $value)
                            @php
                                $singlUserTotalFollowup = 0;
                            @endphp
                            <tr>
                                <td>
                                    <span>{{$userlist[$followuUserId]}}</span>
                                </td>
                                @foreach(getNotConnectedFeedback() as $id => $name)
                                @php
                                    $count = isset($notConnectedUserFeedback[$followuUserId][$name]) ? $notConnectedUserFeedback[$followuUserId][$name] : 0;
                                    $singlUserTotalFollowup = $singlUserTotalFollowup + $count;
                                @endphp
                                <td>{{$count}}</td>
                                @endforeach
                                <td>{{$singlUserTotalFollowup}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
     </div>

     <div class="row">
        <div class ="col-12">
            <div class="card">
                <div class="card-header" style="padding:20px">
                <h5>Enquire
                    <span class="float-end f-w-400 f-16">
                        <a href="{{route('detailFollowupReport',['date'=> request()->get('date')?request()->get('date'):date('Y-m-d')])}}" class="btn btn-primary">Download FOllowup</a>
                        <a href="{{route('exportDailyReport',['date'=> request()->get('date')?request()->get('date'):date('Y-m-d')])}}" class="btn btn-primary">Download FUP</a>
                    </span>
                </h5>
                </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>Source</th>
                                <th>Campaign</th>
                                <th>Medium</th>
                                <th>FUP-BY</th>
                                <th>Mode</th>
                                <th>At</th>
                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody>
                                @php
                                    $count = 1;
                                    $userList = getUserList();
                                @endphp
                               @foreach($followuplist as $list)
                               @php
                               $contact = $list->PrimaryContact;
                                    if(strlen($contact) < 3 )
                                        {
                                            $len = 0;
                                        }
                                        else
                                        {
                                            $len = 3;
                                        }
                                        $contact = substr_replace($contact,str_repeat("*",strlen($contact)-$len),0,strlen($contact)-3);
                                        if(Session::get('isPhone')=="List" || Session::get('isPhone')=="ALL")
                                        {
                                            $contact = $list->PrimaryContact;
                                        }
                               @endphp
                                <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">{{ strlen($list->Name) > 100 ? substr($list->Name, 0, 100) . '...' : $list->Name }}</a></td>
                                    <td>{{$contact}}</td>
                                    <td>{{$list->Source ? $list->Source :""}}</td>
                                    <td>{{$list->utm_campaign ? $list->utm_campaign :""}}</td>
                                    <td>{{$list->utm_medium ? $list->utm_medium :""}}</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>
     </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/apexcharts.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/chart/apex-chart/custom.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/datatable/datatable-extension/dataTables.scroller.min.js')}}"></script>

<script>
    $(function() {
        $('input[name="enquireDate"]').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoUpdateInput: false,
        changeMonth: true,
        stickyMonths:true,
        showDropdowns:true,
        changeYear: true,
        });
    });

    $('#enquireDate').on('apply.daterangepicker', function(ev, picker) {
        $("#enquireDate").val(picker.startDate.format('YYYY-MM-DD') + " - " +picker.endDate.format('YYYY-MM-DD'))

        window.location.href = "?date="+picker.startDate.format('YYYY-MM-DD')+"|"+picker.endDate.format('YYYY-MM-DD')
    });

    $(document).ready(function () {
    var options = {
        chart: {
            type: 'bar',
            stacked: true,
            height: 350,

        },
        series: [{
            name: 'Not Connected',
            data: {{json_encode(array_values($notConnectedUser))}},
        },{
            name: 'Connected',
            data: {{json_encode(array_values($connectedUser))}},
        }],
        xaxis: {
            categories: {!! json_encode(array_values(array_unique($feedbackUserList))) !!},
        },
        fill: {
            opacity: 1
        },
        legend: {
            position: 'top'
        },
        plotOptions: {
          bar: {
            horizontal: false,
            borderRadius: 10,
            borderRadiusApplication: 'end', // 'around', 'end'
            borderRadiusWhenStacked: 'last', // 'all', 'last'
            dataLabels: {
              total: {
                enabled: true,
                style: {
                  fontSize: '13px',
                  fontWeight: 900
                }
              }
            }
          },
        },
        colors: ['#de4848','#24595c' ],
    };

    var chart = new ApexCharts(document.querySelector("#column-chart"), options);
    chart.render();
});





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

    callingChart.render();


    $('#basic-scroller').DataTable( {
        scrollY: 400,
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        autoFill: true,
    } );
    $("#not-connected").DataTable( {
        scrollY: 400,
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        autoFill: true,
    })
    $("#followup-dt").DataTable({
        pageLength:50,
    })
    </script>

@endpush
@endsection