@extends('layout.main')

@section('judul')
    <h4 class="text-gray-900 fw-bolder m-0">Evaluasi Diri</h4>
@endsection

@push('css')
    <link href="{{ asset('') }}assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
@endpush


@section('breadchums')
<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7">
    <li class="breadcrumb-item text-gray-700 fw-bold lh-1 mx-n1">
        <a href="{{ route ('dasbormaba.index') }}" class="text-hover-primary">
            <i class="ki-duotone ki-home text-gray-700 fs-6"></i>
        </a>
    </li>
   
    <li class="breadcrumb-item">
        <i class="ki-duotone ki-right fs-7 text-gray-700"></i>
    </li>
    <li class="breadcrumb-item text-gray-700 fw-bold lh-1 mx-n1">Evaluasi Diri</li>
</ul>
@endsection

@section('isi')
    <div class="swal" data-swal="{{ session('success') }}"></div>
    <!--begin::Accordion-->

    <div class="card 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">Form Evaluasi Diri</span>
            </h3>
                <!--begin::Toolbar-->
                <div class="d-flex justify-content-end" data-kt-docs-table-toolbar="base">
                    <div class="card-toolbar">
                        <a href="{{ route('dasbormaba.index') }}" class="btn btn-info btn-sm">
                            <i class="bi bi-arrow-left"></i> Kembali
                        </a>&nbsp;
                    </div>
                </div>
                <!--end::Toolbar-->
        </div>
        <div class="card-body py-3">
            <div class="accordion" id="kt_accordion_1">
                @foreach($datapengambilanmk as $item)
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="kt_accordion_1_header_{{ $loop->index + 1 }}">
                            <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_{{ $loop->index + 1 }}" aria-expanded="false" aria-controls="kt_accordion_1_body_{{ $loop->index + 1 }}">
                                Matakuliah : {{ $item->kd_mk }} {{ $item->matakuliah->nama_mk }}
                            </button>
                        </h2>
                        <div id="kt_accordion_1_body_{{ $loop->index + 1 }}" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_{{ $loop->index + 1 }}" data-bs-parent="#kt_accordion_1">
                            <div class="accordion-body">
                                <!-- Content for each item -->
                                <table id="table_cpmk" class="table table-bordered align-middle table-row-dashed fs-6 gy-5">
                                    <thead>
                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                            <th class="min-w-10px">No</th>
                                            <th class="min-w-200px" style="text-align:left">CPMK</th>
                                            <th class="min-w-100px" style="text-align:center">Profiesiensi Pengetahuan dan keterampilan saatini</th>
                                            <th class="min-w-100px" style="text-align:center">Dokumen Pendukung</th>
                                            <th class="min-w-200px" style="text-align:center">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-gray-600 fw-semibold">
                                        @foreach ($item->matakuliah->cpmk as $itemcpmk)  
                                        <tr>
                                            <td style="text-align:center;">{{ $loop->iteration }}</td>
                                            <td>{{ $itemcpmk->nmcpmk }}</td>
                                            
                                            @php
                                                $foundAssesmen = false;
                                            @endphp
                                    
                                            @foreach ($dataAssesmen as $itemAssesmen)    
                                                @if ($itemAssesmen->idcpmk == $itemcpmk->id)
                                                    <td> 
                                                        @if ($itemAssesmen->id_profesiensi_keterampilan ==! null) 
                                                            {{ $itemAssesmen->profesiensi->ketprofesiensi_keterampilan }}
                                                        @else

                                                        @endif
                                                       
                                                    </td>
                                                    <td>
                                                        @foreach ($itemAssesmen->assesmendokumen as $itemAssesmenDokumen)
                                                            <a href="" data-bs-toggle="modal" data-bs-target="#kt_modal_1" data-url="{{ $itemAssesmenDokumen->dokumen_pendukung->storage_url }}"
                                                                class="fs-6 text-hover-primary fw-bold show-docs text-right">
                                                                {{ $itemAssesmenDokumen->dokumen_pendukung->nama_dokumen }} <br>
                                                            </a>
                                                        @endforeach
                                                    </td>
                                                    
                                                    <td style="text-align:center;">
                                                        <a onclick="editForm('{{ route('pengisianevaluasidiri.edit', $itemAssesmen->id) }}')" class="btn btn-warning btn-sm">
                                                            Edit Keterampilan dan Dokumen Pendukung
                                                        </a>
                                                    </td>
                                    
                                                    @php
                                                        $foundAssesmen = true;
                                                    @endphp
                                    
                                                @endif
                                            @endforeach 
                                    
                                            @if (!$foundAssesmen)
                                                <td></td>
                                                <td></td>
                                                <td style="text-align:center;">
                                                    <a onclick="addForm({{ $itemcpmk->id }},  '{{ $itemcpmk->kd_mk }}' )" class="btn btn-primary btn-sm">
                                                        Isi Keterampilan dan Dokumen Pendukung
                                                    </a>
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                    
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
         
        </div>
    </div>
<!--end::Accordion-->
@includeIf('maba.evaluasi_diri.formaddmodals')
@includeIf('maba.evaluasi_diri.formeditmodals')


<div class="modal fade" tabindex="-1" id="kt_modal_1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Preview File</h3>

                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                    aria-label="Close">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                </div>
                <!--end::Close-->
            </div>

            <div class="modal-body">
                <iframe src="" frameborder="0" id="iframe_docs" width="100%" height="500px"></iframe>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

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

@push('js-page')

