<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 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 ">
                            <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>
                            </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}}</td>
                                    <td>{{$user->mobile}}</td>
                                    <td>
                                        @foreach($user->roles as $role)
                                            <small>@lang($role->name)</small>,
                                        @endforeach
                                    </td>
                                    <td class="d-flex justify-content-around">
                                        {{--                                        <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-primary" href="{{route('users.edit',$user->id)}}"
                                           title="ویرایش">
                                            <i class="fa fa-pencil-square-o text-light"></i>
                                        </a>
                                        <a class="btn btn-sm btn-success" href="{{route('users.edit_roles',$user->id)}}"
                                           title="ویرایش دسترسی">
                                            <i class="fa fa-shield text-light"></i>
                                        </a>
                                        <a class="btn btn-sm btn-danger admin-table-actions-delete" href="{{route('users.delete',$user->id)}}"
                                           title="حذف">
                                            <i class="fa fa-trash text-white"></i>
                                        </a>
                                        <a class="btn btn-sm"
                                           onclick="statusItem(event,'{{route('users.status',$user->id)}}',{{$user->id}})"
                                           title="تغیر وضعیت">
                                            <i class="fa fa-toggle-on {{$user->status == Mehrab\User\Models\User::ACTIVE? 'text-info' : 'text-danger'}}"
                                               id="status{{$user->id}}" style="font-size: 1rem" aria-hidden="true"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{ $users->appends(request()->query())->links() }}
                </div>
                <!-- /.card-body -->
            </div>

        {{-- search form --}}

        <!-- 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="role">
                                            <option selected hidden disabled>انتخاب</option>
                                            @foreach($roles as  $role)
                                                <option value="{{$role->id}}">@lang($role->name)</option>
                                            @endforeach
                                        </select>
                                    </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 float-left">
                                    <div class="col-sm-10 ">
                                        <button type="submit" class="btn btn-primary mx-auto">جست و جو</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end search form --}}


        </section>
        @includeIf("admin.partials.delete_modal")
    </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') == 'updated')
        <x-slot name="linkScript">
            <script>
                Swal.fire({
                    icon: 'success',
                    text: 'ویرایش کاربر با موفقیت انجام شد',
                })
            </script>
        </x-slot>
    @endif


</x-admin-panel-layout>
