@extends('layouts.app')

@section('content')
    <style>
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 10; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 100%; /* Could be more or less, depending on screen size */
            max-width: 800px; /* Max width */
            border-radius: 5px; /* Rounded corners */
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <div class="page-content-wrapper">
        <div class="card">
            <div class="card-body">
                <form action="">
                    <div class="d-flex justify-content-between">
                        <div class="p-1">
                            <select name="tahun" id="" class="form-control">
                                <option value="">Pilih Tahun</option>
                                @foreach ($tahun as $a)
                                    <option value="{{$a->year}}">{{$a->year}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="p-1"></div>
                        <div class="p-1">
                            <button type="submit" class="btn btn-success">Cari</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title">
                            <h2>Target</h2>
                        </div>
                        <canvas id="targetChart" style="width:100%;max-width:600px"></canvas>
                        <br>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-title p-3">
                            <h2>Keseluruhan</h2>
                        </div>
                        <canvas id="KeseluruhanChart" style="width:100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-body">
                        {{-- <button id="openModal">Open Modal</button> --}}

                        <div id="myModal" class="modal">
                            <div class="modal-content">
                                <span class="close">&times;</span>
                                <h2>Jadwal Kegiatan</h2>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card mt-2" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Nama Siswa</span>
                                                <h5 style="margin-bottom: 7px;" id="siswa-isi"></h5>
                                            </div>
                                        </div>
                                        <div class="card" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Kegiatan</span>
                                                <h5 style="margin-bottom: 7px;" id="kegiatan-isi"></h5>
                                            </div>
                                        </div>
                                        <div class="card" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Lokasi</span>
                                                <h5 style="margin-bottom: 7px;" id="location-isi"></h5>
                                            </div>
                                        </div>
                                        {{-- <div class="card" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Status Sepanjang Waktu</span>
                                                <h5 style="margin-bottom: 7px;" id="all_day-isi"></h5>
                                            </div>
                                        </div> --}}
                                        <div class="card" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Waktu Mulai</span>
                                                <h5 style="margin-bottom: 7px;" id="start-isi"></h5>
                                            </div>
                                        </div>
                                        <div class="card" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Waktu Berakhir</span>
                                                <h5 style="margin-bottom: 7px;" id="ends-isi"></h5>
                                            </div>
                                        </div>
                                        {{-- <div class="card" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Target</span>
                                                <h5 style="margin-bottom: 7px;" id="target-isi"></h5>
                                            </div>
                                        </div> --}}
                                        <div class="card" style="margin-bottom: 0.875rem;">
                                            <div class="card-body" style="padding: 0.25rem 1.25rem !important;">
                                                <span>Catatan</span>
                                                <h5 style="margin-bottom: 7px;" id="notes-isi"></h5>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>Tanggal</th>
                                                    <th>Target Tercapai</th>
                                                </tr>
                                            </thead>
                                            <tbody id="target_table">

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id='calendar'></div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <h3>Laporan Target Capaian kepada Orang Tua.</h3>
                        <form action="{{url('target_capaian')}}" class="" method="post">
                            @csrf
                            <div class="form-group p-1">
                                <select name="nomor_orang_tua" class="form-control" id="" required>
                                    <option value="">Pilih Data Siswa</option>
                                    @if ($type_user == "admin")
                                        @foreach ($siswa as $siswa)
                                            <option value="{{$siswa->id}}">{{$siswa->nama_siswa}}</option>
                                        @endforeach
                                    @elseif($type_user == "siswa")
                                        <option value="{{$siswa->id}}" selected>{{$siswa->nama_siswa}}</option>
                                    @endif
                                </select>
                            </div>
                            <div class="form-group p-1">
                                <select name="tahun" class="form-control" id="tahun">
                                    <option disabled selected>Pilih Tahun</option>
                                    @foreach ($tahun as $a)
                                        <option value="{{$a->year}}" {{isset($_GET['tahun']) && $_GET['tahun'] == $a->year ? 'selected' : '' }}>{{$a->year}}</option>
                                    @endforeach
                                    {{-- <option value="2024" {{isset($_GET['tahun']) && $_GET['tahun'] == '2024' ? 'selected' : '' }}>2024</option> --}}
                                </select>
                            </div>
                            <div class="form-group p-1">
                                <select name="bulan" class="form-control" id="bulan" onchange="updateDays()">
                                    <option disabled selected>Pilih Bulan</option>
                                    <option value="1" {{isset($_GET['bulan']) && $_GET['bulan'] == '1' ? 'selected' : '' }}>Januari</option>
                                    <option value="2" {{isset($_GET['bulan']) && $_GET['bulan'] == '2' ? 'selected' : '' }}>Februari</option>
                                    <option value="3" {{isset($_GET['bulan']) && $_GET['bulan'] == '3' ? 'selected' : '' }}>Maret</option>
                                    <option value="4" {{isset($_GET['bulan']) && $_GET['bulan'] == '4' ? 'selected' : '' }}>April</option>
                                    <option value="5" {{isset($_GET['bulan']) && $_GET['bulan'] == '5' ? 'selected' : '' }}>Mei</option>
                                    <option value="6" {{isset($_GET['bulan']) && $_GET['bulan'] == '6' ? 'selected' : '' }}>Juni</option>
                                    <option value="7" {{isset($_GET['bulan']) && $_GET['bulan'] == '7' ? 'selected' : '' }}>Juli</option>
                                    <option value="8" {{isset($_GET['bulan']) && $_GET['bulan'] == '8' ? 'selected' : '' }}>Agustus</option>
                                    <option value="9" {{isset($_GET['bulan']) && $_GET['bulan'] == '9' ? 'selected' : '' }}>September</option>
                                    <option value="10" {{isset($_GET['bulan']) && $_GET['bulan'] == '10' ? 'selected' : '' }}>Oktober</option>
                                    <option value="11" {{isset($_GET['bulan']) && $_GET['bulan'] == '11' ? 'selected' : '' }}>November</option>
                                    <option value="12" {{isset($_GET['bulan']) && $_GET['bulan'] == '12' ? 'selected' : '' }}>Desember</option>
                                </select>
                            </div>
                            <div class="form-group p-1">
                                <select name="minggu" class="form-control" id="minggu">
                                    <option disabled selected>Pilih Minggu</option>
                                </select>
                            </div>
                            <div class="form-group p-1">
                                <span id="tanggal_perkiraan"></span>
                                <input type="hidden" name="tanggal_awal" value="" id="tanggal_awal_value_spawn">
                                <input type="hidden" name="tanggal_akhir" id="tanggal_akhir_value_spawn">
                            </div>
                            <div class="form-group p-1" style="display: none">
                                <select name="hari" class="form-control" id="hari">
                                    <option disabled selected>Pilih Hari</option>
                                </select>
                            </div>
                            {{-- <div class="form-group p-1">
                                <input type="date" value="{{old('start', request('start'))}}" name="start" class="form-control" id="">
                            </div>
                            <div class="form-group p-1">
                                <input type="date" value="{{old('ends', request('ends'))}}" name="ends" class="form-control" id="">
                            </div> --}}
                            <div class="form-group p-1">
                                <button type="submit" class="btn btn-primary">Kirim</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>
@endsection


@push('scripts')
    <!-- Chart JS -->
    <script src=" {{ asset('assets/libs/chart.js/Chart.bundle.min.js') }} "></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("openModal");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal
        // btn.onclick = function() {
        //     modal.style.display = "block";
        // }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        // Optional: Add confirm and cancel button functionality
        // document.getElementById("confirm").onclick = function() {
        //     alert("Confirmed!");
        //     modal.style.display = "none";
        // }

        // document.getElementById("cancel").onclick = function() {
        //     modal.style.display = "none";
        // }

    </script>
    <script>

        document.addEventListener('DOMContentLoaded', function() {
          var calendarEl = document.getElementById("calendar");
          var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            events: {
                url: '{{url("target_capaian")}}?kalender=kalender',
                color: '#3F8664',
                textColor: 'white',
            },
            editable: true,
            selectable: true,
            eventClick: function(info) {
                console.log(info.event.id);
                $.ajax({
                    url: "{{url('target_capaian')}}?kalender=" + info.event.id,
                    type: "GET",
                    success: function(response) {
                        console.log(response);
                        document.getElementById('siswa-isi').innerHTML = response.data.user.siswa.nama_siswa;
                        document.getElementById('kegiatan-isi').innerHTML = response.data.kegiatan;
                        document.getElementById('location-isi').innerHTML = response.data.location;
                        // if(response.data.all_day == 0) {
                        //     document.getElementById('all_day-isi').innerHTML = "Tidak";
                        // } else {
                        //     document.getElementById('all_day-isi').innerHTML = "Ya";
                        // }
                        // if(response.data.target == 0) {
                        //     document.getElementById('target-isi').innerHTML = "Belum Tercapai";
                        // } else {
                        //     document.getElementById('target-isi').innerHTML = "Tercapai";
                        // }
                        const dateTimeStringStart = response.data.start;
                        const StartTime = dateTimeStringStart.split(' ')[1].slice(0, 5);
                        document.getElementById('start-isi').innerHTML = StartTime;
                        const dateTimeStringEnd =  response.data.ends;
                        const EndTime = dateTimeStringEnd.split(' ')[1].slice(0, 5);
                        document.getElementById('ends-isi').innerHTML = EndTime;
                        document.getElementById('notes-isi').innerHTML = response.data.notes;


                        $('#target_table').html("");

                        $.each(response.data.target_capaian, function(index, item) {
                            var tr = `<tr>
                                    <td>${index + 1}</td>
                                    <td>${item.tanggal}</td>
                                    <td>${item.capaian == 1 ? "Sudah Tercapai" : "Belum Tercapai"}</td>
                                </tr>`;
                            $('#target_table').append(tr);

                        });

                        // calendar.fullCalendar('refetchEvents');
                        // alert('Agenda berhasil dihapus!');
                    },
                });
                var modal = document.getElementById("myModal");
                modal.style.display = "block";
            }
          });
          calendar.render();
        });

      </script>
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script>
        var xValues = ["Target Tercapai", "Target Tidak Tercapai"];
        var yValues = ["{{$target_tercapai}}", "{{$target_belum_tercapai}}"];
        var barColors = [
            "#b91d47",
            "#00aba9",
        ];

        new Chart("targetChart", {
            type: "doughnut",
            data: {
                labels: xValues,
                datasets: [{
                backgroundColor: barColors,
                data: yValues
                }]
            },
            options: {
                title: {
                    display: true,
                }
            }
        });
    </script>

