@extends('layouts.main')

@section('isi')
    <div id="kt_app_content_container" class="app-container  container-fluid ">
        <div class="card mb-5 mb-xxl-8">
            <div class="card-body d-flex flex-center flex-column py-9 px-5">
                <div class="symbol symbol-65px symbol-circle mb-5">
                    <img src="{{ $mahasiswa->storage_url_thumbnail ?? asset('assets/media/avatars/blank.png') }}"
                        alt="image" />
                </div>
                <a href="#" class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0">{{ $mahasiswa->nama_mhs }}</a>
                <div class="fw-semibold text-gray-500 mb-6">{{ $mahasiswa->nim }}</div>
                <div class="d-flex flex-center flex-wrap mb-5">
                    <div class="border border-dashed rounded min-w-90px py-3 px-4 mx-2 mb-3">
                        <div class="fw-semibold text-gray-500">Tahun Akademik</div>
                        <div class="fs-6 fw-bold text-gray-700">{{ $th_akademik->thakad }}</div>
                    </div>
                    <div class="border border-dashed rounded min-w-90px py-3 px-4 mx-2 mb-3">
                        <div class="fw-semibold text-gray-500">Semester</div>
                        <div class="fs-6 fw-bold text-gray-700">{{ $th_akademik->semester }}</div>
                    </div>
                    <div class="border border-dashed rounded min-w-90px py-3 px-4 mx-2 mb-3">
                        <div class="fw-semibold text-gray-500">Status Pelatihan</div>
                        <div class="fs-6 fw-bold text-gray-700">{{ $th_akademik->stspel }}</div>
                    </div>
                    <div class="border border-dashed rounded min-w-90px py-3 px-4 mx-2 mb-3">
                        <div class="fw-semibold text-gray-500">Lihat Data Pelatihan</div>
                        <a href="" class="btn btn-sm btn-primary disabled" id="button-lihat-data">
                            Lihat Data
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="card h-xl-100" id="kt_timeline_widget_2_card">
            <div class="card-header flex-column my-5 border-bottom-2">
                <div class="card-title align-items-start d-flex">
                    <span class="card-label fs-3 fw-bold">Daftar Pelatihan yang Ditawarkan</span>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center position-relative my-1">
                    <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                    <input type="text" data-kt-table-filter="search"
                        class="form-control form-control-solid w-250px ps-13" placeholder="Cari pelatihan..." />
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="kt_timeline_widget_2_tab_1">
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_pelatihan">
                            <thead>
                                <tr class="text-center text-muted fw-bold fs-7 text-uppercase gs-0"
                                    style="vertical-align: middle">
                                    <th style="min-width: 20px">No</th>
                                    <th style="min-width: 20px">Kode Pelatihan</th>
                                    <th>Nama Pelatihan</th>
                                    <th style="max-width: 200px">Jenis Pelatihan</th>
                                    <th style="min-width: 20px">Kelas</th>
                                    <th>Jadwal</th>
                                    {{-- <th>Kuota Terambil</th>
                                    <th>Kuota Jumlah</th> --}}
                                    <th class="text-end min-w-100px">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js-vendor')
    <script src="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.js"></script>
@endpush

