@extends('layout')

@section('content')
<div class="page-body">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4>{{ __('จัดการผู้ใช้งาน') }}</h4>
                    <div class="card-header-right">
                        <ul class="list-unstyled card-option">
                            <li><button type="button" class="btn btn-success btn-sm" onclick="addData()"><i
                                        class="fas fa-plus"></i> {{ __('เพิ่ม') }}</button></li>
                        </ul>
                    </div>
                </div>

                <div class="card-block">
                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table" id="dtTable">
                                    <thead>
                                        <tr class="table-success">
                                            <td class="text-center">{{ __('No.') }}</td>
                                            <td >{{ __('ประเภท') }}</td>
                                            <td >{{ __('ชื่อ') }}</td>
                                            <td >{{ __('Username') }}</td>
                                            {{-- <td >{{ __('Password') }}</td> --}}
                                            <td >{{ __('Email') }}</td>
                                            <td >{{ __('เบอร์โทร') }}</td>
                                            <td width="70px">{{ __('Reset Password') }}</td>
                                            <td width="70px" class="text-center">{{ __('แก้ไข/ลบ') }}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($users as $key1 => $user)
                                            <tr >
                                                <th class="text-center">{{ $key1+1 }}</th>
                                                <th>
                                                    @if($user->status != "")
                                                    ผู้ดูแลระบบ
                                                    @else
                                                    พนักงาน
                                                    @endif
                                                </th>
                                                <th >{{ $user->name }}</th>
                                                <th >{{ $user->username }}</th>
                                                {{-- <th >********</th> --}}
                                                <th >{{ $user->email }}</th>
                                                <th >{{ $user->tel }}</th>
                                                <th >
                                                    <a onclick="editPass({{$user->id}})" class="btn btn-success "><i class="fa fa-key"></i></a>
                                                </th>
                                                <td class="text-center">
                                                    <a onclick="editData({{$user->id}})" class="btn btn-warning "><i class="fa fa-edit"></i></a>
                                                    @if($user->id != "1")
                                                    <a onclick="deleteData({{$user->id}})" class="btn btn-danger "><i class="fa fa-trash"></i></a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<form action="" method="POST" id="shared-form" novalidate enctype="multipart/form-data">
    <input type="hidden" name="id" id="id">
    <div class="modal fade" id="shared-modal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('จัดการผู้ใช้งาน') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="kit_id">{{ __('ประเภทผู้ใช้งาน') }} <span class="text-danger">*</span></label>
                                <select class="form-control" id="status" name="status" required>
                                    <option value="0">พนักงาน</option>
                                    <option value="1">ผู้ดูแลระบบ</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="name">{{ __('ชื่อผู้ใช้งาน') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required placeholder="ชื่อผู้ใช้งาน">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="username">{{ __('Username') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="username" name="username" required placeholder="Username">
                            </div>
                        </div>
                    </div>
                    <div class="row" id="div-pass">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="password">{{ __('Password') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="password" name="password" required placeholder="Password">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="email">{{ __('Email') }} </label>
                                <input type="text" class="form-control" id="email" name="email" placeholder="Email">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="tel">{{ __('เบอร์โทรศัพท์') }} </label>
                                <input type="text" class="form-control" id="tel" name="tel" placeholder="เบอร์โทรศัพท์">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i>
                        {{ __('ปิด') }}</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i>
                        {{ __('บันทึก') }}</button>
                </div>
            </div>
        </div>
    </div>
</form>

<form action="" method="POST" id="shared-form1" novalidate enctype="multipart/form-data">
    <input type="hidden" name="user_id" id="user_id">
    <div class="modal fade" id="shared-modal1" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Reset Password') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row" id="div-pass">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="reset_password">{{ __('Password') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="reset_password" name="reset_password" required placeholder="Password">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i>
                        {{ __('ปิด') }}</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i>
                        {{ __('บันทึก') }}</button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('script')
<script>
    var route_index = "{{ route('user.index') }}";
    var route_store = "{{ route('user.store') }}";
    var route_resetPass = "{{ route('user.reset') }}";

    $(function () {

        // table = $('#dtTable').DataTable({
        //     processing: true,
        //     serverSide: true,
        //     autoWidth: false,
        //     ajax: route_index,
        //     columns: [
        //         {
        //             data: 'DT_RowIndex',
        //             name: 'DT_RowIndex'
        //         },
        //         {
        //             data: 'type',
        //             name: 'type'
        //         },
        //         {
        //             data: 'name',
        //             name: 'name'
        //         },
        //         {
        //             data: 'username',
        //             name: 'username'
        //         },
        //         {
        //             data: 'email',
        //             name: 'email',
        //         },
        //         {
        //             data: 'tel',
        //             name: 'tel',
        //         },
        //         {
        //             data: 'editdelete',
        //             name: 'editdelete',
        //             orderable: false,
        //             searchable: false
        //         }
        //     ],
        // });

        $("#shared-form").validate({
            submitHandler: function (form) {
                formData = new FormData(form);
                $.ajax({
                    type: form.method,
                    url: route_store,
                    data: formData,
                    dataType: "json",
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        console.log(response);

                        if (response.success) {
                            // table.ajax.reload();
                            $('#shared-modal').modal('hide');
                            show_success();
                            setTimeout(function(){ location.reload(); }, 1500);
                        } else {
                            show_warning(response.message);
                        }
                    },
                    error: function (err) {

                        show_error();
                        console.log(err.responseText);
                    }
                });
            }
        });

        $("#shared-form1").validate({
            submitHandler: function (form) {
                formData = new FormData(form);
                $.ajax({
                    type: form.method,
                    url: route_resetPass,
                    data: formData,
                    dataType: "json",
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        console.log(response);

                        if (response.success) {
                            // table.ajax.reload();
                            $('#shared-modal').modal('hide');
                            show_success();
                            setTimeout(function(){ location.reload(); }, 1500);
                        } else {
                            show_warning(response.message);
                        }
                    },
                    error: function (err) {

                        show_error();
                        console.log(err.responseText);
                    }
                });
            }
        });
    });

    function addData() {
        $('#shared-form').trigger('reset');
        $('#id').val('');
        $('#shared-modal').modal('show');
    }

    function editData(id) {
        $('#shared-form').trigger('reset');
        $('#id').val(id);
        $.ajax({
            url: route_index + '/' + id + '/edit',
            type: "GET",
            dataType: "JSON",
            success: function (data) {
                console.log(data);
                $('#name').val(data.name);
                $('#email').val(data.email);
                $('#username').val(data.username);
                $('#password').val(data.password);
                $('#tel').val(data.tel);
                $('#status').val(data.status);
                $('#div-pass').hide();
                $('#shared-modal').modal('show');
            },
            error: function (err) {
                console.log(err.responseText);
            }
        });
    }

    function editPass(id) {
        $('#shared-form1').trigger('reset');
        $('#user_id').val(id);
        $('#shared-modal1').modal('show');
    }

    function deleteData(id) {

        Swal.fire({
            title: '',
            text: "{{ __('คุณต้องการลบข้อมูลนี้ใช่ หรือ ไม่?') }}",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#fe5d70',
            cancelButtonColor: '#868e96',
            confirmButtonText: "{{ __('ลบ') }}",
            cancelButtonText: "{{ __('ยกเลิก') }}",
            reverseButtons: true,
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: route_store+'/'+id+'/destroy',
                    success: function (data) {
                        // table.ajax.reload();
                        show_success("{{ __('ลบ') }}");
                        setTimeout(function(){ location.reload(); }, 1500);
                    },
                    error: function (err) {
                        console.log(err.responseText);
                    }
                });
            }
        });
    }

</script>

@endsection