@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">
                                    <h5 class="text-center">{{ $i }}</h5>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0 bold" id="status_siswa_{{ $i }}">-</p>
                                </div>
                                <div class="card-footer p-1">
                                    <button type="button" id="button_pribadi_{{ $i }}" class="btn btn-sm btn-primary" style="display: none;">Pesan</button>
                                    <button type="button" id="button_onoff_{{ $i }}" class="btn btn-sm btn-primary float-right" style="display: none;">On</button>
                                </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">
                                    <h5 class="text-center">{{ $i }}</h5>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0 bold" id="status_siswa_{{ $i }}">-</p>
                                </div>
                                <div class="card-footer p-1">
                                    <button type="button" id="button_pribadi_{{ $i }}" class="btn btn-sm btn-primary" style="display: none;">Pesan</button>
                                    <button type="button" id="button_onoff_{{ $i }}" class="btn btn-sm btn-primary float-right" style="display: none;">On</button>
                                </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">
                                    <h5 class="text-center">{{ $i }}</h5>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0 bold" id="status_siswa_{{ $i }}">-</p>
                                </div>
                                <div class="card-footer p-1">
                                    <button type="button" id="button_pribadi_{{ $i }}" class="btn btn-sm btn-primary" style="display: none;">Pesan</button>
                                    <button type="button" id="button_onoff_{{ $i }}" class="btn btn-sm btn-primary float-right" style="display: none;">On</button>
                                </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">
                                    <h5 class="text-center">{{ $i }}</h5>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0 bold" id="status_siswa_{{ $i }}">-</p>
                                </div>
                                <div class="card-footer p-1">
                                    <button type="button" id="button_pribadi_{{ $i }}" class="btn btn-sm btn-primary" style="display: none;">Pesan</button>
                                    <button type="button" id="button_onoff_{{ $i }}" class="btn btn-sm btn-primary float-right" style="display: none;">On</button>
                                </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">
                                    <h5 class="text-center">{{ $i }}</h5>
                                    <div class="separator separator-dashed mb-1"></div>
                                    <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                    <p class="mb-0 bold" id="status_siswa_{{ $i }}">-</p>
                                </div>
                                <div class="card-footer p-1">
                                    <button type="button" id="button_pribadi_{{ $i }}" class="btn btn-sm btn-primary" style="display: none;">Pesan</button>
                                    <button type="button" id="button_onoff_{{ $i }}" class="btn btn-sm btn-primary float-right" style="display: none;">On</button>
                                </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">
                                            <button type="button" id="button_pribadi_{{ $i }}" class="btn btn-sm btn-primary float-right" style="display: none;">Kirim Pesan</button>
                                            <h5 class="text-center">{{ $i }}</h5>
                                            <div class="separator separator-dashed mb-1"></div>
                                            <p class="mb-0" id="nama_siswa_{{ $i }}">-</p>
                                            <p class="mb-0 bold" id="status_siswa_{{ $i }}">-</p>
                                        </div>
                                        <div class="card-footer p-1">
                                            <button type="button" id="button_pribadi_{{ $i }}" class="btn btn-sm btn-primary" style="display: none;">Pesan</button>
                                            <button type="button" id="button_onoff_{{ $i }}" class="btn btn-sm btn-primary float-right" style="display: none;">On</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                    <div class="col-8">
                        <div class="card card-custom">
                            <div class="card-body py-4 px-4">
                                <div class="row">
                                    <div class="col-md-6 border-right">
                                        <button type="button" onclick="bukaPencarianMateri()" class="btn btn-primary btn-block mb-2">Pilih Materi</button>
                                        <div class="row mt-3" id="row_media_control" @if(empty($riwayat)) style="display: none;" @endif>
                                            <div class="col-4">
                                                <button type="button" class="btn btn-block btn-primary" onclick="mulaiMedia()">Mulai</button>
                                            </div>
                                            <div class="col-4">
                                                <button type="button" class="btn btn-block btn-warning" onclick="pauseMedia()">Pause</button>
                                            </div>
                                            <div class="col-4">
                                                <button type="button" class="btn btn-block btn-danger" onclick="stopMedia()">Stop</button>
                                            </div>
                                            <div class="col-6">
                                                <button type="button" class="btn btn-block btn-primary mt-3" onclick="semuaOn()">Semua On</button>
                                            </div>
                                            <div class="col-6">
                                                <button type="button" class="btn btn-block btn-danger mt-3" onclick="semuaOff()">Semua Off</button>
                                            </div>
                                        </div>
                                        <button type="button" onclick="pesanSemua()" class="btn btn-primary btn-block mt-3">Percakapan</button>
                                    </div>
                                    <div class="col-md-6">
                                        <h3 class="text-center" id="nama_materi">{{ !empty($riwayat) ? $riwayat->materi->nama : '- Materi Pembelajaran - ' }}</h3>
                                        @if(!empty($riwayat))
                                            <button type="button" onclick="mulaiPembelajaran()" id="buttonMulai" class="btn btn-block btn-primary">Tampilkan Materi</button>
                                            <div id="body_materi" style="display:none;">
                                                @if($riwayat->materi->tipe_media == 'MP3')
                                                    <div class="text-center">
                                                        <h3>{{ $riwayat->materi->nama }}</h3>
                                                        <h1><i class="fa fa-music fa-3x mt-2" id="icon_music"></i></h1>
                                                        <audio id="media_materi">
                                                            <source src="{{ $riwayat->materi->media_lokasi }}" type="audio/mpeg">
                                                            Your browser does not support the audio element.
                                                        </audio>
                                                    </div>
                                                @endif

                                                @if($riwayat->materi->tipe_media == 'Video')
                                                    <video width="100%" height="250" id="media_materi">
                                                        <source src="{{ $riwayat->materi->media_lokasi }}" type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('modals')
    <div class="modal fade" id="modal_pencarian_materi" 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_pencarian_materi_judul">Pencarian Materi Pembelajaran</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">
                        <input type="text" class="form-control" name="pencarian_materi" id="pencarian_materi">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Kategori</th>
                                <th>Pilih</th>
                            </tr>
                            </thead>
                            <tbody id="data_pencarian_materi">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script>
        let siswaHadir = [], selectedMateriId = '', selectedMateri = '';
        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() }}',
            }, (result) => {
                $.each(result, (i, value) => {
                    let nomorMeja = i+1;
                    if (value === '') {
                        $('#button_onoff_' + nomorMeja).hide();
                        $('#button_onoff_' + nomorMeja).removeAttr('onclick');
                        $('#button_pribadi_' + nomorMeja).hide();
                        $('#button_pribadi_' + nomorMeja).removeAttr('onclick');
                        $('#nama_siswa_' + nomorMeja).html('-');
                        $('#status_siswa_' + nomorMeja).html('-');
                    } else {
                        $('#button_onoff_' + nomorMeja).show();
                        $('#button_onoff_' + nomorMeja).attr('onclick', 'muteMeja('+nomorMeja+')');
                        $('#button_pribadi_' + nomorMeja).show();
                        $('#button_pribadi_' + nomorMeja).attr('onclick', 'pesanPribadi('+ value.siswa.id +')');
                        siswaHadir.push(value.siswa.riwayat_terakhir.id);
                        $('#nama_siswa_' + nomorMeja).html(value.siswa.nama);
                        $('#status_siswa_' + nomorMeja).html(value.status);
                    }
                });
                setTimeout(function() {
                    getListMeja();
                }, 3000);
            }).fail(function () {
                getListMeja();
            })
        }
        getListMeja();


        function bukaPencarianMateri() {
            pencarianMateri();
            $('#modal_pencarian_materi').modal('show');
        }
        function pencarianMateri() {
            $('#data_pencarian_materi').html('');
            $.post("{{ route('materi.search') }}", {
                _token: '{{ csrf_token() }}',
                nama: $('#pencarian_materi').val(),
                ajax: true
            }, function (result) {
                $('#data_pencarian_materi').html('');
                $.each(result, (i, value) => {
                    let row = $('<tr>');
                    row.append('<td>'+ (i+1) +'</td>');
                    row.append('<td>'+ value.nama +'</td>');
                    row.append('<td>'+ value.kategori_materi.nama +'</td>');
                    row.append('<td class="p-1 text-center"><button type="button" onclick="pilihMateri('+ value.id +', `'+ value.nama +'`)" class="btn btn-primary btn-sm">Pilih</button></td>');
                    $('#data_pencarian_materi').append(row);
                });
            }).fail((xhr) => {
                console.log(xhr.responseText);
            });
        }
        $('#pencarian_materi').change(() => {
            pencarianMateri();
        });
        function pilihMateri(id, nama) {
            $.post("{{ route('home.materi.riwayat.save') }}", {
                _token: '{{ csrf_token() }}',
                materi_id: id
            }, function () {
                window.location.reload();
            });
        }

        function muteMeja(nomorMeja) {
            let $button = $('#button_onoff_' + nomorMeja);
            if ($button.html() == 'On') {
                $.post("{{ route('home.materi.siswa.off') }}", {
                    _token: '{{ csrf_token() }}',
                    nomor_meja: nomorMeja
                }, function () {
                    $button.html('Off');
                    $button.attr('class', 'btn btn-sm btn-danger float-right');
                });
            } else {
                $.post("{{ route('home.materi.siswa.on') }}", {
                    _token: '{{ csrf_token() }}',
                    nomor_meja: nomorMeja
                }, function () {
                    $button.html('On');
                    $button.attr('class', 'btn btn-sm btn-primary float-right');
                });
            }
        }

        @if(!empty($riwayat))
            selectedMateriId = {{ $riwayat->materi_id }};
            selectedMateri = '{{ $riwayat->materi->nama }}';
        @endif

        function mulaiMedia() {
            if (selectedMateriId !== '') {
                $.post("{{ route('home.materi.riwayat.save') }}", {
                    _token: '{{ csrf_token() }}',
                    materi_id: selectedMateriId,
                    status: 'Play'
                });
            }
        }
        function pauseMedia() {
            if (selectedMateriId !== '') {
                $.post("{{ route('home.materi.riwayat.save') }}", {
                    _token: '{{ csrf_token() }}',
                    materi_id: selectedMateriId,
                    status: 'Pause'
                });
            }
        }
        function stopMedia() {
            if (selectedMateriId !== '') {
                $.post("{{ route('home.materi.riwayat.save') }}", {
                    _token: '{{ csrf_token() }}',
                    materi_id: selectedMateriId,
                    status: 'Stop'
                });
            }
        }

        function semuaOff() {
            $.post("{{ route('home.materi.siswa.mute_all') }}", {
                _token: '{{ csrf_token() }}',
            }, function () {
                for (i = 1; i <= 32; i++) {
                    let $button = $('#button_onoff_' + i);
                    $button.html('Off');
                    $button.attr('class', 'btn btn-sm btn-danger float-right');
                }
            });
        }
        function semuaOn() {
            $.post("{{ route('home.materi.siswa.on_all') }}", {
                _token: '{{ csrf_token() }}',
            }, function () {
                for (i = 1; i <= 32; i++) {
                    let $button = $('#button_onoff_' + i);
                    $button.html('On');
                    $button.attr('class', 'btn btn-sm btn-primary float-right');
                }
            });
        }
    </script>

    @if(!empty($riwayat))
        <script>
            let mediaMateri = document.getElementById("media_materi");
            let materiId = '{{ $riwayat->materi->id }}';
            function mulaiPembelajaran() {
                $('#buttonMulai').hide();
                $('#body_materi').show();
                cekStatusRiwayat();
            }

            function cekStatusRiwayat() {
                $.post("{{ route('home.materi.riwayat.status') }}", {
                    _token: '{{ csrf_token() }}'
                }, function (result) {
                    if (result !== '-') {
                        if (materiId != result.riwayat.materi_id) {
                            window.location.reload();
                        }
                        if (result.riwayat.status === 'Play') {
                            mediaMateri.play();
                            $('#icon_music').addClass('fa-spin');
                        }
                        if (result.riwayat.status === 'Pause') {
                            mediaMateri.pause();
                            $('#icon_music').removeClass('fa-spin');
                        }
                        if (result.riwayat.status === 'Stop') {
                            mediaMateri.pause();
                            mediaMateri.currentTime = 0;
                            $('#icon_music').removeClass('fa-spin');
                        }
                    }
                    setTimeout(function () {
                        cekStatusRiwayat()
                    }, 800);
                }).fail(function () {
                    cekStatusRiwayat();
                })
            }
        </script>
    @endif
@endpush

@include('materi.percakapan._index')