@include('layouts.header_admin')

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800"><i class="fas fa-fw fa-chart-area"></i> Data Hasil Akhir</h1>
    @if (count($hasil) > 0)
        <a href="{{ url('Laporan/' . $j) }}" class="btn btn-primary"> <i class="fa fa-print"></i> Cetak Data </a>
    @endif
</div>


<div class="card shadow mb-4">
    <!-- /.card-header -->
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-danger"><i class="fa fa-table"></i> Pilih Jenis Kelamin</h6>
    </div>

    <div class="card-body">
        <select class="form-control" onchange="location = this.value;">
            <option value="">--Pilih--</option>
            <option value="1" @if ($j == 1) selected @endif>Laki-laki</option>
            <option value="2" @if ($j == 2) selected @endif>Perempuan</option>
        </select>
    </div>
</div>

@if (count($hasil) > 0)
    <div class="card shadow mb-4">
        <!-- /.card-header -->
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-danger"><i class="fa fa-table"></i> Hasil Akhir Perankingan</h6>
            <div class="form-group">
                <select class="form-control" id="filterByDivision">
                    <option value="">--Pilih Divisi--</option>
                    @foreach ($divisis as $data)
                        <option value="{{ $data->divisi }}">{{ $data->divisi }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" width="100%" cellspacing="0" id="tableRanking">
                    <thead class="bg-danger text-white">
                        <tr align="center">
                            <th>Nama Alternatif</th>
                            <th>Jenis Kelamin</th>
                            <th>Nilai</th>
                            <th width="15%">Ranking</th>
                            <th>Asal Divisi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $no = 1;
                        @endphp
                        @foreach ($hasil as $keys)
                            <tr align="center">
                                <td align="left">{{ $keys->nama }}</td>
                                <td>
                                    @if ($keys->jenis_kelamin == 1)
                                        Laki-laki
                                    @elseif($keys->jenis_kelamin == 2)
                                        Perempuan
                                    @else
                                        Tidak Ada
                                    @endif
                                </td>
                                <td>{{ $keys->nilai }}</td>
                                <td>{{ $no }}</td>
                                <td>{{ $keys->divisi }}</td>
                            </tr>
                            @php
                                $no++;
                            @endphp
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@else
    <div class="alert alert-danger">Data masih kosong!</div>
@endif

@push('js-internal')
    <script>
        $('#filterByDivision').on('change', function() {
            var value = $(this).val().toLowerCase();
            $('#tableRanking tbody tr').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });

            // update cetak data
            var j = '{{ $j }}';
            var division = $(this).val();
            var url = '{{ route('Laporan', [':j', ':division']) }}';
            url = url.replace(':j', j);
            url = url.replace(':division', 'division=' + division);
            console.log(url);
            $('.btn-primary').attr('href', url);
        });
    </script>
@endpush

@include('layouts.footer_admin')