<x-admin-panel-layout>
    <x-slot name="title">
        تعریف سوالات خدمت
    </x-slot>
    <x-slot name="main">
        <!-- Checked checkbox -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">ایجاد سوالات خدمت : {{$service->name}}</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="{{ route("admin.dashboard") }}">داشبورد</a></li>
                            <li class="breadcrumb-item"><a href="{{ route("service.index") }}">مدیریت خدمات</a></li>
                            <li class="breadcrumb-item active">ایجاد سوالات خدمت</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <section class="content mt-sm-3 d-flex flex-column justify-content-around">
            <div class="card p-0 card-primary col-md-7 mx-auto mb-4">
                <div class="card-header">
                    <h3 class="card-title small">ایجاد سوالات جدید</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form class="mt-3 p-2" action="{{route('service.question_store',$service->id)}}" method="post">
                    @csrf
                    <div class="form-group">
                        <input type="text" name='question' class="form-control" id="question"
                               placeholder="متن سوال ..." value="{{old('question')}}" required>
                        @error('question')
                        <div class="invalid">
                            <p class="text-danger" style="font-size: 0.8rem;padding-right: 0.2rem">{{$message}}</p>
                        </div>
                        @enderror
                    </div>
                    <div class="form-check pr-4">
                        <input class="form-check-input" type="radio" name="type" id="typeCheckbox"
                               value="radio" checked>
                        <label class="form-check-label text-muted" for="typeCheckbox">
                            نوع سوال radio button باشد
                        </label>
                    </div>
                    <div class="form-check pr-4 mb-sm-3 mt-sm-2">
                        <input class="form-check-input" type="radio" name="type" id="typeRadioBtn"
                               value="checkbox">
                        <label class="form-check-label text-muted" for="typeRadioBtn">
                            نوع سوال checkbox باشد
                        </label>
                    </div>
                    @error('type')
                    <div class="invalid">
                        <p class="text-danger" style="font-size: 0.8rem;padding-right: 0.2rem">{{$message}}</p>
                    </div>
                    @enderror
                    @for($i = 0 ; $i < 10 ; $i++ )
                        <div class="form-group">
                            <input type="text" name='options[]' class="form-control" id="option.{{$i}}"
                                   placeholder="گزینه {{$i}}" value="{{old('options.'.$i)}}" {{$i==0 ? 'required' : ''}} >
                            @error('option.'.$i)
                            <div class="invalid">
                                <p class="text-danger" style="font-size: 0.8rem;padding-right: 0.2rem">{{$message}}</p>
                            </div>
                            @enderror
                        </div>
                    @endfor
                    <button type="submit" class="btn btn-primary btn-block mt-3">ثبت</button>
                </form>
            </div>
            <div class="d-md-flex flex-wrap justify-content-around mb-2">
                @if($service->questions)
                    @foreach($service->questions as $item)
                        <ul class="list-group mb-2 col-5" id="{{$item->id}}">
                            <li class="list-group-item active">
                                {{$item->content}}
                                <span class="d-block mt-2" style="
    font-size: 13px;
">
                                    شناسه سوال : {{$item->id}}
                                </span>
                            </li>
                            @foreach($item->children as $child)
                                <li class="list-group-item">
                                    @if($item->type == 'checkbox')
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                            <label class="form-check-label" for="defaultCheck1">
                                                {{$child->content}}
                                            </label>
                                        </div>
                                    @else
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="exampleRadios"
                                                   id="exampleRadios1" value="option1" checked>
                                            <label class="form-check-label" for="exampleRadios1">
                                                {{$child->content}}
                                            </label>
                                        </div>
                                    @endif
                                    <div class="float-left">
                                        <form class="form-inline d-flex justify-content-end">
                                            <label class="sr-only" for="price_{{$child->id}}">هزینه :</label>
                                            <input type="text" class="form-control  mr-sm-2 col-3" id="price_{{$child->id}}" placeholder="هزینه" value="{{$child->price == 0 ? '' : $child->price}}">
                                            <button type="submit" onclick="questionPrice(event,'{{route('service.question_price',$child->id)}}',{{$child->id}})" class="btn btn-outline-primary mr-2">ثبت</button>
                                        </form>
                                    </div>
                                </li>
                            @endforeach
                            <li class="list-group-item">
                                <form class="form-inline d-flex justify-content-center">
                                    <label class="sr-only" for="priority_{{$item->id}}">اولویت :</label>
                                    <input type="text" class="form-control  mr-sm-2 col-5" id="priority_{{$item->id}}" placeholder="اولویت نمایش سوال" value="{{$item->priority}}">
                                    <button type="submit" onclick="questionPriority(event,'{{route('service.question_priority',$item->id)}}',{{$item->id}})" class="btn btn-outline-primary mr-2 col-5 mr-2">ثبت</button>
                                </form>
                            </li>
                            <li class="list-group-item">
                                <form class="form-inline d-flex justify-content-center">
                                    <label  for="parent_question{{$item->id}}" style="
    font-size: 9px;
"> نوع سوال :</label>
                                    <select class="form-control  mr-sm-2 col-5" id="parent_question_{{$item->id}}">
                                        <option value="0" @if($item->parent_question == 0) selected @endif>سوال اصلی</option>
                                        @if($service_parent_questions->isNotEmpty())
                                            @foreach($service_parent_questions as $service_parent_question)
                                                @if($service_parent_question->id != $item->id)
                                                    <optgroup label="{{ $service_parent_question->content }}">
                                                        @foreach($service_parent_question->children as $children)
                                                            <option value="{{ $children->id }}" @if($item->parent_question == $children->id) selected @endif>{{ $children->content }}</option>
                                                        @endforeach
                                                    </optgroup>
                                                @endif
                                            @endforeach
                                        @endif

                                    </select>
                                    <button type="submit" onclick="questionSetParentQuestion(event,'{{route('service.question_parent_question',$item->id)}}',{{$item->id}})" class="btn btn-outline-primary mr-2 col-5 mr-2">ثبت</button>
                                </form>
                            </li>
                            <li class="list-group-item">
                                <span class="btn btn-outline-danger btn-block"
                                      onclick="deleteQuestionField(event,'{{route('service.question_delete',[$service->id,$item->id])}}',{{$item->id}})">
                                    حذف این سوال
                                </span>
                            </li>
                        </ul>
                    @endforeach
                @endif
            </div>
        </section>
    </x-slot>
    @if(session()->get('status') == 'created')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'ایجاد توضیحات با موفقیت انجام شد',
                })
            </script>
        </x-slot>
    @endif
    @if(session()->get('status') == 'deleted')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'حذف توضیحات با موفقیت انجام شد',
                })
            </script>
        </x-slot>
    @endif
    <script>
        // CKEDITOR.replace( 'question' );
    </script>
    @if(session()->get('status') == 'done')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'ویرایش جزئیات سفارش با موفقیت انجام شد',
                })
            </script>
        </x-slot>
    @endif
    @if(session()->get('status') == 'failed')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'error',
                    text: 'ویرایش جزئیات  با خطا مواجه شد',
                })
            </script>
        </x-slot>
    @endif
</x-admin-panel-layout>
