@extends('layouts.template_admin')

@section('title', 'Dashboard Jawaban | 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 Jawaban</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_jawaban" 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">Nama Pegawai</th>
                                <th class="text-white fs-5">Inisial Pegawai</th>
                                <th class="text-white fs-5">Unit Kerja</th>
                                <th class="text-white fs-5">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="detail_jawaban" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Detail Jawaban</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endsection

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

        $('#detail_jawaban').on('shown.bs.modal', function (event) {
            const button = $(event.relatedTarget);
            const id = button.data('id');
            getJawaban(id);

        });
        $('#detail_jawaban').on('hidden.bs.modal', function () {
            loadLoading();
        });

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

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

    function generateTable() {
        $('#table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: `/admin/get_data_pegawai_jawaban`,
                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_pegawai' },
                { data: 'nama' },
                { data: 'unit' },
                { data: 'action' }
            ]
        });
    }

    function getJawaban(id) {
        loadLoading();
        $.ajax({
            url: `/admin/detail_jawaban/${id}`,
            type: 'GET',
            success: function (res) {
                const data = res.data;
                let stringTable = '';
                stringTable += '<table id="table_detail" class="table table-bordered">';
                stringTable += `<thead class="bg-primary" id="table_header">
                                    <tr>
                                        <th class="text-white fs-5">No</th>
                                        <th class="text-white fs-5">Soal</th>
                                        <th class="text-white fs-5">Jawaban</th>
                                    </tr>
                                </thead>`;
                stringTable += '<tbody>';
                data.forEach((element, index) => {
                    const dataSoal = JSON.parse(element.soal);
                    stringTable += `
                        <tr>
                            <td>${dataSoal.no ?? '#'}</td>
                            <td>${dataSoal.soal}</td>
                            <td class="fw-bold">${element.jawaban ?? '-'}</td>
                        </tr>
                    `;
                });
                stringTable += '</tbody>';
                stringTable += '</table>';

                $('.modal-body').html(stringTable);
            }
        });
    }

    function loadLoading() {
        $('.modal-body').html(`
            <div class="p-10 d-flex justify-content-center">
                <div>
                    <!-- Fold -->
                    <div class="sk-fold">
                    <div class="sk-fold-cube"></div>
                    <div class="sk-fold-cube"></div>
                    <div class="sk-fold-cube"></div>
                    <div class="sk-fold-cube"></div>
                    </div>
                </div>
            </div>
        `);
    }
</script>
@endsection