@extends('layouts.app')

@section('content')

<div class="page-header mb-4">

    <div>

        <h3 class="font-weight-bold mb-1">

            Profile Saya

        </h3>

        <p class="text-muted mb-0">

            Informasi akun pengguna sistem PRESGURU

        </p>

    </div>

</div>

<div class="row">

    <div class="col-lg-4">

        <div class="card border-0 shadow-sm">

            <div class="card-body text-center">

                <img
                    src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name) }}&background=2563eb&color=fff&size=180"
                    class="profile-avatar mb-3">

                <h4 class="font-weight-bold mb-1">

                    {{ auth()->user()->name }}

                </h4>

                <p class="text-muted">

                    {{ auth()->user()->email }}

                </p>

                <span class="badge badge-primary px-4 py-2">

                    {{ strtoupper(auth()->user()->role) }}

                </span>

            </div>

        </div>

    </div>

    <div class="col-lg-8">

        <div class="card border-0 shadow-sm">

            <div class="card-header bg-white border-0">

                <h5 class="mb-0">

                    <i class="fas fa-user-circle text-primary mr-2"></i>

                    Informasi Akun

                </h5>

            </div>

            <div class="card-body">

                <table class="table table-borderless">

                    <tr>

                        <td width="220">

                            <strong>Nama Lengkap</strong>

                        </td>

                        <td>

                            {{ auth()->user()->name }}

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <strong>Email</strong>

                        </td>

                        <td>

                            {{ auth()->user()->email }}

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <strong>Role</strong>

                        </td>

                        <td>

                            <span class="badge badge-success">

                                {{ strtoupper(auth()->user()->role) }}

                            </span>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <strong>Terdaftar Sejak</strong>

                        </td>

                        <td>

                            {{ auth()->user()->created_at->translatedFormat('d F Y') }}

                        </td>

                    </tr>

                </table>

                <hr>

                <div class="d-flex flex-wrap">

                    <a href="/profile/password"
                       class="btn btn-warning mr-2 mb-2">

                        <i class="fas fa-key mr-1"></i>

                        Ubah Password

                    </a>

                    <a href="/dashboard"
                       class="btn btn-primary mb-2">

                        <i class="fas fa-home mr-1"></i>

                        Kembali ke Dashboard

                    </a>

                </div>

            </div>

        </div>

    </div>

</div>

<style>

.page-header{

    background:#fff;
    padding:24px;
    border-radius:18px;
    box-shadow:0 4px 18px rgba(0,0,0,.05);

}

.card{

    border-radius:18px;

}

.profile-avatar{

    width:150px;
    height:150px;
    border-radius:50%;
    border:5px solid #e0e7ff;
    box-shadow:0 10px 30px rgba(37,99,235,.20);

}

.table td{

    padding:14px 8px;
    vertical-align:middle;

}

.badge{

    border-radius:10px;
    font-size:13px;
    padding:8px 16px;

}

.btn{

    border-radius:10px;

}

</style>

@endsection