@extends('layouts.main')

@section('judul')
    <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">Home</h1>
@endsection

@push('css')
@endpush

@section('breadchums')
@endsection
@section('isi')  
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">  
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container  container-fluid ">
            <div class="card mb-10 shadow-sm">
                <div class="card-header">
                    <div class="card-title fs-3 fw-bold">Hasil Nilai Kegiatan Mahasiswa</div>
                </div>

                <form action="{{route('rekapitulasiskorkegiatanmahasiswa.detail')}}" method="GET" id="prodiForm">
                    <input type="hidden" name="kode_prodi" id="kode_prodi_encrypted" value="">
                    <div class="card-body pt-9 pb-0">
             
                        <div class="row mb-3">
                            <div class="col-xl-2">
                                <div class="fs-6 fw-semibold mt-2 mb-3">Tahun Angkatan</div>
                            </div>
                            <div class="col-xl-6">
                                <select class="form-select form-select-light" name="ta" required id="ta">
                                    <option value="">Tahun Angkatan</option>
                                      @foreach ($getTahunAngkatan as $key => $item)
                                        <option value="{{ $item->tahun_angkatan }}">{{ $item->tahun_angkatan }}</option>
                                        @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-xl-2">
                                <div class="fs-6 fw-semibold mt-2 mb-3">Program Studi</div>
                            </div>
                             <div class="col-xl-6">
                                <select class="form-select form-select-light" name="kode_prodi_select" required id="kode_prodi">
                                    <option value="">Pilih Program Studi</option>
                                    @forelse ($getAksesProdi as $user)      
                                        @forelse ($user->useraksesprodi as $aksesProdi)
                                            <option value="{{ $aksesProdi->kd_prodi }}">
                                                {{ $aksesProdi->prodi->jenjang . ' - ' . $aksesProdi->prodi->prodi . ' ' . $aksesProdi->prodi->ketprogram }}
                                            </option>
                                        @empty
                                          
                                        @endforelse
                                    @empty
                                        <option value="">Tidak ada data pengguna atau akses prodi</option>
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        
                    </div>
            
                    <div class="card-footer d-flex justify-content-start py-6 gap-5">
                        <button type="submit" id="submitBtn" class="btn btn-sm btn-primary">Lihat Data</button>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </div>
</div>
@endsection

@push('js-page')
<script>
    $(document).ready(function() {
        $('#kode_prodi').on('change', function() {
            const selectedValue = $(this).val();
            const submitBtn = $('#submitBtn');
            const hiddenInput = $('#kode_prodi_encrypted');
            
            if (selectedValue) {
                // Tampilkan loading (optional)
                submitBtn.html('Loading...').prop('disabled', true);
                
                // AJAX request untuk enkripsi
                $.ajax({
                    url: '{{ route("rekapitulasiskorkegiatanmahasiswa.encryptKodeProdi") }}',
                    method: 'POST',
                    data: {
                        kode_prodi: selectedValue,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success && response.encrypted) {
                            hiddenInput.val(response.encrypted);
                            submitBtn.html('Cari Data').prop('disabled', false);
                            
                            // Optional: Auto submit form
                            // $('#prodiForm').submit();
                            $('#kode_prodi').removeAttr('name');
                        
                        } else {
                                alert('Gagal mengenkripsi data');
                                hiddenInput.val('');
                                submitBtn.prop('disabled', true);
                    
                                // Restore name attribute jika user belum memilih
                                $('#kode_prodi').attr('name', 'kode_prodi_select');
                    
                                submitBtn.html('Cari Data').prop('disabled', true);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                        alert('Terjadi kesalahan saat memproses data');
                        submitBtn.html('Cari Data').prop('disabled', true);
                    }
                });
            } else {
                // Jika tidak ada pilihan, kosongkan dan disable tombol
                hiddenInput.val('');
                submitBtn.prop('disabled', true);
            }
        });
    });

    // Disable select element sebelum form disubmit
    $('#prodiForm').on('submit', function() {
        $('#kode_prodi').prop('disabled', true);
    });
</script>

@endpush