@extends('layouts.app')

@section('content')
	<div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Data Staff</h3>
                
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Data Staff</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section">
		<div class="card">
            <div class="card-header">
                Point
                 <div class="float-end">
                    @if($akses->is_add == 1)
                        <button class="btn btn-primary" onclick="loadForm(0)"><span class="bi bi-plus">TAMBAH</span></button>
                    @endif
                    <button class="btn btn-info" onclick="table.draw()"><span class="bi bi-search">RELOAD</span></button>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="card-body" >
                @if(isset($notif))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>{{ $notif }}.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                      </div>
                    @endif
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Cabang</label>
                            <select class="form-select select2" id="lokasi-search">
                                <option value="">Pilih Cabang</option>
                                @foreach($lokasi as $row)
                                    <option value="{{ $row->id }}">{{ $row->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Jabatan</label>
                            <select class="form-select select2" id="jabatan-search">
                                <option value="">Pilih Jabatan</option>
                                @foreach($jabatan as $row)
                                    <option value="{{ $row->id }}">{{ $row->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
               </div>
                <div class="col-lg-12 col-12">
                   
                    <table class="table table-striped table-bordered" id="datatables" style="width:100%">
                        <thead>
                            <tr>
                                <th>Aksi</th>
                                <th>Nama</th>
                                <th>Jabatan</th>
                                <th>Cabang</th>
                                <th>Aktifitas</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                
			</div>
		</div>
	</section>
@endsection

@push("modals")
   @include('pages.task.staff.task')
   
@endpush
   
@push('scripts')
	<script>
        var table;
		$(function(){
            table = $('#datatables').DataTable({
                processing:true,
                responsive: true,
                ajax:{
                    method:"POST",
                    url:"{{ url('task/staff/data') }}",
                    data:(d) => {
                        d.jabatan = $('#jabatan-search').val();
                        d.lokasi = $('#lokasi-search').val();
                    }
                },
                columns:[
                    {data:"aksi",render:(data,type,row) => {
                        var button = "";
                            button += `<li><a class="dropdown-item" href="#" onclick="showAktifitas('${row.nik}')">Show Aktifitas</a></li>`;
                            
                        return `<div class="dropdown ">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                AKSI
                                </button>
                                <ul class="dropdown-menu dropdown-menu-dark"  aria-labelledby="dropdownMenuButton1">
                                ${button}
                                </ul>
                            </div>`
                    },orderable:false,searchable:false},
                   
                    {data:"nama"},
                    {data:"jabatan"},
                    {data:"cabang"},
                    {data:"task"},
                ]
            });
        })
					
		
	</script>
@endpush