@extends('layout.app')
@section('title', 'admin')
@section('content')

@extends('layout.bs5')

    <h1 class="h3 mb-2 text-gray-800">Hasil Metode FMCDM by Si-Wapres</h1>
    <p class="mb-4 d-print-none">Fitur ini berguna untuk print out ke file PDF untuk dokumentasi Perankingan berdasarkan α 1.</p>

    <!-- alert -->
    @if (session('message'))
        <div id="alert-session" class="alert alert-success alert-dismissible fade show mb-4" role="alert" style="border-radius: 0;" data-display="10000">
            <strong>{{ session('message') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <script>
            setTimeout(function() {
                var alert = document.getElementById('alert-session');
                var time = parseInt(alert.getAttribute('data-display'));
                if (alert.style.opacity > 0) {
                    alert.style.opacity = alert.style.opacity - 0.05;
                }
                setTimeout(closeAlert, 30000);
            }, 10);
            function closeAlert() {
                var alert = document.getElementById('alert-session');
                var time = parseInt(alert.getAttribute('data-display'));
                if (alert.style.opacity <= 0) {
                    alert.style.display = "none";
                } else {
                    alert.style.opacity = alert.style.opacity - 0.05;
                    setTimeout(closeAlert, 10);
                }
            }
        </script>
    @endif
    
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-body py-3 ">
            <button type="button" class="btn btn-outline-success float-right d-print-none" onclick="window.print()">
                <svg width="16" height="16" fill="currentColor" class="bi bi-printer">
                    <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1">
                    </path>
                </svg>
                Print
            </button>

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-outline-primary d-print-none mr-3" data-toggle="modal" data-target="#kelas7">
            Kelas 7
            </button>
            
            <button type="button" class="btn btn-outline-warning d-print-none mr-3" data-toggle="modal" data-target="#kelas8">
            Kelas 8
            </button>
            
            <button type="button" class="btn btn-outline-danger d-print-none" data-toggle="modal" data-target="#kelas9">
            Kelas 9
            </button>

            <!-- Modal -->
            <div class="modal fade" id="kelas7" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title mb-3" id="staticBackdropLabel">Hasil FMCDM Kelas 7</h3>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true" class="d-print-none">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <table class="table">
                                <thead class="table-info" style="color:black;">
                                    <tr>
                                        <th>No</th>
                                        <th class="text-center">NISN</th>
                                        <th>Nama</th>
                                        <th class="text-center">Kelas</th>
                                        <th class="text-center">Hasil FMCDM</th>
                                        <th class="text-center">Ranking</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $no = 1 ?>
                                    @foreach ( $kelas7 as $index => $siswa )
                                    <tr>
                                        <td>{{ $no }}</td>
                                        <td class="text-center">{{ $siswa->nisn }}</td>
                                        <td>{{ $siswa->nama }}</td>
                                        <td class="text-center">{{ $siswa->kelas }}</td>
                                        <td class="text-center">{{ number_format($siswa->fmcdm_c, 6) }}</td>
                                        <td class="text-center">{{ $no++ }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary d-print-none mr-2" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success float-right d-print-none" onclick="printModalContent('kelas7')">
                                Print
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="kelas8" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Hasil FMCDM Kelas 8</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <table class="table">
                                <thead class="table-info" style="color:black;">
                                    <tr>
                                        <th>No</th>
                                        <th class="text-center">NISN</th>
                                        <th>Nama</th>
                                        <th class="text-center">Kelas</th>
                                        <th class="text-center">Hasil FMCDM</th>
                                        <th class="text-center">Ranking</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $no = 1 ?>
                                    @foreach ( $kelas8 as $index => $siswa )
                                    <tr>
                                        <td>{{ $no }}</td>
                                        <td class="text-center">{{ $siswa->nisn }}</td>
                                        <td>{{ $siswa->nama }}</td>
                                        <td class="text-center">{{ $siswa->kelas }}</td>
                                        <td class="text-center">{{ number_format($siswa->fmcdm_c, 6) }}</td>
                                        <td class="text-center">{{ $no++ }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary d-print-none mr-2" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success float-right d-print-none" onclick="printModalContent('kelas8')">
                                Print
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="kelas9" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Hasil FMCDM Kelas 9</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <table class="table">
                                <thead class="table-info" style="color:black;">
                                    <tr>
                                        <th>No</th>
                                        <th class="text-center">NISN</th>
                                        <th>Nama</th>
                                        <th class="text-center">Kelas</th>
                                        <th class="text-center">Hasil FMCDM</th>
                                        <th class="text-center">Ranking</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $no = 1 ?>
                                    @foreach ( $kelas9 as $index => $siswa )
                                    <tr>
                                        <td>{{ $no }}</td>
                                        <td class="text-center">{{ $siswa->nisn }}</td>
                                        <td>{{ $siswa->nama }}</td>
                                        <td class="text-center">{{ $siswa->kelas }}</td>
                                        <td class="text-center">{{ number_format($siswa->fmcdm_c, 6) }}</td>
                                        <td class="text-center">{{ $no++ }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary d-print-none mr-2" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success float-right d-print-none" onclick="printModalContent('kelas9')">
                                Print
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body table-responsive">
            <table class="table table-striped" id="dataTable" width="100%" cellspacing="0">
                <thead class="table-info" style="color:black;">
                    <tr>
                        <th>No</th>
                        <th class="text-center">NISN</th>
                        <th class="text-center">Nama</th>
                        <th class="text-center">Kelas</th>
                        <th class="text-center">Hasil FMCDM</th>
                        <th class="text-center">Ranking</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($hasilSiswa as $index => $siswa)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td class="text-center">{{ $siswa->nisn }}</td>
                            <td>{{ $siswa->nama }}</td>
                            <td class="text-center">{{ $siswa->kelas }}</td>
                            <td class="text-center">{{ number_format($siswa->fmcdm_c, 6) }}</td>
                            <td class="text-center">{{ $siswa->ranking }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <script>
        
        function printModalContent(kelas) {
                var printContents = document.getElementById(kelas).innerHTML;
                var originalContents = document.body.innerHTML;

                document.body.innerHTML = printContents;

                window.print();

                document.body.innerHTML = originalContents;

                location.reload();
            }
    </script>
@endsection