@extends('layouts.web')

@section('css')
<link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
<style>
    canvas {
        max-height: 350px;
    }
</style>
@endsection

@section('content')
<div class="container-fluid pt-3">
    <div class="row mt-3">
        <div class="col-3">
            <form action="{{ route('report.submit') }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="post"
            >
            @csrf
                <div class="form-group">
                    <label for="date">รายงาน ประจำปี <span class="text-red">*</span></label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control datepiacker" id="year" name="year" placeholder="ปี" autocomplete="off" value="{{ $year }}" required>
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                        </div>
                        <button type="submit" class="btn btn-outline-success show-outline-btn ml-2" value="search">แสดง</button>
                    </div>
                    @error('year')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </form>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="incomeChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="expensesChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="studentChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="courseChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('footerscript')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.min.js') }}"></script>
<script src="{{ asset('js/report.js') }}"></script>
<script>
    //var month = <?php echo $month; ?>;
    var month = {!! $month !!};
    var income = {!! $income !!};
    var expenses = {!! $expenses !!};
    var student = {!! $student !!};

    const options = {
                        elements: {
                            point:{
                                radius: 0
                            }
                        },
                        responsive: true,
                        scales: {
                            xAxes: [{
                                    ticks: {
                                        maxRotation: 90,
                                        minRotation: 80
                                    },
                                    gridLines: {
                                        offsetGridLines: true
                                    }
                                },
                                {
                                    position: "top",
                                    ticks: {
                                        maxRotation: 90,
                                        minRotation: 80
                                    },
                                    gridLines: {
                                        offsetGridLines: true
                                    }
                            }],
                            yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                            }]
                        }
                    };

    var iChart = document.getElementById("incomeChart");
    var incomeChart = new Chart(iChart, {
        type: 'bar',
        data: {
            labels: month,
            datasets: [
                {
                    label: 'รายได้',
                    data: income,
                    backgroundColor: [
                        'rgba(59, 169, 231, 0.5)',
                    ],
                    borderColor: [
                        'rgba(59, 169, 231, 1)',
                    ],
                    borderWidth: 1
                }
            ]
        },
        options: options
    });

    var eChart = document.getElementById("expensesChart");
    var expensesChart = new Chart(eChart, {
        type: 'bar',
        data: {
            labels: month,
            datasets: [
                {
                    label: 'รายจ่าย',
                    data: expenses,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                    ],
                    borderWidth: 1
                }
            ]
        },
        options: options
    });

    var sChart = document.getElementById("studentChart");
    var studentChart = new Chart(sChart, {
        type: 'bar',
        data: {
            labels: month,
            datasets: [
                {
                    label: 'นักเรียน',
                    data: student,
                    backgroundColor: [
                        'rgba(40, 157, 88, 0.5)',
                    ],
                    borderColor: [
                        'rgba(40, 157, 88, 1)',
                    ],
                    borderWidth: 1
                }
            ]
        },
        options: options
    });

    var cChart = document.getElementById("courseChart");
    var courseChart = new Chart(cChart, {
        type: 'pie',
        data: {
            labels: {!! $courses_label !!},
            datasets: [
                {
                    label: 'จำนวนนักเรียนในแต่ละคอร์ส',
                    data: {!! $courses !!},
                    backgroundColor: [  'rgb(255, 205, 86)',
                                        'rgb(69, 179, 157)',
                                        'rgb(255, 99, 132)',
                                        'rgb(255, 159, 64)',
                                        'rgb(205, 92, 92)',
                                        'rgb(54, 162, 235)',
                                        'rgb(153, 102, 255)',
                                        'rgb(201, 203, 207)',
                                        'rgb(128, 128, 0)',
                                        'rgb(46, 64, 83)',
                                        'rgb(118, 68, 138)',
                                        'rgb(31, 97, 141)',
                                        'rgb(75, 192, 192)',
                                    ]
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                title: {
                    display: false,
                    text: 'จำนวนนักเรียนในแต่ละคอร์ส'
                },
                datalabels: {
                    formatter: (value, ctx) => {
                        let sum = 0;
                        let dataArr = ctx.chart.data.datasets[0].data;
                        dataArr.map(data => {
                            sum += data;
                        });
                        let percentage = (value*100 / sum).toFixed(2)+"%";
                        return percentage;
                    },
                    color: '#fff',
                }
            },
            maintainAspectRatio: false
        }
    });

</script>
@endsection


