@use('App\Support\Img')
<x-layouts.dashboard title="My profile">
    <h1 class="mb-6 text-2xl font-bold text-slate-900 dark:text-white">Edit profile</h1>
    <form method="POST" action="{{ route('member.profile.update') }}" enctype="multipart/form-data" class="card max-w-3xl p-6">
        @csrf @method('PUT')
        <div class="flex items-center gap-4">
            <img src="{{ Img::avatar($member->photo, $member->name) }}" alt="" class="h-20 w-20 rounded-full object-cover">
            <x-field name="photo" label="Change photo" type="file" accept="image/*" class="flex-1" />
        </div>
        <div class="mt-6 grid gap-4 sm:grid-cols-2">
            <x-field name="name" label="Name" :value="$member->name" required />
            <x-field name="phone" label="Phone" :value="$member->phone" required />
            <x-field name="section" label="Section" :value="$member->section" required />
            <x-select name="blood_group" label="Blood group" :options="array_combine(\App\Models\Member::BLOOD_GROUPS, \App\Models\Member::BLOOD_GROUPS)" :value="$member->blood_group" required />
            <x-field name="github" label="GitHub" type="url" :value="$member->github" />
            <x-field name="facebook" label="Facebook" type="url" :value="$member->facebook" />
            <x-field name="linkedin" label="LinkedIn" type="url" :value="$member->linkedin" class="sm:col-span-2" />
        </div>
        <h2 class="mb-3 mt-8 font-bold text-slate-900 dark:text-white">Change password <span class="text-sm font-normal text-slate-500">(leave blank to keep current)</span></h2>
        <div class="grid gap-4 sm:grid-cols-2">
            <x-field name="password" label="New password" type="password" autocomplete="new-password" />
            <x-field name="password_confirmation" label="Confirm new password" type="password" autocomplete="new-password" />
        </div>
        <div class="mt-8 flex gap-3">
            <button class="btn btn-primary">Save changes</button>
            <a href="{{ route('member.dashboard') }}" class="btn btn-ghost">Cancel</a>
        </div>
    </form>
</x-layouts.dashboard>