@extends('template.app') 
 
@section('navbarNav') 
    <div class="" id="navbarNav">
        <ul class="navbar-nav" id="leftNav">
            <li class="nav-item">
            <a class="nav-link" id="sidebar-toggle" href="#"><i data-feather="arrow-left"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('dashboard') }}">Dashboard</a>
            </li>  
            <li class="nav-item">
                <a class="nav-link" href="{{ url('indikator') }}">Indikator</a>
            </li>
        </ul>
    </div>
@endsection

@section('content') 

<div class="card">
    <div class="card-body">

        <div class="row">
            <div class="col-lg-6 main-header"> 
                <!-- <h2><span>Data Master Indikator </span></h2>  -->
            </div> 
            <div class="col-lg-6 main-header" style="text-align: end;"> 
                <a href="javascript:void(0);" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addModal">Tambah Data  
                    <span class="btn-icon-end"><i class="fa fa-envelope"></i></span>
                </a> 
                <!-- <a href="javascript:void(0);" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addBulkModal">Multi Tambah Data  
                    <span class="btn-icon-end"><i class="fa fa-plus"></i></span>
                </a>  -->
                <a href="javascript:void(0);" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addIndiToProdikModal">Multi Tambah Data  
                    <span class="btn-icon-end"><i class="fa fa-plus"></i></span>
                </a> 
                
            </div>   
        </div> 
        
        <div class="row mt-5">
            <div class="col-md-3">
                <div class="input-group">
                    <label class="mt-2">Filter Pencarian : </label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterProdi">Filter Program Studi : </label> -->
                    <select class="form-select" id="filterProdi"> 
                        <option selected value="">Pilih Program Studi</option>
                        @foreach ($prodi as $row)
                            <option  value="{{ $row->name }}">{{ $row->name }}</option> 
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-3 d-none">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterSemester">Filter Semester : </label> -->
                    <select class="form-select" id="filterSemester"> 
                        <option selected value="">Pilih Semester</option> 
                        <option value="GASAL">GASAL</option> 
                        <option value="GENAP">GENAP</option> 
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterTriwulan">Filter Triwulan : </label> -->
                    <select class="form-select" id="filterTriwulan"> 
                        <option selected value="">Pilih Triwulan</option> 
                        <option value="1">1</option> 
                        <option value="2">2</option> 
                        <option value="3">3</option> 
                        <option value="4">4</option> 
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <!-- <label style="margin-right: 10px; margin-top: 8px;" for="filterAkademik">Filter Tahun Akademik : </label> -->
                    <select class="form-select" id="filterAkademik"> 
                        <option selected value="">Pilih Tahun Akademik</option>
                                                    <option  
                                value="2025/2026" 
                                selected                                >
                                2025/2026                            </option>
                                                    <option  
                                value="2024/2025" 
                                                                >
                                2024/2025                            </option>
                                                    <option  
                                value="2023/2024" 
                                                                >
                                2023/2024                            </option>
                                                    <option  
                                value="2022/2023" 
                                                                >
                                2022/2023                            </option>
                                                    <option  
                                value="2021/2022" 
                                                                >
                                2021/2022                            </option>
                                            </select>
                </div>
            </div>
        </div>     
    </div>
</div>


<div class="card">
    <div class="card-body"> 
        <div class="row"> 
            <div class="col-xl-12 xl-100 box-col-12">
                <table id="datatableIndikator" class="table dt-responsive w-100">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Fakultas</th>
                            <th>Program Studi</th>
                            <th>Triwulan</th>
                            <th>Indikator</th> 
                            <th>Total Data</th> 
                            <th>Aksi</th>  
                        </tr>
                    </thead> 
                </table>
            </div>
        </div>
    </div>
</div>