@push('js-page')
    <script>
        "use strict";

        //class definition
        var KTDatatablesServerSide = function() {
            // Shared variables
            var table;
            var dt;

            // Private functions
            var initDatatable = function() {
                dt = $("#kt_table_pelatihan").DataTable({
                    searchDelay: 500,
                    processing: true,
                    serverSide: true,
                    stateSave: true,
                    ajax: {
                        url: "{{ route('pengisian-pelatihan.get-jadwal') }}",
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                        {
                            data: 'kd_mppel',
                            name: 'kd_mppel'
                        },
                        {
                            data: 'nama_pelatihan',
                            name: 'nama_pelatihan'
                        },
                        {
                            data: 'jenis_pelatihan',
                            name: 'jenis_pelatihan'
                        },
                        {
                            data: 'kelas',
                            name: 'kelas'
                        },
                        {
                            data: 'jadwal',
                            name: 'jadwal'
                        },
                        {
                            data: 'action',
                            name: 'action'
                        },
                    ],
                    columnDefs: [{
                            targets: 0,
                            orderable: false,
                            data: null,
                            searchable: false,
                        },
                        {
                            targets: 1,
                            orderable: true,
                            data: 'kd_mppel',
                            searchable: true,
                        },
                        {
                            targets: 2,
                            orderable: true,
                            data: 'nama_pelatihan',
                            searchable: true,
                        },
                        {
                            targets: 3,
                            orderable: true,
                            data: 'jenis_pelatihan',
                            searchable: true,
                            className: 'text-center',
                        },
                        {
                            targets: 4,
                            orderable: true,
                            data: 'kelas',
                            searchable: true,
                            className: 'text-center',
                        },
                        {
                            targets: 5,
                            orderable: true,
                            data: 'jadwal',
                            searchable: true,
                        },
                        {
                            targets: -1,
                            data: null,
                            orderable: false,
                            searchable: false,
                            className: 'text-end',
                        },
                    ],
                });

                table = dt.$;

                // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
                dt.on('draw', function() {
                    KTMenu.createInstances();
                });
            }

            var handleAddPelatihan = function() {
                $('body').on('click', '.add_pelatihan', function(e) {
                    e.preventDefault();
                    $('.add_pelatihan').addClass('disabled');
                    $.ajax({
                        url: "{{ route('pengisian-pelatihan.store') }}",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        method: 'POST',
                        data: {
                            "id_jadwal": $(this).data('id-jadwal')
                        },
                        dataType: 'JSON',
                        cache: false,
                         success: function(response) {
                            console.log(response);
                            Swal.fire({
                                text: "Berhasil Simpan",
                                icon: "success",
                                buttonsStyling: false,
                                showConfirmButton: false,
                                timer: 1500,
                            }).then((function() {
                                dt.draw();
                                totalPelatihanDiambil();
                            }));
                          
                        },
                        error: function(response) {
                            console.log(response);
                            Swal.fire({
                                text: response.responseJSON.message,
                                icon: "error",
                                buttonsStyling: !1,
                                confirmButtonText: "Ok, got it!",
                                customClass: {
                                    confirmButton: "btn btn-primary"
                                }
                            }).then((function() {
                                dt.draw();
                                totalPelatihanDiambil();
                            }));
                        }
                    })
                });
            }

            var handleDeletePelatihan = function() {
                $('body').on('click', '.remove_pelatihan', function(e) {
                    let id = $(this).data('id-transpel');
                    $('.remove_pelatihan').addClass('disabled');
                    Swal.fire({
                        text: "Apakah Anda yakin ingin menghapus pelatihan ini?",
                        icon: "warning",
                        showCancelButton: !0,
                        buttonsStyling: !1,
                        confirmButtonText: "Ya, Hapus!",
                        cancelButtonText: "Tidak, Batal",
                        customClass: {
                            confirmButton: "btn fw-bold btn-danger",
                            cancelButton: "btn fw-bold btn-active-light-primary"
                        }
                    }).then((function(t) {
                        if (t.value) {
                            $.ajax({
                                url: '{{ route('pengisian-pelatihan.destroy', ['id' => ':id']) }}'
                                    .replace(':id', id),
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                        'content')
                                },
                                method: 'DELETE',
                                dataType: 'JSON',
                                cache: false,
                                success: function(response) {
                                    console.log(response);
                                    Swal.fire({
                                        text: "Berhasil Hapus",
                                        icon: "success",
                                        buttonsStyling: false,
                                        showConfirmButton: false,
                                        timer: 1500,
                                    }).then((function() {
                                        dt.draw();
                                        totalPelatihanDiambil();
                                    }));
                                },
                                error: function(response) {
                                    console.log(response);
                                    Swal.fire({
                                        text: response.responseJSON.message,
                                        icon: "error",
                                        buttonsStyling: !1,
                                        confirmButtonText: "Ok, got it!",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    }).then((function() {
                                        dt.draw();
                                        totalPelatihanDiambil();
                                    }));
                                }
                            })
                        } else {
                            Swal.fire({
                                text: "Dibatalkan",
                                icon: "error",
                                buttonsStyling: false,
                                showConfirmButton: false,
                                timer: 1500,
                            }).then((function() {
                                dt.draw();
                                totalPelatihanDiambil();
                            }));
                        }
                    }));
                })
            };

            // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
            var handleSearchDatatable = function() {
                const filterSearch = document.querySelector('[data-kt-table-filter="search"]');
                filterSearch.addEventListener('keyup', function(e) {
                    dt.search(e.target.value).draw();
                });
            }

            var totalPelatihanDiambil = function() {
                let buttonLihatData = $('#button-lihat-data');
                $.ajax({
                    url: "{{ route('pengisian-pelatihan.total-pelatihan-diambil') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    method: 'GET',
                    dataType: 'JSON',
                    cache: false,
                    success: function(response) {
                        if (response > 0) {
                            buttonLihatData.attr('href', "{{ route('pengisian-pelatihan.detail') }}");
                            buttonLihatData.removeClass('disabled');
                        } else {
                            buttonLihatData.attr('href', '#');
                            buttonLihatData.addClass('disabled');
                        }
                    },
                })
            }
            // Public methods
            return {
                init: function() {
                    initDatatable();
                    handleSearchDatatable();
                    handleAddPelatihan();
                    handleDeletePelatihan();
                    totalPelatihanDiambil();
                }
            }
        }();

        // On document ready
        KTUtil.onDOMContentLoaded(function() {
            KTDatatablesServerSide.init();
        });
    </script>
@endpush