@extends('admin.main')
@section('title', 'Users')
@section('breadcrumb')
    {{-- <li class="breadcrumb-item"><a href="#">Home</a></li> --}}
    <li class="breadcrumb-item active">Users</li>
@endsection
@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Data User</h3>
                <div class="card-tools">
                    <a href="" id="btnAdd" data-toggle="modal" data-target="#modalAdd"
                        class="btn btn-success btn-sm"><i class="fas fa-plus-circle"></i>&nbsp;Tambah Data</a>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="data-user" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>NO</th>
                            <th>Nama</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Created at</th>
                            <th width="16%">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->

    <div class="modal fade" id="modalAdd">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-add">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Form Tambah Data</h4>
                        <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="form-group">
                            <label>Nama</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="input nama.." required>
                        </div>
                        <div class="form-group">
                            <label>Email</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="input email.." required>
                        </div>
                        <div class="form-group">
                            <label>Role</label><span style="color: var(--danger);"><b>*</b></span>
                            <select class="form-control" name="role" id="">
                                <option value="" selected disabled>Pilih Role</option>
                                @foreach ($role as $item)
                                    <option value="{{ $item->id }}">{{ $item->role }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Password</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="password" name="password"
                                placeholder="input password.." required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                                placeholder="input confirm password.." required>
                        </div>

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="modalEdit">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-edit" method="post">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Form Edit Data</h4>
                        <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="form-group">
                            <input type="hidden" name="id">
                            <label>Nama</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="input nama..">
                        </div>
                        <div class="form-group">
                            <label>Email</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="input email..">
                        </div>
                        <div class="form-group">
                            <label>Role</label>
                            <input type="text" class="form-control" id="role" name="role"
                                placeholder="input role.." readonly>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="modalChangePassword">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-password" method="post">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Form Tukar Password</h4>
                        <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="form-group">
                            <input type="hidden" name="id">
                            <label>New Password</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="new_password" name="new_password"
                                placeholder="input password.." required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                                placeholder="input confirm password.." required>
                        </div>
                        
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <script>
        $(document).ready(function() {

            loadData();

            $('.form-modal-add').submit(function(e) {
                e.preventDefault();

                var form = $(this);
                var token = $('input[name=_token]');

                hitApi(
                    '/admin/users/store',
                    'post', {
                        _token: token.val(),
                        role: form.find('select[name=role]').val(),
                        name: form.find('input[name=name]').val(),
                        email: form.find('input[name=email]').val(),
                        password: form.find('input[name=password]').val(),
                        confirm_password: form.find('input[name=confirm_password]').val(),
                    },
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            $('#modalAdd').modal('hide');
                            loadData();
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success"
                            });

                        } else {
                            Swal.fire({
                                title: "Warning!",
                                text: response.message,
                                icon: "warning"
                            });
                        }
                    }
                );

            });

            $(document).on('click', '#btnEdit', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                hitApi(
                    '/admin/users/get-data?id=' + id,
                    'get', {},
                    function(response) {
                        if (!$.isEmptyObject(response.data)) {
                            var item = response.data[0];
                            var form = $('.form-modal-edit');
                            form.find('input[name=id]').val(item.id);
                            form.find('input[name=name]').val(item.name);
                            form.find('input[name=email]').val(item.email);
                            form.find('input[name=role]').val(item.user_role.role);
                        } else {}
                    }

                )

            });

            $(document).on('click', '#btnChangePassword', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                hitApi(
                    '/admin/users/get-data?id=' + id,
                    'get', {},
                    function(response) {
                        if (!$.isEmptyObject(response.data)) {
                            var item = response.data[0];
                            var form = $('.form-modal-password');
                            form.find('input[name=id]').val(item.id);
                        } else {}
                    }

                )

            });


            $('.form-modal-edit').submit(function(e) {
                e.preventDefault();

                var token = $('input[name=_token]');
                var form = $(this);
                var id = form.find('input[name=id]').val();

                hitApi(
                    '/admin/users/update/' + id,
                    'post', {
                        _token: token.val(),
                        name: form.find('input[name=name]').val(),
                        email: form.find('input[name=email]').val(),
                    },
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            $('#modalEdit').modal('hide');
                            loadData();
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success"
                            });

                        } else {
                            Swal.fire({
                                title: "Warning!",
                                text: response.message,
                                icon: "warning"
                            });
                        }
                    }
                );

            });

            $('.form-modal-password').submit(function(e) {
                e.preventDefault();

                var token = $('input[name=_token]');
                var form = $(this);
                var id = form.find('input[name=id]').val();

                hitApi(
                    '/admin/users/change-password/' + id,
                    'post', {
                        _token: token.val(),
                        new_password: form.find('input[name=new_password]').val(),
                        confirm_password: form.find('input[name=confirm_password]').val(),
                    },
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            $('#modalChangePassword').modal('hide');
                            loadData();
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success"
                            });

                        } else {
                            Swal.fire({
                                title: "Warning!",
                                text: response.message,
                                icon: "warning"
                            });
                        }
                    }
                );

            });

        })

        function loadData() {
            showData(
                '#data-user',
                '/admin/users/get-data',
                [{
                        data: 'no'
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'email'
                    },
                    {
                        data: 'user_role.role'
                    },
                    {
                        data: 'created_at_format'
                    },
                    {
                        data: 'id'
                    },
                ],
                [{
                    targets: 5,
                    data: 'id',
                    render: function(data, type, row) {
                        var button = '<a href="" id="btnEdit" data-id="' + row.id +
                            '" data-toggle="modal" data-target="#modalEdit" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i>&nbsp;Edit</a>&nbsp;' +
                            '<a href="" id="btnChangePassword" data-id="' + row.id +
                            '" data-toggle="modal" data-target="#modalChangePassword" class="btn btn-danger btn-sm"><i class="fas fa-key"></i>&nbsp;Tukar Password</a>';
                        return button;
                    }
                }, ]
            );
        }
    </script>
@endsection