@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);
    @endphp
    <div class="container-fluid">
        <div class="page-header" style="padding-bottom:15px;">
            <div class="row">
                <div class="col-lg-6">
                    <h3>Source Report</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"  placeholder="Select Date range" value="{{$date}}"/><span class="input-group-text"> <i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <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">{{$totalCount}}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card" style="max-width:100%">
                    <div class="card-header pb-0">
                        <h5>User wise followup</h5>
                    </div>
                    <div class="card-body p-t-0">
                        <div id="column-chart" style="max-width: 100%;"></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',
                    height: 350,
                },
                series: [{
                    name: 'Lead Count',
                    data: {!! json_encode($sourceCounts) !!}
                }],
                xaxis: {
                    categories: {!! json_encode($sourceCategories) !!},
                    labels: {
                        rotate: -45, // rotate labels to avoid overlap
                        style: {
                            fontSize: '12px',
                        },
                        trim: true,         // truncate long labels
                        hideOverlappingLabels: true
                    }
                },
                fill: {
                    opacity: 1
                },
                legend: {
                    position: 'top'
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        borderRadius: 10,
                        dataLabels: {
                            total: {
                                enabled: true,
                                style: {
                                    fontSize: '11px',
                                    fontWeight: 800
                                }
                            }
                        }
                    },
                },
                colors: ['#24595c'],
            };

            var chart = new ApexCharts(document.querySelector("#column-chart"), options);
            chart.render();
        });
    </script>
@endpush

@endsection