@extends('layouts.admin')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Template Pertanyaan</h6>
                    <button class="btn btn-success btn-sm" onclick="addSimpulan()">Tambah Simpulan</button>
                </div>
                <div class="card-body">
                    <table class="table table-bordered w-100" id="table-template-pertanyaan">
                        <tbody>
                            @php
                                $noSimpulan = 1;
                            @endphp
                            @foreach ($simpulans as $s)
                                <tr>
                                    <td style="width: 50px;">{{ $noSimpulan++ }}</td>
                                    <td class="bg-light">
                                        <strong>{{ $s->simpulan }}</strong>
                                    </td>
                                    <td style="width: 150px;">
                                        <button class="btn btn-sm btn-success"
                                            onclick="addPertanyaan({{ $s->id }})"><i class="fa fa-plus"></i></button>
                                        <button class="btn btn-sm btn-info"
                                            onclick="editSimpulan({{ $s->id }}, '{{ $s->simpulan }}')"><i
                                                class="fa fa-edit"></i></button>
                                        <button class="btn btn-sm btn-danger"
                                            onclick="deleteSimpulan({{ $s->id }})"><i
                                                class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                                @php
                                    $noPertanyaan = 1;
                                @endphp
                                @foreach ($s->pertanyaans as $p)
                                    <tr>
                                        <td>{{ $noSimpulan - 1 . '.' . $noPertanyaan++ }}</td>
                                        <td>{{ $p->pertanyaan }}</td>
                                        <td class="text-center">
                                            <button class="btn btn-sm text-info"
                                                onclick="editPertanyaan({{ $p->id }})"><i
                                                    class="fa fa-edit"></i></button>
                                            <button class="btn btn-sm text-danger"
                                                onclick="deletePertanyaan({{ $p->id }})"><i
                                                    class="fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalPertanyaan" tabindex="-1">
        <div class="modal-dialog">
            <form id="formPertanyaan">
                @csrf
                <input type="hidden" name="id" id="p_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>Form Pertanyaan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Simpulan</label>
                            <select name="simpulan_id" id="p_simpulan_id" class="form-select" required>
                                @foreach ($simpulans as $s)
                                    <option value="{{ $s->id }}">{{ $s->simpulan }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Pertanyaan</label>
                            <textarea name="pertanyaan" id="p_pertanyaan" class="form-control" rows="3" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalSimpulan" tabindex="-1">
        <div class="modal-dialog">
            <form id="formSimpulan">
                @csrf
                <input type="hidden" name="id" id="s_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Master Simpulan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Nama Simpulan</label>
                            <input type="text" name="simpulan" id="s_simpulan" class="form-control" required
                                placeholder="Contoh: Simpulan Lingkungan Internal">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Simpulan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var table = $('#table-pertanyaan').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('template-pertanyaan.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'nama_simpulan',
                        name: 'nama_simpulan'
                    },
                    {
                        data: 'pertanyaan',
                        name: 'pertanyaan'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });

            window.addPertanyaan = function(idsimpulan) {
                $('#p_id').val(''); // Kosongkan ID
                $('#formPertanyaan')[0].reset(); // Reset isi form
                if (idsimpulan) {
                    $('#p_simpulan_id').val(idsimpulan).trigger('change'); // Set simpulan jika ID diberikan
                }
                $('#modalPertanyaan .modal-title').text('Tambah Template Pertanyaan');
                $('#modalPertanyaan').modal('show');
            }

            window.editPertanyaan = function(id) {
                // Tampilkan loading sebentar
                Swal.fire({
                    title: 'Mengambil data...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "/template-pertanyaan/" + id + "/edit",
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        Swal.close();

                        // Isi field modal dengan data yang didapat
                        $('#p_id').val(data.id);
                        $('#p_simpulan_id').val(data.simpulan_id).trigger(
                            'change'); // trigger change jika pakai select2
                        $('#p_pertanyaan').val(data.pertanyaan);

                        // Ubah judul modal dan tampilkan
                        $('#modalPertanyaan .modal-title').text('Edit Template Pertanyaan');
                        $('#modalPertanyaan').modal('show');
                    },
                    error: function() {
                        Swal.fire('Error', 'Gagal mengambil data pertanyaan', 'error');
                    }
                });
            }

            $('#formPertanyaan').on('submit', function(e) {
                e.preventDefault();
                $.post("{{ route('template-pertanyaan.store-pertanyaan') }}", $(this).serialize(),
                    function(
                        res) {
                        $('#modalPertanyaan').modal('hide');
                        // table.ajax.reload();
                        // Swal.fire('Berhasil', res.success, 'success');
                        Swal.fire('Berhasil', res.success, 'success').then(() => {
                            location
                                .reload(); // Reload untuk memperbarui daftar di sidebar dan dropdown
                        });
                    });
            });

            window.deletePertanyaan = function(id) {
                Swal.fire({
                    title: 'Apakah Anda yakin?',
                    text: "Data pertanyaan ini akan dihapus secara permanen!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Tampilkan loading saat proses hapus
                        Swal.fire({
                            title: 'Sedang menghapus...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: "/template-pertanyaan/" + id,
                            type: "DELETE",
                            data: {
                                "_token": "{{ csrf_token() }}" // Pastikan CSRF token terkirim
                            },
                            success: function(res) {
                                Swal.fire('Berhasil Dihapus!', res.success, 'success').then(
                                    () => {
                                        location
                                            .reload(); // Reload untuk memperbarui daftar di sidebar dan dropdown
                                    });
                            },
                            error: function(err) {
                                Swal.fire(
                                    'Error!',
                                    'Gagal menghapus data. Silakan coba lagi.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            }

            // Fungsi untuk memicu Modal Tambah Simpulan
            window.addSimpulan = function() {
                $('#s_id').val('');
                $('#formSimpulan')[0].reset();
                $('#modalSimpulan').modal('show');
            }

            // Submit Form Simpulan via AJAX
            $('#formSimpulan').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('template-pertanyaan.store-simpulan') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function(res) {
                        $('#modalSimpulan').modal('hide');
                        Swal.fire('Berhasil', res.success, 'success').then(() => {
                            location
                                .reload(); // Reload untuk memperbarui daftar di sidebar dan dropdown
                        });
                    },
                    error: function(err) {
                        Swal.fire('Error', 'Gagal menyimpan data', 'error');
                    }
                });
            });

            // Fungsi Edit Simpulan (jika dibutuhkan)
            window.editSimpulan = function(id, nama) {
                $('#s_id').val(id);
                $('#s_simpulan').val(nama);
                $('#modalSimpulan').modal('show');
            }

            window.deleteSimpulan = function(id) {
                Swal.fire({
                    title: 'Apakah Anda yakin?',
                    text: "Data simpulan ini akan dihapus secara permanen!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Tampilkan loading saat proses hapus
                        Swal.fire({
                            title: 'Sedang menghapus...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: "/template-pertanyaan/simpulan/" + id,
                            type: "DELETE",
                            data: {
                                "_token": "{{ csrf_token() }}" // Pastikan CSRF token terkirim
                            },
                            success: function(res) {
                                Swal.fire('Berhasil Dihapus!', res.success, 'success').then(
                                    () => {
                                        location
                                            .reload();
                                    });
                            },
                            error: function(err) {
                                Swal.fire(
                                    'Error!',
                                    'Gagal menghapus data. Silakan coba lagi.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            }
        });
    </script>
@endpush