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

    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Tabel Siswa</h1>
    <p class="mb-4">Fitur ini berguna untuk menambahkan, mengedit, memperbarui dan menghapus data siswa.</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-header py-3">
            <a href="{{ route('admin.insert') }}" class="btn btn-outline-primary"><i class="fas fa-plus"></i> Tambah Data</a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr class="text-center">
                            <th style="width: 3%;">No</th>
                            <th style="width: 9%;">NISN</th>
                            <th style="width: 15%;">Nama</th>
                            <th style="width: 5%;">Kelas</th>
                            <th style="width: 9%;">C01-Pengetahuan</th>
                            <th style="width: 9%;">C02-Keterampilan</th>
                            <th style="width: 7%;">C03-Sikap</th>
                            <th style="width: 9%;">C04-Kehadiran</th>
                            <th class="width: 14%;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody> 
                        <?php $no = 1; ?>
                        @foreach ($siswa as $data)
                            <tr class="text-center">
                                <td>{{ $no++ }}</td>
                                <td>{{ $data->nisn }}</td>
                                <td>{{ $data->nama }}</td>
                                <td>{{ $data->kelas }}</td>
                                <td>{{ $data->pengetahuan }}</td>
                                <td>{{ $data->keterampilan }}</td>
                                <td>{{ $data->sikap }}</td>
                                <td>{{ $data->kehadiran }}</td>
                                <td width="10%">
                                    <div class="d-flex">
                                        <a href="{{ route('siswa.edit', ['id' => $data->id]) }}" class="btn btn-outline-warning me-2">Edit</a>

                                        <form action="{{ route('siswa.delete', ['id' => $data->id]) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger mr-2 ml-2">Hapus</button>
                                        </form>

                                        <button class="btn btn-outline-primary btn-detail" data-toggle="modal" data-target="#staticBackdrop"
                                            data-nisn="{{$data->nisn}}"
                                            data-nama="{{$data->nama}}"
                                            data-kelas="{{$data->kelas}}"
                                            data-alamat="{{$data->alamat}}"
                                            data-pengetahuan="{{$data->pengetahuan}}"
                                            data-keterampilan="{{$data->keterampilan}}"
                                            data-sikap="{{$data->sikap}}"
                                            data-kehadiran="{{$data->kehadiran}}"
                                        >Detail
                                        </button>

                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Detail <span id="siswa-nama"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="siswa-nisn">NISN</label>
                        <input type="text" class="form-control" id="siswa-nisn" readonly>
                    </div>
                    <div class="form-group">
                        <label for="siswa-nama2">Nama</label>
                        <input type="text" class="form-control" id="siswa-nama2" readonly>
                    </div>
                    <div class="form-group">
                        <label for="siswa-kelas">Kelas</label>
                        <input type="text" class="form-control" id="siswa-kelas" readonly>
                    </div>
                    <div class="form-group">
                        <label for="siswa-alamat">Alamat</label>
                        <textarea class="form-control" id="siswa-alamat" rows="3" readonly></textarea>
                    </div>
                </form>
                <hr>
                <p class="mt-3">Pengetahuan</p>
                <div class="progress" id="siswa-pengetahuan">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
                </div>
                <p class="mt-3">Keterampilan</p>
                <div class="progress" id="siswa-keterampilan">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
                </div>
                <p class="mt-3">Sikap</p>
                <div class="progress" id="siswa-sikap">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
                </div>
                <p class="mt-3">Kehadiran</p>
                <div class="progress" id="siswa-kehadiran">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).ready(function() {
                $('.btn-detail').click(function() {
                    let nisn = $(this).attr('data-nisn')
                    let nama = $(this).attr('data-nama')
                    let kelas = $(this).attr('data-kelas')
                    let alamat = $(this).attr('data-alamat')
                    let pengetahuan = $(this).attr('data-pengetahuan')
                    let keterampilan = $(this).attr('data-keterampilan')
                    let sikap = $(this).attr('data-sikap')
                    let kehadiran = $(this).attr('data-kehadiran')

                    $('#siswa-nisn').val(nisn)
                    $('#siswa-nama').html(nama)
                    $('#siswa-nama2').val(nama)
                    $('#siswa-kelas').val(kelas)
                    $('#siswa-alamat').val(alamat)
                    $('#siswa-pengetahuan').html(`
                        <div class="progress-bar bg-info" role="progressbar" style="width: ${pengetahuan}%" aria-valuenow="${pengetahuan}" aria-valuemin="0" aria-valuemax="100">${pengetahuan}</div>
                    `)
                    $('#siswa-keterampilan').html(`
                        <div class="progress-bar bg-info" role="progressbar" style="width: ${keterampilan}%" aria-valuenow="${keterampilan}" aria-valuemin="0" aria-valuemax="100">${keterampilan}</div>
                    `)
                    $('#siswa-sikap').html(`
                        <div class="progress-bar bg-info" role="progressbar" style="width: ${sikap}%" aria-valuenow="${sikap}" aria-valuemin="0" aria-valuemax="100">${sikap}</div>
                    `)
                    $('#siswa-kehadiran').html(`
                        <div class="progress-bar bg-info" role="progressbar" style="width: ${kehadiran}%" aria-valuenow="${kehadiran}" aria-valuemin="0" aria-valuemax="100">${kehadiran}</div>
                    `)
                })
            })
        </script>        
    @endpush

@endsection