@extends('layouts.main')

@section('isi')
<style>
    #loading {
    position: fixed; /* Agar menutupi seluruh layar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(125, 105, 224, 0.5); /* Background coklat tipis */
    z-index: 9999; /* Agar berada di atas elemen lainnya */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-content {
    text-align: center;
    color: white;
}

.spinner {
    border: 6px solid rgba(255, 255, 255, 0.3); /* Warna transparan */
    border-top: 6px solid white; /* Warna animasi */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite; /* Animasi spin */
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

    </style>
<div id="kt_app_content_container" class="app-container  container-fluid ">
    <div class="card mb-10">
        <div class="card-header">
            <div class="card-title fs-3 fw-bold">Input Pelatihan Intensif Oleh Admin</div>
        </div>
        <form class="form" id="form-input-pelatihan-from-admin" action="javascript:void(0)" method="POST">
            <div class="card-body pt-9 pb-0">
                
                <div class="fv-row mb-7">
                    <div class="col-xl-3">
                        <div class="fs-6 fw-semibold mt-2 mb-3">Status Pelatihan</div>
                    </div>
                
                    <div class="col-xl-4">
                        <select class="form-select form-select-light" required name="thakad" id="thakad">
                            <option value="">Pilih Tahun Akademik</option>
                            @forelse ($tahunakademik as $item)
                                <option value="{{ $item->kodeta }}">{{ $item->kodeta }}</option>
                            @empty
                                <option value="">Tidak ada data</option>
                            @endforelse
                        </select>
                    </div>
                </div>
    
                <div class="fv-row mb-7">
                    <div class="col-xl-3">
                        <div class="fs-6 fw-semibold mt-2 mb-3">Program Studi</div>
                    </div>
    
                    <div class="col-xl-4">
                        <select class="form-select form-select-light" required name="kode_dikti" id="kode_dikti">
                            <option value="">Pilih Program Studi</option>
                            @forelse ($programstudi as $item)
                                <option value="{{ $item->kdpst_dikti }}">{{ $item->jenjang . ' - ' . $item->prodi }}</option>
                            @empty
                                <option value="">Tidak ada data</option>
                            @endforelse
                        </select>
                    </div>
                </div>


                <div class="fv-row mb-7">
                    <div class="col-xl-3">
                        <div class="fs-6 fw-semibold mt-2 mb-3">Mahasiswa</div>
                    </div>
                    <div class="col-xl-4">
                        <select name="mahasiswa_name" id="mahasiswa_id" data-control="select2" 
                            data-dropdown-parent="#kt_app_content_container" data-placeholder="Pilih Mahasiswa..." 
                            class="form-select form-select-light">
                            <option value="">Pilih Mahasiswa..</option>
                        </select>
                    </div>
                </div>

                <div class="fv-row mb-7">
                    <div class="col-xl-3">
                        <div class="fs-6 fw-semibold mt-2 mb-3">Nama Pelatihan</div>
                    </div>
                    <div class="col-xl-6">
                        <select class="form-select form-select-light" required name="pelatihan_name" id="pelatihan_id">
                            <option value="">Pilih Pelatihan..</option>
                        </select>
                    </div>
                    <span class="badge badge-light-danger">Ket : Kode Pelatihan - Nama Pelatihan - Kurikulum</span>
                </div>


            </div>
    
            <div class="card-footer d-flex justify-content-start py-6 gap-5">
                <button type="button" id="view" class="btn btn-sm btn-primary">Lihat Data</button>
                <button type="submit" id="simpan" class="btn btn-sm btn-primary">Simpan</button>
            </div>
        </form>
    </div>

    
    
    <div id="loading" style="display:none;">
        <div class="loading-content">
            <div class="spinner"></div>
            <p>Loading...</p>
        </div>
    </div>
</div>

<div id="view_detail"></div>
@endsection

@push('js-page')
    <script type="text/javascript">
        $(document).ready(function() {

            $('#kode_dikti').on('change', function() {
                var thakad = $('#thakad').val();
                var stspel = $('#stspel').val();
                var kode_dikti = $('#kode_dikti').val();

                var urlNim = "{{ route('inputpelatihanintensifolehadmin.fetchListMahasiswa') }}" ;
                $('#loading').show();

                $.ajax({
                    url: urlNim,
                    type: "GET",

                    data: {
                        "_token": "{{ csrf_token() }}",
                        kode_dikti: kode_dikti
                    },
                    dataType: "json",
                    success: function(data) {
                    
                        $('#mahasiswa_id').empty();
                        $('#mahasiswa_id').append(
                            '<option value="">-- Pilih Mahasiswa --</option>');
                        $.each(data, function(key, value) {
                            $('#mahasiswa_id').append('<option value="' + value.nim + '">' 
                                + value.nim + ' - ' + value.nama_mhs + '</option>');
                        });
                        $('#mahasiswa_id').trigger('change');
                    },
                    error: function(data) {
                        console.log('data error');
                        console.log(data);
                    },

                    complete: function() {
                        // Sembunyikan loading setelah AJAX selesai, baik sukses maupun error
                        $('#loading').hide();
                    }

                });

                var urlPelatihan = "{{ route('inputpelatihanintensifolehadmin.fetchListPelatihan') }}" ;
                $.ajax({
                    url: urlPelatihan,
                    type: "GET",

                    data: {
                        "_token": "{{ csrf_token() }}",
                        thakad: thakad,
                        stspel: stspel,
                        kode_dikti: kode_dikti
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log('data');
                        $('#pelatihan_id').empty();
                        $('#pelatihan_id').append(
                            '<option value="">-- Pilih Pelatihan --</option>');
                        $.each(data, function(key, value) {
                            $('#pelatihan_id').append('<option value="' + value.id_jadwal + '">' 
                                + value.kd_mppel + ' - ' + value.matakuliahpelatihan.nmpel + ' - Kelas ' + value.kelas + ' - ' + value.matakuliahpelatihan.kurikulum + '</option>');
                        });
                        $('#pelatihan_id').trigger('change');
                    },
                    error: function(data) {
                        console.log('data error');
                        console.log(data);
                    }
                });
            });

           
        });

    $("#mahasiswa_id").change(function(){
        getDataKrs();
    });

    $("#view").click(function(){
		getDataKrs();
	});

    function getDataKrs() {
        var thakad = $('#thakad').val();
        var stspel = $('#stspel').val();
        var mahasiswa_id = $('#mahasiswa_id').val();

        $("#view_detail").empty();
      
        $.ajax({    
            type: "GET",
            url: "{{ route('inputpelatihanintensifolehadmin.fetchDataKrsAdmin') }}",
            data: {
                    "_token": "{{ csrf_token() }}",
                    thakad: thakad, stspel: stspel, mahasiswa_id: mahasiswa_id
            },
            cache: false,
            success: function(data) {
                $('#view_detail').append(data);
            },
            error: function(data) {
                console.log('data error');
                console.log(data);
            },
        });
    }

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('#form-input-pelatihan-from-admin').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: "{{ route('inputpelatihanintensifolehadmin.store') }}",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                Swal.fire({
                    icon: 'success',
                    title: 'Sukses!',
                    text: 'Data berhasil disimpan.',
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 1500,
                }).then(function() {
                    getDataKrs();
                });
            },
            error: function(data) {
                let errorMessage = '';
                if (data.responseJSON.errors) {
                    Object.values(data.responseJSON.errors).forEach(error => {
                        errorMessage = error;
                    });
                }

                if (errorMessage) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: errorMessage,
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: data.responseJSON.message ||
                            'Terjadi kesalahan saat menyimpan data.',
                    });
                }
            }
        });
    });
    
    </script>
@endpush