<!-- Modal Add -->
<div class="modal fade" id="addModal" tabindex="-1">   
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
            <form class="form formAdd" method="post" enctype="multipart/form-data"> 
                <div class="modal-body"> 
 
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Nama Indikator</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="nama_indikator" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Singkatan Indikator</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="singkatan_indikator">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Parent</label>
                        <div class="col-sm-9">
                            <select name="parent_indikator" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option>
                                @foreach ($parent as $row)
                                    <option  value="{{ $row->id }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Fakultas</label>
                        <div class="col-sm-9">
                            <select name="kategori" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option>  

                                @foreach ($fakultas as $row)
                                    <option  value="{{ $row->id }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Program Studi</label>
                        <div class="col-sm-9">
                            <select name="prodi" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option> 
                                <option value="Universitas" >Universitas</option> 

                                @foreach ($prodi as $row)
                                    <option  value="{{ $row->name }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row d-none">
                        <label class="col-sm-3 col-form-label">Semester</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="semester"> 
                                <option selected value="">Pilih Semester</option> 
                                <option value="GASAL">GASAL</option> 
                                <option value="GENAP">GENAP</option> 
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Triwulan</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="triwulan" required> 
                                <option selected value="">Pilih Triwulan</option> 
                                <option value="1">1</option> 
                                <option value="2">2</option> 
                                <option value="3">3</option> 
                                <option value="4">4</option> 
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Tahun Akademik</label>
                        <div class="col-sm-9">
                            <select class="form-select" name="akademik" required> 
                                                                    <option  
                                        value="2025/2026" 
                                        selected                                        >
                                        2025/2026                                    </option>
                                                                    <option  
                                        value="2024/2025" 
                                                                                >
                                        2024/2025                                    </option>
                                                                    <option  
                                        value="2023/2024" 
                                                                                >
                                        2023/2024                                    </option>
                                                                    <option  
                                        value="2022/2023" 
                                                                                >
                                        2022/2023                                    </option>
                                                                    <option  
                                        value="2021/2022" 
                                                                                >
                                        2021/2022                                    </option>
                                                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Total</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="total_data" required>
                        </div>
                    </div> 

                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Link</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="link" required>
                        </div>
                    </div> 

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light btn-sm" data-bs-dismiss="modal">Keluar</button>
                    <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Add Bulk -->
<div class="modal fade" id="addBulkModal" tabindex="-1">   
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Multi Tambah Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
            <form class="form formAddBulkModal" method="post" enctype="multipart/form-data"> 
                <div class="modal-body"> 
  
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Fakultas</label>
                        <div class="col-sm-9">
                            <select name="kategori" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option> 
                                @foreach ($fakultas as $row)
                                    <option  value="{{ $row->id }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Program Studi</label>
                        <div class="col-sm-9">
                            <select name="prodi" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option>
                                @foreach ($prodi as $row)
                                    <option  value="{{ $row->name }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>  
                    <div class="mb-3 row d-none">
                        <label class="col-sm-3 col-form-label">Semester</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="semester"> 
                                <option selected value="">Pilih Semester</option> 
                                <option  value="GASAL">GASAL</option> 
                                <option value="GENAP">GENAP</option> 
                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Triwulan</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="triwulan" required> 
                                <option selected value="">Pilih Triwulan</option> 
                                <option value="1">1</option> 
                                <option value="2">2</option> 
                                <option value="3">3</option> 
                                <option value="4">4</option> 
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Tahun Akademik</label>
                        <div class="col-sm-9">
                            <select class="form-select" name="akademik" required> 
                                                                    <option  
                                        value="2025/2026" 
                                        selected                                        >
                                        2025/2026                                    </option>
                                                                    <option  
                                        value="2024/2025" 
                                                                                >
                                        2024/2025                                    </option>
                                                                    <option  
                                        value="2023/2024" 
                                                                                >
                                        2023/2024                                    </option>
                                                                    <option  
                                        value="2022/2023" 
                                                                                >
                                        2022/2023                                    </option>
                                                                    <option  
                                        value="2021/2022" 
                                                                                >
                                        2021/2022                                    </option>
                                                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <div class="col-sm-12" style="overflow-y: auto; height: 440px;">
                            <table class="table dt-responsive w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Parent Indikator</th>
                                        <th>Indikator</th>
                                        <th>Total Data</th> 
                                    </tr>
                                </thead> 
                                <tbody id="bodyMultiAdd">
                                    
                                </tbody>  
                            </table>

                            <a href="javascript:void(0);" class="btn btn-info w-100" onclick="tambahMultiIndi()">Tambah Indikator</a>
                        </div>  
                    </div> 

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light btn-sm" data-bs-dismiss="modal">Keluar</button>
                    <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Add indikator many Pordi -->
