@extends('landing-layout.master')
@section('title', 'Form Kepuasan Mitra')

@section('content')
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row">
                <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
                    <h3 class="display-4 mb-6 text-center">Form Kepuasan Mitra</h3>
                    @include('flashmessage')
                    @if ($data->completed == 'Y')
                        <p class="lead fs-lg mb-10 text-center px-md-16 px-lg-21 px-xl-0">Assalamu'alaikum Warahmatullahi
                            Wabarakatuh,<br>
                            Terima kasih telah menjadi Mitra {{ $data->jenis_hibah }} kami. <br>
                            Form Kepuasan Mitra ini sudah
                            diisi</p>
                    @else
                        <p class="lead fs-lg mb-10 text-center px-md-16 px-lg-21 px-xl-0">Assalamu'alaikum Warahmatullahi
                            Wabarakatuh,<br>
                            Terima kasih telah menjadi Mitra {{ $data->jenis_hibah }} kami. Mohon berkenan untuk meluangkan
                            waktu
                            anda sejenak untuk mengisi Form dibawah ini</p>
                </div>
                <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
                    <div class="table">
                        <table class="table table-bordered">
                            <tbody>
                                <!-- Table rows here as before -->
                            </tbody>
                        </table>
                    </div>
                    <div class="pertanyaan" style="font-size: 14px;">
                        MOHON AGAR MITRA DAPAT MENCENTANG SALAH SATU JAWABAN :<br>
                        <form id="signFormKepuasanDigital" method="POST" action="{{ url('/signFormKepuasanDigital') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="proposal_id" id="proposal_id" value="{{ $data->proposal_id }}">
                            <input type="hidden" name="token_kepuasan_mitra" id="token_kepuasan_mitra"
                                value="{{ $data->token_kepuasan_mitra }}">
                            <ol>
                                @foreach ($quesioner as $index => $data)
                                    <li class="mb-4">
                                        {{ $data->pertanyaan }}
                                        <div>Pilihan Jawaban:</div>
                                        <div class="form-check" style="margin-right: 20px;">
                                            <input class="form-check-input" type="radio"
                                                name="jawaban[{{ $data->kuesioner_kepuasan_mitra_id }}]" value="Sangat Baik"
                                                id="baik_sekali_{{ $index }}">
                                            <label class="form-check-label" for="baik_sekali_{{ $index }}">A. Sangat
                                                Baik</label>
                                        </div>

                                        <div class="form-check" style="margin-right: 20px;">
                                            <input class="form-check-input" type="radio"
                                                name="jawaban[{{ $data->kuesioner_kepuasan_mitra_id }}]" value="Baik"
                                                id="baik_{{ $index }}">
                                            <label class="form-check-label" for="baik_{{ $index }}">B. Baik</label>
                                        </div>

                                        <div class="form-check" style="margin-right: 20px;">
                                            <input class="form-check-input" type="radio"
                                                name="jawaban[{{ $data->kuesioner_kepuasan_mitra_id }}]" value="Kurang Baik"
                                                id="cukup_{{ $index }}">
                                            <label class="form-check-label" for="cukup_{{ $index }}">C. Kurang Baik</label>
                                        </div>

                                        <div class="form-check" style="margin-right: 20px;">
                                            <input class="form-check-input" type="radio"
                                                name="jawaban[{{ $data->kuesioner_kepuasan_mitra_id }}]"
                                                value="Tidak Baik" id="kurang_{{ $index }}">
                                            <label class="form-check-label" for="kurang_{{ $index }}">D. Tidak Baik</label>
                                        </div>
                                    </li>
                                @endforeach
                                <li>
                                    <div>Saran dan Rekomendasi:</div>
                                    <div class="form-floating mb-4">
                                        <textarea id="textareaExample" class="form-control" placeholder="Textarea" style="height: 150px"
                                            name="saran_rekomendasi" required></textarea>
                                        <label for="textareaExample">Saran dan Rekomendasi</label>
                                    </div>
                                </li>
                            </ol>
                            <button class="btn btn-sm rounded-pill text-white" id="signButton" type="button"
                                style="margin-left: 30px; background-color:green;">Sign This Form</button>
                        </form>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </section>
@endsection

@section('page-style')
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.0/dist/sweetalert2.min.css" rel="stylesheet">
@endsection

@section('page-script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.0/dist/sweetalert2.min.js"></script>

    <script>
        document.getElementById('signButton').addEventListener('click', function(event) {
            event.preventDefault(); // Prevent form submission

            // Check if all required fields are filled
            var isValid = true;
            var formElements = document.querySelectorAll('[name^="jawaban"], #textareaExample');

            // Check all radio buttons for each question
            formElements.forEach(function(element) {
                if (element.type === 'radio' && !document.querySelector('[name="' + element.name +
                        '"]:checked')) {
                    isValid = false;
                }
                if (element.type === 'textarea' && !element.value.trim()) {
                    isValid = false;
                }
            });

            if (!isValid) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Harap mengisi semua pertanyaan dan juga saran rekomendasi!',
                });
                return;
            }

            // If everything is filled, show confirmation dialog
            Swal.fire({
                title: 'Konfirmasi Persetujuan',
                text: 'Dengan meng-klik tombol ini, saya selaku mitra {{ $data->jenis_hibah }}, menyatakan bahwa semua data dan jawaban yang saya berikan dalam formulir ini adalah benar dan sesuai dengan pengetahuan saya. Saya memahami bahwa data ini akan digunakan untuk keperluan evaluasi mitra.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#00FF00',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Saya Setuju',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('signFormKepuasanDigital').submit(); // Submit form if confirmed
                }
            });
        });
    </script>
@stop