@extends('layouts.master')

@section('web_title')
  {{ $konfig->web_title }}
@endsection
@section('favicon')
  {{ $konfig->favicon }}
@endsection
@section('logo')
  {{ $konfig->logo }}
@endsection

@section('content')
<div class="row">

    @if($level['name'] == 'Wali Murid')
        <div class="col-md-12 mb-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title mb-3">
                        Data Pembayaran Siswa
                    </h4>

                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="display table table-striped" style="width:100%">
                            <thead>
                            <tr>
                                <th>No.</th>
                                <th>NIS</th>
                                <th>Nama Siswa</th>
                                <th>Aksi</th>
                            </tr>
                            </thead>
                            <tbody>
                                                                @foreach($siswa as $row)
                                <tr>
                                    <td>{{ $no++ }}</td>
                                    <td>{{ $row->nis }}</td>
                                    <td>{{ $row->nama_siswa }}</td>
                                    <td>
                                        <a href="{{ route('tagihan_siswa', $row['nis']) }}" class="btn btn-success btn-sm">Detail</a>
                                        <!-- <a href="{{ route('historytransaksi_siswa', $row->nis) }}" class="btn btn-primary">Riwayat Transaksi</a> -->
                                        <form method="post" id="frm-nota" action="{{ route('historytransaksi_siswa') }}" enctype="multipart/form-data" class="btn">
                                            {{ csrf_field() }}
                                            <input type="text" hidden class="form-control" id="tahun_ajaran_id" name="tahun_ajaran_id" value="{{ $row['tahun_ajaran_id'] }}">
                                            <input type="text" hidden class="form-control" name="siswa_nis" value="{{ $row['nis'] }}">
                                            <button type="submit" class="btn btn-sm btn-primary">Riwayat Transaksi</button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    
                </div>
            </div>
        </div>
        <div style="display: none;">
            <tbody>
                @php $chartData = []; @endphp
                @foreach(month_date_array($year, $month) as $data)
                    @php
                    $any      = isset($reports[$data]);
                    $grand_bayar = $any ? $reports[$data]->grand_bayar : 0;
                    $subtotal = $any ? $reports[$data]->grand_bayar : 0;
                    @endphp

                    @if($any)
                    <tr>
                        <td class="text-center">{{ date_id($date = $year.'-'.$month.'-'.$data) }}</td>
                        <td class="text-center">Rp. {{ number_format($grand_bayar, 2, ',', '.') }}</td>
                    </tr>
                    @endif
                    @php
                    $chartData[] = ['date' => $data, 'value' => ($subtotal) ];
                    @endphp
                @endforeach
            </tbody>
        </div>
        <!-- end of col -->

    @else
        <!-- ICON BG -->
        <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="card card-icon-bg bg-success o-hidden mb-4">
                <div class="card-body text-center">
                    <i class="i-Money-2 text-white"></i>
                    <div class="content">
                        <h5 class="text-white mt-2 mb-0" style="width: 250px;">Total Pemasukkan</h5>
                        <h4 class="text-white text-24 line-height-1 mb-2" style="width: 250px;">Rp. {{ number_format($pemasukan, 2, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="card card-icon-bg bg-warning o-hidden mb-4">
                <div class="card-body text-center">
                    <i class="i-Financial text-white"></i>
                    <div class="content">
                        <h5 class="text-white mt-2 mb-0" style="width: 250px;">Potensi Pemasukkan</h5>
                        <h4 class="text-white text-24 line-height-1 mb-2" style="width: 250px;">Rp. {{ number_format($potensi, 2, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="card-title">Grafik Laporan</div>
                    <!-- <div id="echartBar" style="height: 400px;"></div> -->
                    <form method="get" class="form-inline well well-sm">
                        <label class="control-label" style="margin-right: 5px;">Lihat Bulanan Per</label>
                        <select name="month" class="form-control" style="margin-right: 5px;">
                            @foreach($months as $key => $value)
                            <option value="{{ $key }}" @if($key == $month) selected="selected" @endif>{{ $value }}</option>
                            @endforeach
                        </select>
                        <select name="year" class="form-control" style="margin-right: 5px;">
                            @foreach($years as $key => $value)
                            <option value="{{ $key }}" @if($key == $year) selected="selected" @endif>{{ $value }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn btn-xs btn-success" style="margin-right: 5px;">Submit</button>
                        <a href="{{ route('home1', ['year' => $year]) }}" type="submit" class="btn btn-xs btn-light">Lihat Tahunan</a>
                    </form>

                    <br><br>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title"><center>Grafik Pendapatan {{ $months[$month] }} {{ $year }}</center></h4>
                        </div>
                        <br>
                        <div class="panel-body">
                            <strong>Rp.</strong>
                            <div id="graphPage" style="height: 250px;"></div>
                            <div class="text-center"><strong>Tanggal</strong></div>
                        </div>
                    </div>

                    <br>

                    <div class="table-responsive">
                        <table id="" class="table table-striped" style="width:100%">
                            <thead>
                            <tr>
                                <th class="text-center">Tanggal</th>
                                <th class="text-center">Total Pendapatan</th>
                            </tr>
                            </thead>
                            <tbody>
                                @php $chartData = []; @endphp
                                @foreach(month_date_array($year, $month) as $data)
                                    @php
                                    $any      = isset($reports[$data]);
                                    $grand_bayar = $any ? $reports[$data]->grand_bayar : 0;
                                    $subtotal = $any ? $reports[$data]->grand_bayar : 0;
                                    @endphp

                                    @if($any)
                                    <tr>
                                        <td class="text-center">{{ date_id($date = $year.'-'.$month.'-'.$data) }}</td>
                                        <td class="text-center">Rp. {{ number_format($grand_bayar, 2, ',', '.') }}</td>
                                    </tr>
                                    @endif
                                    @php
                                    $chartData[] = ['date' => $data, 'value' => ($subtotal) ];
                                    @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif
    
</div>
@endsection

@section('graphPage')
    <script>
        (function() {
            new Morris.Line({
            element: 'graphPage',
            data: {!! collect($chartData)->toJson() !!},
            xkey: 'date',
            ykeys: ['value'],
            labels: ['<i class="nav-icon i-Money-2"></i>'],
            parseTime:false,
            xLabelAngle: 30,
            goals: [0],
            goalLineColors : ['red'],
            lineWidth: 2,
            });
        })();
    </script>
    <!-- <script src="http://gull-html-laravel.ui-lib.com/assets/js/vendor/echarts.min.js"></script>
    <script>
        'use strict';

        $(document).ready(function () {

            // Chart in Dashboard version 1
            var echartElemBar = document.getElementById('echartBar');
            if (echartElemBar) {
                var echartBar = echarts.init(echartElemBar);
                echartBar.setOption({
                    legend: {
                        borderRadius: 0,
                        orient: 'horizontal',
                        x: 'right',
                        data: ['Bulan', 'Tahun']
                    },
                    grid: {
                        left: '8px',
                        right: '8px',
                        bottom: '0',
                        containLabel: true
                    },
                    tooltip: {
                        show: true,
                        backgroundColor: 'rgba(0, 0, 0, .8)'
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: 'Rp. {value}'
                        },
                        min: 0,
                        max: 100000,
                        interval: 25000,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            interval: 'auto'
                        }
                    }],

                    series: [{
                        name: 'Pemasukkan',
                        data: [45000, 82000, 35000, 93000, 71000, 89000, 49000, 91000, 80200, 86000, 35000, 40050],
                        label: { show: false, color: '#639' },
                        type: 'bar',
                        color: '#7569b3',
                        smooth: true,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: -2,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    }]
                });
                $(window).on('resize', function () {
                    setTimeout(function () {
                        echartBar.resize();
                    }, 500);
                });
            }

        });
    </script> -->
@endsection