@extends('layouts.app')
@section('title', 'Profil Pengguna')
@section('content')
{{-- @include('layouts.sidebar') --}}

<div style="margin-left:261px; margin-top:107px; min-height:calc(100vh - 107px); background:#F4FFFF; padding:32px 40px 40px 40px;">
    <div style="max-width:1200px; margin:0;">
        <div style="background:#fff; border-radius:16px; padding:32px 40px 40px 40px; box-shadow:0 4px 16px rgba(0,0,0,0.08);">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;">
                <h2 style="font-family:'Poppins',sans-serif; font-size:2rem; font-weight:600; color:#222; margin:0;">Profil</h2>
                @include('layouts.date-clock')
            </div>
            <div style="display:flex; flex-direction:column; align-items:center;">
                <div style="position:relative; margin-bottom:32px;">
                    <img src="{{ asset('images/profile-default.jpg') }}" alt="Profile" style="width:120px; height:120px; border-radius:50%; object-fit:cover; border:4px solid #F4FFFF;">
                    <a href="#" style="position:absolute; right:8px; bottom:8px; background:#fff; border-radius:50%; padding:4px; box-shadow:0 2px 6px rgba(0,0,0,0.08);">
                        <img src="{{ asset('images/icon/Group 1000001113.svg') }}" alt="" style="width:21px; height:21px;">
                    </a>
                </div>
                <form style="width:100%; max-width:900px;">
                    <div style="display:flex; gap:16px; margin-bottom:16px;">
                        <input type="text" value="Mohamad Ahmad Bin Abu" readonly style="flex:2; background:#E6E6E6; border:none; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                    </div>
                    <div style="display:flex; gap:16px; margin-bottom:16px;">
                        <input type="text" value="991215-08-1066" readonly style="flex:2; background:#E6E6E6; border:none; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                        <input type="text" value="26" readonly style="flex:1; background:#E6E6E6; border:none; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                    </div>
                    <div style="display:flex; gap:16px; margin-bottom:16px;">
                        <input type="email" value="testing@gmail.com" readonly style="flex:2; background:#E6E6E6; border:none; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                        <input type="text" value="012-3456789" readonly style="flex:2; background:#fff; border:1px solid #C7C7C7; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                    </div>
                    <div style="margin-bottom:16px;">
                        <input type="text" value="Jalan Lesung Pipit" readonly style="width:100%; background:#fff; border:1px solid #C7C7C7; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                    </div>
                    <div style="margin-bottom:16px;">
                        <input type="text" value="Kampung Manjol" readonly style="width:100%; background:#fff; border:1px solid #C7C7C7; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                    </div>
                    <div style="margin-bottom:32px;">
                        <input type="text" value="30020" readonly style="width:100%; background:#fff; border:1px solid #C7C7C7; border-radius:6px; padding:12px 16px; font-size:16px; color:#555;">
                    </div>
                    <button type="button" style="background:#056B66; color:#fff; border:none; border-radius:6px; padding:12px 32px; font-size:16px; font-family:'Poppins',sans-serif; font-weight:500; cursor:pointer;">Kemaskini</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection