<style>

    .modal-header{
        background: #263238;
    }

    .modal-title{
        color: white;
        margin-bottom: 15px;
    }

    /* .panel-heading{
        padding: 0px 20px;
        
    } */

    #modal-add-mhs{
        margin: 0 auto !important;
    }
    
</style>
<!-- Basic datatable -->

<div class="content-wrapper">
  
    <div class="content">
        
        <div class="page-header-content">
            <div class="page-title">
                <h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">User Management</span> - Mahasiswa</h4>

                <ul class="breadcrumb position-right">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="user_pages_profile.html">User Management</a></li>
                    <li class="active">Mahasiswa</li>
                </ul>
        </div>

        <div class="panel panel-flat">
            <div class="panel-body">
                <div class="tabbable">
                    <ul class="nav nav-tabs nav-tabs-highlight">
                        <li class="active"><a href="#highlighted-tab1" data-toggle="tab">User Mahasiswa</a></li>
                        <li><a href="#highlighted-tab2" data-toggle="tab">Tambah User Mahasiswa</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="highlighted-tab1">
                            <h3 class="text-center">User Mahasiswa</h3>
                            <div class="table-responsive">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="col-lg-1 control-label" style="padding-left: 0px!important;">Prodi: </label>
                                            <div class="col-lg-7">
                                                <select class="select-prodi">
                                                    <option ></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div> 

                                <table class="table data-list table-stripped table-lg datatable-dom-position table-hover" id="data-list2">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-center text-muted" style="width: 30px;">#No</th> 
                                            <th>NIM (Username)</th>
                                            <th>Nama</th>
                                            <th>Prodi</th>
                                            <th>Foto</th>
                                            <th>Email</th>
                                            <th>Terakhir Login</th>
                                            <th>Status</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                        <div class="tab-pane" id="highlighted-tab2">
                            <h3 class="text-center">Tambah User Mahasiswa</h3>

                            <div class="table-responsive">

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label class="col-lg-1 control-label" style="padding-left: 0px!important;">Prodi: </label>
                                            <div class="col-lg-7">
                                                <select class="select-prodi1">
                                                    <option ></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div> 

                                <table class="table data-list table-stripped table-lg datatable-dom-position table-hover" id="data-list3">
                                    <thead>
                                        <tr>
                                            <th scope="col" class="text-center text-muted" style="width: 30px;">#No</th> 
                                            <th>NIM</th>
                                            <th>Nama</th>
                                            <th>Prodi</th>
                                            <th>Email</th>
                                            <th>SKS</th>
                                            <th>IP</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- modal add -->
        <div id="modal-add" class="modal fade" data-keyboard="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title">Tambah User</h6>
                    </div>

                    <div class="modal-body">
                        
                        <div class="row">
                            <div class="panel panel-flat">
                                <div class="panel-body">
                                    <form id="form" action="#">
                                        <div class="col-lg-12">
                                            
                                            <div class="form-group">
                                                <label>Role:</label>
                                                <select id="userrole" class="select">
                                                    <option value="10" >Akademik</option>
                                                    <option value="20" selected>Mahasiswa</option>
                                                    <option value="30" >Dosen</option>
                                                    <!-- <option value="40">Perusahaan</option> -->
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label>Name:</label>
                                                <input type="text" class="form-control" placeholder="Enter name" id="name">
                                            </div>

                                            <div id="username" class="form-group">
                                                <label>Nomor Induk Mahasiswa:</label>
                                                <input type="number" class="form-control" placeholder="Enter NIM..." >
                                            </div>

                                            <div class="form-group">
                                                <label class="display-block">Gender:</label>

                                                <label class="radio-inline">
                                                    <input type="radio" value ="Laki-laki" class="styled" name="gender" checked="checked">
                                                    Male
                                                </label>

                                                <label class="radio-inline">
                                                    <input type="radio" value ="Perempuan" class="styled" name="gender">
                                                    Female
                                                </label>
                                            </div>

                                            <!-- <div id="nid"class="form-group">
                                                <label>Nomor Induk Dosen:</label>
                                                <input type="text" class="form-control" placeholder="Enter NID..." id="mhsnim">
                                            </div> -->

                                            
                                        </div>

                                        <!-- <div class="col-lg-6"> -->
                                            <!-- <div id="fakultas" class="form-group">
                                                <label class="text-semibold">Faculty:</label>
                                                <input id="faculty" value = "Fakultas Teknik Mesin dan Dirgantara"type="text" class="form-control" placeholder="Major" disabled>
                                            </div> -->

                                            <!-- <div id="major" class="form-group">
                                                <label>Major:</label>
                                                <select id="jurusan" class="select">
                                                    <option value="Perancangan Mesin">Perancangan Mesin</option>
                                                    <option value="Konversi Energi">Konversi Energi</option>
                                                    <option value="Ilmu dan Teknik Material">Ilmu dan Teknik Material</option>
                                                    <option value="Teknik Produksi Mesin">Teknik Produksi Mesin</option>
                                                    <option value="Desain, Operasi dan Perawatan Pesawat Terbang">Desain, Operasi dan Perawatan Pesawat Terbang</option>
                                                    <option value="Fisika Terbang">Fisika Terbang</option>
                                                    <option value="Struktur Ringan">Struktur Ringan</option>
                                                </select>
                                            </div> -->

                                            

                                        <!-- </div> -->
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                        <button id="submit-user" type="button" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="modal-add-mhs" class="modal fade" data-keyboard="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
                        <h6 class="modal-title">Tambah Mahasiswa</h6>
                    </div>

                    <div class="modal-body">
                        
                    <form class="form-horizontal" id="form-add-mhs" method="post"  enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Berkas Mahasiswa :</label>
                                <div class="col-lg-10">
                                    <input type="file" id="berkas-mhs" class="file-input-ajax berkass" accept=".xlsx" multiple="multiple">
                                    <span class="help-block">Upload file dengan ekstensi <span class="text-danger">.xlsx</span></span>
                                    <a href="<?php $this->basePath(); ?>/data/xlsx/t_mahasiswas.xlsx" download="template mahasiswa.xlsx"> Download Template .xlsx</a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btn-savemhs">
                            <i class="icon-checkmark2"></i>
                            Simpan
                        </button>
                        <button class="btn btn-lg"  data-dismiss="modal">
                            <i class="icon-cross3"></i>
                            Batal
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- add csv -->
        <!-- <div id="modal-add-mhs"  role="dialog" class="modal fade" tabindex="-9999999" style="margin-top:5%;">
            <div class="modal-dialog" role="dialog">
                
                <div class="modal-content">
                <div class="modal-header bg-primary">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h6 class="modal-title" id="title-modal">Tambah Mahasiswa</h6>
                    </div>
                    <div class="modal-body">
                        
                        <form class="form-horizontal" id="form-add-mhs" method="post"  enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Berkas Mahasiswa :</label>
                                <div class="col-lg-10">
                                    <input type="file" id="berkas-mhs"   class="file-input-ajax" accept=".csv" multiple="multiple">
                                    <span class="help-block">Upload file dengan ekstensi <span class="text-danger">.csv</span></span>
                                </div>
                            </div>
                        </form>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btn-savemhs">
                            <i class="icon-checkmark2"></i>
                            Simpan
                        </button>
                        <button class="btn btn-lg"  data-dismiss="modal">
                            <i class="icon-cross3"></i>
                            Batal
                        </button>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>