<script>
    function addForm(idcpmk, kd_mk) 
    {
        $('#modal-evaldir-add').modal('show');
        $('#modal-evaldir-add .modal-tittle').text('Tambah Data');
        $('#modal-evaldir-add form')[0].reset();
        // $('#modal-form-add form').attr('action', url);
        $('#modal-evaldir-add form [name=_method]').val('post');
        $('#modal-evaldir-add form [name=kode_profesiensi_keterampilan]').focus();
        $('#id_cpmk').val(idcpmk);
        $('#kd_mk').val(kd_mk);
    }

    function editForm(url) 
    {
        $('#modal-evaldir-edit').modal('show');
        $('#modal-evaldir-edit .modal-tittle').text('Edit Data');

        $('#modal-evaldir-edit form')[0].reset();
        // $('#modal-form-edit form').attr('aksi', url); 
        // $('#modal-evaldir-add form [name=_method]').val('put');
        $('#modal-evaldir-edit form [name="kode_profesiensi_keterampilan"]').focus();
       
        $.get(url)
            .done((response) => {
                $('#modal-evaldir-edit [name=id]').val(response.id);
                $('#modal-evaldir-edit [name=id_cpmk]').val(response.idcpmk);
                $('#modal-evaldir-edit [name=kd_mk]').val(response.kd_mk);

                $('#modal-evaldir-edit [name=kode_profesiensi_keterampilan]').select2('destroy');;
                $('#modal-evaldir-edit [name=kode_profesiensi_keterampilan]').val(response.ketprofesiensi_keterampilan).select2();

                $('#modal-evaldir-edit [name="dokumen_pendukung[]"]').prop('checked', false);

                $.each(response.selected_dokumen, function(index, value) {
                    $('#modal-evaldir-edit [name="dokumen_pendukung[]"][value="' + value + '"]').prop('checked', true);
                });
            })
            .fail((errors) => {
                Swal.fire({
                    text: "Tidak dapat Menampilkan data.",
                    icon: "error",
                    buttonsStyling: !1,
                    confirmButtonText: "Ok, got it!",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                })
            });
    }

    
    $('#form-evaldir-add').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengisianevaluasidiri.store')}}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: function (data) {
                $("#modal-evaldir-add").modal('hide');
                var oTable = $('#table_cpmk').dataTable();
                oTable.fnDraw(false);
                $("#btn-save").html('Submit');
                $("#btn-save"). attr("disabled", false);

                   // Find the previously opened accordion and open it
                var previouslyOpenedAccordion = $('.accordion-button[aria-expanded="true"]');
                if (previouslyOpenedAccordion.length > 0) {
                    previouslyOpenedAccordion.attr('aria-expanded', 'false').addClass('collapsed');
                    var targetCollapse = previouslyOpenedAccordion.attr('data-bs-target');
                    $(targetCollapse).removeClass('show').addClass('collapse').attr('aria-expanded', 'false');
                }

                // Setelah Submit berhasil, buka kembali accordion yang terkait
                var accordionToOpen = $('.accordion-item:not(.collapsed)').find('.accordion-collapse');
                if (accordionToOpen.length > 0) {
                    accordionToOpen.addClass('show').removeClass('collapse').attr('aria-expanded', 'true');
                    accordionToOpen.prev('.accordion-header').find('.accordion-button').removeClass('collapsed');
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Sukses!',
                    text: 'Data berhasil disimpan.',
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 1500,
                });
                setTimeout(function() {
                        location.reload();
                    }, 1500);
            },
            error: function(data){
                console.log(data);
                let errorMessage = '';
                if (data.responseJSON.errors) {
                    // setiap pesan kesalahan
                    Object.values(data.responseJSON.errors).forEach(error => {
                        errorMessage = error;
                    });
                }

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

    
    $('#form-evaldir-update').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengisianevaluasidiri.update')}}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: function (data) {
                $("#modal-evaldir-edit").modal('hide');
                var oTable = $('#table_cpmk').dataTable();
                oTable.fnDraw(false);
                $("#btn-save").html('Submit');
                $("#btn-save"). attr("disabled", false);

                   // Find the previously opened accordion and open it
                var previouslyOpenedAccordion = $('.accordion-button[aria-expanded="true"]');
                if (previouslyOpenedAccordion.length > 0) {
                    previouslyOpenedAccordion.attr('aria-expanded', 'false').addClass('collapsed');
                    var targetCollapse = previouslyOpenedAccordion.attr('data-bs-target');
                    $(targetCollapse).removeClass('show').addClass('collapse').attr('aria-expanded', 'false');
                }

                // Setelah Submit berhasil, buka kembali accordion yang terkait
                var accordionToOpen = $('.accordion-item:not(.collapsed)').find('.accordion-collapse');
                if (accordionToOpen.length > 0) {
                    accordionToOpen.addClass('show').removeClass('collapse').attr('aria-expanded', 'true');
                    accordionToOpen.prev('.accordion-header').find('.accordion-button').removeClass('collapsed');
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Sukses!',
                    text: 'Data berhasil disimpan.',
                    buttonsStyling: false,
                    showConfirmButton: false,
                    timer: 1500,
                });
                setTimeout(function() {
                        location.reload();
                    }, 1500);
            },
            error: function(data){
                console.log(data);
                let errorMessage = '';
                if (data.responseJSON.errors) {
                    // setiap pesan kesalahan
                    Object.values(data.responseJSON.errors).forEach(error => {
                        errorMessage = error;
                    });
                }

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

    $(document).on('click', '.show-docs', function() {
        var data = $(this).data('url');
        $('#iframe_docs').attr('src', data);
    })
    
</script>

<script>
    const swal = $('.swal').data('swal');
    if (swal) {
        Swal.fire({
            title: 'Success',
            icon: "success",
            text: swal,
            buttonsStyling: false,
            showConfirmButton: false,
            timer: 1500,
        });
    }
</script>

@endpush