@extends('layouts.template_admin')

@section('title', 'Dashboard | Mutu RSAB Harapan Kita')
@section('custom_css')
<style>
    .table-responsive .row > * {
        padding: 0 !important;
    }
</style>
@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-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 d-flex gap-2">
                    <div class="btn btn-primary" id="search_button">
                        Cari
                    </div>
                    <form id="export_form" action="{{ url('/admin/report') }}" method="POST">
                        @csrf
                        <select class="d-none" name="select_unit_kerja[]" multiple>
                            @foreach ($list_unit_kerja as $item)
                                <option value="{{ $item }}">{{ $item }}</option>
                            @endforeach
                        </select>
                        <div type="button" class="btn btn-primary" id="export_form_button">Download Excel</div>
                    </form>
                </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">Unit Kerja</th>
                                <th class="text-white fs-5">Total</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();
        });

        $('#export_form_button').click(function() {
            let select_unit_kerja = $('#select_unit_kerja').val();
            $('[name="select_unit_kerja[]"]').val(select_unit_kerja);

            $('#export_form').submit();
        })

        generateTable();
    });

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