
<div class="statics-sec">
    <div class="row">
        <div class="col-lg-12">
            <div class="statics">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="item">
                            <div class="icon">
                                <img src="{{url('')}}/assets/admin/images/icons/st3.svg" alt="">
                            </div>
                            <div class="cont">
                                <div class="text">  Average Deal Closing Time </div>
                                <h5> {{$averageTime != 'N/A' ? $averageTime.' days' : 'N/A'}} </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="item">
                            <div class="icon">
                                <img src="{{url('')}}/assets/admin/images/icons/st2.svg" alt="">
                            </div>
                            <div class="cont">
                                <div class="text"> Pipeline Value </div>
                                <h5> {{$in_progress_deals}} </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="item">
                            <div class="icon">
                                <img src="{{url('')}}/assets/admin/images/icons/st4.svg" alt="">
                            </div>
                            <div class="cont">
                                <div class="text"> Best Conversion Communication Type </div>
                                <h5> {{$best_communication ? __('daily_logs.types.'.$best_communication) : 'N/A'}} </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-12">
    <div class="dash-item mt-5">
        <div class="chart_head mb-4">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="form-group">
                        <select name="" id="" class="form-control input-sm form-select border-0 fw-600 fs-5 w-auto">
                            <option value=""> Activity Breakdown per Employee </option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <table class="table">
            <thead>
            <tr>
                <th scope="col">
                    Employee
                </th>
                @foreach($communication_ways as $row)
                    <th scope="col">{{ __('daily_logs.types.'.$row) }}</th>
                @endforeach
            </tr>
            </thead>
            <tbody>
            @foreach($employeesCommunications as $row)
                <tr>
                    <td>
                        {{ $row->name ?? ''}}
                    </td>
                    @foreach($communication_ways as $way)
                        <td> {{empty($row->{'type_'.$way}) ? 0 : $row->{'type_'.$way} }} </td>
                    @endforeach

                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
<div class="new-charts py-5">
    <div class="charts p-4 pb-0 bg-light rounded-4">
        <div class="row">
            <div class="col-lg-6">
                <div class="chart-box p-4 rounded-4 border mb-4">
                    <h6 class="pb-3 mb-4 border-bottom border-2"> Number of New Leads </h6>
                    <div id="newLeads"></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="chart-box p-4 rounded-4 border mb-4">
                    <h6 class="pb-3 mb-4 border-bottom border-2"> Sales Towards Targets </h6>
                    <div id="sales"></div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="chart-box p-4 rounded-4 border mb-4">
                    <h6 class="pb-3 mb-4 border-bottom border-2"> Lead Conversion Rate </h6>
                    <div id="leadConversion"></div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="chart-box p-4 rounded-4 border mb-4">
                    <h6 class="pb-3 mb-4 border-bottom border-2"> Won Deals & Lost Deals </h6>
                    <div id="deals"></div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="chart-box p-4 rounded-4 border mb-4">
                    <h6 class="pb-3 mb-4 border-bottom border-2"> Client Communications </h6>
                    <div id="communications"></div>
                </div>
            </div>
        </div>
    </div>
</div>





