<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="{{ route("admin.dashboard") }}">داشبورد</a></li>
                            <li class="breadcrumb-item"><a href="{{ route("experts.index") }}">مدیریت متخصصان</a></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($cities as $city)
                            <a class="list-group-item list-group-item-action" id="list-{{$city->id}}-list"
                               data-toggle="list" href="#list-{{$city->id}}" role="tab"
                               aria-controls="{{$city->id}}">{{$city->name}}</a>
                        @endforeach
                    </div>
                </div>
                <div class="col-8">
                    <form action="{{route('experts.regions_sync',$user->id)}}" method="post">
                        <div class="tab-content" id="nav-tabContent">
                            @foreach($cities as $city)
                                <div class="tab-pane fade show" id="list-{{$city->id}}" role="tabpanel"
                                     aria-labelledby="list-{{$city->id}}-list">
                                    <div class="mt-3 p-2">
                                        @csrf
                                        <div class="d-flex flex-wrap col-12">
                                            @foreach($city->regions as $region)
                                                <div class="form-check col-sm-4 mb-sm-2">
                                                    <input
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        name="regions[{{$region->id}}]"
                                                        value="{{$region->id}}"
                                                        id="flexCheckChecked"
                                                        @foreach($user->regions as $reg)
                                                        @if($region->id == $reg->id)
                                                        checked
                                                        @endif
                                                        @endforeach
                                                    />
                                                    <label class="form-check-label" for="flexCheckChecked">
                                                        {{$region->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>
