@extends('layouts.admin.master')

@section('title')Campaign Report
{{ $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/select2.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/daterange-picker.css') }}">
@endpush

@php
    $visiblity = Session::get('visibility');
        $currentUser = Session::get('userId');

    $total = $PageCount;
    $limit =  request()->get('limit',20);
    $skip = request()->get('skip',0);
    $showCount = $limit + $skip;
    if($showCount > $total)
    {
        $showCount = $total;
    }
    
    $connected = 0;
    $notconnected = 0;
    if ($data['feedbackCounts']) {
        foreach($data['feedbackCounts'] as $feed) {
            if ($feed->connected_type == 'connected') {
                $connected = $connected + $feed->total;
            } else if ($feed->connected_type == 'notconnected') {
                $notconnected = $notconnected + $feed->total;
            }
        }
    }
    

    $userWiseCountKey = json_encode($data['userFollowupCounts']->pluck('user_name'));
    $userWiseCountValue = json_encode($data['userFollowupCounts']->pluck('total'));
    
    
    $dispositionWiseCountKey = json_encode($data['feedbackCounts']->pluck('feedback_name'));
    $dispositionWiseCountValue = json_encode($data['feedbackCounts']->pluck('total'));
    
    
@endphp
@section('content')

<div class="container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-lg-6">
                <h3>Campaign Report</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)">Report</a></li>
                </ol>
            </div>

        </div>
    </div>

    <div class="card" style="border:none" id ="accordionclose">
        <div class="collapse" id="collapse1" aria-labelledby="heading1" data-bs-parent="#accordionclose">
            <div class="card-body">
                <form action="" method="get" id="formSearchFilter">
                    <div class="row">
                        <div class="col-lg-3 col-xs-12">
                            <div class="mb-3">
                                <label>Campaign</label>
                                @php
                                    $campaign = getLeadStage('Campaign');
                                @endphp
                                <select class="form-select select2-campaign" name="searchCampaign"  id="searchCampaign" data-allow-clear="true">
                                    @foreach($campaign as $campaign_id=>$name)
                                        <option value="{{$campaign_id}}">{{$name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-xs-12">
                            <div class="mb-3">
                                <label>Followup Date</label>
                                <input class="form-control datetimepicker-input digits" type="text" data-language="en" name="searchFollowupDate" id="searchFollowupDate"  {{request()->query('searchFollowupDate') ?? ''}}/>
                            </div>
                        </div>
                        <div class="col-lg-3 col-xs-12">
                            <div class="mb-3">
                                <label>Disposition</label>
                                @php
                                    $callFeedList = getLeadFeedbackType('all');
                                @endphp
                                <select class="form-select select2-disposition" name="searchDisposition[]" multiple id="searchDisposition">
                                    <option value="">--select Course--</option>
                                    @foreach($callFeedList as $id=>$name)
                                        <option value="{{$id}}">{{$name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3 col-xs-12">
                            <div class="mb-3">
                                <label>User</label>
                                @php
                                     $usrList = getUserByVisibility($visiblity,$currentUser);
                                @endphp
                                <select class="form-select filter-multiple" name="searchAssign[]" multiple id="searchAssign">
                                    @foreach($usrList as $id=>$name)
                                        <option value="{{$id}}">{{$name}}</option>
                                    @endforeach
                                    @if($visiblity=="all")
                                        <option value="{{$id}}">Not Assigned</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="text-sm-end">
                        <button class="btn btn-primary" id="submitSearch">Search</button>
                        <button class="btn btn-primary clearSearch" type="button" id="clearSearch">Clear</button>
                    </div>
                </form>
            </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">{{$data['totalLead'] ?? 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">Untouched Lead</span>
                            <h4 class="mb-0 counter">{{$data['untouched'] ?? 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">Total follouwp</span>
                            <h4 class="mb-0 counter">{{$data['totalFollowup'] ?? 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">Connected FUP</span>
                            <h4 class="mb-0 counter">{{$connected}}</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 FUP</span>
                            <h4 class="mb-0 counter">{{$notconnected}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <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>
    <div class="row">
        <!-- Search Start -->
        <div class="col-sm-12 col-md-5 col-lg-3 col-xxl-2 mb-1">
            <div
                    class="d-inline-block float-md-start me-1 mb-1 search-input-container w-100 shadow bg-foreground">
                <input class="form-control datatable-search" placeholder="Search"
                       data-datatable="#enquire-dt" id="enquireSearch" value="{!! request()->get('search') ? request()->get('search') :'' !!}"/>
            </div>
        </div>
        <!-- Search End -->
        <div class="col-sm-12 col-md-7 col-lg-9 col-xxl-10 text-end mb-1">
            <div class="d-inline-block me-0 me-sm-3 float-start float-md-none">
                <!-- Add Button Start -->
                <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>
            </div>
            <div class="d-inline-block">


            <!-- Print Button End -->
            @if(hasAccess('downloadEnquire-add')=="true")
                <!-- Export Dropdown Start -->
                    <div class="d-inline-block datatable-export">
                        <button class="btn p-0 shadow"  type="button"
                                id="download-file">
                <span class="btn btn-icon btn-icon-only btn-foreground-alternate dropdown"
                      data-bs-delay="0" data-bs-placement="top" data-bs-toggle="tooltip"
                      title="Download">
                        <i data-feather="download" style="width:18px; height:18px;"></i>
                </span>
                        </button>
                        <div class="dropdown-menu shadow dropdown-menu-end">
                            <!-- <button class="dropdown-item export-copy" type="button">Copy</button> -->
                            <a class="dropdown-item export-excel" href="{{route('downloadEnquire',['type'=>'XLSX','q'=>app('request')->request->all()])}}" type="button">Excel</a>
                            <a class="dropdown-item export-excel" href="{{route('downloadEnquire',['type'=>'CSV','q'=>app('request')->request->all()])}}" type="button">Csv</a>
                        </div>
                    </div>
            @endif
            <!-- Export Dropdown End -->

                <!-- Length Start -->
                <div class="dropdown-as-select d-inline-block datatable-length"
                     data-childSelector="span">
                    <button class="btn p-0 shadow" type="button" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" data-bs-offset="0,3">
                <span class="btn btn-foreground-alternate dropdown-toggle"  data-bs-toggle="tooltip"
                      data-bs-placement="top" data-bs-delay="0" title="Item Count" >
                    {!! request()->get('limit')? request()->get('limit') : 20 !!} Items
                </span>
                    </button>
                    <div class="dropdown-menu shadow dropdown-menu-end">
                        <a class="dropdown-item" href="?skip=0&limit=20&{{http_build_query(request()->except(['skip','limit']))}}">20 Items</a>
                        <a class="dropdown-item" href="?&{{http_build_query(request()->all())}}&limit=50">50 Items</a>
                        <a class="dropdown-item" href="?&{{http_build_query(request()->all())}}&limit=100">100 Items</a>
                    </div>
                </div>


                <!-- Length End -->
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header" style="padding:20px">
                    <h5>Enquire <span class="float-end f-w-400 f-18">Showing {{$skip + 1}}-{{$showCount}} of {{$total}}</span></h5>
                </div>
                <div class="card-block row">
                    <div class="table-responsive">
                        <table class="table f-12" id="campaign-dt">
                            <thead class="table-primary">
                            <tr>
                                <th class="d-none">*</th>
                                <th>#</th>
                                <th>FUP Date</th>
                                <th>Name</th>
                                <th>Contact</th>
                                <th>FUP BY</th>
                                <th>Disposition</th>
                                <th>Remarks</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php
                                $count = $skip + 1;
                                $userList = getUserList();


                            @endphp
                            @foreach($data['list'] as $list)
                                @php

                                    $contact = $list->PrimaryContact ? $list->PrimaryContact : $list->SecondaryContact;
                                    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 ? $list->PrimaryContact : $list->SecondaryContact;
                                    }
                                @endphp
                                <tr>
                                    <td class="d-none"><input type="hidden" value="{{encrypt_decrypt('encrypt',$list->enquire_id)}}"></td>
                                    <th scope="row" style="text-align:center">{{$count++}}</th>
                                    <td>{{ date('d-M-Y', strtotime($list->followup_date)) }}
                                        <br>
                                        <span></span>
                                    </td>
                                    <td><a href="{{route('detailEnquire',['Id'=>encrypt_decrypt('encrypt',$list->enquire_id),'hash'=>md5(time())])}}"><span class="f-w-600">{{$list->Name}}</span></a></td>
                                    <td>{{$contact}}</td>
                                    <td>{{$list->calledBy}}</td>
                                    <td>{{isset($list->disposition_name) ? $list->disposition_name   : ''}}</td>
                                    <td>{{$list->remark ? $list->remark : 'N/A'}}</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/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.en.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2.full.min.js') }}"></script>
    <script src="{{asset('assets/js/pagination.js')}}"></script>
    <script src="{{asset('assets/functions/common.js')}}"></script>
    <script src="{{asset('assets/js/notify/bootstrap-notify.min.js')}}"></script>
    <script src="{{asset('assets/js/setting/notify.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/chart/apex-chart/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/js/chart/apex-chart/custom.js') }}"></script>
    
    <script>

        $(function() {

            $(".select2-source").select2()
            $(".select2-stage").select2()
            $(".select2-campaign").select2()
            $(".select2-purpose").select2()
            $("#searchAssign").select2()
            $(".select2-disposition").select2()
        })
        $(function() {
            $('input[name="searchFollowupDate"]').daterangepicker({
                locale: {
                    format: 'YYYY-MM-DD'
                },
                autoUpdateInput: false,
                changeMonth: true,
                stickyMonths:true,
                showDropdowns:true,
                changeYear: true,
            });
        });

        $('#searchFollowupDate').on('apply.daterangepicker', function(ev, picker) {
            $("#searchFollowupDate").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')
        });
        $(function(){
            $("#campaign-dt").DataTable({
                paging:false,
                searching:false,
                info:     false,
                columns: [{data: 'eqId'},{data: 'Sno'},{data: 'enquireDate'}, {data: 'Name'}, {data: 'Contact'},
                            {data: 'Assign To'},{data:'campaign'},{data:'Source'}
                            ]

            })
        })
        $(function(){
            $(".clearSearch").click(function(){
                $("#formSearchFilter")[0].reset();
                // history.pushState('', document.title, window.location.pathname);
                window.location.href = window.location.href.split('?')[0];
            })
        })
        $(function(){
            $("#submitSearch").click(function(){

                var searchFilter = $("#formSearchFilter").serialize()
                var advFilter = $("#adv-filter-form").serialize()
                // history.pushState('', document.title, window.location.pathname);
                window.location.href = window.location.href.split('?')[0];
                window.location = "?skip=0&limit=0"+searchFilter+advFilter

            })
        })

        var queryArr = {}
        $(function(){
            var key = []
            var count = 0;
            const urlParams = new URLSearchParams(window.location.search);
            var mm = {}
            for (const param of urlParams) {
                count++;
                if(param[0].indexOf("[]")!=-1)
                {
                    var tmpKey = param[0].slice(0,-2)
                }
                else
                {
                    var tmpKey = param[0]
                }
                if(key.includes(tmpKey))
                {

                    let len = queryArr[tmpKey].length
                    var tmpValue = param[1]

                    queryArr[tmpKey][len] = tmpValue
                }
                else
                {
                    key.push(tmpKey)
                    queryArr[tmpKey] = []
                    var tmpValue = param[1]
                    queryArr[tmpKey][0] = tmpValue

                }
            }
             console.log(queryArr,"asdfghjkl")
            
        })

        $(function () {

            if(queryArr['searchDisposition'])
            {
              
                $("#searchDisposition").val(queryArr['searchDisposition'])
                $('#searchDisposition').trigger('change');
            }
            if(queryArr['searchCourse'])
            {

                $("#searchCourse").val(queryArr['searchCourse'])
                $('#searchCourse').trigger('change');
            }
            if(queryArr['searchAssign'])
            {
                $("#searchAssign").val(queryArr['searchAssign'])
                $('#searchAssign').trigger('change');

            }
            if(queryArr['searchSource'])
            {
                $("#searchSource").val(queryArr['searchSource'])
                $('#searchSource').trigger('change');

            }
            if(queryArr['searchCampaign'])
            {
                $("#searchCampaign").val(queryArr['searchCampaign'])
                $('#searchCampaign').trigger('change');
            }
            
            if(queryArr['searchFollowupDate'])
            {
                $("#searchFollowupDate").val(queryArr['searchFollowupDate'])
            }
            
        })

        var totalCount = {{$PageCount ?? 0}}
        console.log('query',totalCount)
        var limit = {{request()->get('limit',20) }}
        var skip =    {{request()->get('skip',0) }}
        var totalPageCount = totalCount/limit;
        totalPageCount = Math.ceil(totalPageCount)
        if(totalPageCount==0)
        {
            totalPageCount = 1;
        }

        var startPage = (skip/limit)+1;
        var queryString = {!! json_encode(request()->except(["skip","limit"])) !!}
        console.log(queryString,'queryString')
        queryString = new URLSearchParams(queryString).toString();
        var init=1;
        $("#pagination-demo").twbsPagination(
            {
                totalPages:totalPageCount,
                prev:"prev",
                startPage:startPage,
                onPageClick:function(event,page)
                {
                    if(init==1)
                    {
                        init++;
                    }
                    else
                    {
                        console.log(queryString,'queryString')
                        var skip = (page-1)*limit;
                        // var queryString='';
                        if(queryString)
                        {
                            console.log('page hit')
                            queryString = new URLSearchParams(queryString).toString();
                            console.log(queryString,"kddddddddddddd")
                        }
                        console.log('{!! http_build_query(request()->except(["skip","limit"])) !!}',"requesttttttttt")
                        window.location = "?skip="+skip+"&limit="+limit+'&{!! http_build_query(request()->except(["skip","limit"])) !!}';
                    }
                }
            });
        $(function () {
            $("#download-file").click(function (){
                var form = $("#formSearchFilter").serialize();
                console.log("form======",form)

                if (
                    $("#searchCampaign").val() =="" &&
                    $("#searchFollowupDate").val() =="" &&
                    $("#searchDisposition").val() == ""&&
                    $("#searchStage").val() == ""&&
                    $("#searchSource").val() == ""&&
                    $("#searchPurpose").val() == ""
                ) {
                    notifyF('error','Select atleast one filter to download','danger',2000)
                    return false; // stop form submit or action
                }

                notifyF('success', 'Processing downloads', 'primary', 2000);
                var data = {}
                data.data = form
                ajaxWait("{!! route('download-campaign-report') !!}",form).then(function(response,error){
                    console.log(response,"+++++++++++++++++++++")
                    if (response.success && response.file) {
                        notifyF('success', 'Downloading your file', 'primary', 2000);
                        var link = document.createElement('a');
                        link.href = response.file;
                        link.download = ''; // Browser will download with correct filename
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    } else {
                        notifyF('error', 'File download failed', 'danger', 2000);
                    }
                })
            })
        })
        
        
      
        
        
        
        
        
            var callingOption = barVChart({!! $userWiseCountValue !!},{!! $userWiseCountKey !!})
            var callingChart = new ApexCharts(
                document.querySelector('#basic-bar'),
                callingOption
            )
        
            callingChart.render();
            
             var dispositionOption = barVChart({!! $dispositionWiseCountValue !!},{!! $dispositionWiseCountKey !!})
            var dispositionOption = new ApexCharts(
                document.querySelector('#column-chart'),
                dispositionOption
            )
        
            dispositionOption.render();

    </script>
@endpush
@endsection