@extends('template_satgas')

@section('title')
    SATGAS | Kelola Atasan Satgas
@stop

@section('top_script')
    @include('master::layouts.top_script_absen')
    <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
@stop

@section('content')
    <section id="content">
        <section class="vbox">
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="{{ url('home')}}"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#">Master</a></li>
                    <li class="active">Atasan Satgas</li>
                </ul>
                <div class="m-b-md text-center" style="margin-bottom:10px">
                    <h5 class="m-b-none"><strong>KELOLA</strong> DATA ATASAN SATGAS</h5> 
                    <span style="font-size:11px">Fitur ini digunakan untuk mengelola perubahan data atasan satgas</span>
                </div>
                <section id="formInput" class="panel panel-info">
                    <!-- <header class="panel-heading font-bold">Kelola Data Pegawai</header> -->
                    <div class="panel-body">
                        <span class="msg_form"></span>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">CARI ATASAN</label>
                                <div class="col-lg-10">
                                    <input name="autocomplete" type="text" class="form-control input-sm" placeholder="Isikan NIP atau Nama Atasan">
                                    <span class="label ket-nip"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label">NIP</label>
                                <div class="col-lg-10">
                                    <input name="id" id="id" value="{{ $id or '' }}" type="hidden">
                                    <input name="nip" type="text" class="form-control input-sm" placeholder="Isikan NIP Atasan"  readonly>
                                    <span class="label ket-nip"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label">NAMA</label>
                                <div class="col-lg-10">
                                    <input name="nama" type="text" class="form-control input-sm" placeholder="Isikan Nama Atasan" readonly> 
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label">JABATAN</label>
                                <div class="col-lg-10">
                                    <input name="jabatan" type="text" class="form-control input-sm" placeholder="Isikan Jabatan Atasan" readonly> 
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="table-responsive">
                            {{-- <button class="btn btn-primary" style="margin: 3rem 0 1rem;">Tambah Satgas Baru</button> --}}
                            <button class="btn btn-primary" id="select-button" style="margin: 3rem 0 1rem;">Pindahkan Satgas ke Atasan berikut</button>
                            <table id="data-anggota" class="table table-striped m-b-none table-hover" width="100%" style="font-size: 11px">
                                <thead>
                                    <tr>
                                        <th class="text-center" width="10%"></th>
                                        <th class="text-center" width="10%" id="nip">NIP</th>
                                        <th width="30%">NAMA</th>
                                        <th class="text-center" width="12%">JENIS KELAMIN</th>
                                        <th class="text-center" width="25%">Bagian</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </section>
        </section>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
    </section>
@stop

@section('bottom_script')
    @include('master::layouts.bottom_script_absen')
    <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
    <!-- Modal -->
    <div class="modal fade" id="atasanModal" tabindex="-1" aria-labelledby="atasanModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="atasanModalLabel">Pilih atasan</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form id="form" method="post">
                <input type="hidden" name="curr_atasan_id">
                <input type="hidden" name="dest_atasan_id">
                <input type="hidden" name="satgas">
                <div class="form-group">
                    <label>Atasan saat ini</label>
                    <input type="text" name="current_atasan" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label>Atasan baru</label>
                    <input name="atasan" class="form-control" id="atasan"></input>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" form="form">Submit</button>
        </div>
        </div>
    </div>
    </div>
@stop