@extends('layout.main')
@section('body')
    @php
        $menu = 'Dashboard';
        $pageTitle = 'Home';
    @endphp

@include('layout.navbar')
@include('layout.sidebar')

<div class="main-container">
    <div class="pd-ltr-20 xs-pd-20-10">
        <div class="min-height-200px" style="margin-bottom: 20px;">
            <div class="card-box pd-20 height-50-p mb-30">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="font-20 weight-500 mb-10 text-capitalize">
                            Selamat Datang {{ auth()->user()->role }},
                            <div class="weight-600 font-20 text-blue">{{ auth()->user()->name }}</div>
                        </h1>
                    </div>
                </div>
            </div>
            <div class="row pb-10">
                <div class="col-md-4 mb-20">
                    <div class="card-box height-100-p widget-style3">
                        <div class="d-flex flex-wrap">
                            <div class="widget-data">
                                <div class="weight-700 font-24 text-dark">{{ $jumlahEkstra }}</div>
                                <div class="font-14 text-secondary weight-500">
                                    Data Ekstrakurikuler
                                </div>
                            </div>
                            <div class="widget-icon">
                                <div class="icon" data-color="#00eccf">
                                    <i class="icon-copy dw dw-file-7"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-20">
                    <div class="card-box height-100-p widget-style3">
                        <div class="d-flex flex-wrap">
                            <div class="widget-data">
                                <div class="weight-700 font-24 text-dark">{{ $jumlahKriteria }}</div>
                                <div class="font-14 text-secondary weight-500">
                                    Data Kriteria
                                </div>
                            </div>
                            <div class="widget-icon">
                                <div class="icon" data-color="#ff5b5b">
                                    <span class="icon-copy dw dw-file-7"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-20">
                    <div class="card-box height-100-p widget-style3">
                        <div class="d-flex flex-wrap">
                            <div class="widget-data">
                                <div class="weight-700 font-24 text-dark">{{ $jumlahSubKriteria }}</div>
                                <div class="font-14 text-secondary weight-500">
                                    Data Sub Kriteria
                                </div>
                            </div>
                            <div class="widget-icon">
                                <div class="icon">
                                    <i class="icon-copy dw dw-file-7" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pb-10">
                <div class="card-box height-100-p overflow-hidden">
                    <div class="profile-tab height-100-p" >
                        <div class="tab height-100-p">
                            <ul class="nav nav-tabs customtab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#ekstrakurikuler"
                                        role="tab">Data Ekstrakurikuler</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#subkriteria"
                                        role="tab">Data Sub Kriteria</a>
                                </li>
                            </ul>
                            <div class="tab-content">

                                <!-- Data Ekstrakurikuler -->
                                <div class="tab-pane fade show active" id="ekstrakurikuler" role="tabpanel">
                                    <div class="profile-setting">
                                        <div class="table-responsive" style="margin-bottom: 20px;">
                                            <table class="data-table table stripe hover nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Nama Ekstrakurikuler</th>
                                                        <th>Kategori</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse ($extracuricullars as $index => $extracuricullar)
                                                        <tr>
                                                            <td>{{ $index + $extracuricullars->firstItem() }}</td>
                                                            <td>{{ $extracuricullar->nama }}</td>
                                                            <td>{{ $extracuricullar->kategori }}</td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="5" class="text-center">Tidak ada data.</td>
                                                        </tr>
                                                     @endforelse
                                                </tbody>
                                            </table>
                                            <div>
                                                <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 20px;">
                                                    <div style="font-size: 14px;">
                                                        Showing data {{ $extracuricullars->firstItem() }} to {{ $extracuricullars->lastItem() }} of {{ $extracuricullars->total() }} entries
                                                    </div>
                                                    <div style="font-size: 14px;">{{ $extracuricullars->links() }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Data Sub Kriteria -->
                                <div class="tab-pane fade" id="subkriteria" role="tabpanel">
                                    <div class="profile-setting">
                                        <div class="table-responsive" style="margin-bottom: 20px;">
                                            <table class="data-table table stripe hover nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>Kriteria</th>
                                                        <th>Sub Kriteria</th>
                                                        <th>Deskripsi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse ($subcriterias as $index => $subcriteria)
                                                        <tr>
                                                            <td>{{ $index + $subcriterias->firstItem() }}</td>
                                                            <td>{{ $subcriteria->criteria->nama }}</td>
                                                            <td>{{ $subcriteria->nama }}</td>
                                                            <td>{{ $subcriteria->deskripsi }}</td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="5" class="text-center">Tidak ada data.</td>
                                                        </tr>
                                                     @endforelse
                                                </tbody>
                                            </table>
                                            <div>
                                                <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 20px;">
                                                    <div style="font-size: 14px;">
                                                        Showing data {{ $subcriterias->firstItem() }} to {{ $subcriterias->lastItem() }} of {{ $subcriterias->total() }} entries
                                                    </div>
                                                    <div style="font-size: 14px;">{{ $subcriterias->links() }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-wrap pd-20 mb-20 card-box">
            <strong>Sistem Pendukung Keputusan Pemilihan Ekstrakurikuler Metode SMARTER</strong>
        </div>
    </div>
</div>
@endsection