<script>
    let xValues2 = [];
    let tercapai = [];
    let belum_tercapai = [];

    var index = 0;
    @foreach ($keseluruhan_bulan as $b)
        @php
            $bulan = explode('-',$b->month);
        @endphp
        xValues2.push("{{$bulan[1]}}")
        tercapai.push(0);
        belum_tercapai.push(0);
        @foreach ($keseluruhan_target_tercapai as $c)
            @if ($bulan[0] == $c->month)
                tercapai[index] = parseInt('{{$c->count}}');
            @endif
        @endforeach

        @foreach ($keseluruhan_belum_target_tercapai as $c)
            @if ($bulan[0] == $c->month)
                belum_tercapai[index] = parseInt('{{$c->count}}');
            @endif
        @endforeach
        index += 1;
    @endforeach

    new Chart("KeseluruhanChart", {
        type: "line",
        data: {
            labels: xValues2,
            datasets: [{
            data: belum_tercapai,
            borderColor: "red",
            fill: false
            }, {
            data: tercapai,
            borderColor: "blue",
            fill: false
            }]
        },
        options: {
            legend: {display: false}
        }
    });
    </script>
    <script>
            function updateDays() {
                const tahunSelect = document.getElementById('tahun');
                const tahun = tahunSelect.value;
                const bulan = document.getElementById('bulan').value;
                const minggu = document.getElementById('minggu');
                const hari = document.getElementById('hari');

                const resultDiv = document.getElementById('result');

                if (tahun && bulan) {
                    // Menghitung jumlah hari dalam bulan
                    const totalDays = new Date(tahun, bulan, 0).getDate();

                    // Membagi tanggal ke dalam minggu
                    const weeks = [];
                    for (let i = 1; i <= totalDays; i++) {
                        const weekIndex = Math.floor((i - 1) / 7);
                        if (!weeks[weekIndex]) {
                            weeks[weekIndex] = [];
                        }
                        weeks[weekIndex].push(i);
                    }

                    // Menampilkan hasil
                    let resultHtml = `<p>Total hari dalam bulan: ${totalDays}</p>`;
                    resultHtml += `<h3>Hari per Minggu:</h3>`;
                    minggu.innerHTML = '';
                    minggu.innerHTML = '<option value="" selected>Pilih Minggu</option>';
                    hari.innerHTML = '';
                    hari.innerHTML = '<option value="" selected>Pilih Hari</option>';
                    weeks.forEach((week, index) => {
                        const option = document.createElement('option');
                        option.value = `${week.join(', ')}`;
                        option.text = `Minggu ${index + 1}`;
                        minggu.appendChild(option);
                        // resultHtml += `<p>Minggu ${index + 1}: ${week.join(', ')}</p>`;
                    });

                    // resultDiv.innerHTML = resultHtml;
                } else {
                    resultDiv.innerHTML = '';
                }

            }

        function selectDay(value) {
            const angkaString = value;
            const angkaArray = angkaString.split(',').map(Number);
            var tanggal_awal = 0;
            var tanggal_akhir = 0;

            $('#tanggal_perkiraan').html(``);
            $('#hari').html(``);
            $('#hari').append(`<option value="" selected>Pilih Hari</option>`);
            for (let index = 0; index < angkaArray.length; index++) {
                if(index == 0) {
                    tanggal_awal = angkaArray[index];
                }

                if(index == (angkaArray.length - 1)) {
                    tanggal_akhir = angkaArray[index];
                }
                $('#hari').append(`<option value='${angkaArray[index]}'>Hari ke-${angkaArray[index]}</option>`);
            }

            if(tanggal_awal < 10) {
                tanggal_awal = "0" + tanggal_awal;
            }

            var bulan = document.getElementById('bulan').value;

            if(bulan < 10) {
                bulan = "0" + bulan;
            }

            if(tanggal_akhir < 10) {
                tanggal_akhir = "0" + tanggal_akhir;
            }
            $('#tanggal_awal_value_spawn').val(`${document.getElementById('tahun').value}-${bulan}-${tanggal_awal}`);
            $('#tanggal_akhir_value_spawn').val(`${document.getElementById('tahun').value}-${bulan}-${tanggal_akhir}`);

            $('#tanggal_perkiraan').html(`${tanggal_awal}/${bulan}/${document.getElementById('tahun').value} -  ${tanggal_akhir}/${bulan}/${document.getElementById('tahun').value}`);

        }

        $(document).ready(function () {
            $('#minggu').change(function() {
                selectDay($(this).val());
            });
            @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