@extends('layouts.app')

@section('content')
    <div class="page-content-wrapper">

        @can('view dashboard')
        <div class="row">
            <div class="col-xl-4 col-md-6">
                <div class="card bg-warning mini-stat position-relative">
                    <div class="card-body">
                        <div class="mini-stat-desc">
                            <h5 class="text-uppercase verti-label font-size-16 text-white-50">Reswara
                            </h5>
                            <div class="text-white">
                                <h5 class="text-uppercase font-size-16 text-white-50">Ijin Masuk Diterima</h5>
                                <h3 class="mb-3 text-white">{{ $diterima }}</h3>
                                <div class="">
                                    <span class="badge bg-light text-info"> RESWARA </span>
                                </div>
                            </div>
                            <div class="mini-stat-icon">
                                <i class="mdi mdi-cube-outline display-2"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Col -->

            <div class="col-xl-4 col-md-6">
                <div class="card bg-warning mini-stat position-relative">
                    <div class="card-body">
                        <div class="mini-stat-desc">
                            <h5 class="text-uppercase verti-label font-size-16 text-white-50">Reswara
                            </h5>
                            <div class="text-white">
                                <h5 class="text-uppercase font-size-16 text-white-50">Ijin Masuk Pending</h5>
                                <h3 class="mb-3 text-white">{{ $pending }}</h3>
                                <div class="">
                                    <span class="badge bg-light text-info"> RESWARA </span>
                                </div>
                            </div>
                            <div class="mini-stat-icon">
                                <i class="mdi mdi-buffer display-2"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Col -->

            <div class="col-xl-4 col-md-6">
                <div class="card bg-warning mini-stat position-relative">
                    <div class="card-body">
                        <div class="mini-stat-desc">
                            <h5 class="text-uppercase verti-label font-size-16 text-white-50">Reswara
                            </h5>
                            <div class="text-white">
                                <h5 class="text-uppercase font-size-16 text-white-50">Ijin Masuk Ditolak
                                </h5>
                                <h3 class="mb-3 text-white">{{ $ditolak }}</h3>
                                <div class="">
                                    <span class="badge bg-light text-info"> RESWARA </span>
                                </div>
                            </div>
                            <div class="mini-stat-icon">
                                <i class="mdi mdi-tag-text-outline display-2"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Col -->
        </div>
        <!-- End Row -->

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="card-title mb-4">Permohonan Diterima Bulanan</h4>

                        <canvas id="bar" height="300" style="height: 300px;"></canvas>

                    </div>
                    <!-- End Cardbody-->
                </div>
                <!-- End Card-->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">

                        <h4 class="card-title mb-4">Status Permohonan</h4>

                        <canvas id="pie" height="260"></canvas>



                    </div>
                </div>
                <!-- End Card-->
            </div>
            <!-- End Col -->

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-4">Permohonan Terbaru</h4>
                        <div class="table-responsive">
                            {{-- <table class="table table-hover align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Kode Permohonan</th>
                                        <th>Tgl Permohonan Dibuat</th>
                                        <th>Nama Lembaga</th>
                                        <th>Judul Penelitian</th>
                                        <th>Tgl Presentasi</th>
                                        <th>Tgl Mulai Penelitian</th>
                                        <th>Tgl Selesai Penelitian</th>
                                        <th>Status Presentasi</th>
                                        <th>Status Pembayaran</th>
                                        <th>Status Hasil Penelitian</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table> --}}

                            <table class="table table-hover align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama</th>
                                        <th>No Identitas</th>
                                        <th>Jenis Kelamin</th>
                                        <th>No Telp</th>
                                        <th>Tempat / Tanggal Lahir</th>
                                        <th>Pendidikan Terakhir</th>
                                        <th>Alamat</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach($PermohonanTerbaru as $data)
                                        <tr>
                                            <td> {{ $loop->iteration }} </td>
                                            <td> {{ $data->nama_siswa }} </td>
                                            <td> {{ $data->no_identitas }} </td>
                                            <td> {{ $data->jenis_kelamin }} </td>
                                            <td> {{ $data->no_hp_siswa }} </td>
                                            <td> {{ $data->tempat_lahir }} / {{ $data->tanggal_lahir }} </td>
                                            <td> {{ $data->tingkatan_sekolah }} </td>
                                            <td> {{ $data->alamat_siswa }} </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- End Cardbody -->
                </div>
                <!-- End card -->
            </div>
            <!-- End Col -->
        </div>
        @endcan

        @cannot('view dashboard')
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-body">
                        <div class="">
                            <img src="{{ asset('assets/images/welcome.jpg') }}" class="img-fluid shadow" alt="Responsive image">
                        </div>
                        {{-- (MAX YOUR LEVEL WITH RESWARA) --}}
                        <h4 class="card-title text-center mt-2">Selamat Datang di Aplikasi RESWARA <br> <span class="text-primary">  </span></h4>

                        @if (Auth::user()->hasRole('Siswa'))
                            @if (Auth::user()->siswa->status == 'proses')
                            <p> Pendaftaranmu sedang dalam proses konfirmasi admin <span class="text-primary">RESWARA</span> yaa :)</p>
                            @endif

                            @if (Auth::user()->siswa->status == 'pending')
                            <p> Untuk konfirmasi pendaftaran <span class="text-primary">RESWARA</span>, silakan isi formulir dibawah ini :</p>

                            <form method="POST" action="{{ route('upload_bukti_pembayaran') }}" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="siswa_id" class="form-control" value="{{ Auth::user()->siswa->id }}" required>

                                <div class="mb-3">
                                    <div>
                                        <h5 class="font-size-14 mb-2">Metode Pembayaran</h5>
                                        <div class="form-check mb-2">
                                            <input required class="form-check-input" type="radio" name="metode_pembayaran" id="metode_pembayaran1" value="tunai" checked="">
                                            <label class="form-check-label" for="metode_pembayaran1">
                                                Tunai
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input required class="form-check-input" type="radio" name="metode_pembayaran" id="metode_pembayaran2" value="transfer">
                                            <label class="form-check-label" for="metode_pembayaran2">
                                                Transfer
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <div>
                                        <h5 class="font-size-14 mb-2">Tipe Pembayaran</h5>
                                        <div class="form-check mb-2">
                                            <input required class="form-check-input" type="radio" name="tipe_pembayaran" id="tipe_pembayaran1" value="muka" checked="">
                                            <label class="form-check-label" for="tipe_pembayaran1">
                                                Pembayaran 100% Di Muka
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input required class="form-check-input" type="radio" name="tipe_pembayaran" id="tipe_pembayaran2" value="bertahap">
                                            <label class="form-check-label" for="tipe_pembayaran2">
                                                Pembayaran Bertahap 50% Di Muka dan 50% 1 Bulan Kemudian
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div id="upload-container">
                                    <div class="mb-3">
                                        <label for="bukti_pembayaran"> Bukti Pembayaran : </label>
                                        <input type="file" name="bukti_pembayaran" class="form-control" required>
                                    </div>
                                </div>



                                <button type="submit"
                                    class="btn btn-primary waves-effect waves-light me-1">
                                    Submit
                                </button>
                            </form>
                            @endif
                        @endif

                    </div>
                </div>
                <!-- End Card-->
            </div>
            <!-- End Col -->
        </div>
        @endcannot

    </div>