<div class="modal fade" id="addIndiToProdikModal" tabindex="-1">   
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Multi Tambah Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
            <form class="form formAddIndiToProdikModal" method="post" enctype="multipart/form-data"> 
                <div class="modal-body">  

                    <div class="mb-3 row d-none">
                        <label class="col-sm-3 col-form-label">Semester</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="semester"> 
                                <option selected value="">Pilih Semester</option> 
                                <option  value="GASAL">GASAL</option> 
                                <option value="GENAP">GENAP</option> 
                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Triwulan</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="triwulan" required> 
                                <option selected value="">Pilih Triwulan</option> 
                                <option value="1">1</option> 
                                <option value="2">2</option> 
                                <option value="3">3</option>
                                <option value="4">4</option>  
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Tahun Akademik</label>
                        <div class="col-sm-9">
                            <select class="form-select" name="akademik" required> 
                                                                    <option  
                                        value="2025/2026" 
                                        selected                                        >
                                        2025/2026                                    </option>
                                                                    <option  
                                        value="2024/2025" 
                                                                                >
                                        2024/2025                                    </option>
                                                                    <option  
                                        value="2023/2024" 
                                                                                >
                                        2023/2024                                    </option>
                                                                    <option  
                                        value="2022/2023" 
                                                                                >
                                        2022/2023                                    </option>
                                                                    <option  
                                        value="2021/2022" 
                                                                                >
                                        2021/2022                                    </option>
                                                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Nama Indikator</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="nama_indikator" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Singkatan Indikator</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="singkatan_indikator">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Parent</label>
                        <div class="col-sm-9">
                            <select name="parent_indikator" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option>
                                @foreach ($parent as $row)
                                    <option  value="{{ $row->id }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div> 

                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Total</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="total_data" required>
                        </div>
                    </div> 

                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Link</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="link" required>
                        </div>
                    </div> 

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light btn-sm" data-bs-dismiss="modal">Keluar</button>
                    <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Modal Edit -->
<div class="modal fade" id="editModal" tabindex="-1">   
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ubah Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
            <form class="form formEdit" method="post" enctype="multipart/form-data"> 
                <div class="modal-body"> 
 
                    <input type="text" class="form-control input-default " name="id" hidden required>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Nama Indikator</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="nama_indikator" required>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Singkatan Indikator</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="singkatan_indikator">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Parent</label>
                        <div class="col-sm-9">
                            <select name="parent_indikator" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option>
                                @foreach ($parent as $row)
                                    <option  value="{{ $row->id }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Fakultas</label>
                        <div class="col-sm-9">
                            <select name="kategori" class="form-control">
                                <option value="" selected >Silahkan Pilih ...</option> 
                                @foreach ($fakultas as $row)
                                    <option  value="{{ $row->id }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Program Studi</label>
                        <div class="col-sm-9">
                            <select name="prodi" class="form-control">
                                <option value="" selected >Silahkan Pilih ...</option> 
                                <option value="Universitas" >Universitas</option>
                                @foreach ($prodi as $row)
                                    <option  value="{{ $row->name }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row d-none">
                        <label class="col-sm-3 col-form-label">Semester</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="semester"> 
                                <option selected value="">Pilih Semester</option> 
                                <option value="GASAL">GASAL</option> 
                                <option value="GENAP">GENAP</option> 
                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Triwulan</label>
                        <div class="col-sm-9"> 
                            <select class="form-select" name="triwulan" required> 
                                <option selected value="">Pilih Triwulan</option> 
                                <option value="1">1</option> 
                                <option value="2">2</option> 
                                <option value="3">3</option> 
                                <option value="4">4</option> 
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Tahun Akademik</label>
                        <div class="col-sm-9">
                            <select class="form-select" name="akademik" required> 
                                                                    <option  
                                        value="2025/2026" 
                                        selected                                        >
                                        2025/2026                                    </option>
                                                                    <option  
                                        value="2024/2025" 
                                                                                >
                                        2024/2025                                    </option>
                                                                    <option  
                                        value="2023/2024" 
                                                                                >
                                        2023/2024                                    </option>
                                                                    <option  
                                        value="2022/2023" 
                                                                                >
                                        2022/2023                                    </option>
                                                                    <option  
                                        value="2021/2022" 
                                                                                >
                                        2021/2022                                    </option>
                                                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Total</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="total_data" required>
                        </div>
                    </div> 
                    <div class="mb-3 row">
                        <label class="col-sm-3 col-form-label">Link</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control input-default " name="link" required>
                        </div>
                    </div> 

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light btn-sm" data-bs-dismiss="modal">Keluar</button>
                    <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection
