<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">
                        <h4 class="m-0 text-dark">مشخصات خدمت : {{$service->name}}</h4>
                    </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">
                    <h5 class="card-title small">مشخصات خدمت</h5>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form class="mt-3 p-2">
                    <div class="form-group">
                        <label class="text-muted" for="service">نام خدمت</label>
                        <input type="text" name='name' class="form-control" id="service"
                               value="{{$service->name}}"/>
                    </div>
                    <div class="form-group">
                        <label class="text-muted" for="status">وضعیت</label>
                        <input type="text" name='name' class="form-control" id="status"
                               value="{{$service->statusInFa}}"/>
                    </div>
                    <div class="form-group">
                        <label class="text-muted" for="parent">دسته پدر</label>
                        <input type="text" name='name' class="form-control" id="parent"
                               value="{{$service->parent->name}}"/>
                    </div>
                    <div class="form-group">
                        <label class="text-muted" for="slug">URL</label>
                        <input type="text" name='name' class="form-control" id="slug"
                               value="{{$service->slug}}"/>
                    </div>
                    <div class="form-group">
                        <label class="text-muted" for="title">عنوان</label>
                        <input type="text" name='name' class="form-control" id="title"
                               value="{{$service->title}}"/>
                    </div>
                    <div class="form-group">
                        <label class="text-muted" for="priority">اولویت</label>
                        <input type="text" name='name' class="form-control" id="priority"
                               value="{{$service->priority ?? 'وارد نشده'}}"/>
                    </div>
                    <div class="form-group">
                        <label class="text-muted" for="days_provide">مهلت سفارش</label>
                        <input type="text" name='name' class="form-control" id="days_provide"
                               value="{{$service->days_provide ?? 'وارد نشده'}}"/>
                    </div>
                    <div class="form-group mx-auto my-2 d-flex justify-content-center">
                        @if($service->media_id)
                            <img src="{{ $service->thumb() }}" class="mx-auto" style="width: 6rem;height: 6rem">
                        @else
                            بدون تصویر
                        @endif
                    </div>
                </form>
            </div>

            @if($service->description != null)
                <h5 class="my-2 mr-sm pr-3 py-4-2">توضیحاته مربوطه</h5>
                <div class="d-md-flex flex-wrap justify-content-around">
                    @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
                </div>
            @endif

            @if($service->questions()->exists())
                <h5 class="my-2 mr-sm pr-3 py-4-2">سوالات مربوطه</h5>
                <div class="d-md-flex flex-wrap justify-content-around mb-2">
                    @foreach($service->questions as $item)
                        <ul class="list-group mb-2" id="{{$item->id}}">
                            <li class="list-group-item active">{{$item->content}}</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}}
                                                {{$child->price == 0 ? '' : '-'.$child->price.' تومان '}}
                                            </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}}
                                                {{$child->price == 0 ? '' : '-'.$child->price.' تومان '}}
                                            </label>
                                        </div>
                                    @endif
                                </li>
                            @endforeach
                            <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
                </div>
            @endif

            @if($service->regions()->exists())
                <h5 class="my-2 mr-sm pr-3 py-4-2">مناطق مربوطه</h5>
                <div class="card col-sm-11 mx-auto ">
                    <div class="card-body d-flex flex-wrap">
                        @foreach($service->regions as $region)
                            <p class="card-text ml-3">
                                {{$region->name}}
                            </p>
                        @endforeach
                    </div>
                </div>
            @endif
{{--            {{dd($service->service_meta)}}--}}
            @if($service->service_meta()->exists())
                <h5 class="my-2 mr-sm pr-3 py-4-2">فاکتور مربوطه</h5>
                    <div class="tableSection bg-light smSmall col-12 p-0 pr-sm-4 pl-sm-4 pt-sm-4 pb-0 table-responsive">
                        <table class="table table-striped text-center col-12">
                            <thead>
                            <tr>
                                <th scope="col">عنوان</th>
                                <th scope="col">واحد</th>
                                <th scope="col">قیمت</th>
                                <th scope="col">تخفیف خالص</th>
                                <th scope="col">تخفیف درصدی</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($service->service_meta as $price)
                                <tr id="tr">
                                    <th scope="row">{{$price['value']['name']}}</th>
                                    <td>{{$price['value']['unit']}}</td>
                                    <td>{{$price['value']['price']}}</td>
                                    <td>{{$price['value']['discount_pure']}}</td>
                                    <td>{{$price['value']['discount_percent']}}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
            @endif
        </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( 'description' );
    </script>
</x-admin-panel-layout>
