@extends('Layouts.main')
@section('container')
    <style>
        table#data-tabel-cl td {
            font-size: 0.9em
        }
    </style>
    <div class="row ">
        <div class="col">
            <div class="alert alert-light alert-dismissible text-sm" role="alert">
                <button type="button" class="close pt-2" data-dismiss="alert" aria-hidden="true">×</button>
                <ul class="mb-2 pl-1">
                    <li>Klik <strong>nama potensi</strong> pada kolom nama untuk melihat
                        detail <strong>Clerance Card</strong></li>
                </ul>
            </div>
        </div>

        <div class="col-12 mb-3">
            <h5 class="mb-0 mt-0">Analisis Potensi</h5>
            <span class="text-muted">Aktivitas yang harus Anda perhatikan</span>
        </div>

        <div class="col-sm-6 col-md-3 mb-3">
            <div class="dashtop col-sm-12 bg-white p-b-5 p-t-5">
                Total Potensi
            </div>
            <div class="dashbottom col-sm-12 bg-white p-b-5 p-t-5" style="
font-size: 1.2em;">
                <strong><span id="totalPotensi"></span></strong>
            </div>
        </div>

        <div class="col-sm-6 col-md-3 mb-3">
            <div class="dashtop col-sm-12 bg-white p-b-5 p-t-5">
                Total Potensi Filter
            </div>
            <div class="dashbottom col-sm-12 bg-white p-b-5 p-t-5" style="
font-size: 1.2em;">
                <strong><span id="totalPotensiFilter"></span></strong>
            </div>
        </div>

        <div class="col-sm-6 col-md-3 mb-3">
            <div class="dashtop col-sm-12 bg-white p-b-5 p-t-5">
                Selesai
            </div>
            <div class="dashbottom col-sm-12 bg-white p-b-5 p-t-5" style="
font-size: 1.2em;">
                <strong><span id="selesai"></span></strong>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 mb-3">
            <div class="dashtop col-sm-12 bg-white p-b-5 p-t-5">
                Belum Selesai
            </div>
            <div class="dashbottom col-sm-12 bg-white p-b-5 p-t-5" style="
font-size: 1.2em;">
                <strong><span id="belumDiverifikasi"></span></strong>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-12 mb-3">
            <h5 class="mb-0 ">Daftar Potensi</h5>
            <span class="text-muted">Aktivitas yang harus Anda verifikasi</span>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-2">
            <select id="selectperiode" name="periode" class="form-control form-control-sm selectperiode">
                @foreach ($periodes as $periode)
                    <option value="{{ $periode }}" {{ session('periode_sidang') == $periode ? 'selected' : '' }}>
                        {{ $periode }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-2">
            <select id="selectbulan" name="bulan" class="form-control form-control-sm selectbulan">
                @foreach ($bulans as $bulan)
                    <option value="{{ $bulan }}" {{ session('bulan_sidang') == $bulan ? 'selected' : '' }}>
                        {{ $bulan }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-2">
            <select id="selectprodi" name="prodi_id" class="form-control form-control-sm selectprodi">
                @if (auth()->user()->role != 'admin prodi' && auth()->user()->role != 'kaprodi')
                    <option value="" selected>-- Prodi --</option>
                @endif
                @foreach ($prodis as $prodi => $val)
                    <option value="{{ $prodi }}">
                        {{ $val }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-2">
            <select id="selectkelas" name="kelas" class="form-control form-control-sm selectkelas">
                <option value="" selected>-- Kelas --</option>
                @foreach ($kelass as $kelas)
                    <option value="{{ $kelas }}">
                        {{ $kelas }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-2">
            <select id="selectstatus" name="status" class="form-control form-control-sm selectstatus">
                <option value="" selected>-- Status --</option>
                <option value="-">Belum Selesai</option>
                <option value="Selesai">Selesai</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table id="data-tabel" width="100%" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th align=center>No</th>{{-- 0 --}}
                        <th align=center>NIM</th>{{-- 1 --}}
                        <th align=center>Nama</th>{{-- 2 --}}
                        <th align=center>Prodi</th>{{-- 3 --}}
                        <th align=center>Kelas</th>{{-- 4 --}}
                        <th align=center>Mahasiswa</th>{{-- 5 --}}
                        <th align=center>Verifikator</th>{{-- 6 --}}
                        <th align=center>Status</th>{{-- 7 --}}
                        <th align=center>Action</th>{{-- 8 --}}
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    </div>
    </div>
    <div id="modal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title" id="detailTitle">Clearance Card</h5>