<style>

    .modal-header{
        background: #263238;
    }

    .modal-title{
        color: white;
        margin-bottom: 15px;
    }
    /* .panel-heading{
        padding: 0px 20px;
    } */

    .panel-body{
        padding: 0px 20px;
    }
    .dropdown-menu > li > #spin {
    padding: 8px 15px;
    outline: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .blockedP{
        cursor: no-drop;
    }

    .pdfp:hover{
        background-color: #c9c9c9;

    }

    .modal-body {
        position: relative;
        padding: 20px 20px 20px 20px;
    }
     .media-bodys:hover{
        /* background-color: rgba(201, 201, 201, 0.8); */
        opacity: 0.7;
        border-bottom: 0.5px solid grey;
        color: blue;
    }

    .media{
        
    }
     .media-left, .media-body{
        margin: 0px;
        padding: 5px;
        cursor: pointer;
    }

    .img-preview {
        max-height: 104.48px;
    }

    .headlist{
        margin-bottom: -17px !important; 
    }

    .alert-profile {
        /* background-color: #E8F5E9; */
        border-color: black;
        color: black !important ;
    }

    .profile > img{
        max-height: 150px;
        max-width: 200px;
    }

    /* @media only screen and (max-width: 500px) {
        #imgcontainer{
            max-width: 220px
        }
    } */

    /* @media (min-width: 400px){
        .col-lg-3 {
            width: 15%;
        }
    } */

    .normpoint{
        cursor: default;
    }

    .normpoint > div{
        font-weight: 400;
        font-size: 16px;
    }
    .identity{
        font-size: 16px;
    }

    #setpadding{
        min-width: 65px;
    }
    
</style>

<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">Admin</span> - Daftar Mahasiswa</h4>

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

        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title text-semibold">Daftar Mahasiswa</h6>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu7"></i> <span class="caret"></span></a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li id="addPopUp"><a id="addPopUp">Tambah Mahasiswa</a></li>
                                <li id="upPopUp"><a >Upload Mahasiswa</a></li>
                               
                                <!-- <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated line</a></li> -->
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="panel-flat">
                <div class="table-responsive">
                    <table class="table data-list table-stripped table-lg datatable-dom-position table-hover" id="mahasiswalist">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center text-muted" style="width: 30px;">#No</th> 
                                <th>NIM</th>
                                <th>Nama</th>
                                <th>Program Studi</th>
                                <th>Email</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        
        <!-- Basic datatable -->

        <!-- 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 Mahasiswa</h6>
                    </div>

                    <div class="modal-body">
                        
                            
                                <div class="panel-body">
                                    <form id="form" action="#">
                                        

                                            <div class="form-group">
                                                <label>Name:</label>
                                                <input type="text" class="form-control" placeholder="Masukkan nama" id="mhsname">
                                            </div>

                                            <div id="username" class="form-group">
                                                <label>Nomor Induk Mahasiswa:</label>
                                                <input type="number" class="form-control" placeholder="Masukkan NIM..." id="mhsnim">
                                            </div>
                                            
                                            <div id="major" class="form-group">
                                                <label>Program Studi:</label>
                                                <select id="mhsmajor" class="select">
                                                    <option value="Teknik Mesin">Teknik Mesin</option>
                                                    <option value="Teknik Dirgantara">Teknik Dirgantara</option>
                                                    <option value="Teknik Material">Teknik Material</option>
                                                </select>
                                            </div>

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

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

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

                                            <div class="form-group">
                                                <label>Email:</label>
                                                <input type="text" class="form-control" placeholder="Masukkan email" id="mhsemail">
                                            </div>
                                        
                                    </form>
                                </div>
                           

                    </div>

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

        <!-- modal add -->
        <div id="modalberkas" class="modal fade" data-keyboard="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="mdtitle">Berkas Mahasiswa</h6>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div id="profile" class="col-lg-12">
                            
                                <div id="imgcontainer" class="col-lg-12 col-1">

                                    <ul class="media-list">
                                        <li class="media">
                                            <div class="media-left profile normpoint"><img class=""src="<?php echo '//'.$_SERVER['SERVER_NAME'].':'.$_SERVER['SERVER_PORT'].$this->basePath();?>/img/transparent-man.png"></div>
                                            <div class="media-body normpoint">
                                                <div>
                                                    <div id="setpadding" class="media-left">Nama </div>
                                                    <div id="namamBerkas" class="media-body">: Anggi Saputra</div>
                                                </div>
                                                <div>
                                                    <div id="setpadding" class="media-left">NIM </div>
                                                    <div id="nimmberkas" class="media-body">: Anggi Saputra</div>
                                                </div>
                                                <div>
                                                    <div id="setpadding" class="media-left">Prodi </div>
                                                    <div id="prodimberkas" class="media-body">: Anggi Saputra</div>
                                                </div>
                                                <div>
                                                    <div id="setpadding" class="media-left">Berkas </div>
                                                    <div id="statusberkas"class="media-left">: Anggi "Saputra</div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                            <div id="mbody" class="col-lg-12">
                            
                            </div>
                        </div>
                    </div>
                   

                    <div id="modfoot" class="modal-footer">
                        
                    </div>
                </div>
            </div>
        </div>

        <!-- modal add -->
        <!-- <div id="modalattach" class="file-zoom-dialog" tabindex="-1" aria-labelledby="kvFileinputModalLabel" style="display: block;"><div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="kv-zoom-actions btn-group"><button type="button" class="btn btn-default btn-icon btn-xs btn-header-toggle btn-toggleheader" title="Toggle header" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-menu-open"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-fullscreen" title="Toggle full screen" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-screen-full"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-borderless" title="Toggle borderless mode" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-alignment-unalign"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-close" title="Close detailed preview" data-dismiss="modal" aria-hidden="true"><i class="icon-cross3"></i></button></div>
                    <h6 class="modal-title">Detailed Preview <small><span class="kv-zoom-title">1.pdf  <samp>(556.22 KB)</samp></span></small></h6>
                </div>
                <div class="modal-body">
                    <div class="floating-buttons btn-group"></div>
                    <div class="kv-zoom-body file-zoom-content">
                    <div id="isv"></div>
                </div>
                <button type="button" class="btn btn-navigate btn-prev" title="View previous file" style="display: none;"><i class="icon-arrow-left32"></i></button> <button type="button" class="btn btn-navigate btn-next" title="View next file" style="display: none;"><i class="icon-arrow-right32"></i></button>
                </div>
            </div>
            </div>
        </div> -->

        <!-- <div id="kvFileinputModal" class="file-zoom-dialog modal fade in" tabindex="-1" aria-labelledby="kvFileinputModalLabel" style="display: block;"><div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="kv-zoom-actions btn-group"><button type="button" class="btn btn-default btn-icon btn-xs btn-header-toggle btn-toggleheader" title="Toggle header" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-menu-open"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-fullscreen" title="Toggle full screen" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-screen-full"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-borderless" title="Toggle borderless mode" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-alignment-unalign"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-close" title="Close detailed preview" data-dismiss="modal" aria-hidden="true"><i class="icon-cross3"></i></button></div>
                    <h6 class="modal-title">Detailed Preview <small><span class="kv-zoom-title">1.pdf  <samp>(556.22 KB)</samp></span></small></h6>
                </div>
                <div class="modal-body">
                    <div class="floating-buttons btn-group"></div>
                    <div class="kv-zoom-body file-zoom-content">
                    <embed class="kv-preview-data file-zoom-detail" src="<?php echo $this->basePath();?>/data/berkas/5f8472a033cf19c5e356kVoVO389549.pdf" type="application/pdf" style="width: 100%; height: 100%; min-height: 480px;">
                </div>
                <button type="button" class="btn btn-navigate btn-prev" title="View previous file" style="display: none;"><i class="icon-arrow-left32"></i></button> <button type="button" class="btn btn-navigate btn-next" title="View next file" style="display: none;"><i class="icon-arrow-right32"></i></button>
                </div>
            </div>
            </div>
        </div> -->

    </div>
