@extends('employee.layouts.app')
@section('title', 'Profil | Career Development and Consultation (CDC)')
@section('navigation')
    <h1 class="my-1 d-flex align-items-center text-dark fw-bolder fs-3">Profil
        <span class="mx-2 border-gray-200 h-20px border-start ms-3"></span>
        <small class="my-1 text-muted fs-7 fw-bold ms-1">Informasi Akun</small>
    </h1>
@endsection
@section('content')
    <div class="mb-5 card mb-xl-10">
        <div class="pb-0 card-body pt-9">
            <div class="flex-wrap mb-3 d-flex flex-sm-nowrap">
                <div class="mb-4 me-7">
                    <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
                        <img src="{{ asset($user->picture ?: 'assets/employee/media/avatars/blank.png') }}" alt="image" />
                    </div>
                </div>
                <div class="flex-grow-1">
                    <div class="flex-wrap mb-2 d-flex justify-content-between align-items-start">
                        <div class="d-flex flex-column">
                            <div class="mb-2 d-flex align-items-center">
                                <a href="#"
                                    class="text-gray-900 text-hover-primary fs-2 fw-bolder me-1">{{ $user->name }}</a>
                                {{-- <a href="#" class="px-3 py-1 btn btn-sm btn-light-success fw-bolder ms-2 fs-8"
                                    data-bs-toggle="modal" data-bs-target="#kt_modal_upgrade_plan">Verified</a> --}}
                            </div>
                            <div class="flex-wrap mb-4 d-flex fw-bold fs-6 pe-2">
                                <a href="#"
                                    class="mb-2 text-gray-400 d-flex align-items-center text-hover-primary me-5">
                                    <span class="svg-icon svg-icon-4 me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none">
                                            <path opacity="0.3"
                                                d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM12 7C10.3 7 9 8.3 9 10C9 11.7 10.3 13 12 13C13.7 13 15 11.7 15 10C15 8.3 13.7 7 12 7Z"
                                                fill="black" />
                                            <path
                                                d="M12 22C14.6 22 17 21 18.7 19.4C17.9 16.9 15.2 15 12 15C8.8 15 6.09999 16.9 5.29999 19.4C6.99999 21 9.4 22 12 22Z"
                                                fill="black" />
                                        </svg>
                                    </span>
                                    {{ ucfirst($user->role === 'admin' ? 'Pegawai' : ($user->role === 'student' ? 'Mahasiswa' : $user->role)) }}</a>
                                <a href="#" class="mb-2 text-gray-400 d-flex align-items-center text-hover-primary">
                                    <span class="svg-icon svg-icon-4 me-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none">
                                            <path opacity="0.3"
                                                d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19Z"
                                                fill="black" />
                                            <path
                                                d="M21 5H2.99999C2.69999 5 2.49999 5.10005 2.29999 5.30005L11.2 13.3C11.7 13.7 12.4 13.7 12.8 13.3L21.7 5.30005C21.5 5.10005 21.3 5 21 5Z"
                                                fill="black" />
                                        </svg>
                                    </span>
                                    {{ $user->email }}</a>
                            </div>
                        </div>
                        <div class="my-4 d-flex">
                            <a href="{{ route('dashboard') }}" class="btn btn-sm btn-light me-2">
                                <span class="svg-icon svg-icon-3 d-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none">
                                        <path opacity="0.3"
                                            d="M10 18C9.7 18 9.5 17.9 9.3 17.7L2.3 10.7C1.9 10.3 1.9 9.7 2.3 9.3C2.7 8.9 3.29999 8.9 3.69999 9.3L10.7 16.3C11.1 16.7 11.1 17.3 10.7 17.7C10.5 17.9 10.3 18 10 18Z"
                                            fill="black" />
                                        <path
                                            d="M10 18C9.7 18 9.5 17.9 9.3 17.7C8.9 17.3 8.9 16.7 9.3 16.3L20.3 5.3C20.7 4.9 21.3 4.9 21.7 5.3C22.1 5.7 22.1 6.30002 21.7 6.70002L10.7 17.7C10.5 17.9 10.3 18 10 18Z"
                                            fill="black" />
                                    </svg>
                                </span>
                                <span class="indicator-label">Kembali</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-5 card mb-xl-10" id="kt_profile_details_view">
        <div class="card-header">
            <div class="m-0 card-title">
                <h3 class="m-0 fw-bolder">Informasi Akun</h3>
            </div>
            <a href="{{ route('employee.profile.setting') }}" class="btn btn-primary align-self-center">
                Perbarui Informasi
            </a>
        </div>
        <div class="card-body p-9">
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">Nama Lengkap</label>
                <div class="col-lg-8">
                    <span class="text-gray-800 fw-bolder fs-6">{{ Str::ucfirst($user->name ?? '-') }}</span>
                </div>
            </div>
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">Email</label>
                <div class="col-lg-8 fv-row">
                    <span class="text-gray-800 fw-bolder fs-6">{{ $user->email }}</span>
                </div>
            </div>
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">NIP</label>
                <div class="col-lg-8 fv-row">
                    <span class="text-gray-800 fw-bolder fs-6">{{ $user->employee->nip ?? '-' }}</span>
                </div>
            </div>
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">Jabatan</label>
                <div class="col-lg-8 fv-row">
                    <span class="text-gray-800 fw-bolder fs-6">{{ Str::ucfirst($user->employee->position ?? '-') }}</span>
                </div>
            </div>
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">Jenis Kelamin</label>
                <div class="col-lg-8 d-flex align-items-center">
                    <span class="text-gray-800 fw-bolder fs-6 me-2">{{ Str::ucfirst($user->gender ?? '-') }}</span>
                </div>
            </div>
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">Tanggal Lahir</label>
                <div class="col-lg-8 d-flex align-items-center">
                    @if ($age === 0)
                        <span class="text-gray-800 fw-bolder fs-6 me-2">{{ $user->birth_date ?? '-' }}</span>
                    @else
                        <span class="text-gray-800 fw-bolder fs-6 me-2">{{ $user->birth_date ?? '-' }} /
                            {{ $age }} Tahun</span>
                    @endif
                </div>
            </div>
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">Telepon
                    <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                        title="Nomor telepon aktif"></i></label>
                <div class="col-lg-8">
                    <span class="text-gray-800 fw-bolder fs-6">{{ $user->phone ?? '-' }}</span>
                </div>
            </div>
            <div class="row mb-7">
                <label class="col-lg-4 fw-bold text-muted">Alamat</label>
                <div class="col-lg-8">
                    <span class="text-gray-800 fw-bolder fs-6">{{ Str::ucfirst($user->address ?? '-') }}</span>
                </div>
            </div>
            @if ($profileCompletion)
                <div class="p-6 border border-dashed rounded notice d-flex bg-light-warning border-warning">
                    <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none">
                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10"
                                fill="black" />
                            <rect x="11" y="14" width="7" height="2" rx="1"
                                transform="rotate(-90 11 14)" fill="black" />
                            <rect x="11" y="17" width="2" height="2" rx="1"
                                transform="rotate(-90 11 17)" fill="black" />
                        </svg>
                    </span>
                    <div class="d-flex flex-stack flex-grow-1">
                        <div class="fw-bold">
                            <h4 class="text-gray-900 fw-bolder">Perhatian!</h4>
                            <div class="text-gray-700 fs-6">Harap lengkapi informasi akun Anda. Klik
                                <a class="fw-bolder" href="{{ route('employee.profile.setting') }}">Lengkapi Informasi
                                    Akun</a>.
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection