@include('header')
<style>
    .title_div {
        display: flex;
        width: 100%;
        background-color: #F2F5F7;

    }

    .users_dtl {
        cursor: pointer !important;
        color: white;
        background-color: #0054bb;
        padding: 5px 20px 5px 20px;
        border-radius: 5px;
        display: block !important;
        white-space: nowrap !important;
        width: fit-content;
    }

    .users_dtl:hover {
        color: white;
        background-color: #1a6bcc;
    }

    .add_box {
        background-color: #f5f5f5;
        margin: 50px 0 50px 0;
        padding: 20px 10px 20px 10px;
    }

    .add_box_title {
        padding-bottom: 25px;
        margin-right: 10px;
    }

    .add_box_inp {
        width: 100%;
        border-radius: 5px;
        border: 0.5px solid #e0e0e0;
        padding: 10px;
    }

    .add_box_sub {
        width: 20%;
        border-radius: 5px;
        border: none;
        padding: 10px;
        color: white;
        background-color: #00A000;
    }
</style>

<div class="x_panel">
    <div class="x_title">
        <h2>مدیریت سوالات متداول</h2>
        <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="container add_box">
        <div class="row">
            <h4 class="add_box_title">اضافه کردن سوال جدید</h4>
            <form id="addque">
                <div class="col-lg-3">
                    <input type="text" placeholder="نام سوال" class="add_box_inp" name="question">
                </div>
                <div class="col-lg-3">
                    <input type="text" placeholder="نام جواب" class="add_box_inp" name="answer">
                </div>
                <div class="col-lg-3">
                    <select name="type" class="add_box_inp">
                        <option>انتخاب اپلیکیشن</option>
                        <option value="user">کاربر</option>
                        <option value="worker">استادکار</option>
                    </select>
                </div>
                <div class="col-lg-3">
                    <input type="hidden" name="action" value="add">
                    <input type="submit" value="ثبت" class="add_box_sub">
                </div>
            </form>
        </div>
    </div>

    <div class="x_content">

        <!-- start accordion -->
        <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
            @foreach($items as $item)
                <div class="panel">
                    <div class="title_div">
                        <a class="panel-heading collapsed" role="tab" id="headingThree" data-toggle="collapse"
                           data-parent="#accordion" href="#collapse{{$item->id}}" aria-expanded="false"
                           aria-controls="collapseThree">
                            @if($item->type == 'worker')
                                <h4 class="panel-title" style="color: red">استادکار</h4>
                            @else
                                <h4 class="panel-title" style="color: red">کاربر</h4>

                            @endif
                            <h4 class="panel-title">{{$item->question}}</h4>
                        </a>
                        <a onclick="edit_que({{$item->id}})"><i class="fa fa-pencil-square" style="font-size: 30px"></i></a>
                        <a onclick="delete_que({{$item->id}})"><i class="fa fa-trash" style="font-size: 30px; margin-right: 10px"></i></a>

                    </div>

                    <div id="collapse{{$item->id}}" class="panel-collapse collapse" role="tabpanel"
                         aria-labelledby="headingThree" aria-expanded="false">
                        <div class="panel-body">
                            <p>{{$item->answer}}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <!-- end of accordion -->

    </div>
</div>

<script src="../resources/js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="sweetalert2.all.min.js"></script>

<script>
    // add parent
    var form = $("#addque")
    form.submit(function (e) {
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: '/panel/question_page_action',
            data: form.serialize(),
            success: function (res) {
                if (res.status == 'ok') {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'تغییرات اعمال شد',
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        location.reload()
                    })
                } else {
                    alert('مشکلی پیش آمد ، مجدد تلاش کنید')
                }
            },
            error: function (res) {
                console.log(res);
            },
        });
    })

    // edit que
    function edit_que(id) {
        Swal.fire({
            title: 'ویرایش سوال',
            icon: 'question',
            html: `
        <input type="text" id="question" class="swal2-input" placeholder="سوال">
        <input type="text" id="answer" class="swal2-input" placeholder="جواب">
      `,
            confirmButtonText: 'ثبت',
            confirmButtonColor: '#00A000',

            preConfirm: () => {
                const question = document.getElementById('question').value;
                const answer = document.getElementById('answer').value;

                console.log({
                    action: 'edit',
                    que_id: id,
                    question: question,
                    answer: answer,
                })

                $.ajax({
                    type: "POST",
                    url: '/panel/question_page_action',
                    data: {
                        action: 'edit',
                        que_id: id,
                        question: question,
                        answer: answer,
                    },
                    success: function (res) {
                        if (res.status == 'ok') {
                            alert('سوال ویرایش شد')
                            location.reload();
                        } else {
                            alert('مشکلی پیش آمد. لطفا مجدد تلاش کنید')
                        }
                    },
                    error: function (res) {
                        console.log(res);
                    },
                });
            }
        });
    }

    // delete que
    function delete_que(id) {
        Swal.fire({
            title: 'آیا از حذف سوال مطمئنید؟',
            icon: 'question',
            confirmButtonText: 'ثبت',
            confirmButtonColor: '#00A000',

            preConfirm: () => {
                console.log({
                    action: 'delete',
                    que_id: id,
                })

                $.ajax({
                    type: "POST",
                    url: '/panel/question_page_action',
                    data: {
                        action: 'delete',
                        que_id: id,
                    },
                    success: function (res) {
                        if (res.status == 'ok') {
                            alert('سوال با موفقیت حذف شد')
                            location.reload();
                        } else {
                            alert('مشکلی پیش آمد. لطفا مجدد تلاش کنید')
                        }
                    },
                    error: function (res) {
                        console.log(res);
                    },
                });
            }
        });
    }
</script>

@include('footer')