@extends('layouts.minimal')

@section('title', 'Profile')

@section('breadcrumb')
<div class="row mb-2">
    <div class="col-sm-6">
        <h1 class="m-0">Profile</h1>
    </div>
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Ubah Password</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-3">
            <div class="card card-danger card-outline">
                <div class="card-body box-profile">
                    <div class="text-center">
                        <img class="profile-user-img img-fluid img-circle" src="{{ asset('assets/images/profile-default.png') }}"
                            alt="User profile picture">
                    </div>
                    <h3 class="profile-username text-center">{{ Auth::user()->name }}</h3>
                    <p class="text-muted text-center">{{ Auth::user()->roles[0]->name ?? '-' }}</p>
                    <ul class="list-group list-group-unbordered mb-3">
                        <li class="list-group-item">
                            <label>Nama</label><br>
                            <span>{{ Auth::user()->name ?? '-' }}</span>
                        </li>
                        <li class="list-group-item">
                            <label>Username</label><br>
                            <span>{{ Auth::user()->username ?? '-' }}</span>
                        </li>
                        <li class="list-group-item">
                            <label>Email</label><br>
                            <span>{{ Auth::user()->email ?? '-' }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="card">
                <div class="card-header p-2">
                    <ul class="nav nav-pills">
                        <li class="nav-item" style="display: none;">
                            <a onclick="tabaktif('biodata')" class="nav-link" href="#biodata" id="btnbiodata" data-toggle="tab">Biodata</a>
                        </li>
                        <li class="nav-item"  >
                            <a onclick="tabaktif('resetpassword')" class="nav-link btn-info" href="#resetpassword" id="btnresetpassword" data-toggle="tab">Ubah Password</a>
                        </li>
                        <li class="nav-item"  style="display: none;">
                            <a onclick="tabaktif('fotoprofile')" class="nav-link" href="#fotoprofile" id="btnfotoprofile" data-toggle="tab">Foto Profile</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane" id="biodata"  style="display: none;">
                            <h1 class="text-center">Coming Soon...</h1>
                            <img src="{{ asset('assets/images/development.jpg') }}" class="img-fluid" alt="Error Image" style="height: 60%;">
                        </div>
                        <div class="tab-pane" id="resetpassword">
                            <span class="badge badge-warning right">Demi keamanan akun, aplikasi akan mewajibkan pengguna mengubah password setiap 1 bulan sekali</span>

                            <form action="{{ route('updatepassword') }}" method="post">
                                @csrf
                                @method('PUT')
                                <div class="form-group mb-3" style="text-align: left;">
                                    <label style="font-weight: bold;">Password Saat Ini</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="password_saat_ini">
                                                <span class="fas fa-lock-open"></span>
                                            </span>
                                        </div>
                                        <input type="password" class="form-control" name="password_saat_ini" placeholder="Password Saat Ini" aria-label="Username" aria-describedby="password_saat_ini">
                                    </div>
                                    @error('password_saat_ini')
                                        <span class="small text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group mb-3" style="text-align: left;">
                                    <label style="font-weight: bold;">Password Baru</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="password_baru">
                                                <span class="fas fa-lock"></span>
                                            </span>
                                        </div>
                                        <input type="password" class="form-control" name="password_baru" placeholder="Password Baru" aria-label="Username" aria-describedby="password_baru">
                                    </div>
                                    @error('password_baru')
                                        <span class="small text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group mb-3" style="text-align: left;">
                                    <label style="font-weight: bold;">Konfirmasi Password Baru</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="password_baru_confirmation">
                                                <span class="fas fa-lock"></span>
                                            </span>
                                        </div>
                                        <input type="password" class="form-control" name="password_baru_confirmation" placeholder="Password Baru" aria-label="Username" aria-describedby="password_baru_confirmation">
                                    </div>
                                    @error('password_baru_confirmation')
                                        <span class="small text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group w-100">
                                    <div class="d-grid gap-2 text-center">
                                        <button type="submit" class="btn btn-success rounded-full">
                                            <span class="fas fa-check-circle"></span>
                                            Ubah Password
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="fotoprofile"  style="display: none;">
                            <h1 class="text-center">Coming Soon...</h1>
                            <img src="{{ asset('assets/images/development.jpg') }}" class="img-fluid" alt="Error Image" style="height: 60%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <style></style>
@endsection

@section('js')
<script>
    if (localStorage.getItem('tabaktif')) {
        $('#btn'+localStorage.getItem('tabaktif')).click();
    } else {
        $('#btnbiodata').click();
    }

    function tabaktif(param) {
        localStorage.removeItem("tabaktif");

        localStorage.setItem("tabaktif", param);
    }
</script>
@endsection