@extends('layouts.admin.main')

@section('content')
<div class="mb-3">
    <h1 class="h3 d-inline align-middle">Profil</h1>
</div>

@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <strong>{{ session('success') }}</strong>
</div>
@endif

<div class="row">
    <div class="col-md-4 col-xl-3">
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="card-title mb-0">Profil</h5>
            </div>
            <div class="card-body text-center">
                <h5 class="card-title mb-0">{{ $user->name }}</h5>
                <div class="text-muted mb-0">Username: {{ $user->username }}</div>
                <div class="text-muted mb-2">Role: Administrator</div>

                <div>
                    <button id="edit-profile" class="btn btn-primary btn-sm" type="button" 
                        data-bs-toggle="modal" data-bs-target="#edit-profile-modal">
                        <span data-feather="user"></span> Update</button>
                    <button id="change-password" class="btn btn-primary btn-sm" type="button"
                        data-bs-toggle="modal" data-bs-target="#change-password-modal">
                        <span data-feather="lock"></span> Password</button>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8 col-xl-9">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Aktivitas</h5>
            </div>
                <div class="card-body h-100">

                    <div class="d-flex align-items-start">
                        <img src="img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
                        <div class="flex-grow-1">
                            <small class="float-end text-navy">5m ago</small>
                            <strong>Vanessa Tucker</strong> started following <strong>Christina Mason</strong><br />
                            <small class="text-muted">Today 7:51 pm</small><br />

                        </div>
                    </div>

                    <hr />
                    <div class="d-flex align-items-start">
                        <img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
                        <div class="flex-grow-1">
                            <small class="float-end text-navy">30m ago</small>
                            <strong>Charles Hall</strong> posted something on <strong>Christina Mason</strong>'s timeline<br />
                            <small class="text-muted">Today 7:21 pm</small>

                            <div class="border text-sm text-muted p-2 mt-1">
                                Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
                                pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
                            </div>

                            <a href="#" class="btn btn-sm btn-danger mt-1"><i class="feather-sm" data-feather="heart"></i> Like</a>
                        </div>
                    </div>

                    <hr />
                    <div class="d-flex align-items-start">
                        <img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
                        <div class="flex-grow-1">
                            <small class="float-end text-navy">1h ago</small>
                            <strong>Christina Mason</strong> posted a new blog<br />

                            <small class="text-muted">Today 6:35 pm</small>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="edit-profile-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="form-edit-profile" action="{{ route('admin.auth.profile.update') }}" method="POST">
                @csrf
                @method('PUT')
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Update Profil</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 form-group">
                    <label class="form-label">Nama</label>
                    <input class="form-control @error('name') is-invalid @enderror" type="text" name="name" />
                    @error('name')
                    <div class="error invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3 form-group">
                    <label class="form-label">Username</label>
                    <input class="form-control @error('username') is-invalid @enderror" type="text" name="username" />
                    @error('username')
                    <div class="error invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal"><span data-feather="x"></span> Batal</button>
                <button type="submit" class="btn btn-sm btn-success"><span data-feather="save"></span> Simpan Perubahan</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="change-password-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="form-change-password" action="{{ route('admin.auth.profile.password') }}" method="POST">
                @csrf
                @method('PUT')
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Update Profil</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 form-group">
                    <label class="form-label">Password Lama</label>
                    <input id="current_password" class="form-control @error('current_password') is-invalid @enderror" type="password" name="current_password" />
                    @error('current_password')
                    <div class="error invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3 form-group">
                    <label class="form-label">Password</label>
                    <input id="password" class="form-control @error('password') is-invalid @enderror" type="password" name="password" />
                    @error('password')
                    <div class="error invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3 form-group">
                    <label class="form-label">Konfirmasi Password</label>
                    <input id="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" type="password" name="password_confirmation" />
                    @error('password_confirmation')
                    <div class="error invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal"><span data-feather="x"></span> Batal</button>
                <button type="submit" class="btn btn-sm btn-success"><span data-feather="save"></span> Simpan Perubahan</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.22.1/jquery.validate.min.js" 
        integrity="sha512-aK+gwLBXdXY6QDrdpK6jYtTlIfzChVNqAh3V6D5c8nV8U9O5NvC/EJ44aAKj9moRsx7bAibHZbX0wvblVp8wSA==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function () {
        @if($errors->has('name') || $errors->has('username'))
            let profileModal = new bootstrap.Modal($('#edit-profile-modal'));
            profileModal.show();
        @endif

        @if(
            $errors->has('current_password') ||
            $errors->has('password') ||
            $errors->has('password_confirmation')
        )
            let passwordModal = new bootstrap.Modal($('#change-password-modal'));
            passwordModal.show();
        @endif

        $('#form-edit-profile').validate({
            rules: {
                username: {
                    required: true,
                },
                name: {
                    required: true,
                }
            },
            messages: {
                username: {
                    required: "Username harus diisi.",
                },
                name: {
                    required: "Nama harus diisi.",
                }
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        $('#form-change-password').validate({
            rules: {
                old_password: {
                    required: true,
                },
                password: {
                    required: true,
                    minlength: 8
                },
                password_confirmation: {
                    required: true,
                    equalTo: "#password"
                }
            },
            messages: {
                old_password: {
                    required: "Password lama harus diisi.",
                },
                password: {
                    required: "Password baru harus diisi.",
                    minlength: "Password minimal 8 karakter."
                },
                password_confirmation: {
                    required: "Konfirmasi password harus diisi.",
                    equalTo: "Konfirmasi password tidak cocok."
                }
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endpush