@section('js')
<script>
    var kolom = new Array();
    var detailDataTable; 

    $(document).ready(function() { 
        
        // $('#filterProdi').select2();
        url = "{{url('api/indikator')}}?dataTable=true"; 
        kolom.push(
            {
                data: 'DT_RowIndex',
                name: 'id'
            }, {
                data: 'kategori',
                name: 'kategori'
            }, {
                data: 'prodi',
                name: 'prodi'
            }, {
                data: 'triwulan',
                name: 'triwulan'
            }, {
                data: 'nama_indikator',
                name: 'nama_indikator'
            }, {
                data: 'total_data',
                name: 'total_data'
            }, {
                data: null,
                name: null
            }
        );

        var groupColumn = 4;
        detailDataTable = $('#datatableIndikator').DataTable({
            "columnDefs": [
                { "visible": false, "targets": groupColumn }
            ],
            responsive: true,
            scrollX: true, 
            sDom: '<"dt-panelmenu clearfix"Bflr>t<"dt-panelfooter clearfix"ip>',
            buttons: ["excel", "csv", "pdf"],
            oLanguage: {
                sSearch: 'Search:'
            },
            // retrieve: true,
            processing: true,
            serverSide: true,
            serverMethod: 'GET',
            ajax: {
                url: url,
                data: function(data) {
                    // console.log(data); 
                    // data.start = data.start ;
                    // data.length = data.length;
                    // data.page = data.draw;
                    // data.prodi = $("#filterProdi").val();  
                    data["filter[]"] = ['prodi', 'semester', 'triwulan', 'akademik']; 
                    data["filterValue[]"] = [$("#filterProdi").val(), $("#filterSemester").val(), $("#filterTriwulan").val(), $("#filterAkademik").val()];   
                    // console.log(data);
                },
                beforeSend: function(xhr, settings) {

                }, 
            }, 
            columns: kolom,
            order: [[ 0, 'desc' ]],
            createdRow: function ( row, data, index ){  
                $('td', row).eq(1).html(`
                   ${data.fakultas.name}  

                `);
                // $('td', row).eq(3).html(`
                //    Semester : ${data.semester}  <br><br>
                //    Triwulan : ${data.triwulan}

                // `);
                $('td', row).eq(5).html(`
                    <div class="d-flex">
                        <a href="javascript:void(0);" onClick="editBtn(${data.id})" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fas fa-pencil-alt"></i></a>
                        <a href="javascript:void(0);" onClick="destroy(${data.id})" class="btn btn-danger shadow btn-xs sharp"><i class="fa fa-trash"></i></a>
                    </div>	
                `);
            },
            drawCallback: function(settings) {
                var api = this.api();
                var rows = api.rows( {page:'current'} ).nodes();
                var last=null;
    
                api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                    if ( last !== group ) {
                        $(rows).eq( i ).before(
                            `<tr class="group"><td colspan="6"><b>Indikator :</b> ${group}</td></tr>`
                        );
    
                        last = group;
                    }
                } );
            }
        });
        // Order by the grouping
        $('#datatableIndikator tbody').on( 'click', 'tr.group', function () {
            var currentOrder = detailDataTable.order()[0];
            if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
                detailDataTable.order( [ groupColumn, 'desc' ] ).draw();
            }
            else {
                detailDataTable.order( [ groupColumn, 'asc' ] ).draw();
            }
        } );

         
        $("#filterProdi").on("change", function(e) {   
            detailDataTable.ajax.reload();
        });
        $("#filterSemester").on("change", function(e) {   
            detailDataTable.ajax.reload();
        });
        $("#filterTriwulan").on("change", function(e) {   
            detailDataTable.ajax.reload();
        });
        $("#filterAkademik").on("change", function(e) {   
            detailDataTable.ajax.reload();
        });

        $(".formAdd").submit(function(e) {
            $(".loader-wrapper").fadeIn(300);
            e.preventDefault(); 
            var formData = new FormData($('.formAdd')[0]); 
            $.ajax({
                url: "{{url('api/indikator')}}",
                method: "POST",
                data: formData,
                dataType: 'JSON',
                contentType: false,
                processData: false,  
                success: function (data) {
                    $(".loader-wrapper").fadeOut(300);
                    if(data['status'] == "success"){ 
                        Swal.fire(
                        `Berhasil tambah data`, 
                        '',
                        'success'
                        ).then(function() { 
                            $('.formAdd').trigger("reset");
                            $('.formAdd')[0].reset();
                            $("#addModal").modal('hide');
                            detailDataTable.ajax.reload();
                        }); 
                    }else{
                        Swal.fire(
                        `Gagal tambah data`, 
                        '',
                        'error'
                        ).then(function() { 
                        });
                    } 
                }
            }); 
        }); 


        var parentData = @json($parent);
        var listParentData = '';
        console.log(parentData);
        parentData.forEach(function(row) {
            listParentData += `<option value="${row['id']}">${row['name']}</option>`;
        });

        var dummyIndikator = [
            {       
            "nama_indikator": "Jumlah Lulusan",
            "total_data": "400", 
            "parent_indikator": "1",
            "parent_indikator_name": "Jumlah Lulusan",
            },
            {
            "nama_indikator": "S1 Mendapatkan Pekerjaan",
            "total_data": "270",
            "parent_indikator": "1",
            "parent_indikator_name": "Jumlah Lulusan",
            },
            {
            "nama_indikator": "S1 Melanjutkan Studi",
            "total_data": "80",
            "parent_indikator": "1",
            "parent_indikator_name": "Jumlah Lulusan",

            },
            {
            "nama_indikator": "S1 Berwirausaha",
            "total_data": "50",
            "parent_indikator": "1",
            "parent_indikator_name": "Jumlah Lulusan",

            },
            {
            "nama_indikator": "Jumlah dosen NIDN dan NIDK",
            "total_data": "67",
            "parent_indikator": "2",
            "parent_indikator_name": "Praktisi Mengajar di Dalam Kampus",

            },
            {
            "nama_indikator": "Berkualifikasi S3",
            "total_data": "30",
            "parent_indikator": "2",
            "parent_indikator_name": "Praktisi Mengajar di Dalam Kampus",

            },
            {
            "nama_indikator": "Sertifikasi Kompetensi Profesi yang diakui",
            "total_data": "30",
            "parent_indikator": "2",
            "parent_indikator_name": "Praktisi Mengajar di Dalam Kampus",

            },
            {
            "nama_indikator": "Berasal dari kalangan Profesional",
            "total_data": "30",
            "parent_indikator": "2",
            "parent_indikator_name": "Praktisi Mengajar di Dalam Kampus",

            },
            {
            "nama_indikator": "MK menerapkan Case method",
            "total_data": "30",
            "parent_indikator": "3",
            "parent_indikator_name": "Kelas Kolaboratif dan Partisipatif",

            },
            {
            "nama_indikator": "MK menerapkan Team-Based Project",
            "total_data": "30",
            "parent_indikator": "3",
            "parent_indikator_name": "Kelas Kolaboratif dan Partisipatif",

            },
            {
            "nama_indikator": "Luaran Penelitian terekognisi internasional dan diterapkan di masyarakat",
            "total_data": "30",
            "parent_indikator": "4",
            "parent_indikator_name": "Pemanfaatan Hasil Kerja Dosen",

            },
            {
            "nama_indikator": "Luaran Pegabdian terekognisi internasional dan diterapkan di masyarakat",
            "total_data": "30",
            "parent_indikator": "4",
            "parent_indikator_name": "Pemanfaatan Hasil Kerja Dosen",

            },
            {
            "nama_indikator": "Jumlah S1 terstandar Internasional",
            "total_data": "30",
            "parent_indikator": "5",
            "parent_indikator_name": "Program Studi berstandar Internasional/Unggul",

            },
            {
            "nama_indikator": "Jumlah S1 Terakreditsai Unggul",
            "total_data": "30",
            "parent_indikator": "5",
            "parent_indikator_name": "Program Studi berstandar Internasional/Unggul",
            },
            {
            "nama_indikator": "Jumlah mahasiswa",
            "total_data": "30",
            "parent_indikator": "6",
            "parent_indikator_name": "Arsitektur Perguruan Tinggi",
            },
            {
            "nama_indikator": "Jumlah mahasiswa Baru",
            "total_data": "30",
            "parent_indikator": "6",
            "parent_indikator_name": "Arsitektur Perguruan Tinggi",
            },
            {
            "nama_indikator": "Jumlah Mahasiswa min 20 SKS diluar kampus",
            "total_data": "30",
            "parent_indikator": "7",
            "parent_indikator_name": "Mahasiswa Pengalaman Luar Kampus",
            },
            {
            "nama_indikator": "Prestasi minimal nasional",
            "total_data": "30",
            "parent_indikator": "7",
            "parent_indikator_name": "Mahasiswa Pengalaman Luar Kampus",
            },
            {
            "nama_indikator": "Anti Terorisme Y",
            "total_data": "Y",
            "parent_indikator": "8",
            "parent_indikator_name": "Tiga dosa dan Anti Korpusi Mengimplementasikan Kebijakan",
            },
            {
            "nama_indikator": "Anti Kekerasan Seksual Y",
            "total_data": "Y",
            "parent_indikator": "8",
            "parent_indikator_name": "Tiga dosa dan Anti Korpusi Mengimplementasikan Kebijakan",
            },
            {
            "nama_indikator": "Anti Perundungan Y",
            "total_data": "Y",
            "parent_indikator": "8",
            "parent_indikator_name": "Tiga dosa dan Anti Korpusi Mengimplementasikan Kebijakan",
            },
            {
            "nama_indikator": "Anti Korupsi Y",
            "total_data": "Y",
            "parent_indikator": "8",
            "parent_indikator_name": "Tiga dosa dan Anti Korpusi Mengimplementasikan Kebijakan",
            },
            {
            "nama_indikator": "Dosen Berkaitan Ditempatkan di Kampus Lain",
            "total_data": "30",
            "parent_indikator": "9",
            "parent_indikator_name": "Jumlah Dosen Tetap Berkaitan di Luar Kampus",
            },
            {
            "nama_indikator": "Jumlah Dosen yang berTridharma kampus lain (QS100)",
            "total_data": "30",
            "parent_indikator": "9",
            "parent_indikator_name": "Jumlah Dosen Tetap Berkaitan di Luar Kampus",
            },
            {
            "nama_indikator": "Bekerja sebagai praktisi",
            "total_data": "30",
            "parent_indikator": "9",
            "parent_indikator_name": "Jumlah Dosen Tetap Berkaitan di Luar Kampus", 
            },
            {
            "nama_indikator": "Membina Mahasiswa Berprestasi Min Nasional (5 tahun)",
            "total_data": "30",
            "parent_indikator": "9",
            "parent_indikator_name": "Jumlah Dosen Tetap Berkaitan di Luar Kampus", 
            },
            {
            "nama_indikator": "Jumlah Program Studi yang bekerjasama dengan mitra",
            "total_data": "30",
            "parent_indikator": "10",
            "parent_indikator_name": "Program Studi bekerjasama dengan mitra kelas Dunia",
            },
            {
            "nama_indikator": "Jumlah partisipasi dalam kegiatan dakwah",
            "total_data": "30",
            "parent_indikator": "11",
            "parent_indikator_name": "Kegiatan Dakwah",
            }
        ];
        function tambahMultiIndi(){
            var urutanDummyIndi = dummyIndikator.length;
            urutanDummyIndi += 1;
            console.log(listParentData);

            $("#bodyMultiAdd").append(`
                <tr>
                    <td>${urutanDummyIndi}</td>
                    <td>
                        <select name="bulkParentIndikator[]" class="form-control" required>
                            <option value="" selected >Silahkan Pilih ...</option> 
                  
                            ${listParentData}
                       
                        </select>
                    </td>
                    <td> 
                        <input type="text" class="form-control input-default " name="bulkIndikator[]" required>
                    </td>
                    <td>
                        <input type="text" class="form-control input-default " name="bulkTotalData[]" required>
                    </td>
                </tr>
            `);
        }
        $('#addBulkModal').on('shown.bs.modal', function(event) { 
            let isiB = '';

            for (let i = 0; i < dummyIndikator.length; i++) {
                
                isiB += `
                    <tr>
                        <td>${i+1}</td>
                        <td>
                            <select name="bulkParentIndikator[]" class="form-control" required>
                                <option value="" selected >Silahkan Pilih ...</option> 
                                @foreach ($parent as $row)
                                    <option ${dummyIndikator[i]['parent_indikator'] == '{{ $row->id }}' ? 'selected' : ''} value="{{ $row->id }}">{{ $row->name }}</option> 
                                @endforeach
                            </select>
                        </td>
                        <td> 
                            <input disabled type="text" class="form-control input-default " name="bulkIndikator[]" value="${dummyIndikator[i]['nama_indikator']}" required>
                        </td>
                        <td>
                            <input type="text" class="form-control input-default" name="bulkTotalData[]" required>
                        </td>
                    </tr>
                `;
            }
            $("#bodyMultiAdd").html(isiB);

            // addBulkModal
        });
        $(".formAddBulkModal").submit(function(e) {
            e.preventDefault();

            var kategBulk = $("#addBulkModal [name='kategori']").val(); 
            var prodiBulk = $("#addBulkModal [name='prodi']").val(); 
            var smstrBulk = $("#addBulkModal [name='semester']").val(); 
            var akdmkBulk = $("#addBulkModal [name='akademik']").val(); 
            var bulkParentIndikator = $("#addBulkModal [name='bulkParentIndikator[]']").map(function(){return $(this).val();}).get();
            var bulkIndikator = $("#addBulkModal [name='bulkIndikator[]']").map(function(){return $(this).val();}).get();
            var bulkTotalData = $("#addBulkModal [name='bulkTotalData[]']").map(function(){return $(this).val();}).get();

            // console.log(kategBulk, prodiBulk, smstrBulk, akdmkBulk);
            // console.log(bulkParentIndikator, bulkIndikator, bulkTotalData);
            // console.log('Total Data', bulkIndikator.length);

            var dummyData = new Array();
            for (let i = 0; i < bulkIndikator.length; i++) {
                dummyData.push({
                    "prodi": prodiBulk,
                    "semester": smstrBulk,
                    "kategori": kategBulk,
                    "akademik": akdmkBulk,
                    "parent_indikator": bulkParentIndikator[i],
                    "nama_indikator": bulkIndikator[i],
                    "total_data": bulkTotalData[i],
                });
            }
        
            console.log(dummyData);
            $.ajax({
                type: "POST",
                url: "{{url('api/indikator/bulk')}}",
                data: JSON.stringify(dummyData),
                dataType: 'text', 
                headers: {
                    "content-type": "application/json" 
                },
                success: function(res) { 
                    // if(res['status'] == true){
                        Swal.fire(
                        `Berhasil Tambah data`, 
                        '',
                        'success'
                        ).then(function() { 
                            $('.formAddBulkModal').trigger("reset");
                            $('.formAddBulkModal')[0].reset();
                            $('#addBulkModal').modal('hide');
                            detailDataTable.ajax.reload();
                        }); 
                    // }else{
                    //     Swal.fire(
                    //     `Gagal tambah data`, 
                    //     '',
                    //     'error'
                    //     ).then(function() { 
                    //     });
                    // }
                }
            });
            

        });


        var dumProdi = new Array();
        $.ajax({
            type: "GET",
            url: "{{url('api/prodi')}}",
            // data: { 
            // },
            dataType: "JSON",
            success: function(res) {
                dumProdi = res['data'];
            }
        }); 
        $(".formAddIndiToProdikModal").submit(function(e) {
            e.preventDefault();

            var nmSmstr = $("#addIndiToProdikModal [name='semester']").val(); 
            var nmTriwulan = $("#addIndiToProdikModal [name='triwulan']").val(); 
            var nmLink = $("#addIndiToProdikModal [name='link']").val(); 
            var nmAka = $("#addIndiToProdikModal [name='akademik']").val(); 
            var nmPIndi = $("#addIndiToProdikModal [name='parent_indikator']").val(); 
            var nmIndi = $("#addIndiToProdikModal [name='nama_indikator']").val(); 
            var nmSingkatIndi = $("#addIndiToProdikModal [name='singkatan_indikator']").val(); 
            
            var nmTotal = $("#addIndiToProdikModal [name='total_data']").val();  

            var dummyData = new Array();
            for (let i = 0; i < dumProdi.length; i++) {
                dummyData.push({
                    "prodi": dumProdi[i]['name'],
                    "kategori": dumProdi[i]['id_fakultas'].toString(),  
                    "semester": nmSmstr,
                    "triwulan": nmTriwulan,
                    "akademik": nmAka, 
                    "parent_indikator": nmPIndi,
                    "nama_indikator": nmIndi,
                    "singkatan_indikator": nmSingkatIndi,
                    "total_data": nmTotal,
                    "link": nmLink,
                });
            }

            console.log(dummyData); 
            $.ajax({
                type: "POST",
                url: "{{url('api/indikator/bulk')}}",
                data: JSON.stringify(dummyData),
                dataType: 'text', 
                headers: {
                    "content-type": "application/json" 
                },
                success: function(res) {  
                    Swal.fire(
                    `Berhasil Tambah data`, 
                    '',
                    'success'
                    ).then(function() { 
                        $('.formAddIndiToProdikModal').trigger("reset");
                        $('.formAddIndiToProdikModal')[0].reset();
                        $('#addIndiToProdikModal').modal('hide');
                        detailDataTable.ajax.reload();
                    });  
                }
            });
        });



        

        $(".formEdit").submit(function(e) {
            $(".loader-wrapper").fadeIn(300);
            e.preventDefault(); 
            var id = $("#editModal [name=id]").val();
            var formData = new FormData($('.formEdit')[0]);  
            $.ajax({
                url: `{{url('api/indikator')}}/${id}`,
                method: "POST",
                data: formData,
                dataType: 'JSON',
                contentType: false,
                processData: false,  
                success: function (data) {
                    $(".loader-wrapper").fadeOut(300);
                    if(data['status'] == "success"){
                        Swal.fire(
                        `Berhasil ubah data`, 
                        '',
                        'success'
                        ).then(function() { 
                            $('.formEdit').trigger("reset");
                            $('.formEdit')[0].reset();
                            $('#editModal').modal('hide');
                            detailDataTable.ajax.reload();
                        }); 
                    }else{
                        Swal.fire(
                        `Gagal ubah data`, 
                        '',
                        'error'
                        ).then(function() { 
                        });
                    } 
                }
            }); 
        });

        
    }); 

    function editBtn(id){ 
        $.ajax({ 
            type : "GET", 
            url : `{{url('api/indikator')}}`, 
            data : {  
                "filter[]" : 'id', 
                "filterValue[]" : id
            },   
            dataType: 'JSON',  
            success : function(res){
                // console.log(res['data'][0]);
                if(res['data'].length > 0){

                    $('#editModal').modal('show');
                    $("#editModal [name=id]").val(res['data'][0]['id']);  
                    $("#editModal [name=parent_indikator]").val(res['data'][0]['parent_indikator']).change();  
                    $("#editModal [name=nama_indikator]").val(res['data'][0]['nama_indikator']); 
                    $("#editModal [name=singkatan_indikator]").val(res['data'][0]['singkatan_indikator']);  
                    
                    $("#editModal [name=kategori]").val(res['data'][0]['kategori']).change();  
                    $("#editModal [name=prodi]").val(res['data'][0]['prodi']).change();  
                    $("#editModal [name=semester]").val(res['data'][0]['semester']).change();  
                    $("#editModal [name=triwulan]").val(res['data'][0]['triwulan']).change(); 

                    $("#editModal [name=akademik]").val(res['data'][0]['akademik']).change();  
                    $("#editModal [name=total_data]").val(res['data'][0]['total_data']);  
                    $("#editModal [name=link]").val(res['data'][0]['link']);  
                    
                }
            }
        });
    }
    function destroy(id){

        Swal.fire({ 
        title: 'Anda yakin ingin hapus ?', 
        text: "Anda tidak akan dapat memulihkan file !", 
        type: 'warning', 
        showCancelButton: true, 
        confirmButtonColor: '#DD6B55',   
        confirmButtonText: 'Yaa, hapus !!' 
        }).then((result) => {  
            if (result.value == true) {   
                $.ajax({ 
                    type : "DELETE", 
                    url : `{{url('api/indikator')}}/${id}`,
                    // data : {  
                    //     "id" : id,   
                    // },   
                    dataType: 'JSON',  
                    success : function(data){

                        if(data['status'] == 'error'){
                            Swal.fire(`Gagal hapus data`, "Terjadi kesalahan !!", "error"); 
                        }else{
                            Swal.fire(`Berhasil hapus data`, "", "success"); 
                            detailDataTable.ajax.reload();
                        }

                    }
                });
            }else{
                    
            }
        }); 

    }
</script>
@endsection