@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 row">
            <div class="col-md-6">
                <div class="card text-bg-danger">
                    <div class="card-body">
                        <div class="card-title fs-4 fw-bold d-flex justify-content-between">
                            <div class="text-white">Total Tidak Mau Survey</div>
                            <div class="text-white" id="total_tidak_mau">-</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mt-5 mt-md-0">
                <div class="card text-bg-primary">
                    <div class="card-body">
                        <div class="card-title fs-4 fw-bold d-flex justify-content-between">
                            <div class="text-white">Total Mau Survey</div>
                            <div class="text-white" id="total_mau">-</div>
                        </div>
                    </div>
                </div>
            </div>
        </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="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 class="mt-2 text-muted small">
                    <strong>Keterangan:</strong><br>
                    <span>• Format <code>x / y</code> berarti <strong>x pegawai sudah mengisi</strong> dari <strong>total y pegawai aktif di SMART</strong>.</span><br>
                </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();
        getTotalTidakMauSurvey();
        getTotalMauSurvey();
    });

    function generateTable() {
        $('#table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                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' }
            ]
        });
    }

    function getTotalTidakMauSurvey() {
        $.ajax({
            url: "/admin/get_data_pegawai_tidak_mau_survey",
            type: "POST",
            data: {
                unit_kerja: $('#select_unit_kerja').val(),
                _token: "{{ csrf_token() }}"
            },
            success: function(res) {
                $('#total_tidak_mau').html((res.data ?? '-') + ' Orang');
            }
        });
    }

    function getTotalMauSurvey() {
        $.ajax({
            url: "/admin/get_data_pegawai_mau_survey",
            type: "POST",
            data: {
                unit_kerja: $('#select_unit_kerja').val(),
                _token: "{{ csrf_token() }}"
            },
            success: function(res) {
                $('#total_mau').html((res.data ?? '-') + ' Orang');
            }
        });
    }
</script>
@endsection