@extends('layout.layout')

@php
    $title = 'Edit Profil';
    $subTitle = 'Perbarui Data Diri';
@endphp

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="card border-0 shadow-sm rounded-2xl">
        <div class="card-header px-6 py-4 border-b">
            <h6 class="text-lg font-semibold">Edit Profil</h6>
        </div>
        <div class="card-body p-6">
            @if(session('success'))
                <div class="mb-4 bg-emerald-50 border border-emerald-100 text-emerald-600 px-4 py-3 rounded-2xl text-sm">
                    {{ session('success') }}
                </div>
            @endif

            <form action="{{ route('profile.update') }}" method="POST">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 gap-5">
                    <div>
                        <label class="font-semibold text-sm mb-2 block">Nama Lengkap</label>
                        <input type="text" name="name" class="form-control w-full rounded-lg" value="{{ old('name', $user->name) }}" required>
                    </div>
                    <div>
                        <label class="font-semibold text-sm mb-2 block">No. WhatsApp</label>
                        <input type="text" name="phone_number" class="form-control w-full rounded-lg" value="{{ old('phone_number', $user->profile->phone_number ?? '') }}">
                    </div>
                    <div>
                        <label class="font-semibold text-sm mb-2 block">Alamat</label>
                        <textarea name="address" class="form-control w-full rounded-lg" rows="3">{{ old('address', $user->profile->address ?? '') }}</textarea>
                    </div>
                    <div class="flex justify-end gap-3">
                        <a href="{{ url()->previous() }}" class="px-6 py-2 border rounded-lg">Batal</a>
                        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg">Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection