@extends('template_diklat')

@section('title')
    DIKLAT | Verifikasi Judul
@stop

@section('top_script')
    @include('pengajuan::layouts.diklat_top_script')
    <style type="text/css">
        table > tbody {
            overflow-y: auto;
            height: 10px;
        }
        .scroll-body{
            height: 500px;
            overflow-y: auto;
        }
        .dataTables_scrollHeadInner > table {
            width: 100% !important;
        }
        .bootstrap-tagsinput {
            width: 100%;
            line-height: 24px !important;
        }
        .tag {
            font-size: 12px;
            padding: .3em .4em .4em;
            margin: 0 .1em;
            line-height: 2.25;
            white-space: normal !important;
        }
        .tag a {
            color: #bbb;
            cursor: pointer;
            opacity: 0.6;
        }
        .tag a:hover {
            opacity: 1.0
        }
        .tag .remove {
            vertical-align: bottom;
            top: 0;
        }
        /*.tag a {
            margin: 0 0 0 .3em;
        }*/
        .tag a .glyphicon-white {
            color: #fff;
            margin-bottom: 7px;
        }
        .tag-content {
            padding: 5px !important; 
            border: 1px solid #ccc; 
            /*border-radius: 5px; */
            min-height: 34px;
            /*width:250px;
            max-width:250px;
            display: inline-block;*/
        }
        .act {
            margin-left: 5px;
        }

        .fileUpload {
            position: relative;
            overflow: hidden;
            /*margin: 10px;*/
            border-radius: 0 !important;
        }
        .fileUpload input.upload {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        /*iframe*/
        #upload_frame {
            border:0px;
            height:40px;
            width:400px;
            display:none;
        }

        #progress_container {
            width: 300px; 
            height: 30px; 
            border: 1px solid #CCCCCC; 
            background-color:#EBEBEB;
            display: block; 
            margin:5px 0px -15px 0px;
        }

        #progress_bar {
            position: relative; 
            height: 30px; 
            background-color: #F3631C; 
            width: 0%; 
            z-index:10; 
        }

        #progress_completed {
            font-size:16px; 
            z-index:40; 
            line-height:30px; 
            padding-left:4px; 
            color:#FFFFFF;
        }
        table .label {
            font-size: 100% !important;
        }
        .select2-container--default .select2-selection--single {
            border-radius: 0 !important;
        }
        .metode-pengajuan {
            margin: 0; padding: 0; display: none;
        }
        .input-group .select2-container .select2-selection--single {
            height: 30px !important;
        }
        .input-group .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 25px !important
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            top:0 !important;
        }
        .file-data {
            text-decoration: underline;
        }
        .file-data:hover {
            color: red;
            text-decoration: underline;   
        }
        .abang {
            color: #d73925 !important;
        }
        .ijo {
            color: #00a65a !important;
        }
        .abu {
            color: #444 !important;
        }
    </style>
@stop

@section('content')
<section class="content-header">
    <h1>Verifikasi Judul <small>Verifikasi Judul Pelatihan</small></h1>
</section>

<section class="content">
    <div class="row">        
        <div class="col-xs-12">
            <div class="box" style="margin-bottom: 0px">
                <div class="box-body" style="padding: 0px">
                    <div class="col-xs-12" style="padding: 0px">
                        <div class="input-group pull-right" style="width: 15%;">
                            <select class="select2" name="filter_table_periode" data-placeholder="Choose Here..." style="width: 100%; height: 30px !important">
                                    <option value="all">Semua</option>
                                @for($i=(format_date('Y') + 1); $i > (format_date('Y') - 4); $i--)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-info btn-sm btn-flat" id="search-table-pengajuan"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <table id="data" class="table table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" style="font-size: 12px;">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:50px !important">Nip</th>
                                <th class="text-center" style="width:100px !important">Nama</th>
                                <th class="text-center" style="width:150px !important">Jabatan</th>
                                <th class="text-center" style="width:150px !important">Bagian</th>
                                <th class="text-center" style="width:100px !important">No Surat</th>
                                <th class="text-center" style="width:100px !important">Kategori</th>
                                <th class="text-center" style="width:250px !important">Judul</th>
                                <th class="text-center" style="width:250px !important">Kompetensi</th>
                                <th class="text-center" style="width:75px !important">Harga</th>
                                <th class="text-center" style="width:150px !important">Keterangan</th>
                                <th class="text-center" style="width:100px !important">Referensi</th>
                                <th class="text-center" style="width:50px !important">Verifikasi</th>
                                <th class="text-center" style="width:100px !important">Aksi</th>
                            </tr>
                            
                            <tr style="background-color: #ccc">
                                <th class="filter-table" style="width:50px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:100px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:150px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:150px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:100px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:75px !important">
                                    <select class="form-control select2" data-placeholder="Choose Here..." style="width: 100%">
                                        <option value=""></option>
                                        @foreach($kategori as $k => $v)
                                            <option value="{{ $v->nama }}">{{ $v->nama }}</option>
                                        @endforeach
                                    </select>
                                </th>
                                <th class="filter-table" style="width:250px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:250px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:75px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:150px !important">
                                    <input style="width:100% !important" type="text" class="form-control" placeholder="Enter Here...">
                                </th>
                                <th class="filter-table" style="width:100px !important"></th>
                                <th class="filter-table" style="width:50px !important">
                                    <select class="form-control select2" data-placeholder="Choose Here..." style="width: 100%">
                                        <option value=""></option>
                                        <option value="0">Unverified</option>
                                        <option value="1">Verified</option>
                                    </select>
                                </th>
                                <th class="filter-table" style="width:100px !important"></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="modal-referensi" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close cancel-modal" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Referensi</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>LINK / URL</label>
                            <p class="url"></p>
                        </div>
                        <div class="form-group">
                            <label>File</label>
                            <p class="file"></p>
                        </div>
                        <div class="form-group">
                            <label>Keterangan</label>
                            <p class="keterangan"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger pull-right" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-publish" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width: 95%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close cancel-modal" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Verifikasi & Publish Judul Pelatihan</h4>
            </div>
            <form id="form-modal-publish" role="form">
                <div class="modal-body">
                    <div class="row">
                        <input type="hidden" name="peserta_id">
                        <input type="hidden" name="id">
                        <div class="form-group col-md-12">
                            <label>Judul Pelatihan</label>
                            <textarea class="form-control" name="judul" placeholder="Masukkan Judul Pelatihan"></textarea>
                        </div>
                        <div class="form-group col-md-12">
                            <label>Kompetensi</label>
                            <select name="kompetensi_id[]" class="select2" data-placeholder="Pilih Kompetensi" multiple="multiple" style="width: 100%">
                                @foreach($kompetensi as $k => $v)
                                    <option value="{{ $v->id }}">{{ $v->kompetensi }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Harga</label>
                            <input type="text" class="form-control" name="harga" placeholder="Masukkan Harga">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Kategori</label>
                            <select name="kategori_id" class="select2" style="width: 100%" data-placeholder="Choose Here..">
                                <option value=""></option>
                                @foreach($kategori as $k => $v)
                                    <option value="{{ $v->id }}">{{ $v->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-12">
                            <label>Keterangan</label>
                            <textarea class="form-control" name="keterangan" placeholder="Masukkan Keterangan"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger pull-left cancel-modal">Cancel</button>
                    <button type="submit" class="btn btn-success submit-form">Publish</button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

@section('bottom_script')
    @include('pengajuan::layouts.diklat_bottom_script')
@stop