<style>

    .form-control {
        display: block;
        width: 100%;
        height: 36px;
        padding: 7px 12px;
        font-size: 13px;
        line-height: 1.5384616;
        color: #333333;
        background-color: #fff;
        background-image: none;
        border: 1px solid #0fbdbc;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-radius: 0px;
    }

    .btn-success {
        color: #fff;
        background-color: #009688;
        border-color: #0fbfbf;
    }

    .input-group-addon:first-child {
        border-right: 0;
        border-left: 0;
        border-top: 0;
        border-color: #ffffff;
    }

</style>

<div class="page-container">
    <div class="content-wrapper">
    
        <!-- Content area -->
		<div class="content">

            <!-- Square thumbs -->
            <h6 class="content-group text-semibold">
                Square survey
                <small class="display-block">Menampilkan data <code>survey</code> component</small>
                <span class="pull-right" style="margin-top: -35px;">
                    <span  id="btn-add-add" class="btn btn-success btn-icon btn-lg" data-popup="lightbox"><i class="icon-plus2"></i></span>
                </span>
            </h6>

            <div  id="loadFormCont" class="col-lg-9 col-md-9 col-sm-8">

                <!-- grid view -->
                <span id="loadForm"></span>
                
                <!-- table view -->
                <div class="panel panel-white isTabelContentHead" style="display:none;">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped tabelOfContent">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Judul</th>
                                    <th scope="col">deskripsi</th>
                                    <th scope="col">Formulir</th>
                                    <th scope="col">CreateDate</th>
                                </tr>
                            </thead>
                            <tbody>
                            
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="isListContentHead" style="display:none;margin-top: -27px;">
                    <div class="panel-body contentList">
                        
                    </div>
                </div>
                

                <div class="row data-main" style="margin-top:20px;">
                    <div class="text-center content-group-lg col-xs-12">
                        <span class="contentPagination"></span>
                    </div>
                    <input type="hidden" id="tempCurent">
                </div>
                <!-- pagenation -->


            </div>

            <div class="col-lg-3 col-md-3  col-sm-4" style="">

                <!-- Navigation -->
                <div class="panel panel-white">
                    <div class="panel-heading">
                        <div class="panel-title ">
                            <!-- <i class="icon-search4 text-size-base position-left"></i> -->
                            Filter : 
                            <span>
                                <select class="form-control" id="filterPages" style="width: auto;  display: inline-block;  border-top: 1px;  border-left: 1px !important;  border-right: 1px;  border-radius: 1px; border: 1px solid #fff;">
                                    <option value="6">6</option>
                                    <option value="12" selected>12</option>
                                    <option value="18">18</option>
                                    <option value="54">54</option>
                                    <option value="108">108</option>
                                </select>
                            </span>
                        </div>
                        <div class="heading-elements">
                            <ul class="icons-list">
                                <li id="gView"><a  data-popup="tooltip" title="Grid view"><i class="icon-grid4"></i></a></li>
                                <li id="lView"><a  data-popup="tooltip" title="List view"><i class="icon-equalizer"></i></a></li>
                                <li id="tView"><a  data-popup="tooltip" title="Table view"><i class="icon-table2"></i></a></li>
                            </ul>
                        </div>

                    </div>
                    
                    <div class="panel-body">
                        <div class="page-body">
                            <div class="card">
                                <div class="card-block" id="searchbody">

                                    <div class="form-group row border-bottoms  has-feedback has-feedback-left">
                                        <div class="input-groups">
                                            <!-- <span class="input-group-addon"><i class="icon-link"></i></span> -->
                                            <input type="text" class="form-control input-lg" id="cariJudul" placeholder="Cari nama survey">
                                            <div class="form-control-feedback">
                                                <i class="icon-search4" style="color:#9E9E9E;"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Status Survey</label>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" onClick="lRadioX()" name="radio-styled-colorX" value="1" class="control-primary" >
                                                Public 
                                            </label>
                                        </div>

                                        <div class="radio">
                                            <label>
                                                <input type="radio"  onClick="lRadioX()" name="radio-styled-colorX" value="2" class="control-danger">
                                                Private
                                            </label>
                                        </div>

                                        <div class="radio">
                                            <label>
                                                <input type="radio" onClick="lRadioX()" name="radio-styled-colorX" value="3" class="styled">
                                                Non Aktif
                                            </label>
                                        </div>

                                        <div class="radio">
                                            <label>
                                                <input type="radio" onClick="lRadioX()" name="radio-styled-colorX" value="" checked="checked" class="control-success">
                                                Semua
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Urutkan berdasarkan</label>
                                        <select name="select" class="form-control" id="orderBY">
                                            <option value="2" selected>Tanggal pembuatan</option>
                                            <option value="1">Judul</option>
                                        </select>

                                    </div>

                                    <div class="form-group">
                                        <select class="form-control" id="sortx">
                                            <option  value="2" selected>Descending</option>
                                            <option  value="1">Ascending</option>
                                        </select>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Navigation -->
                <div class="panel panel-white">
                    <div class="panel-heading">
                        <div class="panel-title ">
                            <!-- <i class="icon-search4 text-size-base position-left"></i> -->
                            Urutkan berdasarkan :
                        </div>
                    </div>
                    
                    <div class="panel-body">
                        <div class="page-body">
                            <div class="card">
                                <div class="card-block" id="searchbody">

                                    <div class="form-group">
                                        <select name="select" class="form-control" id="orderBY">
                                            <option value="2" selected>Tanggal pembuatan</option>
                                            <option value="1">Judul</option>
                                        </select>

                                    </div>

                                    <div class="form-group">
                                        <select class="form-control" id="sortx">
                                            <option  value="2" selected>Descending</option>
                                            <option  value="1">Ascending</option>
                                        </select>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

          
        </div>
        
