@extends('layouts.main')

@section('isi')
<style>
    table, th, td
    {
        border: 1px solid rgb(235, 227, 227) !important;
        padding: 10px !important;
    }
    
    th
    {
        background-color: #01a096e6 !important;
        color: rgb(244, 243, 243) !important;
    }
    
    tr:nth-child(odd)
    {
        background-color: #f5f9fa !important;
    }

    .center-text {
        text-align: center;
    }
</style>
<!--begin::Content-->
<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::Navbar-->
        <div class="card mb-6 mb-xl-9 shadow-sm" >
            <div class="card-body pt-9 pb-0">
                <!--begin::Details-->
                <div class="d-flex flex-wrap flex-sm-nowrap mb-6">
                   
                    <!--begin::Wrapper-->
                    <div class="flex-grow-1">
                        <!--begin::Head-->
                        <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                            <!--begin::Details-->
                            <div class="d-flex flex-column">
                                <!--begin::Status-->
                                <div class="d-flex align-items-center mb-1">
                                    <a href="#" class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">Tahun Akademik</a>
                                </div>
                                <!--end::Status-->
                                <!--begin::Description-->
                                <div class="d-flex flex-wrap fw-semibold mb-4 fs-5" style="color: rgb(17, 165, 69);">{{ $jadwaldosen->tahunakademik->thakad.' '.$jadwaldosen->tahunakademik->semester.', Pelatihan '.$jadwaldosen->tahunakademik->stspel }}</div>
                                <!--end::Description-->
                            </div>
                            <!--end::Details-->
                            <!--begin::Actions-->
                            <div class="d-flex mb-4">
                                <a class="btn btn-primary btn-sm" href="{{ route('home') }}">
                                    <span class="indicator-label"><i class="fas fa-long-arrow-left"></i> Kembali</span>
                                </a>
                            </div>
                            <!--end::Actions-->
                        </div>
                        <!--end::Head-->
                        <!--begin::Info-->
                        <div class="d-flex flex-wrap justify-content-start">
                            <!--begin::Stats-->
                            <div class="d-flex flex-wrap">
                                <!--begin::Stat-->
                                <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                    <!--begin::Number-->
                                    <div class="d-flex align-items-center">
                                        <div class="fs-4 fw-bold">Kode MK</div>
                                    </div>
                                    <!--end::Number-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold fs-6" style="color: rgb(17, 165, 69);">{{ $jadwaldosen->kd_mppel}}</div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Stat-->
                                <!--begin::Stat-->
                                <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                    <!--begin::Number-->
                                    <div class="d-flex align-items-center">
                                        <div class="fs-4 fw-bold">Matakuliah</div>
                                    </div>
                                    <!--end::Number-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold fs-6" style="color: rgb(17, 165, 69);">{{ $jadwaldosen->matakuliahpelatihan->nmpel}}l</div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Stat-->
                                <!--begin::Stat-->
                                <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                    <!--begin::Number-->
                                    <div class="d-flex align-items-center">
                                        <div class="fs-4 fw-bold">Kelas</div>
                                    </div>
                                    <!--end::Number-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold fs-6" style="color: rgb(17, 165, 69);">{{ $jadwaldosen->kelas.$jadwaldosen->klsdefault }}</div>
                                    <!--end::Label-->
                                </div>
                                <!--end::Stat-->
                            </div>
                            <!--end::Stats-->
                           
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Details-->               
            </div>
        </div>
        <!--end::Navbar-->

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

        <div class="mb-5 mb-xl-10">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="tab-content mb-2">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr class="fw-bold fs-6 text-gray-800">
                                    <th class="align-middle text-center" rowspan="2">Pertemuan</th>
                                    <th class="align-middle text-center" rowspan="2">Tanggal Kehadiran</th>
                                    <th class="align-middle text-center" rowspan="2">Materi Pembelajaran</th>
                                    <th class="align-middle text-center" rowspan="2">Tautan Pembelajaran</th>
                                    <th class="align-middle text-center" colspan="5">Kehadiran Mahasiswa</th>
                                </tr>
                                <tr class="fw-bold fs-6 text-gray-800">
                                    <th class="align-middle text-center">Hadir</th>
                                    <th class="align-middle text-center">Tidak Hadir</th>
                                    <th class="align-middle text-center">Sakit</th>
                                    <th class="align-middle text-center">Ijin</th>
                                    <th class="align-middle text-center">Kosong</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @foreach($presensi_dosen as $key => $item)
                                       
                                        <tr>
                                            <td class="align-middle text-center">{{ \Illuminate\Support\Str::upper($item->pertemuan) }}</td>
                                            <td class="align-middle text-center">
                                                @if($item->transaksipresensidosen->isNotEmpty())
                                                    {{ \Carbon\Carbon::parse($item->transaksipresensidosen->first()->tglpel)->format('d-m-Y') }}
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td class="align-middle">{{ $item->transaksipresensidosen->first()->materi ?? 0 }}</td>
                                            <td class="align-middle text-center">{{ $item->transaksipresensidosen->first()->linkbelajar ?? 0 }}</td>
                                            <td class="align-middle text-center">{{ $jumlahKehadiranSeluruhPertemuan->{$item->pertemuan}->hadir ?? 0 }}</td>
                                            <td class="align-middle text-center">{{ $jumlahKehadiranSeluruhPertemuan->{$item->pertemuan}->absen ?? 0 }}</td>
                                            <td class="align-middle text-center">{{ $jumlahKehadiranSeluruhPertemuan->{$item->pertemuan}->izin ?? 0 }}</td>
                                            <td class="align-middle text-center">{{ $jumlahKehadiranSeluruhPertemuan->{$item->pertemuan}->sakit ?? 0 }}</td>
                                            <td class="align-middle text-center">{{ $jumlahKehadiranSeluruhPertemuan->{$item->pertemuan}->kosong ?? 0 }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      
    </div>
    <!--end::Content container-->
</div>
<!--end::Content-->
@endsection

@push('js-page')

<script>
    $(document).ready(function() {
        $("#pertemuan").change(function(){
            getFormInputPresensi();
        });

        function getFormInputPresensi() {
            var pertemuan = $('#pertemuan').val();

            $("#view_detail").empty();
      
            $.ajax({    
                type: "GET",
                url: "{{ route('presensi-pelatihan-mhs.fetchDataPresensi') }}",
                data: {
                        "_token": "{{ csrf_token() }}",
                        pertemuan: pertemuan
                },
                cache: false,
                success: function(data) {
                    $('#view_detail').append(data);
                },
                error: function(data) {
                    console.log('data error');
                    console.log(data);
                },
            });
        }





    });
</script>

@endpush