@extends('layouts.app')
@push('styles')
<style>
    /* calender */
    #calendar {
        margin: 0 auto;
        font-size: 15px;
    }

    .fc-content-skeleton>table>thead>tr>td {
        text-align: center;
    }

    .fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
        float: none;
    }


    .fc-toolbar h2 {
        font-size: 12px;
        white-space: normal !important;
    }

    /* click +2 more for popup */
    .fc-more-cell a {
        display: block;
        width: 100%;
        margin: 1px auto 0 auto;
        border-radius: 3px;
        background: grey;
        color: transparent;
        overflow: hidden;
        height: 4px;
    }

    .fc {
        text-align: center !important;
    }

    .fc td,
    .fc th {
        border-style: none !important;
    }


    .fc-view-month .fc-event,
    .fc-view-agendaWeek .fc-event,
    .fc-content {
        font-size: 0;
        overflow: hidden;
        height: 2px;
    }

    .fc-view-agendaWeek .fc-event-vert {
        font-size: 0;
        overflow: hidden;
        width: 2px !important;
    }

    .fc-agenda-axis {
        width: 20px !important;
        font-size: .7em;
    }

    .fc-button-content {
        padding: 0;
    }
</style>
@endpush
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />

    <div class="page-content-wrapper">

        @can('view dashboard')
            @if (isset($_GET['kalendar']))
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12 col-md-6">
                                <div id='calendar' class="fc-time"></div>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                <br>
                                <div id="content-kalender">
                                    @isset($_GET['date'])
                                        @foreach ($tanggal as $item)
                                            <a href="#" class="target_access" ids="{{$item->id}}">
                                                <div class="card bg-warning">
                                                    <div class="card-body">
                                                        <div class="text" style="color: white;">
                                                            <span style="font-weight: bold; font-size: 16px;">{{$item->jadwal->kegiatan}}</span> <br>
                                                            <span>{{$item->jadwal->start}} - {{$item->jadwal->ends}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    @endisset
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <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>
            @endif

        @endcan

        @cannot('view dashboard')
        <div class="row">
            @if (Auth::user()->hasRole('Siswa'))
                @if (Auth::user()->siswa->status == 'proses' || Auth::user()->siswa->status == 'pending')
                <div class="col-md-6 mx-auto">
                    <div class="card">
                        <div class="card-body">
                            @if (Auth::user()->siswa->status == 'proses')
                                <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>
                                <p> Pendaftaranmu sedang dalam proses konfirmasi admin <span class="text-primary">RESWARA</span> yaa :)</p>
                            @endif

                            @if (Auth::user()->siswa->status == 'pending')
                                <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>
                                <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
                        </div>
                    </div>
                    <!-- End Card-->
                </div>
                @else
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12 col-md-6">
                                <div id='calendar' class="fc-time"></div>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                <br>
                                <div id="content-kalender">
                                    @isset($_GET['date'])
                                        @foreach ($tanggal as $item)
                                            <a href="#" class="target_access" ids="{{$item->id}}">
                                                <div class="card bg-warning">
                                                    <div class="card-body">
                                                        <div class="text" style="color: white;">
                                                            <span style="font-weight: bold; font-size: 16px;">{{$item->jadwal->kegiatan}}</span> <br>
                                                            <span>{{$item->jadwal->start}} - {{$item->jadwal->ends}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    @endisset
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            @endif
            <!-- End Col -->
        </div>
            @if (isset($_GET['kalendar']))
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12 col-md-6">
                                <div id='calendar' class="fc-time"></div>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                <br>
                                <div id="content-kalender">
                                    @isset($_GET['date'])
                                        @foreach ($tanggal as $item)
                                            <a href="#" class="target_access" ids="{{$item->id}}">
                                                <div class="card bg-warning">
                                                    <div class="card-body">
                                                        <div class="text" style="color: white;">
                                                            <span style="font-weight: bold; font-size: 16px;">{{$item->jadwal->kegiatan}}</span> <br>
                                                            <span>{{$item->jadwal->start}} - {{$item->jadwal->ends}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    @endisset
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @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')
        @if (!isset($_GET['kalendar']))
        <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>
        @endif
    @endcan
    <script>
        $(document).ready(function () {

            var calendar = $('#calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                defaultView: 'month',
                showNonCurrentDates: false,
                fixedWeekCount: false,
                contentHeight: "auto",
                handleWindowResize: true,
                themeSystem: 'bootstrap3',
                // events: {
                //     url: '{{url("calendar")}}?kalender=kalender',
                //     // color: '#3F8664',
                //     // textColor: '#3F8664',
                // },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
                    // alert(start);
                        $.ajax({
                            url: `{{url('/')}}?tanggal=${start}`,
                            type: "GET",
                            success: function(response) {
                                console.log(response.data);
                                $('#content-kalender').html("");
                                $.each(response.data, function(indexOrKey, value) {
                                    var html = `
                                        <a href="#" class="target_access" ids="${value.id}">
                                            <div class="card bg-warning">
                                                <div class="card-body">
                                                    <div class="text" style="color: white;">
                                                        <span style="font-weight: bold; font-size: 16px;">${value.jadwal.kegiatan}</span> <br>
                                                        <span>${value.jadwal.start} - ${value.jadwal.ends}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    `;

                                    $('#content-kalender').append(html);
                                });
                                // calendar.fullCalendar('refetchEvents');
                                // alert('Agenda berhasil disimpan!');
                            },
                        });
                    // var title = prompt('Masukan Judul Kegiatan');
                    // if (title) {
                    //     var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                    //     $.ajaxSetup({
                    //         headers: {
                    //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    //         }
                    //     });

                    // }
                },
                eventClick: function(event) {
                    var id = event.id;
                    // $.ajaxSetup({
                    //     headers: {
                    //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    //     }
                    // });
                    // $.ajax({
                    //     url: "{{url("calendar")}}?kalender=show&id=" + id,
                    //     type: "GET",
                    //     success: function(response) {
                    //         var kegiatan = response.kegiatan;
                    //         // console.log();
                    //         // calendar.fullCalendar('refetchEvents');
                    //         alert(`${kegiatan.name}\n${kegiatan.description}`);
                    //     },
                    // });
                }
            });

            $(document).on('click','.target_access', function() {
                // alert();
                var url = "{{url('/')}}";
                $.ajax({
                    url: `${url}?target=${$(this).attr('ids')}`,
                    type: "GET",
                    success: function(response) {
                        console.log(response);
                        if(response.status == false) {
                            alert(response.message);
                        } else {
                            if(confirm(response.message)) {
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });

                                var url = "{{url('/jadwal')}}";

                                $.ajax({
                                    url: `${url}/${response.target.jadwal_id}?target=${response.target.id}&kelender=true`,
                                    type: "PUT",
                                    success: function(response) {
                                        // 
                                        alert("Target Tercapai");
                                        var url = "{{url('/')}}";
                                        window.location.href = `${url}?date=${response.target.tanggal}`;
                                        // calendar.fullCalendar('refetchEvents');
                                        // alert('Agenda berhasil disimpan!');
                                    },
                                });
                            }
                        }
                    },
                });
            });

        });
    </script>


@endpush