@extends('crm.layouts.master')
@section('title','Dashboard')
@section('page-css')
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>Dashboard</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row">
        <div class=" col-md-6">
            <div class="card info-card sales-card">
                <div class="card-body">
                    <h5 class="card-title">Total Balance</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-dollar"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{$balance}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" col-md-6">
            <div class="card info-card sales-card">
                <div class="card-body">
                    <h5 class="card-title">Network Speed</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-tachometer"></i>
                        </div>
                        <div class="ps-3">
                            <h6><span id="speed"></span> MB</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <hr>
    <h2>Last 24 hours report</h2>
    <div class="row">
        <div class="col-xxl-3 col-md-4">
            <div class="card info-card customers-card">
                <div class="card-body">
                    <h5 class="card-title">Average Call Duration</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-clock-o"></i>
                        </div>
                        <div class="ps-3">
                            <h6>{{ceil($averageDuration)}} sec</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-md-4">
            <div class="card info-card revenue-card">
                <div class="card-body">
                    <h5 class="card-title">Call Success</h5>
                    <div class="d-flex align-items-center">
                        <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fa fa-check"></i>
                        </div>
                        <div class="ps-3">
                            @if($callCounts->total_calls > 0)
                                <h6>{{ceil(($callCounts->answered_calls/$callCounts->total_calls)*100)}} %</h6>
                            @else
                                <h6>0 %</h6>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Calls Statistics</h5>

                    <!-- Bar Chart -->
                    <canvas id="barChart" style="height: 400px;"></canvas>
                    <script>
                        document.addEventListener("DOMContentLoaded", () => {
                            new Chart(document.querySelector('#barChart'), {
                                type: 'bar',
                                data: {
                                    labels: ['Total Calls', 'Answered', 'No Answered', 'Busy'],
                                    datasets: [{
                                        label: 'Call Statistics',
                                        data: [{{$callCounts->total_calls}}, {{$callCounts->answered_calls}}, {{$callCounts->no_answered_calls}}, {{$callCounts->busy_calls}}],
                                        backgroundColor: [
                                            'rgba(255, 99, 132, 0.2)', // Total Calls
                                            'rgba(54, 162, 235, 0.2)', // Answered
                                            'rgba(255, 206, 86, 0.2)', // No Answered
                                            'rgba(85,166,35, 0.2)'  // Busy
                                        ],
                                        borderColor: [
                                            'rgba(255, 99, 132, 1)',
                                            'rgba(54, 162, 235, 1)',
                                            'rgba(255, 206, 86, 1)',
                                            'rgba(85,166,35, 1)'
                                        ],
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    indexAxis: '',
                                    scales: {
                                        y: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            });
                        });
                    </script>
                    <!-- End Bar CHart -->

                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Calls By Country</h5>

                    <!-- Bar Chart -->
                    <canvas id="countyChat" style="height: 400px;"></canvas>
                    <script>
                        document.addEventListener("DOMContentLoaded", () => {
                            new Chart(document.querySelector('#countyChat'), {
                                type: 'bar',
                                data: {
                                    labels: {!! $countries_label !!},
                                    datasets: [{
                                        label: 'Call by country',
                                        data: {{$calls_date}},
                                        backgroundColor: [
                                            'rgba(255, 99, 132, 0.2)', // 1st
                                            'rgba(54, 162, 235, 0.2)', // 2nd
                                            'rgba(255, 206, 86, 0.2)', // 3rd
                                            'rgba(85,166,35, 0.2)', // 4th
                                            'rgba(217,84,15,0.2)'  // 5th
                                        ],
                                        borderColor: [
                                            'rgba(255, 99, 132,1)', // 1st
                                            'rgba(54, 162, 235,1)', // 2nd
                                            'rgba(255, 206, 86,1)', // 3rd
                                            'rgba(85,166,35,1)', // 4th
                                            'rgba(217,84,15,1)'  // 5th
                                        ],
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    indexAxis: 'y',
                                    scales: {
                                        y: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                            });
                        });
                    </script>
                    <!-- End Bar CHart -->

                </div>
            </div>
        </div>
        <div class="col-lg-6 d-none">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Doughnut Chart</h5>

                    <!-- Doughnut Chart -->
                    <canvas id="doughnutChart" style="height: 400px;"></canvas>
                    <script>
                        document.addEventListener("DOMContentLoaded", () => {
                            new Chart(document.querySelector('#doughnutChart'), {
                                type: 'doughnut',
                                data: {
                                    labels: [
                                        'Red',
                                        'Blue',
                                        'Yellow'
                                    ],
                                    datasets: [{
                                        label: 'My First Dataset',
                                        data: [300, 50, 100],
                                        backgroundColor: [
                                            'rgb(255, 99, 132)',
                                            'rgb(54, 162, 235)',
                                            'rgb(255, 205, 86)'
                                        ],
                                        hoverOffset: 4
                                    }]
                                }
                            });
                        });
                    </script>
                    <!-- End Doughnut CHart -->

                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script src="{{asset('assets/chart.js/chart.umd.js')}}"></script>
    <script>
        $(document).ready(function () {
            $("#indexli").addClass("nav-active");
            var fileSize = 500000; // Adjust the file size as needed
            var downloadUrl = 'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg';
            var startTime = new Date().getTime();
            fetch(downloadUrl)
                .then(response => {
                    var endTime = new Date().getTime();
                    var duration = (endTime - startTime) / 1000;
                    var speedInKbps = fileSize / duration / 1000;
                    var speedInMBps = Math.ceil((speedInKbps / 8) / 1000); // Convert to MBps
                    $("#speed").html(speedInMBps); // Update the speed display with speed in MBps
                })
                .catch(error => {
                    $("#speed").html(0); // Update the speed display in case of error
                });
        });
    </script>
@endsection