@include('components.theme.pages.header')
<section>
    <div class="mb-4">
        <h1 class="h3 text-gray-800 mb-2">{{ $data['subtitle'] }}</h1>
        <p class="small text-muted">Kuesioner dengan Periode {{ \Carbon\Carbon::parse($kuesioner->start_periode)->format('d F Y') }} - {{ \Carbon\Carbon::parse($kuesioner->end_periode)->format('d F Y') }}</p>
    </div>
    <!-- basic table -->
    <div class="row mb-4">
        <div class="col-md-4 mb-2">
            <div class="card border-left-primary shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Puas Terhadap Layanan</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $puas }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-danger shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                Total Tidak Puas Terhadap Layanan</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $tidakPuas }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-times fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <div class="card border-left-success shadow py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Total Sangat Puas Terhadap Layanan</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $sangatPuas }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-thumbs-up fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 mt-4">
            @if(session()->has('success'))
                <div class="alert alert-success">
                    {{ session()->get('success') }}
                </div>
            @else
                @if(session()->has('error'))
                    <div class="alert alert-danger">
                        {{ session()->get('error') }}
                    </div>
                @endif
            @endif
            <div class="mb-4">
                <h1 class="h3 text-gray-800 mb-2">Data Pertanyaan</h1>
                <p class="small text-muted">Berikut data pertanyaan dari kuesioner</p>
            </div>

            <div class="card">
                <div class="card-body">
                    <!--end::Wrapper-->
                    <div class="table-responsive">
                        <table id="data-table" class="table"  width="100%">
                            <thead>
                                <tr class="text-start">
                                    <th>Pertanyaan</th>
                                    <th>Dimensi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 mt-4">
            <div class="mb-4">
                <h1 class="h3 text-gray-800 mb-2">Uji GAP-5</h1>
                <p class="small text-muted">Gap kualitas pelayanan atau perbedaan pelayanan yang diharapkan oleh pengguna dengan pelayanan yang senyatanya diterima atau dirasakan oleh pengguna.</p>
            </div>

            <div class="card">
                <div class="card-body">
                    <!--end::Wrapper-->
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush" id="table-gap" width="100%">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" rowspan="2" class="align-middle text-center">Kriteria/Pertanyaan</th>
                                    <th scope="col" colspan="2" class="text-center">Harapan Pelayanan</th>
                                    <th scope="col" colspan="2" class="text-center">Kenyataan Pelayanan</th>
                                    <th scope="col" rowspan="2" class="align-middle text-center">Nilai GAP 5</th>
                                    <th scope="col" rowspan="2" class="align-middle text-center">Kesimpulan</th>
                                </tr>
                                <tr>
                                    <th scope="col" class="text-center">Nilai Pembobotan</th>
                                    <th scope="col" class="text-center">Rata-Rata Harapan</th>

                                    <th scope="col" class="text-center">Nilai Pembobotan</th>
                                    <th scope="col" class="text-center">Rata-Rata Kenyataan</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $data = \App\Models\Temp::where('questionnaire_id', $kuesioner->id)->get();
                                if (!empty($data)) {
                                    foreach ($data as $value) {
                                        $expectation_average = round(($value->sum_total_answerer > 0 ? ($value->sum_expectation_answer/$value->sum_total_answerer) : 0), 2);
                                        $reality_average = round(($value->sum_total_answerer > 0 ? ($value->sum_reality_answer/$value->sum_total_answerer) : 0), 2);
                                        $gap5 = $value->sum_total_answerer > 0 ? $reality_average-$expectation_average : 0;
                                        $rating = '';
                                        if($gap5 == 0) {
                                            $rating = 'Puas';
                                        }else if($gap5 > 0) {
                                            $rating = 'Sangat puas';
                                        }else if($gap5 < 0) {
                                            $rating = 'Kurang puas';
                                        }
                                        $question = \App\Models\Pertanyaan::where('id', $value->question_id)->first();
                                ?>
                                        <tr>
                                            <td><a href="#" class="showDetail" data-value="<?= $question->question ?>" data-id="<?= $value->id ?>" data-toggle="tooltip" data-placement="top" title="Klik untuk melihat detail"><?= substr($question->question, 0, 55) ?></a></td>
                                            <td class="align-middle text-center"><?= $value->sum_expectation_answer ?></td>
                                            <td class="align-middle text-center"><?= $expectation_average ?></td>
                                            <td class="align-middle text-center"><?= $value->sum_reality_answer ?></td>
                                            <td class="align-middle text-center"><?= $reality_average ?></td>
                                            <td class="align-middle text-center"><span class="badge badge-success"><?= $gap5 ?>%</span></td>
                                            <td class="align-middle text-center"><?= $rating ?></td>
                                        </tr>
                                    <?php
                                    }
                                } else {
                                    ?>
                                    <tr>
                                        <td colspan="8" class="text-center">
                                            <h3>Data kosong.</h3>
                                        </td>
                                    </tr>
                                <?php
                                }
                                ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 mt-4">
            <div class="mb-4">
                <h1 class="h3 text-gray-800 mb-2">Perangkingan Nilai GAP 5</h1>
                <p class="small text-muted">Data perangkingan nilai GAP 5 berdasarkan kualitas pelayanan yang diharapkan oleh pengguna</p>
            </div>

            <div class="card">
                <div class="card-body">
                    <!--end::Wrapper-->
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush" id="table-uji" width="100%">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">Kriteria/Pertanyaan</th>
                                    <th scope="col">Dimensi</th>
                                    <th scope="col" class="text-center">Nilai GAP 5</th>
                                    <th scope="col" class="text-center">Kesimpulan</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $data = \App\Models\Temp::where('questionnaire_id', $kuesioner->id)->get();
                                if (!empty($data)) {
                                    foreach ($data as $value) {
                                        $expectation_average = round(($value->sum_total_answerer > 0 ? ($value->sum_expectation_answer/$value->sum_total_answerer) : 0), 2);
                                        $reality_average = round(($value->sum_total_answerer > 0 ? ($value->sum_reality_answer/$value->sum_total_answerer) : 0), 2);
                                        $gap5 = $value->sum_total_answerer > 0 ? $reality_average-$expectation_average : 0;
                                        $rating = '';
                                        if($gap5 == 0) {
                                            $rating = 'Puas';
                                        }else if($gap5 > 0) {
                                            $rating = 'Sangat puas';
                                        }else if($gap5 < 0) {
                                            $rating = 'Kurang puas';
                                        }

                                        $question = \App\Models\Pertanyaan::where('id', $value->question_id)->first();
                                        $dimensi = \App\Models\Dimension::where('id', $question->dimension_id)->first();
                                ?>
                                        <tr>
                                            <td><a href="#" class="showDetail" data-value="<?= $question->question ?>" data-id="<?= $value->id ?>" data-toggle="tooltip" data-placement="top" title="Klik untuk melihat detail">{{ substr($question->question, 0, 55) }}</a></td>
                                            <td><?= $dimensi->title ?></td>
                                            <td class="align-middle text-center"><span class="badge badge-success"><?= $gap5 ?>%</span></td>
                                            <td class="align-middle text-center"><?= $rating ?></td>
                                        </tr>
                                    <?php
                                    }
                                } else {
                                    ?>
                                    <tr>
                                        <td colspan="8" class="text-center">
                                            <h3>Data kosong.</h3>
                                        </td>
                                    </tr>
                                <?php
                                }
                                ?>
                                <button type="button" id="button-detail-modal" data-toggle="modal" data-target="#detail-modal" hidden></button>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="detailGap" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Detil</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mt-4 answer"></div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script type="text/javascript">
    $(function () {
        var table = $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ app_url('kuesioner/detail') . '/' . $id }}",
            columns: [
                {data: 'question', name: 'question'},
                {data: 'dimension', name: 'dimension'},
            ]
        });

        var tableGap = $('#table-gap').DataTable();
        var tableUji = $('#table-uji').DataTable();

        $(document).on('click', '.showDetail', function () {
            var question = $(this).data('value');
            $.ajax({
                url: `{{ app_url('kuesioner/answer') }}`,
                type: "GET",
                dataType: "html",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'kuesioner': question
                },
                success: function (response) {
                    $('#detailGap').modal('show');
                    $('.answer').html(response);
                }
            })
        })
    });
    </script>
@endpush
@include('components.theme.pages.footer')