@extends('layouts.admin.master')
@section('tab-name','سوالات پرتکرار')
@section('content')
    <div class="body d-flex py-3">
        <div class="container-fluid">
            <div class="page-header">
                <div
                    class="card-header py-3 no-bg bg-transparent border-0 px-0 flex-wrap">
                    <h3 class="fw-bolder ms-1">
                        سوالات پرتکرارِ "{{$data->title}}"
                    </h3>
                    <br>

                    <div class="row m-0 w-100 dashboard-content" id="app34534567">
                        <div class="col-lg-6 col-12 mx-auto py-1 px-0">
                            <h3 class="bg-white py-2 px-4 rounded-lg">
                                اضافه کردن
                            </h3>
                            <div class="card rounded-lg border-0 p-3">
                                <form method="post" action="{{route('admin.myFaq.store')}}"
                                      enctype="multipart/form-data">
                                    <div class="card rounded-lg border-0 p-3 m-0">
                                        <div class="row w-100 m-0">
                                            @csrf
                                            <input type="hidden" name="faqable_id" value="{{$id}}">
                                            <input type="hidden" name="faqable_type" value="{{$type}}">
                                            <div class="row w-100 m-0 p-2 border" v-for="me in number">
                                                <div class="col-lg-12 p-2 form-group m-0">
                                                    <label for="question" class="col-form-label">سوال</label>
                                                    <textarea class="form-control" type="text" id="question"
                                                              name="question[]">
{{--                                                                @if(isset($data->question)){{$data->question}}@endif--}}
                                                            </textarea>
                                                </div>
                                                <div class="col-lg-12 p-2 form-group m-0">
                                                    <label for="question" class="col-form-label">پاسخ</label>
                                                    <textarea class="form-control" type="text" id="answer"
                                                              name="answer[]">
{{--                                                                @if(isset($data->answer)){{$data->answer}}@endif--}}
                                                            </textarea>
                                                </div>

                                                {{--                                                        TODO: ahora_fix - fix is_active saving as array  --}}
{{--                                                <div class="col-md-3 col-6 p-2">--}}
{{--                                                    <div class="form-check form-switch">--}}
{{--                                                        <input type="hidden" name="is_active" value="0">--}}
{{--                                                        <input class="form-check-input" type="checkbox"--}}
{{--                                                               id="is_active" name="is_active[]" multiple--}}
{{--                                                               value="1"--}}
{{--                                                            {{ (old('is_active', $item->is_active ?? true)) ? 'checked' : '' }}--}}
{{--                                                        >--}}
{{--                                                        <label class="form-check-label"--}}
{{--                                                               for="is_active">فعال</label>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
                                            </div>
                                            <div class="col-lg-6 px-0 pt-3">
                                                <div class="form-group m-0">
                                                    <button type="submit" class="btn btn-success">ذخیره</button>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 text-end px-0 pt-3">
                                                <a @click="plusMe()" class="btn btn-default btn-primary">
                                                    <span class="fa fa-plus">اضافه کردن چندتایی</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-6 col-12">
                            <div class="table-responsive d-flex align-items-center">
                                <table id="myDataTable"
                                       class="table align-middle border-custom mb-0">
                                    <thead class="text-center text-light">
                                    <tr>
                                        <th class="fw-bolder">
                                            #
                                        </th>
                                        <th class="fw-bolder">
                                            سوال
                                        </th>
                                        <th class="fw-bolder">
                                            پاسخ
                                        </th>
                                        <th class="fw-bolder">
                                            وضعیت
                                        </th>
                                        <th class="fw-bolder">
                                            عملیات
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody class="text-center text-light">
                                    @forelse($data->faqs as $item)
                                        <tr>
                                            <td>
                                                {{ $loop->iteration }}
                                            </td>
                                            <td>
                                                {{$item->question}}
                                            </td>
                                            <td>
                                                {{$item->answer }}
                                            </td>
                                            <td>
                                                @if($item->is_active)
                                                    <span class="badge" style="background-color: #28a745;">فعال</span>
                                                @else
                                                    <span class="badge" style="background-color: #dc3545;">غیرفعال</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <div data-bs-toggle="tooltip" title="ویرایش">
                                                        <a href="{{ route('admin.myFaq.edit', ['type'=>class_basename($data) , 'id'=>$data->id , 'faq'=>$item->id] )  }}"
                                                           class="btn-action btn-edit-soft">
                                                            <i class="bi bi-pencil-square"></i>
                                                        </a>
                                                    </div>

                                                    {{--                                            <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="نمایش در سایت">--}}
                                                    {{--                                                <a href="{{route('site.blog.detail',$data->url)}}" target="_blank"--}}
                                                    {{--                                                   class="btn-action btn-outline-custom">--}}
                                                    {{--                                                    <i class="bi bi-eye fs-5"></i>--}}
                                                    {{--                                                </a>--}}
                                                    {{--                                            </div>--}}


                                                    <div data-bs-toggle="tooltip" title="حذف">
                                                        <form action="{{ route('admin.myFaq.destroy', $item->id) }}"
                                                              method="POST"
                                                              class="delete-form m-0">
                                                            @csrf @method('DELETE')
                                                            <button type="submit" class="btn-action btn-delete-soft">
                                                                <i class="bi bi-trash3"></i>
                                                            </button>
                                                        </form>
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-3">
                                                هیچ سوالی یافت نشد.
                                            </td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            var app = new Vue({
                el: '#app34534567',
                data: {
                    number: 1
                },
                methods: {
                    plusMe: function () {
                        this.number = this.number + 1;
                    }
                }
            })
        </script>
        <script type="text/javascript">
            $(function () {
                var opts = $('#optlist option').map(function () {
                    return [[this.value, $(this).text()]];
                });

                $('#someinput').keyup(function () {
                    var rxp = new RegExp($('#someinput').val(), 'i');
                    var optlist = $('#optlist').empty();
                    opts.each(function () {
                        if (rxp.test(this[1])) {
                            optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
                        }
                    });
                });
            });
        </script>
    @endpush
@stop