@extends('layouts.template_admin')

@section('title', 'Dashboard | Mutu RSAB Harapan Kita')
@section('custom_css')
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <div class="card-title fs-4 fw-bold">Dashboard</div>
        <div class="mt-5">
            <div class="d-flex gap-2 align-items-end">
                <div class="form-group w-50">
                    <label for="nama_pegawai" class="form-label">Nama Pegawai</label>
                    <input type="text" class="form-control" id="nama_pegawai" placeholder="John Doe" />
                </div>
                <div class="form-group w-75">
                    <label for="select_unit_kerja" class="form-label">Unit Kerja</label>
                    <select id="select_unit_kerja" class="select2 form-select" multiple>
                        @foreach ($list_unit_kerja as $item)
                            <option value="{{ $item }}">{{ $item }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="w-100">
                    <div class="btn btn-primary" id="search_button">
                        Cari
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <div class="table-responsive">
                    <table id="table" class="dt-complex-header table table-bordered">
                        <thead class="bg-primary" id="table_header">
                            <tr>
                                <th class="text-white fs-5">Nama Pegawai</th>
                                <th class="text-white fs-5">Unit Kerja</th>
                                <th class="text-white fs-5">Tanggal Isi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom_js')
<script>
    let table = null;
    $(document).ready(function(){
        $(".select2").select2();
        $('#search_button').click(function(){
            $('#table').DataTable().ajax.reload();
        });
        generateTable();
    });

    function generateTable() {
        $('#table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: `{{ url('/admin/get_data_pegawai_sudah_survey') }}`,
                type: 'POST',
                data: function (d) {
                    d.nama_pegawai = $('#nama_pegawai').val();
                    d.unit_kerja = $('#select_unit_kerja').val();
                    d._token = '{{ csrf_token() }}';
                }
            },
            columns: [
                { data: 'nama' },
                { data: 'unit' },
                { data: 'tanggal_isi' }
            ]
        });
    }
</script>
@endsection