One Hat Cyber Team

View File Name : 3673f5192d72c236691a73fb2a55d7a6.php

<?php $__env->startSection('page-title'); ?>
    <?php echo e(__('Report')); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('css'); ?>
    <link rel="stylesheet" href="<?php echo e(asset('assets/css/plugins/dragula.min.css')); ?>">
<?php $__env->stopPush(); ?>

<?php $__env->startSection('page-breadcrumb'); ?>
    <?php echo e(__('Report')); ?>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
    <div class="row">
        <div class="col-md-12">
            <div class="p-3 card">
                <ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-user-tab-1" data-bs-toggle="pill"
                            data-bs-target="#pills-user-1" type="button"><?php echo e(__('General Report')); ?></button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-user-tab-2" data-bs-toggle="pill" data-bs-target="#pills-user-2"
                            type="button"><?php echo e(__('Staff Report')); ?></button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-user-tab-3" data-bs-toggle="pill" data-bs-target="#pills-user-3"
                            type="button"><?php echo e(__('Pipelines Report')); ?></button>
                    </li>
                </ul>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-user-1" role="tabpanel" aria-labelledby="pills-user-tab-1">
                            <div class="row">
                                <div class="col-md-6">

                                    <div class="card">
                                    <div class="panel_s">
                                        <div class="panel-heading">
                                            <h5 class="panel-title" style="padding-top:15px; padding-left:20px;"><?php echo e(__('This Week Leads Conversions')); ?></h5><hr>
                                        </div>
                                        <div class="panel-body">

                                            <div id="leads-this-week" height="353" style="display: block; height:315px;"
                                            data-color="primary" data-height="280"></div>
                                        </div>
                                    </div>
                                     </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                    <div class="panel_s">
                                        <div class="panel-heading">
                                            <h5 class="panel-title"  style="padding-top:15px; padding-left:20px;"><?php echo e(__('Sources Conversion')); ?></h5><hr>
                                        </div>
                                        <div class="panel-body">

                                            <div class="leads-sources-report" id="leads-sources-report" height="353" style="display: block;"
                                            data-color="primary" data-height="280"></div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="card">
                                    <div class="panel_s">
                                        <div class="panel-heading">
                                            <h5 class="panel-title"  style="padding-top:15px; padding-left:20px;"><?php echo e(__('Monthly')); ?></h3>
                                        </div>
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-md-2 form-label"  style="padding-top:15px; padding-left:30px;">
                                                    <select name="month" class="selectpicker form-control" id="selectmonth" data-none-selected-text="Nothing selected" >
                                                        <option value="select month"><?php echo e(__('Select Month')); ?></option>
                                                        <option value="1"><?php echo e(__('January')); ?></option>
                                                        <option value="2"><?php echo e(__('February')); ?></option>
                                                        <option value="3"><?php echo e(__('March')); ?></option>
                                                        <option value="4"><?php echo e(__('April')); ?></option>
                                                        <option value="5"><?php echo e(__('May')); ?></option>
                                                        <option value="6"><?php echo e(__('June')); ?></option>
                                                        <option value="7"><?php echo e(__('July')); ?></option>
                                                        <option value="8"><?php echo e(__('August')); ?></option>
                                                        <option value="9"><?php echo e(__('September')); ?></option>
                                                        <option value="10"><?php echo e(__('October')); ?></option>
                                                        <option value="11"><?php echo e(__('November')); ?></option>
                                                        <option value="12"><?php echo e(__('December')); ?></option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="relative" style="max-height:400px;">
                                            <div id="leads-monthly" data-color="primary" data-height="280"></div>

                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-user-2" role="tabpanel" aria-labelledby="pills-user-tab-2">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="panel_s">
                                        <div class="panel-body">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                    <?php echo e(Form::label('From Date', __('From Date'),['class'=>'col-form-label'])); ?>

                                                    <?php echo e(Form::date('From Date',null, array('class' => 'form-control from_date','id'=>'data_picker1',))); ?>

                                                    <span id="fromDate" style="color: red;"></span>
                                                    </div>
                                                    <div class="col-md-4">
                                                    <?php echo e(Form::label('To Date', __('To Date'),['class'=>'col-form-label'])); ?>

                                                    <?php echo e(Form::date('To Date',null, array('class' => 'form-control to_date','id'=>'data_picker2',))); ?>

                                                    <span id="toDate"  style="color: red;"></span>
                                                    </div>
                                                    <div class="col-md-4" id="filter_type" style="padding-top : 38px;">
                                                    <button  class="btn btn-primary label-margin generate_button" ><?php echo e(__('Generate')); ?></button>
                                                    </div>
                                                </div>
                                            <div id="leads-staff-report"  height="400" style="display: block;" width="1100"
                                            data-color="primary" data-height="280"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                       <div class="tab-pane fade" id="pills-user-3" role="tabpanel" aria-labelledby="pills-user-tab-3">
                        <h5><?php echo e(__('Pipelines')); ?></h5>
                             <div class="row">
                             <div class="col-md-12">
                             <div class="panel_s">
                               <div class="panel-body">
                                   <div id="leads-piplines-report"  height="400" style="display: block;" width="1100"
                                 data-color="primary" data-height="280"></div>
                                </div>
                                </div>
                             </div>
                             </div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    $(".generate_button").click(function(){
        var from_date = $('.from_date').val();
        if(from_date == ''){
            $("#fromDate").text("Please select date");
        }else{
            $("#fromDate").empty();
        }
        var to_date = $('.to_date').val();
        if(to_date == ''){
            $("#toDate").text("Please select date");
        }else{
            $("#toDate").empty();
        }
        $.ajax({
            url: "<?php echo e(route('report.lead')); ?>",
            type: "get",
            data: {
                "From_Date": from_date,
                "To_Date": to_date,
                "type": 'staff_repport',
                "_token": "<?php echo e(csrf_token()); ?>",
            },

            cache: false,
            success: function(data) {


                $("#leads-staff-report").empty();
                var chartBarOptions = {
                series: [{
                    name: 'Lead',
                    data: data.data,
                }],

                chart: {
                    height: 300,
                    type: 'bar',
                    dropShadow: {
                        enabled: true,
                        color: '#000',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.2
                    },
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2,
                    curve: 'smooth'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xaxis: {
                    categories: data.name,


                },
                colors: ['#6fd944', '#6fd944'],


                grid: {
                    strokeDashArray: 4,
                },
                legend: {
                    show: false,
                }

            };
            var arChart = new ApexCharts(document.querySelector("#leads-staff-report"), chartBarOptions);
            arChart.render();

            }
        })
    });

    $(document).ready(function(){
        $("#selectmonth").change(function(){
            var selectedVal = $(this).val()
            if( selectedVal == 'select month'){
                var selectedVal = null;
            }
           $.ajax({
             url:  "<?php echo e(route('report.lead')); ?>",
             type: "get",
             data:{
                "start_month": selectedVal,
                "_token": "<?php echo e(csrf_token()); ?>",
             },
             cache: false,
             success: function(data){

                $("#leads-monthly").empty();
                var chartBarOptions = {
                series: [{
                    name: 'Lead',
                    data: data.data,
                }],

                chart: {
                    height: 300,
                    type: 'bar',
                    dropShadow: {
                        enabled: true,
                        color: '#000',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.2
                    },
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2,
                    curve: 'smooth'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xaxis: {
                    categories:data.name,

                    title: {
                        text: '<?php echo e(__("Lead Per Month")); ?>'
                    }
                },
                colors: ['#ff3a6e', '#ff3a6e'],


                grid: {
                    strokeDashArray: 4,
                },
                legend: {
                    show: false,
                }

            };
            var arChart = new ApexCharts(document.querySelector("#leads-monthly"), chartBarOptions);
            arChart.render();
             }
           })
        });
    });


    $(document).on('click', '.lang-tab .nav-link', function() {
        $('.lang-tab .nav-link').removeClass('active');
        $('.tab-pane').removeClass('active');
        $(this).addClass('active');
        var id = $('.lang-tab .nav-link.active').attr('data-href');
        $(id).addClass('active');
    });
</script>
<script src="<?php echo e(asset('assets/js/plugins/apexcharts.min.js')); ?>"></script>


<script>
    var options = {
            series: <?php echo json_encode($devicearray['data']); ?>,
            chart: {
                width: 400,
                type: 'pie',
            },

            colors: ["#28B8DA","#03a9f4","#c53da9","#757575","#8e24aa","#d81b60","#0288d1"],
            labels: <?php echo json_encode($devicearray['label']); ?>,

            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 260
                    },
                    legend: {
                        position: 'bottom',
                    }
                }
            }]
        };
        var chart = new ApexCharts(document.querySelector("#leads-this-week"), options);
        chart.render();

        (function () {
            var chartBarOptions = {
                series: [{
                    name: 'Source',
                    data: <?php echo json_encode($leadsourceeData); ?>,
                }],

                chart: {
                    height: 300,
                    type: 'bar',
                    dropShadow: {
                        enabled: true,
                        color: '#000',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.2
                    },
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2,
                    curve: 'smooth'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xaxis: {
                    categories: <?php echo json_encode($leadsourceName); ?>,

                    title: {
                        text: '<?php echo e(__("Source")); ?>'
                    }
                },
                colors: ['#6fd944', '#6fd944'],


                grid: {
                    strokeDashArray: 4,
                },
                legend: {
                    show: false,
                }

            };
            var arChart = new ApexCharts(document.querySelector("#leads-sources-report"), chartBarOptions);
            arChart.render();
         })();

         (function () {
            var chartBarOptions = {
                series: [{
                    name: 'Lead',
                    data: <?php echo json_encode($data); ?>,
                }],

                chart: {
                    height: 300,
                    type: 'bar',
                    dropShadow: {
                        enabled: true,
                        color: '#000',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.2
                    },
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2,
                    curve: 'smooth'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xaxis: {
                    categories: <?php echo json_encode($labels); ?>,

                    title: {
                        text: '<?php echo e(__("Lead Per Month")); ?>'
                    }
                },
                colors: ['#c53da9', '#c53da9'],


                grid: {
                    strokeDashArray: 4,
                },
                legend: {
                    show: false,
                }

            };
            var arChart = new ApexCharts(document.querySelector("#leads-monthly"), chartBarOptions);
            arChart.render();
         })();

         (function () {
            var chartBarOptions = {
                series: [{
                    name: 'Lead',
                    data: <?php echo json_encode($leadusereData); ?>,
                }],

                chart: {
                    height: 300,
                    type: 'bar',
                    dropShadow: {
                        enabled: true,
                        color: '#000',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.2
                    },
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2,
                    curve: 'smooth'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xaxis: {
                    categories: <?php echo json_encode($leaduserName); ?>,


                },
                colors: ['#6fd944', '#6fd944'],


                grid: {
                    strokeDashArray: 4,
                },
                legend: {
                    show: false,
                }

            };
            var arChart = new ApexCharts(document.querySelector("#leads-staff-report"), chartBarOptions);
            arChart.render();
         })();

         (function () {
            var chartBarOptions = {
                series: [{
                    name: 'Pipeline',
                    data: <?php echo json_encode($leadpipelineeData); ?>,
                }],

                chart: {
                    height: 300,
                    type: 'bar',
                    dropShadow: {
                        enabled: true,
                        color: '#000',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.2
                    },
                    toolbar: {
                        show: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    width: 2,
                    curve: 'smooth'
                },
                title: {
                    text: '',
                    align: 'left'
                },
                xaxis: {
                    categories: <?php echo json_encode($leadpipelineName); ?>,

                    title: {
                        text: '<?php echo e(__("Pipelines")); ?>'
                    }
                },
                yaxis: {
                    title: {
                        text: '<?php echo e(__("Leads")); ?>'
                    }
                },
                colors: ['#6fd944', '#6fd944'],


                grid: {
                    strokeDashArray: 4,
                },
                legend: {
                    show: false,
                }

            };
            var arChart = new ApexCharts(document.querySelector("#leads-piplines-report"), chartBarOptions);
            arChart.render();
         })();
</script>

<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.main', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/id/erp.dev-unit.com/packages/workdo/Lead/src/Providers/../Resources/views/report/lead.blade.php ENDPATH**/ ?>