{{--
<div class="charts_container">
    <div class="row gx-0">
        <div class="col-lg-5">
            <div class="chart_box mt-5">
                <div class="chart_head mb-4">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <select name="" id="" class="form-control input-sm form-select border-0 fw-600 fs-5 w-auto">
                                    <option value=""> Sales Heatmap </option>
                                    <option value=""> Sales Heatmap </option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <div id="chart7"></div>
            </div>
        </div>
        <div class="col-lg-7 ps-lg-5">
            <div class="dash-item mt-5">
                <div class="chart_head mb-4">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <select name="" id="" class="form-control input-sm form-select border-0 fw-600 fs-5 w-auto">
                                    <option value=""> Customer Transaction </option>
                                    <option value=""> Customer Transaction </option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="transaction1">
                                    <label class="form-check-label" for="transaction1">
                                        Name
                                    </label>
                                </div>
                            </th>
                            <th scope="col">Status</th>
                            <th scope="col">Orders</th>
                            <th scope="col">MRR</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                    <label class="form-check-label" for="transaction3">
                                        Pfizer
                                    </label>
                                </div>
                            </td>
                            <td> <span class="tag tag-green"> Subscribed </span> </td>
                            <td> 2 </td>
                            <td> $93.00 </td>
                            <td>
                                <div class="dropdown">
                                <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                    <label class="form-check-label" for="transaction3">
                                        Pfizer
                                    </label>
                                </div>
                            </td>
                            <td> <span class="tag tag-red"> Pending </span> </td>
                            <td> 2 </td>
                            <td> $93.00 </td>
                            <td>
                                <div class="dropdown">
                                <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                    <label class="form-check-label" for="transaction3">
                                        Pfizer
                                    </label>
                                </div>
                            </td>
                            <td> <span class="tag tag-green"> Subscribed </span> </td>
                            <td> 2 </td>
                            <td> $93.00 </td>
                            <td>
                                <div class="dropdown">
                                <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                    <label class="form-check-label" for="transaction3">
                                        Pfizer
                                    </label>
                                </div>
                            </td>
                            <td> <span class="tag tag-red"> Pending </span> </td>
                            <td> 2 </td>
                            <td> $93.00 </td>
                            <td>
                                <div class="dropdown">
                                <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="transaction3">
                                    <label class="form-check-label" for="transaction3">
                                        Pfizer
                                    </label>
                                </div>
                            </td>
                            <td> <span class="tag tag-green"> Subscribed </span> </td>
                            <td> 2 </td>
                            <td> $93.00 </td>
                            <td>
                                <div class="dropdown">
                                <button class="btn bg-transparent border-0 p-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-pen me-1"></i> edit</a></li>
                                    <li><a class="dropdown-item" href="#"> <i class="fal fa-trash me-1"></i> delete</a></li>
                                </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


    <script>
        var bar_chart_options = {
            series: [{
                name: 'Yasmin Ali ',
                data: [12, 20, 35, 85, 80, 72, 63]
            }, {
                name: 'Abdulrahman ',
                data: [15, 24, 35, 74, 41, 76, 55]
            }, {
                name: 'Ezz Eldin  ',
                data: [23, 56, 24, 42, 20, 54, 55]
            }, {
                name: 'Noor Abdullah ',
                data: [40, 54, 65, 78, 54, 24, 35]
            }, {
                name: 'Hussein Ali ',
                data: [15, 25, 45, 74, 78, 80, 65]
            }, {
                name: 'Norhan  ',
                data: [15, 24, 35, 44, 45, 65, 70]
            },],
            colors: ['#3D2E84'],
            chart: {
                type: 'heatmap',
                height: 350
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                // colors: ['transparent']
            },
            xaxis: {
                categories: ['Mon','Sun','Mon','Wed','Thu', 'Fri','Sat'],
            },
            yaxis: {
                title: {
                    text: ''
                }
            },
            fill: {
                opacity: 1
            },
        };
        var chart = new ApexCharts(document.querySelector("#chart7"), bar_chart_options);
        chart.render();
    </script>
--}}
<!-- new charts  -->
<script>
    var options = {
        series: ["{{$new_leads_count}}"],
        chart: {
            height: 340,
            type: 'radialBar'
        },
        colors: ['#3D2E84'],
        plotOptions: {
            radialBar: {
                hollow: {
                    size: '55%'
                },
                track: {
                    background: '#ffffff',
                    opacity: 1,
                    strokeWidth: '100%'
                },
                dataLabels: {
                    name: {
                        show: true,
                        color: '#3D2E84',
                        fontSize: '16px',
                        offsetY: 20
                    },
                    value: {
                        show: true,
                        color: '#3D2E84',
                        fontSize: '32px',
                        fontWeight: 'bold',
                        offsetY: -15,
                        formatter: function (val) {
                            return val;
                        }
                    }
                }
            }
        },
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'light',
                shadeIntensity: 0.4,
                gradientToColors: ['#74e2ad'],
                inverseColors: false,
                opacityFrom: 0.9,
                opacityTo: 0.9,
                stops: [0, 100]
            }
        },
        stroke: {
            lineCap: 'round'
        },
        labels: ['New Leads']
    };

    var chart = new ApexCharts(document.querySelector("#newLeads"), options);
    chart.render();
</script>


<script>
    console.log({!! json_encode(array_values($achieved_sales)) !!})
    var options = {
        series: [{
            name: 'Achieved Sales',
            data: {!! json_encode(array_values($achieved_sales)) !!}
        }, {
            name: 'Target Sales',
            data: {!! json_encode(array_values($target_sales)) !!}
        }],
        chart: {
            height: 300,
            type: 'area'
        },
        colors: ['#3D2E84', '#74e2ad'],
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth'
        },
        xaxis: {
            categories: {!! json_encode($months) !!},
        },
        yaxis: {
            min: 0,
            max: {{$maxSalesTowardsTarget}},
            tickAmount: 5,
            title: {
                text: 'Sales'
            }
        },
        tooltip: {
            x: {
                formatter: function(val, opts) {
                    return opts.w.globals.labels[opts.dataPointIndex];
                }
            },
        },
    };

    var chart = new ApexCharts(document.querySelector("#sales"), options);
    chart.render();
