<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">لیست سر تیم ها</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("users.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="card">
                <div class="card-header">
                    <h3 class="card-title">سر تیم ها</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <div class="alert alert-success col-md-11 mx-auto mt-2 d-none" role="alert" id="alertDelUser">
                        سر تیم با موفقیت حذف گردید
                    </div>

                    <div class="mx-auto my-3 d-flex">
                        <button type="button" class="btn btn-primary mx-auto btn-sm" data-toggle="modal"
                                data-target="#exampleModalCenter">
                            جست و جو
                        </button>
                    </div>

                    <div class="tableSection bg-light smSmall p-0 pr-sm-4 pl-sm-4 pt-sm-4 pb-0 table-responsive">
                        <table class="table table-striped text-center small">
                            <thead>
                            <tr>
                                <th scope="col">شناسه</th>
                                <th scope="col">آواتار</th>
                                <th scope="col">نام</th>
                                <th scope="col">موبایل</th>
                                <th scope="col">شهرها</th>
                                <th scope="col">وضعیت</th>
                                <th scope="col">عملیات</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($users as $user)
                                <tr id="tr{{$user->id}}">
                                    <th scope="row">{{$user->id}}</th>
                                    <th scope="row">
                                        @if($user->profile_pic)
                                            <img src="{{$user->thumb()}}"
                                                 style="width: 3rem;height: 2.5rem">
                                        @else
                                            -
                                        @endif
                                    </th>
                                    <td>{{$user->name}},{{$user->lname}}</td>
                                    <td>{{$user->mobile}}</td>
                                    <td>
                                        @foreach($user->regions as $reg)
                                            <span >{{$reg->name}}</span>,
                                        @endforeach
                                    </td>
                                    <td class="{{$user->status == Mehrab\User\Models\User::ACTIVE ? 'text-success' : 'text-danger'}}">
                                        @if($user->status == Mehrab\User\Models\User::ACTIVE)
                                            در دسترس
                                        @elseif($user->status == Mehrab\User\Models\User::BAN)
                                            مسدود
                                        @else
                                            در دسترس نیست
                                        @endif
                                    </td>
                                    <td class="d-flex justify-content-center">
                                        {{--                                        <a class="btn btn-sm btn-danger" onclick="deleteItem(event,'{{route('users.destroy',$user->id)}}',{{$user->id}})" title="حذف"><i class="fa fa-trash text-light"></i></a>--}}
                                        <a class="btn btn-sm btn-success ml-3"
                                           href="{{route('team_leaders.show',$user->id)}}" title="مشاهده">
                                            <i class="fa fa-eye text-light" aria-hidden="true"></i>
                                        </a>
                                        <a class="btn btn-sm btn-danger ml-3"
                                           href="{{route('team_leaders.team_leaders_regions',$user->id)}}" title="مناطق ارائه">
                                            <i class="fa fa-map-marker text-light" aria-hidden="true"></i>
                                        </a>
                                        <a class="btn btn-sm btn-primary ml-3"
                                           href="{{route('team_leaders.team_leaders_services',$user->id)}}"
                                           title="مدیریت تخصص ها">
                                            <i class="fa fa-wrench text-light" aria-hidden="true"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{ $users->appends(request()->query())->links() }}
                </div>
                <!-- /.card-body -->
            </div>

            {{--       Modal     --}}
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group row">
                                    <label for="inputEmail3"  class="col-sm-2 col-form-label">موبایل</label>
                                    <div class="col-sm-10">
                                        <input  name="mobile" value="{{request()->mobile}}" class="form-control" id="inputEmail3">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">نام</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="name" value="{{request()->name}}" class="form-control" id="inputPassword3">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">وضعیت</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="status">
                                            <option selected value="">انتخاب</option>
                                            <option {{request()->status == Mehrab\User\Models\User::BAN ? 'selected' : ''}} value="{{Mehrab\User\Models\User::BAN}}">مسدود</option>
                                            <option {{request()->status == Mehrab\User\Models\User::ACTIVE ? 'selected' : ''}} value="{{Mehrab\User\Models\User::ACTIVE}}">فعال</option>
                                            <option {{request()->status == Mehrab\User\Models\User::NOT_AVAILABLE ? 'selected' : ''}} value="{{Mehrab\User\Models\User::NOT_AVAILABLE}}">خارج از دسترس
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">کد ملی</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="national_code" value="{{request()->national_code}}" class="form-control" id="inputPassword3">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-sm-2 col-form-label">ایمیل</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="email" value="{{request()->email}}" class="form-control" id="inputPassword3">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="region" class="col-sm-2 col-form-label">نام منطقه</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="region" value="{{request()->region}}" class="form-control" id="region">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="service" class="col-sm-2 col-form-label">نام خدمت</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="service" value="{{request()->service}}" class="form-control" id="service">
                                    </div>
                                </div>
                                <div class="form-group row float-left">
                                    <div class="col-sm-10 ">
                                        <button type="submit" class="btn btn-primary mx-auto">جست و جو</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


        </section>
    </x-slot>
    @if(session()->get('status') == 'updated')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'ویرایش متخصص با موفقیت انجام شد',
                })
            </script>
        </x-slot>
    @endif
</x-admin-panel-layout>
