@extends('layouts.default')
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">

        <div class="post d-flex flex-column-fluid" id="kt_post">
            <div id="kt_content_container" class="container-xxl">
                <div class="card card-flush py-4">
                    <div class="card-header d-flex align-items-center">
                        <div class="card-title">
                            <h2>Survey Questions</h2>
                        </div>
                        <div>
                            <button class="btn btn-lg btn-light btn-active-light-primary addSurvey">Add Survey
                                Question</button>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="row">
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
                                <!--begin::Table head-->
                                <thead class="border-bottom border-gray-200 fs-7 fw-bolder">
                                    <!--begin::Table row-->
                                    <tr class="text-start text-muted text-uppercase gs-0">
                                        <th class="min-w-50px sorting" tabindex="0"
                                            aria-controls="kt_table_customers_payment" rowspan="1" colspan="1"
                                            aria-label="Invoice No.: activate to sort column ascending"
                                            style="width: 139.344px;">No.</th>
                                        <th class="min-w-70px sorting" tabindex="0"
                                            aria-controls="kt_table_customers_payment" rowspan="1" colspan="1"
                                            aria-label="Status: activate to sort column ascending"
                                            style="width: 119.672px;">question</th>
                                        <th class="min-w-70px sorting" tabindex="0"
                                            aria-controls="kt_table_customers_payment" rowspan="1" colspan="1"
                                            aria-label="Status: activate to sort column ascending"
                                            style="width: 119.672px;">answers</th>
                                        <th class="min-w-70px sorting" tabindex="0"
                                            aria-controls="kt_table_customers_payment" rowspan="1" colspan="1"
                                            aria-label="Status: activate to sort column ascending"
                                            style="width: 119.672px;">Actions</th>

                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fs-6 fw-bold text-gray-600">
                                    @foreach ($surveyQuestion as $item)
                                        <tr>
                                            <!--begin::Invoice=-->
                                            <td>
                                                <a class="text-gray-600 text-hover-primary mb-1">{{ $item->id }}</a>
                                            </td>
                                            <!--end::Invoice=-->
                                            <!--begin::Status=-->
                                            <td>
                                                <a class="text-gray-600 text-hover-primary mb-1">{{ $item->question }}
                                                </a>
                                            </td>
                                            <td>
                                                <div class="">
                                                    @foreach ($item->questionItems as $answer)
                                                        <button
                                                            class="btn btn-primary p-2 mb-2">{{ $answer->item }}</button>
                                                    @endforeach
                                                </div>
                                            </td>

                                            <td>
                                                <div>
                                                    <a href="#" class="editButton"
                                                        data-question-id="{{ $item->id }}" data-bs-toggle="modal"
                                                        data-bs-target="#kt_modal_view_users"><button
                                                            class="btn btn-sm btn-light btn-active-light-primary">Edit</button></a>
                                                    <a href="{{ route('delete-survey', ['id' => $item->id]) }}"
                                                        class="editButton"
                                                        onclick="return confirm('Are you sure you want to delete this item?')">
                                                        <button
                                                            class="btn btn-sm btn-light btn-active-light-danger">Delete</button>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="kt_modal_view_users" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <!--begin::Close-->
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--begin::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                        <!--begin::Heading-->
                        <!--begin::Title-->
                        <h1 class="mb-3 text-center">Quick Survey</h1>
                        <div>
                            <form id="updateSurveyForm" action="{{ route('update-add-survey') }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="question_id" class="question-id" value="">

                                <label class="form-label">Question</label>
                                <input type="text" name="question"
                                    class="form-control form-control-lg form-control-solid mb-3 question" value="">

                                <label class="form-label">Answers</label>
                                <input id="kt_ecommerce_add_category_meta_keywords" name="answers"
                                    class="form-control mb-2">

                                <button type="submit" class="btn btn-primary mt-2"
                                    id="kt_account_profile_details_submit">Update</button>
                            </form>
                        </div>
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>

        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <script src="{{ asset('asset') }}/js/scripts.bundle.js"></script>
        <script src="{{ asset('asset') }}/js/custom/apps/ecommerce/catalog/save-category.js"></script>

        <script>
            $(document).ready(function() {
                $('.editButton').click(function(e) {
                    var surveyId = $(this).data('question-id');
                    $.ajax({
                        url: '{{ url('/add-survey-question') }}/' + surveyId,
                        type: 'GET',
                        success: function(response) {
                            populateModal(response);
                            $('#updateSurveyForm').data('survey-id', surveyId);
                        },
                        error: function(error) {
                            console.error('Error:', error);
                        }
                    });
                });

                function populateModal(data) {
                    var modal = $('#kt_modal_view_users');
                    modal.find('.question').val(data.question);
                    modal.find('.question-id').val(data.id);
                    var itemsInput = modal.find('#kt_ecommerce_add_category_meta_keywords');
                    itemsInput.val(data.question_items.map(item => item.item).join(', '));
                    modal.modal('show');
                }

                $(".addSurvey").click(function() {

                    var currentURL = window.location.href;
                    var urlParts = currentURL.split('/');
                    var lastPart = urlParts[urlParts.length - 1];

                    if (lastPart) {
                        window.location.href = `{{ asset('/get-add-survey?survey_id=') }}${lastPart}`;
                    }

                });



                // console.log('Value after the last backslash:', lastPart);
            });
        </script>
    @endsection