</div>

<div id="modal-add-visit"  role="dialog" class="modal fade" tabindex="-9999999" style="margin-top:5%;">
    <div class="modal-dialog" role="dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background: url(../../../img/reds.jpg); height: 150px; background-position: right;">
                <h4 class="modal-title red" style="font-size: 30px;color: white;  margin-top: 60px;">Memulai Formulir Baru
                    <br> <span class="pull-right"></span>
                </h4>
            </div>
            
            <div class="modal-body">
            
                <form class="" id="formmen" method="post"  enctype="multipart/form-data">                    

                    <div class="form-group" style="padding-bottom: 10px;">

                        <label class="display-block" for="form-field-select-1" style="font-size:18px;">Type Formulir <span class="middle red"></span></label>

                        <div style="padding: 10px;">
                            <div class="col-md-6">
                                <label class="boxForm">
                                    <input type="radio" value="1" name="typeFormulir" class="control-info" >
                                    Kuesioner 
                                </label>
                            </div>
                            <div class="col-md-6">
                                <label class="text-center boxForm">
                                    <input type="radio" value="2" name="typeFormulir" class="control-info">
                                    Quiz
                                </label>
                            </div>
                        </div>
                            

                    </div>

                    <div class="form-group">
                        <label for="form-field-select-1" style="font-size:18px;">Judul <span class="middle red"></span></label>
                        <input class="form-control required" id="judul" name="keterangan" placeholder="Masukan judul"></input>
                    </div>

                    <div class="form-group">
                        <label for="form-field-select-1" style="font-size:18px;">Deskripsi <span class="middle red"></span></label>
                        <input class="form-control required" id="keterangan" name="keterangan" placeholder="Masukan deskripsi"></input>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-lg btn-success" id="" onclick="saveForm();">
                    <i class="icon-checkmark2"></i>
                    Simpan
                </button>
                <button class="btn btn-lg" id="btncancel" data-dismiss="modal">
                    <i class="icon-cross3"></i>
                    Batal
                </button>
            </div>
        </div>
    </div>
</div>
