<x-admin-panel-layout>
    <x-slot name="title">
        تعریف توضیحات خدمت
    </x-slot>
    <x-slot name="linkCss">
        <script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/classic/ckeditor.js"></script>
    </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.description_store',$service->id)}}" method="post">
                    @csrf
                    <div class="form-group">
                        <input type="text" name='title' class="form-control" id="title"
                               placeholder="عنوان" value="{{old('title')}}" required>
                        @error('title')
                        <div class="invalid">
                            <p class="text-danger" style="font-size: 0.8rem;padding-right: 0.2rem">{{$message}}</p>
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <textarea type="text" name="desc" class="form-control" id="desc"
                                  placeholder="توضیحات ... " value="{{old('description')}}"></textarea>
                        @error('description')
                        <div class="invalid">
                            <p class="text-danger" style="font-size: 0.8rem;padding-right: 0.2rem">{{$message}}</p>
                        </div>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-primary btn-block mt-3">ثبت</button>
                </form>
            </div>
            <div class="d-md-flex flex-wrap justify-content-around">
                @if($service->description)
                    @foreach($service->description as $key => $item)
                        <div class="card col-md-5 mx-1" style="height: max-content" id="{{$key}}">
                            <div class="card-body">
                                <h5 class="card-title mb-2 text-muted">{{$item['title']}}</h5>
                                <p class="card-text">
                                    {!! $item['desc'] !!}
                                </p>
                                <button class="btn btn-outline-danger btn-block"
                                        onclick="deleteJsonField(event,'{{route('service.description_delete',[$service->id,$key])}}',{{$key}})">
                                    حذف این توضیح
                                </button>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </section>
    </x-slot>

    <x-slot name="linkScript">
        @if(session()->get('status') == 'created')
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'ایجاد توضیحات با موفقیت انجام شد',
                })
            </script>
        @endif
        @if(session()->get('status') == 'deleted')
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'حذف توضیحات با موفقیت انجام شد',
                })
            </script>
        @endif
            <script src="https://cdn.ckeditor.com/ckeditor5/29.0.0/inline/ckeditor.js"></script>
            <script>
                ClassicEditor
                    .create( document.querySelector( '#desc' ),{
                        toolbar: [
                            'heading', '|',
                            'fontfamily', 'fontsize', '|',
                            'alignment', '|',
                            'fontColor', 'fontBackgroundColor', '|',
                            'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
                            'link', '|',
                            'outdent', 'indent', '|',
                            'bulletedList', 'numberedList', 'todoList', '|',
                            'code', 'codeBlock', '|',
                            'insertTable', '|', 'blockQuote', '|',
                            'undo', 'redo'
                        ],
                        language: 'fa',
                        ui: 'fa',
                        content: 'fa'
                    } )
                    .catch( error => {
                        console.error( error );
                    } );
            </script>
    </x-slot>
    <script>
        // CKEDITOR.replace( 'description' );
    </script>
</x-admin-panel-layout>
