@extends('admin.layouts.master')
@section('content')
    <!-- Data list view starts -->
    <section id="data-list-view" class="data-list-view-header">
        <!-- DataTable starts -->
        <div class="table-responsive">
            <table class="table data-list-view">
                <thead>
                <tr>
                    <th>#</th>
                    <th>الاسم</th>
                    <th>البريد الالكتروني</th>
                    <th>رقم الجوال</th>
                    <th> البطاقه المدنيه</th>
                    <th>الصلاحية</th>
                    <th>التحكم</th>
                </tr>
                </thead>
                <tbody>

                @foreach($rows as $index => $row)
                    <tr>
                        <td>{{ $index + 1 }}</td>

{{--                        <td><img src="{{ $row->image_path }}" style="width: 150px"></td>--}}

                        <td>{{ $row->name }}</td>
                        <td>{{  $row->email  }}</td>
                        <td>{{  $row->phone  }}</td>
                        <td>{{  $row->national_id  }}</td>
                        <td>{{  getRoleName($row->getRoleNames()->first())  }}</td>
                        <td>
                            <a href="#" class="btn btn-warning btn-sm edit_data"
                               data-id="{{ $row->id  }}"
                                data-name="{{ $row->name  }}"
                                data-email="{{ $row->email  }}"
                                data-phone="{{ $row->phone  }}"
                                data-national_id="{{ $row->national_id  }}"
                                data-image_path="{{ $row->image_path  }}"
                                data-role="{{$row->roles != null ?  $row->roles->first()->name : ' ' }}"
                            ><i class="feather icon-edit"></i></a>
                            <a onclick="fireDeleteEvent({{$row->id}})" type="button" class="btn btn-danger btn-sm"><i class="feather icon-trash"></i></a>
                            <form style="display: inline" action="{{route('users.destroy',$row->id)}}" method="POST" id="form-{{$row->id}}">
                                {{csrf_field()}}
                                {{method_field('DELETE')}}
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <!-- DataTable ends -->

        <!-- add new sidebar starts -->
        <div class="add-new-data-sidebar">
            <div class="overlay-bg"></div>
            <form action="{{route('users.store')}}" id="form" method="post" enctype="multipart/form-data">
                {{csrf_field()}}

                <div class="add-new-data">
                    <div class="div mt-2 px-2 d-flex new-data-title justify-content-between">
                        <div>
                            <h4 class="text-uppercase">اضف جديد</h4>
                        </div>
                        <div class="hide-data-sidebar">
                            <i class="feather icon-x"></i>
                        </div>
                    </div>
                    <div class="data-items pb-3">
                        <div class="data-fields px-2 mt-3">
                            <div class="row">

                                <div class="col-sm-12 data-field-col">
                                    <label for="data-name">الاسم</label>
                                    <input required type="text" class="form-control" id="name" name="name" placeholder="الاسم">
                                </div>


                                <div class="col-sm-12 data-field-col">
                                    <label for="data-name">البريد لالكتروني</label>
                                    <input required type="email" class="form-control" id="email" name="email" placeholder="البريد الالكتروني">
                                </div>



                                <div class="col-sm-12 data-field-col">
                                    <label for="data-name">الجوال</label>
                                    <input required type="number" class="form-control" id="phone" name="phone" placeholder="الجوال">
                                </div>

                                <div class="col-sm-12 data-field-col">
                                    <label for="data-name">الرقم المدني</label>
                                    <input required type="number" class="form-control" id="national_id"  name="national_id" placeholder="الرقم المدني">
                                </div>

                                <div class="col-sm-12 data-field-col">
                                    <label for="data-name">الصلاحيه</label>
                                    <select class="form-control" name="role" id="role">
                                        @foreach($roles as $role)
                                            <option value="{{$role->name}}">{{$role->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm-12 data-field-col">
                                    <label for="data-name">الرقم السري</label>
                                    <input  type="password" class="form-control" name="password" placeholder="الرقم السري">
                                </div>


                                <div class="col-sm-12 data-field-col">
                                    <label for="data-name">تاكيد الرقم السري</label>
                                    <input  type="password" class="form-control" name="password_confirmation" placeholder="تاكيد الرقم السري">
                                </div>


                                <div class="form-group">
                                    <label for="">@lang('admin.image')</label>
                                    <input type="file" class="form-control image" id="" name="image" >
                                </div>

                                <div class="form-group">
                                    <img src="{{asset('image.png')}}" id="image" style="width: 200px;"
                                         class="image-preview"/>
                                </div>








                            </div>
                        </div>
                    </div>
                    <div class="add-data-footer d-flex justify-content-around px-3 mt-2">
                        <div class="add-data-btn">
                            <button class="btn btn-primary">حفظ</button>
                        </div>
                        <div class="cancel-data-btn">
                            <button class="btn btn-outline-danger">الغاء</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
        <!-- add new sidebar ends -->
    </section>
    <!-- Data list view end -->
@endsection
@section('script')
    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
            // create form
            $('body').on('click','.btn-outline-primary',function(e){
                e.preventDefault();

                $('#name').val(' ');
                $('#email').val(' ');
                $('#phone').val(' ');
                $('#image').attr('src',' ');
                $('#national_id').val(' ');
                $('#role').val(' ');


                var url = '{{ route("users.store") }}';

                $('#form').attr('action',url);
                $('#form').attr('method','post');

            });


            // edit form
            $('body').on('click','.edit_data',function(e){
                e.preventDefault();

                $('.overlay-bg').addClass('show');
                $('.add-new-data').addClass('show');



                var id = $(this).data('id');

                var name = $(this).data('name');
                var email = $(this).data('email');
                var phone = $(this).data('phone');
                var image = $(this).data('image_path');
                var national_id = $(this).data('national_id');
                var role = $(this).data('role');


                $('#name').val(' ');
                $('#email').val(' ');
                $('#phone').val(' ');
                $('#image').attr('src',' ');
                $('#national_id').val(' ');
                $('#role').val(' ');



                $('#name').val(name);

                $('#email').val(email);
                $('#phone').val(phone);
                $('#image').attr('src',image);
                $('#national_id').val(national_id);
                $('#role').val(role).change();

                var url = '{{ route("users.update", ":id") }}';
                    url = url.replace(':id', id);

                $('#form').attr('action',url);
                $('#form').attr('method','post');

                $('#form').append('<input type="hidden" name="_method" value="put" />');





            })
        });
    </script>
@endsection