@extends('layouts.master')

@section('title', 'Template')
{{-- @section('content-header', 'Template') --}}

@section('style-plugins')
<link rel="stylesheet" href="{{ asset('assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
<!-- iCheck -->
<link rel="stylesheet" href="{{ asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<!-- JQVMap -->
<link rel="stylesheet" href="{{ asset('assets/plugins/jqvmap/jqvmap.min.css') }}">
<!-- Daterange picker -->
<link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
<!-- summernote -->
<link rel="stylesheet" href="{{ asset('assets/plugins/summernote/summernote-bs4.min.css') }}">
@endsection

@section('style-custom')

@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Jumlah Permohonan</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ App\Models\DataIntal::whereDate('created_at',Carbon\Carbon::now()->toDateString())->count() }}</h3>
                                    <p>Hari Ini</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <a href="{{ url('ijin-tinggal') }}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ App\Models\DataIntal::whereMonth('created_at',Carbon\Carbon::now()->month)->whereYear('created_at',Carbon\Carbon::now()->year)->count() }}</h3>
                                    <p>Bulan Ini</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-comment"></i>
                                </div>
                                <a href="{{ url('ijin-tinggal') }}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ App\Models\DataIntal::whereYear('created_at',Carbon\Carbon::now()->year)->count() }}</h3>
                                    <p>Tahun Ini</p>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-paper-plane"></i>
                                </div>
                                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8 col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Bersedia Menerima Notifikasi</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 col-sm-12">
                            <div class="info-box bg-info">
                                <span class="info-box-icon"><i class="far fa-bookmark"></i></span>
                                @php
                                    $menerima = App\Models\DataIntal::where('menerima_pesan','1')->whereDate('created_at',Carbon\Carbon::now()->toDateString())->count();
                                    $semua = App\Models\DataIntal::whereDate('created_at',Carbon\Carbon::now()->toDateString())->count();
                                @endphp
                                <div class="info-box-content">
                                    <span class="info-box-text">Hari Ini</span>
                                    <span class="info-box-number">
                                        {{ $menerima }}
                                    </span>
        
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 70%"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{ ($semua?(($menerima/$semua)*100):0).'% dari '.$semua }}
                                    </span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12">
                            <div class="info-box bg-success">
                                <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
                                @php
                                    $menerima = App\Models\DataIntal::where('menerima_pesan','1')->whereMonth('created_at',Carbon\Carbon::now()->month)->whereYear('created_at',Carbon\Carbon::now()->year)->count();
                                    $semua = App\Models\DataIntal::whereMonth('created_at',Carbon\Carbon::now()->month)->whereYear('created_at',Carbon\Carbon::now()->year)->count();
                                @endphp
                                <div class="info-box-content">
                                    <span class="info-box-text">Bulan Ini</span>
                                    <span class="info-box-number">
                                        {{ $menerima }}
                                    </span>
        
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 70%"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{ ($semua?(($menerima/$semua)*100):0).'% dari '.$semua }}
                                    </span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12">
                            <div class="info-box bg-warning">
                                <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
                                @php
                                    $menerima = App\Models\DataIntal::where('menerima_pesan','1')->whereYear('created_at',Carbon\Carbon::now()->year)->count();
                                    $semua = App\Models\DataIntal::whereYear('created_at',Carbon\Carbon::now()->year)->count();
                                @endphp
                                <div class="info-box-content">
                                    <span class="info-box-text">Tahun Ini</span>
                                    <span class="info-box-number">
                                        {{ $menerima }}
                                    </span>
        
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 70%"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{ ($semua?(($menerima/$semua)*100):0).'% dari '.$semua }}
                                    </span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Pesan Terkirim</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 col-sm-12">
                            <div class="info-box">
                                <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
        
                                <div class="info-box-content">
                                    <span class="info-box-text">Hari Ini</span>
                                    <span class="info-box-number">{{ App\Models\SentItems::whereDate('created_at',Carbon\Carbon::now()->toDateString())->count() }}</span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12">
                            <div class="info-box">
                                <span class="info-box-icon bg-success"><i class="far fa-flag"></i></span>
        
                                <div class="info-box-content">
                                    <span class="info-box-text">Bulan Ini</span>
                                    <span class="info-box-number">{{ App\Models\SentItems::whereMonth('created_at',Carbon\Carbon::now()->month)->whereYear('created_at',Carbon\Carbon::now()->year)->count() }}</span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-12">
                            <div class="info-box">
                                <span class="info-box-icon bg-warning"><i class="far fa-copy"></i></span>
        
                                <div class="info-box-content">
                                    <span class="info-box-text">Tahun Ini</span>
                                    <span class="info-box-number">{{ App\Models\SentItems::whereYear('created_at',Carbon\Carbon::now()->year)->count() }}</span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 320px;">
                                <canvas id="chartPesan" height="300" style="height: 300px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- /.container-fluid -->
@endsection

@section('script-plugins')
<!-- ChartJS -->
<script src="{{ asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('assets/plugins/chart.js/chartjs-plugin-datalabels.min.js') }}"></script>
<!-- daterangepicker -->
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="{{ asset('assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
<!-- Summernote -->
<script src="{{ asset('assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
@endsection

@section('script-custom')
<script>
    $(function () {
        //-------------
        //- BAR CHART -
        //-------------
        const barChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            datasetFill: false,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks:{
                        beginAtZero: true
                    }
                }]
            },
            plugins: {
                datalabels: {
                    anchor: 'end',
                    align: 'bottom',
                    claml: true,
                    font: {
                        weight: 'bold',
                    },
                    color: 'white'
                }
            }
        };

        var barChartData = {
            labels: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli'],
            datasets: [{
                label: 'Pesan Terkirim',
                data: [65, 59, 80, 81, 56, 55, 40],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(201, 203, 207, 0.2)'
                ],
                borderColor: [
                    'rgb(255, 99, 132)',
                    'rgb(255, 159, 64)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                    'rgb(201, 203, 207)'
                ],
                borderWidth: 1
            }],
        };

        var barChart = new Chart($('#chartPesan'), {
            type: 'bar',
            data: barChartData,
            options: barChartOptions
        });

        $.ajax({
            type: "post",
            url: "{{ url('ajax/chart-pesan') }}",
            success: function (response) {
                barChartData.labels = response.labels;
                barChartData.datasets[0].data = response.data;
                barChartData.datasets[0].backgroundColor = response.backgroundColor;
                barChartData.datasets[0].borderColor = response.borderColor;
                barChart.update();
            }
        });
    });
</script>
@endsection