@extends('admin.layout')

@section('content')
<div class="max-w-3xl mx-auto bg-white p-8 rounded-2xl shadow-lg mt-8">

    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h2 class="text-3xl font-bold text-gray-800">Edit Member</h2>
            <p class="text-gray-500 mt-1">Update member information and profile image</p>
        </div>

        <a href="{{ route('members.index') }}"
           class="text-sm text-gray-600 hover:text-gray-900 transition">
            ← Back to Members
        </a>
    </div>

    <!-- Edit Form -->
    <form method="POST"
          action="{{ route('members.update', $member->id) }}"
          enctype="multipart/form-data"
          class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Name -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
                Name
            </label>
            <input type="text"
                   name="name"
                   value="{{ old('name', $member->name) }}"
                   class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
                   required>
        </div>

        <!-- Role -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
                Role
            </label>
            <input type="text"
                   name="role"
                   value="{{ old('role', $member->role) }}"
                   class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
                   required>
        </div>

        <!-- Image Upload -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
                Profile Image
            </label>
            <input type="file"
                   name="image"
                   accept="image/*"
                   class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">
        </div>

        <!-- Description -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">
                Description
            </label>
            <textarea name="description"
                      rows="5"
                      class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 transition">{{ old('description', $member->description) }}</textarea>
        </div>

        <!-- Actions -->
        <div class="flex justify-end gap-4">
            <a href="{{ route('members.index') }}"
               class="px-5 py-2 border rounded-lg text-gray-700 hover:bg-gray-100 transition">Cancel</a>

            <button type="submit"
                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-md transition">
                Update Member
            </button>
        </div>

    </form>
</div>
@endsection