@endsection


@push('scripts')
    <!-- Chart JS -->
    <script src=" {{ asset('assets/libs/chart.js/Chart.bundle.min.js') }} "></script>
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> --}}

    @can('view dashboard')

        <script>
            var xValues = [];

            @foreach ($DiterimaBulanan as $a)
                xValues.push("{{$a->month}}");
            @endforeach

            var red = [];
            var green = [];
            var blue = [];


            @foreach ($Chart['DiterimaBulananAktif'] as $b)
                red.push("{{$b->count}}");
            @endforeach

            @foreach ($Chart['DiterimaBulananProses'] as $b)
                green.push("{{$b->count}}");
            @endforeach

            @foreach ($Chart['DiterimaBulananDiTolak'] as $b)
                blue.push("{{$b->count}}");
            @endforeach

            new Chart("bar", {
                type: "line",
                data: {
                    labels: xValues,
                    datasets: [{
                    data: red,
                    borderColor: "red",
                    fill: false
                    }, {
                    data: green,
                    borderColor: "green",
                    fill: false
                    }, {
                    data: blue,
                    borderColor: "blue",
                    fill: false
                    }]
                },
                options: {
                    legend: {display: false}
                }
            });
        </script>

    @endcan
    <script>
        $(document).ready(function () {

            @if(Auth::user()->siswa?->status == 'pending')
            // $('input[name="metode_pembayaran"]').change(function (e) {
            //     let metode = $(this).val()
            //     if (metode == 'transfer') {
            //         $('#upload-container').append(`
            //             <div class="mb-3">
            //                 <label for="bukti_pembayaran"> Bukti Pembayaran : </label>
            //                 <input type="file" name="bukti_pembayaran" class="form-control" required>
            //             </div>
            //         `)
            //     }else{
            //         $('#upload-container').html('');
            //     }
            // });
            @endif

        });
    </script>


@endpush