@extends('admin.layouts.master')

@section('title')
    الصفحة الرئيسية
@endsection

@section('css')


@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">لوحة التحكم</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#"></a>  الصفحة الرئيسية</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-4 col-sm-12 col-md-6">
                <!-- small box -->
                <div class="small-box bg-info">
                    <div class="inner">
                        <h4>عدد المشتركين</h4>

                        <p>{{getInformationData('subscriber')->count()}}</p>
                    </div>

                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-4 col-sm-12 col-md-6">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner">
                        <h4>عدد القنوات</h4>

                        <p>{{getInformationData('channel')->count()}}</p>
                    </div>

                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-4 col-sm-12 col-md-6">
                <!-- small box -->
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h4>عدد الموظفين</h4>

                        <p>{{getInformationData('employee')->count()}}</p>
                    </div>

                </div>
            </div>
            <!-- ./col -->

            <!-- ./col -->
        </div>
        <!-- /.row -->
        <!-- Main row -->
        <br>

        <div class="row">
    <!-- Left col -->
    <section class="col-lg-6 col-sm-12 connectedSortable">
        <!-- DONUT CHART -->
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">تصنيف حالات العملاء</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
        </div>
        <!-- /.card -->
    </section>

    <section class="col-lg-6 col-sm-12 connectedSortable">
        <!-- BAR CHART -->
        <div class="card card-info">
            <div class="card-header" style="background-color: #1ac6e2;">
                <h3 class="card-title">عدد المحادثات لكل العملاء</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <canvas id="barChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
        </div>
        <!-- /.card -->
    </section>
    <section class="col-lg-6 col-sm-12 connectedSortable">
        <!-- BAR CHART -->
        <div class="card card-info">
            <div class="card-header" style="background-color: #5a56e2;">
                <h3 class="card-title">عدد العدد الرسائل لكل القنوات</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <canvas id="barChart2" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
        </div>
        <!-- /.card -->
    </section>
</div>



        <!-- /.row (main row) -->
    </div>
@endsection


@section('js')
  <script>
    // Data fetching function
    function fetchData(type) {
        return {
            labels: [
                @foreach(getInformationData('Status') as $row)
                    '{{$row->name}}',
                @endforeach
            ],
            datasets: [
                {
                    label: 'تصنيف حالات العملاء',
                    backgroundColor: [
                        @foreach(getInformationData('Status') as $row)
                            '{{$row->color}}',
                        @endforeach
                    ],
                    data: [
                        @foreach(getInformationData('Status') as $row)
                            '{{getCountStatus($row->id)}}',
                        @endforeach
                    ],
                }
            ]
        };
    }
    
    
function fetchData2(type) {
        return {
            labels: [
                @foreach(getInformationData('subscriber') as $row)
                    '{{$row->name}}',
                @endforeach
            ],
            datasets: [
               
                {
                    label: 'عدد العملاء',
                    backgroundColor: 'rgba(60,141,188,0.9)',
                    borderColor: 'rgba(60,141,188,0.8)',
                    pointRadius: false,
                    pointColor: '#3b8bba',
                    pointStrokeColor: 'rgba(60,141,188,1)',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    data: [
                        @foreach(getInformationData('subscriber') as $row)
                            '{{countMessagesSubscription($row->id)}}',
                        @endforeach
                    ]
                }
            ]
        };
    }
    
    
        
function fetchData3(type) {
        return {
            labels: [
                @foreach(getInformationData('channel') as $row)
                    '{{$row->name}}',
                @endforeach
            ],
            datasets: [
               
                {
                    label: 'عدد العملاء',
                    backgroundColor: 'rgba(60,141,188,0.9)',
                    borderColor: 'rgba(60,141,188,0.8)',
                    pointRadius: false,
                    pointColor: '#3b8bba',
                    pointStrokeColor: 'rgba(60,141,188,1)',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    data: [
                        @foreach(getInformationData('channel') as $row)
                            '{{countMessagesChannel($row->id)}}',
                        @endforeach
                    ]
                }
            ]
        };
    }

    // Donut Chart
    var donutChartCanvas = $('#donutChart').get(0).getContext('2d');
    var donutData = fetchData('Status');
    var donutOptions = {
        maintainAspectRatio: false,
        responsive: true,
    };
    new Chart(donutChartCanvas, {
        type: 'doughnut',
        data: donutData,
        options: donutOptions
    });

    // Bar Chart
    var barChartCanvas = $('#barChart').get(0).getContext('2d');
    var barChartData = fetchData2('Status');
    var barChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        datasetFill: false
    };
    new Chart(barChartCanvas, {
        type: 'bar',
        data: barChartData,
        options: barChartOptions
    });
    
    
    
    
    
    // Bar Chart
    var barChartCanvas = $('#barChart2').get(0).getContext('2d');
    var barChartData = fetchData3('Status');
    var barChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        datasetFill: false
    };
    new Chart(barChartCanvas, {
        type: 'bar',
        data: barChartData,
        options: barChartOptions
    });

</script>



@endsection