@extends('layouts.main')

@section('isi')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-fluid">
        <!--begin::Tables Widget 13-->
        <div class="card shadow mb-5 mb-xl-8">
            <!--begin::Header-->
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold fs-3 mb-1">Kuisioner Evaluasi Dosen</span>
                    <span class="text-muted mt-1 fw-semibold fs-7">Jawab Pertanyaan Quesinoer di bawah ini</span>
                </h3>
                <div class="card-toolbar">
                   
                </div>
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <form class="my-auto pb-5" novalidate="novalidate" data-action="#" id="kt_create_account_form">
                @csrf
                @method('POST')
                <input type="hidden" name="thakad" value="{{ $getJadwalPelatihan->thakad }}">
                <input type="hidden" name="id_jadwal" value="{{ $getJadwalPelatihan->id_jadwal }}">
            <!--begin::Body-->
            <div class="card-body py-3">
                <!--begin::Table container-->
                <div class="mb-10 fv-row">
                    @if($dataPertanyaan && count($dataPertanyaan) > 0)
                        @foreach ($dataPertanyaan as $value)
                            <label class="d-flex align-items-center mb-3 fs-3">{{$loop->iteration}}. {{$value->pertanyaan}}</label>
                            <div class="row mb-5" data-kt-buttons="true">
                                @foreach ($value->edompilihanjawaban as $item)
                                    <div class="col mb-5">
                                        <!--begin::Option-->
                                        <label class="btn btn-outline btn-outline-dashed btn-active-light-success w-100 p-2">
                                            <input type="radio" class="btn-check" name="pilihan_radio1{{$loop->parent->iteration}}" value="{{ $item->idsoal }}_{{ $item->pilihan }}"/>
                                            <span class="fw-bold fs-5">{{$item->jawaban}}</span>
                                        </label>
                                        <!--end::Option-->
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    @else
                        <p>Tidak ada data pertanyaan.</p>
                    @endif
                </div>
                <!--end::Table container-->
            </div>
            <!--begin::Body-->
               <!--begin::Actions-->
               <div class="d-flex flex-stack p-5 p-lg-15">
                <div class="">
                    <button type="button" class="btn btn-lg btn-success" data-kt-stepper-action="submit">
                        <span class="indicator-label"><i class="far fa-save fs-3"></i></span>&nbsp;Simpan
                        <span class="indicator-progress">Please wait...
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </div>
            </div>
            <!--end::Actions-->
            </form>
        </div>
        <!--end::Tables Widget 13-->

    </div>
</div>
@endsection

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

@push('js-page')
<script>
// Tambahkan ini di bagian script
$(document).ready(function() {
    $('[data-kt-stepper-action="submit"]').click(function(e) {
    e.preventDefault();
    
    // Cek apakah semua radio button sudah diisi
    let totalPertanyaan = {{ count($dataPertanyaan) }};
    let isValid = true;
    
    for(let i = 1; i <= totalPertanyaan; i++) {
        if(!$(`input[name="pilihan_radio1${i}"]:checked`).val()) {
            isValid = false;
            break;
        }
    }
     
    if(!isValid) {
        Swal.fire({
            text: "Mohon isi semua pertanyaan terlebih dahulu!",
            icon: "error",
            buttonsStyling: false,
            confirmButtonText: "Ok",
            customClass: {
                confirmButton: "btn btn-primary"
            }
        });
        return;
    }

    // Kumpulkan semua jawaban
    let formData = new FormData();
    formData.append('thakad', $('input[name="thakad"]').val());
    formData.append('id_jadwal', $('input[name="id_jadwal"]').val());
    
    // Ubah cara mengumpulkan jawaban
    for(let i = 1; i <= totalPertanyaan; i++) {
        let selectedValue = $(`input[name="pilihan_radio1${i}"]:checked`).val();
        // Format jawaban sudah benar dari value radio button (idsoal_pilihan)
        formData.append('jawaban[]', selectedValue);
    }
    
    formData.append('_token', $('input[name="_token"]').val());

    // Tampilkan loading
    let button = $(this);
    button.prop('disabled', true);
    button.find('.indicator-label').hide();
    button.find('.indicator-progress').show();

    $.ajax({
        url: "{{ route('nilai-pelatihan.simpan-jawaban.store') }}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            Swal.fire({
                text: "Data berhasil disimpan!",
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok",
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            }).then((result) => {
                window.location.href = "{{ route('nilai-pelatihan.listing-pelatihan.index') }}";
            });
        },
        error: function(xhr) {
            let errorMessage = "Terjadi kesalahan! ";
            if (xhr.responseJSON && xhr.responseJSON.error) {
                errorMessage += xhr.responseJSON.error;
            }
            
            Swal.fire({
                text: errorMessage,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok",
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
        },
        complete: function() {
            button.prop('disabled', false);
            button.find('.indicator-label').show();
            button.find('.indicator-progress').hide();
        }
    });
});
});
</script>
@endpush