@extends('index')

@section('main-content')
    <div class="mt-8 px-4">
        <div class="text-center w-fit mx-auto">
            <div class="relative flex">
                <img src="{{ $user->profile_photo_path ?? 'https://www.svgrepo.com/show/384674/account-avatar-profile-user-11.svg' }}"
                    alt="avatar" class="mx-auto bg-yellow-400 object-cover rounded-full h-28 w-28">
                <a href="/edit-profile" class="absolute top-0 right-0">
                    <div>
                        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z"
                                stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13"
                                stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                </a>
            </div>
            <div class="font-semibold pt-4 text-2xl">
                {{ $user->full_name }}
            </div>
        </div>
        <div class="mt-8 text-slate-500">
            Nama Panggilan
        </div>
        <div class="text-lg">{{ $user->name }}</div>
        <div class="mt-4 text-slate-500">
            Email
        </div>
        <div class="text-lg">{{ $user->email }}</div>
        <div class="mt-4 text-slate-500">
            Jenis Kelamin
        </div>
        <div class="text-lg">{{ $user->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan' }}</div>
        <div class="mt-4 text-slate-500">
            Alamat
        </div>
        <div class="text-lg">{{ $user->alamat }}</div>
        <div class="mt-4 text-slate-500">
            No. HP
        </div>
        <div class="text-lg">{{ $user->no_hp }}</div>
        {{-- <div class="mt-4 text-slate-500">
            No. HP
        </div>
        <div class="text-lg">0812345678</div> --}}
        {{-- <div class="mt-4">
            <a href="/change_password" class="bg-sky-500 py-1 px-4 text-white">Ubah Kata Sandi</a>
        </div> --}}
    </div>
@endsection