@extends('layouts.main')

@section('title')
    {{ $title }} -
@endsection

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="subheader py-3 py-lg-8 subheader-transparent" id="kt_subheader">
            <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                <div class="d-flex align-items-center flex-wrap mr-1">
                    <div class="d-flex align-items-baseline flex-wrap mr-5">
                        <h2 class="subheader-title text-dark font-weight-bold my-1 mr-3">{{ $title }}</h2>
                    </div>
                </div>
                <div class="d-flex align-items-center">

                </div>
            </div>
        </div>

        <div class="d-flex flex-column-fluid">
            <div class="container">
                <div class="row">
                    @for($i = 30; $i >= 25; $i--)
                        <div class="col-2">
                            <div class="card card-custom mb-2">
                                <div class="card-body py-2 px-3">
                                    <h1 class="text-center">{{ $i }}</h1>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0" id="jumlah_jawaban_{{ $i }}">-</p>
                                </div>
                            </div>
                        </div>
                    @endfor
                    @for($i = 19; $i <= 24; $i++)
                        <div class="col-2">
                            <div class="card card-custom mb-2">
                                <div class="card-body py-2 px-3">
                                    <h1 class="text-center">{{ $i }}</h1>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0" id="jumlah_jawaban_{{ $i }}">-</p>
                                </div>
                            </div>
                        </div>
                    @endfor
                    @for($i = 18; $i >= 13; $i--)
                        <div class="col-2">
                            <div class="card card-custom mb-2">
                                <div class="card-body py-2 px-3">
                                    <h1 class="text-center">{{ $i }}</h1>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0" id="jumlah_jawaban_{{ $i }}">-</p>
                                </div>
                            </div>
                        </div>
                    @endfor
                    @for($i = 7; $i <= 12; $i++)
                        <div class="col-2">
                            <div class="card card-custom mb-2">
                                <div class="card-body py-2 px-3">
                                    <h1 class="text-center">{{ $i }}</h1>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0" id="jumlah_jawaban_{{ $i }}">-</p>
                                </div>
                            </div>
                        </div>
                    @endfor
                    @for($i = 6; $i >= 1; $i--)
                        <div class="col-2">
                            <div class="card card-custom mb-2">
                                <div class="card-body py-2 px-3">
                                    <h1 class="text-center">{{ $i }}</h1>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0" id="jumlah_jawaban_{{ $i }}">-</p>
                                </div>
                            </div>
                        </div>
                    @endfor
                </div>
                <div class="separator separator-dashed my-3"></div>
                <div class="row justify-content-center">
                    <div class="col-4">
                        @for($i = 31; $i <= 32; $i++)
                            <div class="row">
                                <div class="col-6">
                                    <div class="card card-custom mb-2">
                                        <div class="card-body py-2 px-3">
                                            <h1 class="text-center">{{ $i }}</h1>
                                            <div class="separator separator-dashed mb-1"></div>
                                            <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                            <p class="mb-0" id="jumlah_jawaban_{{ $i }}">-</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                    <div class="col-8">
                        <div class="row justify-content-center">
                            <div class="col-7">
                                <div class="card card-custom mb-3">
                                    <div class="card-body py-2 px-4">
                                        <h1>Meja Pengawas</h1>
                                        <div class="separator separator-dashed mb-2"></div>
                                        @if($user->user_level_id == env('level_guru'))
                                            <h4 class="mb-0">{{ $user->nama }}</h4>
                                            <h6 class="text-muted">{{ $user->guru->mata_pelajaran }}</h6>
                                        @endif
                                    </div>
                                </div>
                                <div class="card card-custom">
                                    <div class="card-body py-2 px-4">
                                        <h4 class="mb-1">Jadwal Ujian</h4>
                                        <div class="separator separator-dashed mb-2"></div>
                                        @if(!empty($jadwalUjian))
                                            <table class="mb-0" style="width: 100%;">
                                                <tr>
                                                    <td class="pr-2">Kelas</td><td>:</td>
                                                    <td class="pl-2">{{ $jadwalUjian->kelas->nama }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="pr-2">Paket Soal</td><td>:</td>
                                                    <td class="pl-2">{{ $jadwalUjian->paket_soal->nama }} ({{ $jadwalUjian->paket_soal->jumlah_soal }} Soal)</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3">
                                                        <p class="mb-0 float-right">
                                                            {{ $jadwalUjian->waktu_awal . ' s/d ' . $jadwalUjian->waktu_akhir }}
                                                        </p>
                                                        <a href="javascript:void(0)" class="text-muted" onclick="tampilkan_peserta({{ $jadwalUjian->peserta_ujian }})">Lihat Daftar Peserta</a>
                                                    </td>
                                                </tr>
                                            </table>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('modals')
    <div class="modal fade" id="modal_tampilkan_peserta" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal_tampilkan_peserta_judul">Peserta Ujian</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div data-scroll="true" data-height="400">
                        <div id="data_tampilkan_peserta">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script>
        let siswaHadir = [];
        function tampilkan_peserta(data) {
            let siswaId = [];
            $.each(data, function (i, value) {
                siswaId.push(value.riwayat_siswa_id);
            });
            $.post("{{ route('siswa.search') }}", {
                _token: '{{ csrf_token() }}',
                list_id: siswaId
            }, function (result) {
                $('#data_tampilkan_peserta').html(result);
                $.each(siswaHadir, function (i, value) {
                    $('#row_siswa_' + value).css('background-color','#69f0ae');
                });
                $('#modal_tampilkan_peserta').modal('show');
            });
        }

        function getListMeja() {
            $.post("{{ route('home.ujian.ruangan.data') }}", {
                _token: '{{ csrf_token() }}',
                jadwal_ujian_id: '{{ !empty($jadwalUjian) ? $jadwalUjian->id : '' }}'
            }, (result) => {
                $.each(result, (i, value) => {
                    let nomorMeja = i+1;
                    if (value === '') {
                        $('#nama_siswa_' + nomorMeja).html('-');
                        $('#jumlah_jawaban_' + nomorMeja).html('-');
                    } else {
                        let jumlahSoal = parseInt('{{ !empty($jadwalUjian) ? $jadwalUjian->paket_soal->jumlah_soal : 0 }}');
                        siswaHadir.push(value.siswa.riwayat_terakhir.id);
                        $('#nama_siswa_' + nomorMeja).html(value.siswa.nama);

                        @if(!empty($jadwalUjian))
                        if (jumlahSoal === parseInt(value.jumlah_jawaban)) {
                            $('#jumlah_jawaban_' + nomorMeja).html('<b>Selesai</b>');
                        } else {
                            $('#jumlah_jawaban_' + nomorMeja).html('<b>'+ value.jumlah_jawaban + ' terjawab</b>');
                        }
                        @endif
                    }
                });
                setTimeout(function() {
                    getListMeja();
                }, 3000);
            });
        }
        getListMeja();

    </script>
@endpush