@extends('layouts.app')
@push('styles')
    <!-- DataTables -->
    <link
        href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
    <link
        href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}"
        rel="stylesheet" type="text/css" />
@endpush
@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: 1200px; /* 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">
                <div class="row">
                    <div class="col-sm-12 col-md-6">
                        {{-- <h4><a href="{{url('target_capaian')}}">Back</a> | Detail Capaian</h4> --}}
                        @if (isset($_GET['page']))
                           @if ($_GET['page'] == "target")
                               <h4>Target Capaian</h4>
                            @elseif ($_GET['page'] == "cat")
                               <h4>Hasil CAT Online</h4>
                            @elseif ($_GET['page'] == "review") 
                               <h4>Review Progress</h4>
                           @endif 
                        @else 
                        <h4>Detail Capaian</h4>
                        @endif
                        <div id="myModal" class="modal">
                            <div class="modal-content">
                                <div class="d-flex justify-content-between">
                                    <div class="p-1">
                                        <h3>Detail Kegiatan</h3>
                                    </div>
                                    <div class="p-1"></div>
                                    <div class="p-1">
                                        <span class="close" id="closeModal">&times;</span>
                                    </div>
                                </div>
                                <hr>
                                <span style="font-weight: bolder; font-size: 16px;">Kegiatan : </span><span style="font-size: 16px;" id="nama_kegiatan"></span><br>
                                <span style="font-weight: bolder; font-size: 16px;">Location : </span><span style="font-size: 16px;" id="location_kegiatan"></span><br>
                                <span style="font-weight: bolder; font-size: 16px;">Petugas : </span><span style="font-size: 16px;" id="petugas_kegiatan"></span><br>
                                <span style="font-weight: bolder; font-size: 16px;">Catatan : </span><span style="font-size: 16px;" id="catatan_kegiatan"></span><br>
                                <br>
                                <div style="overflow-x: scroll">
                                    <table class="table table-bordered dt-responsive nowrap"
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>Tanggal Kegiatan</th>
                                                <th>Waktu Mulai Kegiatan</th>
                                                <th>Waktu Selesai Kegiatan</th>
                                                <th>Status</th>
                                                <th>Feedback Orang Tua</th>
                                            </tr>
                                        </thead>
                                        <tbody id="target_capaian_list">
    
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6">
                        <form action="">
                            <div class="d-flex justify-content-end">
                                <div class="p-1">
                                    <select name="tahun" id="" class="form-control">
                                        <option value="">Pilih Tahun</option>
                                        @foreach ($tahun as $a)
                                            <option value="{{$a->year}}" {{$tahun_get == $a->year ? "selected" : ""}}>{{$a->year}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="p-1">

                                    <button type="submit" class="btn btn-success">Cari</button>
                                    <a href="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=cetak" target="_blank" class="btn btn-primary">Cetak</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h2>{{$siswa->nama_siswa}}</h2>
            </div>
        </div>
        <div class="row">
            @if (!isset($_GET['page']))
                <div class="col-md-6 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title p-3">
                                <h3>Target Aktifitas Harian </h3>
                            </div>
                            <canvas id="KeseluruhanChart" style="width:100%;"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title p-3">
                                <div class="d-flex justify-content-between">
                                    <div class="p-1"><h3>Target CAT </h3></div>
                                    <div class="p-1">
                                        <select name="ujian_cat" id="ujian_cat" class="form-control">
                                            <option value="twk">TWK</option>
                                            <option value="tiu">TIU</option>
                                            <option value="tkp">TKP</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <canvas id="KeseluruhanCatChart" style="width:100%;"></canvas>
                            {{-- <canvas id="KeseluruhanChart" style="width:100%;"></canvas> --}}
                        </div>
                    </div>
                </div>
            @elseif(isset($_GET['page']) && $_GET['page'] == "cat")
                
                <div class="col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title p-3">
                                <div class="d-flex justify-content-between">
                                    <div class="p-1"><h3>Target CAT </h3></div>
                                    <div class="p-1">
                                        <select name="ujian_cat" id="ujian_cat" class="form-control">
                                            <option value="twk">TWK</option>
                                            <option value="tiu">TIU</option>
                                            <option value="tkp">TKP</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <canvas id="KeseluruhanCatChart" style="width:100%;"></canvas>
                            {{-- <canvas id="KeseluruhanChart" style="width:100%;"></canvas> --}}
                        </div>
                    </div>
                </div>
            @elseif(isset($_GET['page']) && $_GET['page'] == "target")
                <div class="col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-title p-3">
                                <h3>Target Aktifitas Harian </h3>
                            </div>
                            <canvas id="KeseluruhanChart" style="width:100%;"></canvas>
                        </div>
                    </div>
                </div>
            @endif

        </div>
        <div class="card">
            <div class="card-body">
                <select name="type" class="form-control" onchange="navigateToPage()" id="type" {{isset($_GET['page']) ? 'hidden' : ''}}>
                    <option value="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=cat" {{old('type', @$_GET['type'])  == "cat" ? "selected" : "" }} >Hasil dari Ujian CAT</option>
                    <option value="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=kegiatan" {{old('type', @$_GET['type'])  == "kegiatan" ? "selected" : "" }}>Detail Jenis Kegiatan</option>
                    <option value="{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=review" {{old('type', @$_GET['type'])  == "review" ? "selected" : "" }}>Progress Mingguan</option>
                </select>
                @if(!isset($_GET['type']) || $_GET['type'] == "cat")
                <div class="card-title">
                    <br>
                    <h4>Hasil dari Ujian CAT</h4>
                    <div class="row">
                        <div class="col-sm-12 col-md-9" style="overflow-x: scroll">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Tanggal Mulai</th>
                                        <th>Tanggal Selesai</th>
                                        <th>TWK</th>
                                        <th>TIU</th>
                                        <th>TKP</th>
                                        <th>TOTAL</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $key = array_keys($cat);
                                        // dd($key);
                                    @endphp
                                    @if ($key[0] == "error")
                                        <tr>
                                            <td colspan="6" style="text-align: center; color: red;">Belum Melaksanakan Ujian CAT</td>
                                        </tr>
                                    @else
                                        @foreach($cat as $a)
                                            <tr>
                                                <th>{{$a['mulai']}}</th>
                                                <th>{{$a['selesai']}}</th>
                                                <th class="{{ ($a['twk'] < 100) ? 'text-danger' : (($a['twk'] < 110) ? 'text-warning' : 'text-success') }}">{{$a['twk']}}</th>
                                                <th class="{{ ($a['tiu'] < 100) ? 'text-danger' : (($a['tiu'] < 110) ? 'text-warning' : 'text-success') }}">{{$a['tiu']}}</th>
                                                <th class="{{ ($a['tkp'] < 200) ? 'text-danger' : (($a['tkp'] < 210) ? 'text-warning' : 'text-success') }}">{{$a['tkp']}}</th>
                                                <th>{{ intval($a['total'])  }}</th>
        
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div class="col-sm-12 col-md-3">
                            <fieldset>
                                <h3>Penilaian</h3>
                                <ul>
                                    <li>TWK <br>  
                                        dibawah 100 = merah <br>
                                        100 - 109 = kuning <br>
                                        110 keatas = hijau <br><br>
                                    </li>
                                    <li>
                                        TIU <br>
                                        dibawah 100 = merah <br>
                                        100 - 109 = kuning <br>
                                        110 keatas = hijau <br> <br>
                                    </li>
                                    <li>
                                        TKP <br>
                                        dibawah 200 = merah <br>
                                        200 - 209 = kuning <br>
                                        210 = hijau <br><br>
                                    </li>
                                </ul>
                            </fieldset>
                        </div>

                    </div>

                </div>
                @elseif(isset($_GET['type']) && $_GET['type'] == "kegiatan") 
                <div class="card-title">
                    <br>
                    <div class="d-flex">
                        <div class="p-1">
                            <h4>Detail Kegiatan</h4>
                        </div>
                        <div class="p-1">
                            <form action="" method="get" id="myForm">
                                @if (isset($_GET['siswa_id']))
                                    <input type="hidden" name="siswa_id" value="{{$_GET['siswa_id']}}">
                                @endif 
                                <input type="hidden" name="tahun" value="{{ isset($_GET['tahun']) ? $_GET['tahun'] : '' }}">
                                <input type="hidden" name="type" value="{{ isset($_GET['type']) ? $_GET['type'] : '' }}">
                                <input type="hidden" name="page" value="{{ isset($_GET['page']) ? $_GET['page'] : '' }}">

                                <select name="hari" class="form-control" onchange="document.getElementById('myForm').submit();" id="hari">
                                    @foreach ($hari as $item)
                                        <option value="{{ $item->hari_ke}}" {{ old('hari', $day) == $item->hari_ke ? 'selected' : ''}}>{{$item->hari}}</option>
                                    @endforeach
                                </select>
                            </form>
                        </div>
                    </div>
                    

                    <div style="overflow-x: auto">
                        <table class="table table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>Kegiatan</th>
                                <th>Nama Siswa</th>
                                <th>Petugas</th>
                                <th>Lokasi</th>
                                <th>Tanggal Mulai</th>
                                <th>Tanggal Akhir</th>
                                <th>Notes</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach ($jadwal as $a)
                                <tr>
                                    <td>{{$a->kegiatan}}</td>
                                    <td>{{$a->jadwal->user->siswa->nama_siswa}}</td>
                                    <td>{{$a->petugas->nama_petugas}}</td>
                                    <td>{{$a->location}}</td>
                                    <td>{{ date($a->all_day == 1 ? 'd F Y' : 'd F Y h:i:s', strtotime($a->start)) }}</td>
                                    <td>{{ date($a->all_day == 1 ? 'd F Y' : 'd F Y h:i:s', strtotime($a->ends)) }}</td>
                                    <td>{{ $a->notes == null ? '-' : $a->notes }}</td>
                                    <td><button class="btn btn-primary openModal" id="{{$a->jadwal->id}}"><i class="fa fa-eye"> </i> Detail</button></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
                @elseif(isset($_GET['type']) && $_GET['type'] == "review") 
                <div class="card-title">
                    <br>
                    @can('create '.$menu)
                    <div class="d-flex justify-content-between">
                        <div class="p-1"></div>
                        <div class="p-1"></div>
                        <div class="p-1">
                            <a href="{{url('progress_mingguan')}}/create?id={{$siswa->id}}" class="btn btn-success">+ Tambah Data</a>
                        </div>
                    </div>
                    @endcan
                    @can('view '.$menu)
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Tanggal</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($review as $a)
                                <tr>
                                    <td>{{$loop->iteration}}</td>
                                    <td>{{$a->nama}}</td>
                                    <td>{{$a->tanggal}}</td>
                                    <td>
                                        <form method="POST"
                                        action="{{ route('progress_mingguan'.'.destroy', $a->id) }}">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="_method" value="DELETE">
                                        @can('view '.$menu)
                                            <a href="{{ route('progress_mingguan'.'.show', $a->id) }}"
                                                class="btn btn-sm btn-primary" target="_blank"><i class="fa fa-paper"> </i>Show</a>
                                        @endcan
                                        @can('edit '.$menu)
                                            <a href="{{ route('progress_mingguan'.'.edit', $a->id) }}"
                                                class="btn btn-sm btn-warning"><i class="fa fa-pen"> </i>Edit</a>
                                        @endcan

                                        @can('delete '.$menu)
                                            <button type="submit" class="btn btn-sm btn-danger"
                                                onclick="return hapus()"><i class="fa fa-trash"></i>
                                                Hapus</button>
                                        @endcan
                                    </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endcan
                </div>
                @endisset
            </div>
        </div>
        {{-- <div class="row">
            <div class="col-md-9">
                <div class="card">
                    <div class="card-body">


                        <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>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>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
                                </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">
                                <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
    

    // KeseluruhanCatChart

    new Chart("KeseluruhanChart", {
        type: "line",
        data: {
            labels: xValues2,
            datasets: [{
            label : "Belum Tercapai : {{$target_belum_tercapai}}",
            data: belum_tercapai,
            borderColor: "red",
            fill: false
            }, {
            label : "Tercapai : {{$target_tercapai}}",
            data: tercapai,
            borderColor: "green",
            fill: false
            }]
        },
        options: {
            legend: {display: true}
        }
    });



    let YValuesCATBelumTWK = [];
    let TotalCATBelumTWK = parseInt('{{$TotalChart[0]["twk_tidak_tercapai"] ?? 0}}');
    let YValuesCATUdahTWK = [];
    let TotalCATUdahTWK = parseInt('{{$TotalChart[0]["twk_tercapai"] ?? 0}}');

    let YValuesCATBelumTIU = [];
    let TotalCATBelumTIU = parseInt('{{$TotalChart[0]["tiu_tidak_tercapai"] ?? 0}}');
    let YValuesCATUdahTIU = [];
    let TotalCATUdahTIU = parseInt('{{$TotalChart[0]["tiu_tercapai"] ?? 0}}');

    let YValuesCATBelumTKP = [];
    let TotalCATBelumTKP = parseInt('{{$TotalChart[0]["tkp_tidak_tercapai"] ?? 0}}');
    let YValuesCATUdahTKP = [];
    let TotalCATUdahTKP = parseInt('{{$TotalChart[0]["tkp_tercapai"] ?? 0}}');

    let XValuesCAT = [];
    let indexCAT = 0;
    @foreach ($CATChart as $c)
        XValuesCAT[indexCAT] = '{{$c["bulan"]}}';
        YValuesCATUdahTWK[indexCAT] = parseInt('{{$c["twk_tercapai"]}}');
        YValuesCATBelumTWK[indexCAT] = parseInt('{{$c["twk_tidak_tercapai"]}}');

        YValuesCATUdahTIU[indexCAT] = parseInt('{{$c["tiu_tercapai"]}}');
        YValuesCATBelumTIU[indexCAT] = parseInt('{{$c["tiu_tidak_tercapai"]}}');

        YValuesCATUdahTKP[indexCAT] = parseInt('{{$c["tkp_tercapai"]}}');
        YValuesCATBelumTKP[indexCAT] = parseInt('{{$c["tkp_tidak_tercapai"]}}');

        indexCAT += 1;
    @endforeach

    let KeseluruhanCatChart = new Chart("KeseluruhanCatChart", {
        type: "line",
        data: {
            labels: XValuesCAT,
            datasets: [{
            label : "Belum Tercapai - TWK ["+TotalCATBelumTWK+"] ",
            data: YValuesCATBelumTWK,
            borderColor: "red",
            fill: false
            }, {
            label : "Tercapai - TWK ["+TotalCATUdahTWK+"] ",
            data: YValuesCATUdahTWK,
            borderColor: "green",
            fill: false
            }]
        },
        options: {
            legend: {display: true}
        }
    });

    </script>
    <script>
            function navigateToPage() {
                const selector = document.getElementById("type");
                const selectedPage = selector.value; // Ambil nilai yang dipilih
                if (selectedPage) {
                    window.location.href = selectedPage; // Arahkan ke halaman yang dipilih
                }
            }
            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>
    @push('scripts')
    <!-- Required datatable js -->
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}">
    </script>
    <!-- Buttons examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/build/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js') }}">
    </script>
    <script src="{{ asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}">
    </script>
    <!-- Responsive examples -->
    <script
        src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}">
    </script>
    <script
        src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}">
    </script>

    <!-- Datatable init js -->
    <script src="{{ asset('assets/js/pages/datatables.init.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Open the modal
            $('#ujian_cat').click(function() {
                let selectedValue = this.value; // Ambil nilai select (twk, tiu, tkp)

                let newBelumData, newUdahData, newLabel, newTotalUdahData, newTotalBelumData;
                if (selectedValue === "twk") {
                    newBelumData = YValuesCATBelumTWK;
                    newUdahData = YValuesCATUdahTWK;
                    
                    newTotalBelumData = TotalCATBelumTWK;
                    newTotalUdahData = TotalCATUdahTWK;

                    newLabel = "TWK";
                } else if (selectedValue === "tiu") {
                    newBelumData = YValuesCATBelumTIU;
                    newUdahData = YValuesCATUdahTIU;

                    newTotalBelumData = TotalCATBelumTIU;
                    newTotalUdahData = TotalCATUdahTIU;

                    newLabel = "TIU";
                } else {
                    newBelumData = YValuesCATBelumTKP;
                    newUdahData = YValuesCATUdahTKP;

                    newTotalBelumData = TotalCATBelumTKP;
                    newTotalUdahData = TotalCATUdahTKP;


                    newLabel = "TKP";
                }

                // Update dataset
                KeseluruhanCatChart.data.datasets[0].label = "Belum Tercapai - " + newLabel + " ["+newTotalBelumData+"]";
                KeseluruhanCatChart.data.datasets[0].data = newBelumData;

                KeseluruhanCatChart.data.datasets[1].label = "Tercapai - " + newLabel + " ["+newTotalUdahData+"]";
                KeseluruhanCatChart.data.datasets[1].data = newUdahData;

                KeseluruhanCatChart.update(); // Perbarui chart
            });
            $('.openModal').click(function() {
                // $('#jadwal').val($(this).data('jadwal'));
                // $('#jenis_kegiatan').val($(this).data('jeniskegiatan'));
                // $('#nama_kegiatan').val($(this).data('kegiatan'));
                // $('#jadwal_kegiatan_harian_id').val($(this).data('id'));

                // $('#target_tercapai').val($(this).data('targettercapai'));
                // $('#keterangan').val($(this).data('keterangan'));
                $.ajax({
                    url: `{{url('target_capaian').'/'.$siswa->id}}?tahun={{$tahun_get}}&type=detail_kegiatan&kegiatan_id=${$(this).attr('id')}`,
                    type: "GET",
                    cache: false,
                    success:function(response){
                        console.log(response);
                        console.log("berhasil");

                        var kegiatan = response.data;
                        $('#nama_kegiatan').text(kegiatan.kegiatan);
                        $('#location_kegiatan').text(kegiatan.location);
                        $('#petugas_kegiatan').text(kegiatan.petugas.nama_petugas);
                        $('#catatan_kegiatan').text(kegiatan.notes);

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


                        $.each(kegiatan.target_capaian, function(index, item) {
                            // 

                            var html = `
                                <tr>
                                    <td>${item.tanggal}</td>
                                    <td>${item.waktu_awal}</td>
                                    <td>${item.waktu_akhir}</td>
                                    <td>${item.capaian == 0 ? "Belum Tercapai" : "Sudah Tercapai" }</td>
                                    <td>${item.feedback_orang_tua}</td>
                                </tr>
                            `;


                            $('#target_capaian_list').append(html);
                            // console.log(`Data ke-${index + 1}:`);
                            // console.log(`ID: ${item.id}`);
                            // console.log(`Tanggal: ${item.tanggal}`);
                            // console.log(`Waktu Awal: ${item.waktu_awal}`);
                            // console.log(`Waktu Akhir: ${item.waktu_akhir}`);
                            // console.log('-----------------------------');
                        });
                        
                        $('#myModal').fadeIn();
                    },
                    error:function(error){
                        alert(error.responseJSON.content[0]);
                    }
                });


            });

            // Close the modal when the close button is clicked
            $('#closeModal').click(function() {
                $('#myModal').fadeOut();
            });

            // Close the modal when clicking outside of the modal content
            $(window).click(function(event) {
                if ($(event.target).is('#myModal')) {
                    $('#myModal').fadeOut();
                }
            });

            // Confirm button action
            $('#confirm').click(function() {
                alert('Confirmed!');
                $('#myModal').fadeOut();
            });
        });

    </script>
@endpush

@endpush