</div>

<div id="modal-video"  role="dialog" class="modal fade" tabindex="-9999999" style="margin-top:5%;">
    <div class="modal-dialog modal-lg" role="dialog">
        <!-- Modal content-->
            <div class="col-lg-12">
                <div class="isv"></div>
            </div>
        </div>
    </div>
</div>

<!-- <div id="kvFileinputModal" class="file-zoom-dialog modal fade " tabindex="-1" aria-labelledby="kvFileinputModalLabel" style="display: block;"><div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <div class="kv-zoom-actions btn-group"><button type="button" class="btn btn-default btn-icon btn-xs btn-header-toggle btn-toggleheader" title="Toggle header" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-menu-open"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-fullscreen" title="Toggle full screen" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-screen-full"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-borderless" title="Toggle borderless mode" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon-alignment-unalign"></i></button><button type="button" class="btn btn-default btn-icon btn-xs btn-close" title="Close detailed preview" data-dismiss="modal" aria-hidden="true"><i class="icon-cross3"></i></button>
            </div>
            <h6 class="modal-title">Detailed Preview <small><span class="kv-zoom-title">1 _2_.pdf  <samp>(8.21 KB)</samp></span></small></h6>
        </div>
    
    <div class="modal-body">
        <div class="floating-buttons btn-group"></div>
        <div class="kv-zoom-body file-zoom-content">
            <embed class="kv-preview-data file-zoom-detail" src="blob:http://itb_quick.rey/2b134daa-bb40-41f0-8748-2eb784e10489" type="application/pdf" style="width: 100%; height: 100%; min-height: 480px;">
        </div>
        <button type="button" class="btn btn-navigate btn-prev" title="View previous file" style="display: none;"><i class="icon-arrow-left32"></i></button> <button type="button" class="btn btn-navigate btn-next" title="View next file" style="display: none;"><i class="icon-arrow-right32"></i></button>
    </div>
  </div>
</div> -->
