<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">ویرایش خدمات متخصص : {{$user->name ?? $user->mobile}}</h4>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            {{--                            <li class="breadcrumb-item"><a href="#">خانه</a></li>--}}
                            <li class="breadcrumb-item">مدیریت کاربران</li>
                            <li class="breadcrumb-item active">ویرایش  خدمات متخصص</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <section class="content mt-sm-3">
            <div class="row col-11">
                <div class="col-4">
                    <div class="list-group" id="list-tab" role="tablist">
                        @foreach($services as $service)
                            <a class="list-group-item list-group-item-action" id="list-{{$service->id}}-list"
                               data-toggle="list" href="#list-{{$service->id}}" role="tab"
                               aria-controls="{{$service->id}}">{{$service->name}}</a>
                        @endforeach
                    </div>
                </div>
                <div class="col-8">
                    <form action="{{route('experts.experts_services_sync',$user->id)}}" method="post">
                        <div class="tab-content" id="nav-tabContent">
                            @foreach($services as $service)
                                <div class="tab-pane fade show {{$loop->index == 0 ? 'active' : ''}}" id="list-{{$service->id}}" role="tabpanel"
                                     aria-labelledby="list-{{$service->id}}-list">
                                    <div class="mt-3 p-2">
                                        @csrf
                                        <div class="d-flex flex-wrap col-12">
                                            @foreach($service->children as $child)
                                                <div class="form-check col-sm-4 mb-sm-2">
                                                    <input
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        name="services[{{$child->id}}]"
                                                        value="{{$child->id}}"
                                                        id="flexCheckChecked"
                                                        @foreach($user->services as $reg)
                                                        @if($child->id == $reg->id)
                                                        checked
                                                        @endif
                                                        @endforeach
                                                    />
                                                    <label class="form-check-label" for="flexCheckChecked">
                                                        {{$child->name}}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="submit" class="btn btn-primary btn-block mt-3">ویرایش</button>
                    </form>
                </div>
            </div>
            </div>
        </section>
    </x-slot>
    @if(session()->get('status') == 'synced')
        <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>
