{% extends "layouts/base.html" %}

{% block title %} Aplikasi {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}


{% block content %}
    <div class="content">
        <div class="page-inner">
            <div class="page-header">
                <h4 class="page-title">Layanan</h4>
                <ul class="breadcrumbs">
                    <li class="nav-home">
                        <a href="/">
                            <i class="flaticon-home"></i>
                        </a>
                    </li>
                    <li class="separator">
                        <i class="flaticon-right-arrow"></i>
                    </li>
                    <li class="nav-item">
                        <a href="#">Ekosistem Digital</a>
                    </li>
                    <li class="separator">
                        <i class="flaticon-right-arrow"></i>
                    </li>
                    <li class="nav-item">
                        <a href="#">Layanan Aplikasi</a>
                    </li>
                </ul>
            </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">
                                    <h1 style="color:blue;">Layanan Aplikasi DJPK</h1>
                                </h4>	
                            </div>
                            <div class="card-body">        
                            <!---Content-->

                             <div class="container-fluid">
                                        <nav>
                                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                                
                                                {% regroup layanan_list|dictsort:"grup" by grup as list_aplikasi %}

                                                {% for grup, aps in list_aplikasi %}
                                                    <a class="nav-item nav-link {% if forloop.first %} active {% endif %}" id="nav-home-tab" data-toggle="tab" href="#nav-{{ grup }}" role="tab" aria-controls="nav-home" aria-selected="true">{{ grup | title }}</a>
                                                {% endfor %}
                                                    <a class="nav-item nav-link" id="nav-ti-tab" data-toggle="tab" href="#nav-ti" role="tab" aria-controls="nav-ti" aria-selected="false">Teknologi Informasi</a>

                                                <!-- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Aplikasi Eksternal DJPK</a>
                                                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Aplikasi Internal DJPK</a>
                                                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Aplikasi K/L</a> -->
                                            </div>
                                        </nav>

                                        <div class="tab-content" id="nav-tabContent">
                                            {% regroup layanan_list|dictsort:"grup" by grup as list_aplikasi %}

                                            {% for grup, aps in list_aplikasi %}
                                                <div class="tab-pane fade {% if forloop.first %} show active {% endif %}" id="nav-{{ grup }}" role="tabpanel" aria-labelledby="nav-{{ grup }}-tab"><br>
                                            
                                                    <h3 style="color:red">Aplikasi {{ grup | upper }} DJPK</h3>
                                                    <br>

                                                    <div class="row">
                                                        {% for data in aps %}
                                                            <div class="col-md-3">
                                                                <div class="card 
                                                                    {% if data.status == 'Operasional' %}
                                                                        card-primary 
                                                                    {% elif data.status == 'Pembangunan' %}
                                                                        card-warning
                                                                    {% else %}
                                                                        card-danger 
                                                                    {% endif%}
                                                                    card-post card-round">
        
                                                                    <img class="card-img-top" src="{{ MEDIA_URL }}/media/{{ data.image }}" alt="">
                                                                    <div class="card-body text-center">
                                                                        <div class="card-opening">{{ data.aplikasi }}</div>
                                                                        <div class="card-desc">
                                                                            {{ data.status }}{% if data.modul != None %} - {{ data.modul }} {% endif %}
                                                                        </div>
                                                                        <div class="card-detail">
                                                                            {% if data.url is not None %}
                                                                                <br>
                                                                                <a href="{{ data.url }}" class="btn btn-light btn-rounded btn-sm" target="_blank">Buka</a>
                                                                            {% endif %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            {% endfor %}

                                            <div class="tab-pane fade" id="nav-ti" role="tabpanel" aria-labelledby="nav-ti-tab">
                                                <br>
                                                <h3 style="color:red">Layanan Teknologi Informasi</h3>
                                                <div class="alert alert-success" role="alert">
                                                    <b>A. Software di DJPK</b><br>
                                                    <table class="table table-hover table-sm">
                                                        <thead>
                                                          <tr class="table-success">
                                                            <th scope="col">No.</th>
                                                            <th scope="col">Nama Software</th>
                                                            <th scope="col">Kuantitas</th>
                                                            <th scope="col">Digunakan</th>
                                                            <th scope="col">Tersedia</th>
                                                          </tr>
                                                        </thead>
                                                        <tbody>
                                                          <tr>
                                                            <th scope="row">1</th>
                                                            <td>Tableau</td>
                                                            <td>10</td>
                                                            <td>1</td>
                                                            <td>9</td>
                                                          </tr>
                                                          <tr>
                                                            <th scope="row">2</th>
                                                            <td>Adobe</td>
                                                            <td>5</td>
                                                            <td>2</td>
                                                            <td>3</td>
                                                          </tr>
                                                          <tr>
                                                            <th scope="row">3</th>
                                                            <td>MS Office</td>
                                                            <td>10</td>
                                                            <td>6</td>
                                                            <td>4</td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                </div>
                                                <div class="alert alert-success" role="alert">
                                                    <b>B. Mekanisme Pengajuan Permintaan Software</b><br>
                                                    Untuk permintaan pengajuan software atau tools lainnya dapat melalui Nota Dinas Eselon III kepada Kasubdit PABDIOTI. 
                                                    <br>Nota Dinas dilengkapi dengan urgensi dan kuantitas software atau tools yang dibutuhkan. 
                                                </div>
                                                <div class="alert alert-success" role="alert">
                                                    <b>C. Pengaduan Teknologi Informasi</b><br>
                                                    Jika terdapat gangguan pada teknologi informasi di DJPK, Pegawai dapat melaporkan disini.
                                                </div>                                            
                                            </div>
                                            <!-- <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                                <br>Ini untuk kategori aplikasi internal
                                            </div>
                                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                                                <br>ini untuk kategori aplikasi lainnya
                                            </div> -->
                                        </div>
                                    </div>
                                
                                <!-- <p>Author: admin</p>
                                <p>Publikasi: 31 Oktober 2021</p> -->
                            <!---End Content-->
                            </div>
                        </div>
                    </div>
                </div>            
        </div>
    </div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

{% endblock javascripts %}
