@extends('landing.layout')

@section('title', 'Profile')

@section('content')
    <section class="relative py-16 md:py-24">
        <div class="container relative">
            <div class="mx-auto max-w-4xl">

                <div class="mb-8 rounded-md bg-white p-6 shadow-sm shadow-slate-100 dark:bg-slate-900 dark:shadow-slate-800">
                    <div class="flex flex-col items-center gap-6 md:flex-row md:items-start">

                        <div class="relative">
                            <div
                                class="size-35 overflow-hidden rounded-full bg-gradient-to-br from-violet-600 to-fuchsia-600 p-1 shadow-md shadow-slate-100 dark:shadow-slate-800">
                                <div class="size-full overflow-hidden rounded-full bg-white">
                                    <img class="h-full w-full object-cover" src="{{ asset('landing/images') }}/team/2.jpg"
                                        alt="Profile"
                                        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
                                    <div
                                        class="hidden h-full w-full items-center justify-center bg-gradient-to-br from-violet-600 to-fuchsia-600 text-white">
                                        <i class="iconoir-user text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            <button
                                class="absolute end-5 size-8 rounded-full bg-violet-600 text-white shadow-sm transition-all duration-500 hover:bg-violet-700"
                                style="top: 110px;">
                                <i class="iconoir-camera text-xs"></i>
                            </button>
                        </div>

                        <div class="flex-1 text-center md:text-left">
                            <h1 class="mb-2 text-3xl font-bold text-slate-900 dark:text-white">John Doe</h1>
                            <p class="mb-4 text-lg text-slate-400">Senior Developer</p>
                            <div class="flex flex-wrap justify-center gap-4 text-sm text-slate-400 md:justify-start">
                                <div class="me-3 flex items-center gap-2">
                                    <i class="iconoir-mail text-violet-600"></i>
                                    <span>john.doe@example.com</span>
                                </div>
                                <div class="me-3 flex items-center gap-2">
                                    <i class="iconoir-phone text-violet-600"></i>
                                    <span>+62 812 3456 7890</span>
                                </div>
                                <div class="me-3 flex items-center gap-2">
                                    <i class="iconoir-map-pin text-violet-600"></i>
                                    <span>Jakarta, Indonesia</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-8">
                    <div class="mt-8">
                        <div class="mx-auto max-w-2xl">
                            <div
                                class="rounded-md bg-white p-6 shadow-sm shadow-slate-100 dark:bg-slate-900 dark:shadow-slate-800">
                                <h3 class="mb-6 text-lg font-semibold text-slate-900 dark:text-white">Profile</h3>

                                <form>
                                    <div class="mb-5">
                                        <label class="font-medium text-slate-900 dark:text-white"
                                            for="profile_name">Nama:</label>
                                        <input
                                            class="mt-2 h-10 w-full rounded-md border border-slate-100 bg-transparent px-3 py-2 focus:border-violet-600/30 focus:outline-none dark:border-slate-800 dark:focus:border-violet-600/30"
                                            id="profile_name" type="text" value="John Doe" placeholder="Nama :">
                                    </div>

                                    <div class="grid lg:grid-cols-12 lg:gap-6">
                                        <div class="mb-5 lg:col-span-6">
                                            <label class="font-medium text-slate-900 dark:text-white"
                                                for="profile_email">Email:</label>
                                            <input
                                                class="mt-2 h-10 w-full rounded-md border border-slate-100 bg-transparent px-3 py-2 focus:border-violet-600/30 focus:outline-none dark:border-slate-800 dark:focus:border-violet-600/30"
                                                id="profile_email" type="email" value="john.doe@example.com"
                                                placeholder="Email :">
                                        </div>

                                        <div class="mb-5 lg:col-span-6">
                                            <label class="font-medium text-slate-900 dark:text-white"
                                                for="profile_phone">Telepon:</label>
                                            <input
                                                class="mt-2 h-10 w-full rounded-md border border-slate-100 bg-transparent px-3 py-2 focus:border-violet-600/30 focus:outline-none dark:border-slate-800 dark:focus:border-violet-600/30"
                                                id="profile_phone" type="text" value="+62 812 3456 7890"
                                                placeholder="Nomor Telepon :">
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-1">
                                        <div class="mb-5">
                                            <label class="font-medium text-slate-900 dark:text-white"
                                                for="profile_position">Posisi:</label>
                                            <input
                                                class="mt-2 h-10 w-full rounded-md border border-slate-100 bg-transparent px-3 py-2 focus:border-violet-600/30 focus:outline-none dark:border-slate-800 dark:focus:border-violet-600/30"
                                                id="profile_position" value="Senior Developer" placeholder="Posisi :">
                                        </div>

                                        <div class="mb-5">
                                            <label class="font-medium text-slate-900 dark:text-white"
                                                for="profile_bio">Bio:</label>
                                            <textarea
                                                class="mt-2 h-28 w-full rounded-md border border-slate-100 bg-transparent px-3 py-2 focus:border-violet-600/30 focus:outline-none dark:border-slate-800 dark:focus:border-violet-600/30"
                                                id="profile_bio" placeholder="Bio :">Seorang developer berpengalaman dengan fokus pada pengembangan aplikasi web.</textarea>
                                        </div>
                                    </div>

                                    <button
                                        class="inline-flex h-10 items-center justify-center rounded-md bg-violet-600 px-5 font-medium tracking-wide text-white transition-colors hover:bg-violet-700"
                                        type="submit">
                                        <i class="iconoir-check me-2"></i>
                                        Simpan Perubahan
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection