@extends('admin.main')
@section('title', 'Profile')
@section('breadcrumb')
    <li class="breadcrumb-item active">Profile</li>
@endsection
@section('content')

    <div class="col-md-3">

        <!-- Profile Image -->
        <div class="card card-outline">
            <div class="card-body box-profile">
                <div class="text-center">
                    <img class="profile-user-img img-fluid img-circle" src="{{ Storage::url($user->photo_profile) }}"
                        alt="User profile picture">
                </div>

                <h3 class="profile-username text-center">{{ $user->name }}</h3>

                <p class="text-muted text-center">{{ $user->userRole->role }}</p><br>

                <a href="#" data-toggle="modal" data-target="#modalChangePassword"
                    class="btn btn-primary btn-block"><b>Tukar Password</b></a>

                <a href="/admin/logout" class="btn btn-danger btn-block"><b>Logout</b></a><br>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

    </div>
    <!-- /.col -->

    <div class="col-md-9">
        <!-- About Me Box -->
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">About Me</h3>
                <div class="card-tools">
                    <a href="#" id="btnEdit" data-id="{{ Auth::user()->id }}" data-toggle="modal"
                        data-target="#modalEdit" class="btn btn-block"><b>Edit</b></a>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <strong><i class="fas fa-user mr-1"></i> Nama</strong>

                <p class="text-muted">
                    {{ $user->name }}
                </p>

                <hr>

                <strong><i class="fas fa-user mr-1"></i> Role</strong>

                <p class="text-muted">
                    {{ $user->userRole->role }}
                </p>

                <hr>

                <strong><i class="fas fa-envelope mr-1"></i> Email</strong>

                <p class="text-muted">{{ $user->email }}</p>

                <hr>


            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->

    <div class="modal fade" id="modalEdit">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-edit" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Form Edit Profile</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 for="customFile">Photo Profile</label>
                            <div class="custom-file">
                                <input type="file" name="image" id="image" class="custom-file-input" id="customFile" accept="image/*">
                                <label class="custom-file-label" for="customFile">Choose file</label>
                            </div>
                        </div>
                        <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" value="{{ Auth::user()->id }}">
                            <label>Password Sekarang</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="current_password" name="current_password"
                                placeholder="input password sekarang.." required>
                        </div>
                        <div class="form-group">
                            <label>Password Baru</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="new_password" name="new_password"
                                placeholder="input password baru.." 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 baru.." 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() {

            bsCustomFileInput.init();

            $(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 {}
                    }

                )

            });

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

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

                var formData = new FormData();
                var file = $('#image')[0].files[0];
                formData.append('_token', token.val());
                formData.append('name', form.find('input[name=name]').val());
                formData.append('email', form.find('input[name=email]').val());
                formData.append('image', file);
                
                hitApiWithImage(
                    '/admin/users/update/' + id,
                    'post', formData,
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            $('#modalEdit').modal('hide');
                            location.reload();
                            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(),
                        current_password: form.find('input[name=current_password]').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');
                            location.reload();
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success"
                            });

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

            });

        });
    </script>

@endsection