</script>


<script>
    var options = {
        series: [
            {
                name: 'Calls',
                type: 'column',
                data: {!! json_encode(array_values($phones)) !!}
            },
            {
                name: 'Zoom Meetings',
                type: 'column',
                data: {!! json_encode(array_values($zooms)) !!}
            },
            {
                name: 'E-Mails',
                type: 'column',
                data: {!! json_encode(array_values($emails)) !!}
            },
            {
                name: 'LinkedIn Msg',
                type: 'column',
                data: {!! json_encode(array_values($linkedins)) !!}
            },
            {
                name: 'Acquaintance',
                type: 'column',
                data: {!! json_encode(array_values($acqs)) !!}
            },
            {
                name: 'Face To Face',
                type: 'column',
                data: {!! json_encode(array_values($faces)) !!}
            },
            {
                name: 'Total Interactions',
                type: 'line',
                data: {!! json_encode(array_values($totals)) !!}
            }
        ],
        chart: {
            height: 400,
            type: 'line',
            stacked: false
        },
        colors: ['#3D2E84', '#4CAF50', '#FFC107','#ff81e4','#7f7f7f','#0dcaf0', '#FF5722'],
        stroke: {
            width: [0, 0, 0, 3],
            curve: 'smooth'
        },
        plotOptions: {
            bar: {
                columnWidth: '50%',
                endingShape: 'rounded'
            }
        },
        xaxis: {
            categories: {!! json_encode(array_values($months)) !!}
        },
        yaxis: [
            {
                title: {
                    text: 'Interactions'
                }
            }
        ],
        tooltip: {
            shared: true,
            intersect: false
        },
        legend: {
            position: 'top'
        },
        fill: {
            opacity: [0.9, 0.9, 0.9, 1]
        },
    };

    var chart = new ApexCharts(document.querySelector("#communications"), options);
    chart.render();
</script>


<script>
    var options = {
        series: [
            {
                name: 'Won Deals',
                type: 'column',
                data: {!! json_encode(array_values($won_deals)) !!}
            },
            {
                name: 'Lost Deals',
                type: 'column',
                data: {!! json_encode(array_values($lost_deals)) !!}
            }
        ],
        chart: {
            height: 400,
            type: 'bar',
            stacked: false
        },
        colors: ['#4CAF50', '#ff5722'],
        plotOptions: {
            bar: {
                columnWidth: '50%',
                borderRadius: 8,
                borderRadiusApplication: 'end',
                dataLabels: {
                    position: 'top'
                }
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            width: 2,
            colors: ['transparent']
        },
        xaxis: {
            categories: {!! json_encode(array_values($months)) !!}
        },
        yaxis: {
            title: {
                text: 'Number of Deals'
            }
        },
        tooltip: {
            shared: true,
            intersect: false
        },
        legend: {
            position: 'top'
        },
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'light',
                type: 'vertical',
                shadeIntensity: 0.5,
                gradientToColors: ['#81C784', '#ff8a65'],
                inverseColors: false,
                opacityFrom: 0.9,
                opacityTo: 0.9,
                stops: [0, 100]
            }
        },
        grid: {
            borderColor: '#f1f1f1',
            padding: {
                left: 10,
                right: 10
            }
        }
    };

    var chart = new ApexCharts(document.querySelector("#deals"), options);
    chart.render();
</script>


<script>
    var options = {
        series: [{
            name: 'Conversion Rate (%)',
            data: {!! json_encode(array_values($lead_rates)) !!}
        }],
        chart: {
            height: 400,
            type: 'area',
            zoom: {
                enabled: false
            }
        },
        colors: ['#3D2E84'],
        dataLabels: {
            enabled: true,
            formatter: function(val) {
                return val + "%";
            }
        },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'light',
                gradientToColors: ['#D1C4E9'],
                shadeIntensity: 0.4,
                type: 'vertical',
                opacityFrom: 0.8,
                opacityTo: 0.3,
                stops: [0, 100]
            }
        },
        xaxis: {
            categories: {!! json_encode(array_values($months)) !!}
        },
        yaxis: {
            title: {
                text: 'Conversion Rate (%)'
            },
            min: 0,
            max: 100
        },
        tooltip: {
            shared: true,
            intersect: false,
            y: {
                formatter: function(val) {
                    return val + "%";
                }
            }
        },
        legend: {
            position: 'top'
        }
    };

    var chart = new ApexCharts(document.querySelector("#leadConversion"), options);
    chart.render();
</script>
