@extends('admin.layout.admin')
@section('title', 'Kirim Rapor Serentak')
@section('styles')
@endsection
@section('metas')
    <meta name="redirect-url" content="{{ route('admin.rapor.kirim') }}">
    <meta name="single-email-url" content="{{ route('admin.rapor.kirim-single') }}">
@endsection
@section('scripts')
    <script>
        let siswas = @json(isset($siswas) ? $siswas : []);
    </script>
    <script src="{{ asset('js/app/admin/rapor/kirim-serentak.js') }}"></script>
@endsection
@section('content')

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Kirim Rapor Serentak
                </div>
                <div class="card-body">
                    @include('admin.layout.alert')
                    <button class="btn btn-primary" id="kirim">Kirim ke Semua Siswa</button>
                    <hr>
                    <div class="form-group">
                        <table class="table table-sm table bordered">
                            <tr>
                                <th>Nama Siswa</th>
                                <th>Kelas</th>
                                <th>NIS</th>
                                <th>Status Pengiriman</th>
                            </tr>
                            @foreach($siswas as $key => $siswa)
                                <tr>
                                    <td>{{ $siswa->nama }}</td>
                                    <td>{{ $siswa->kelas->nama }}</td>
                                    <td>{{ $siswa->nis }}</td>
                                    <td id="status_{{$siswa->id}}"></td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultModalTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Email result</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <small id="status-loading"><i class="text-danger">*Jangan tutup halaman ini sampai pemberitahuan selesai.</i></small>
                    <ul id="email-result">
                    </ul>
                    <small style="display: none" id="status-selesai"><i class="text-success">Pengiriman email selesai, silahkan <a href="">refresh</a> halaman.</i></small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection