@extends('layouts.admin')

@section('title', 'Edit Member — ' . $member->full_name)
@section('header_title', 'Edit Member Profile')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200/80 shadow-sm space-y-6">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="text-base font-bold text-slate-800">Edit Profile: {{ $member->full_name }}</h3>
                <p class="text-xs text-slate-500 font-mono">Member Code: {{ $member->member_code }} (ID: #{{ $member->id }})</p>
            </div>
            <a href="{{ route('admin.members.show', $member) }}" class="text-xs font-semibold text-slate-500 hover:text-slate-800">
                Cancel
            </a>
        </div>

        <form method="POST" action="{{ route('admin.members.update', $member) }}" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- Association & Membership -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Affiliated Association</label>
                    <select name="association_id" required class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 bg-white">
                        @foreach($associations as $assoc)
                            <option value="{{ $assoc->id }}" {{ $member->association_id == $assoc->id ? 'selected' : '' }}>{{ $assoc->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Membership Category</label>
                    <input type="text" name="membership_type" value="{{ $member->membership_type }}" required class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Association Membership #</label>
                    <input type="text" name="membership_no" value="{{ $member->membership_no }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                </div>
            </div>

            <!-- Personal Details -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-100">
                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Full Name</label>
                    <input type="text" name="full_name" value="{{ $member->full_name }}" required class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-medium">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Gender</label>
                    <select name="gender" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 bg-white">
                        <option value="Male" {{ $member->gender === 'Male' ? 'selected' : '' }}>Male</option>
                        <option value="Female" {{ $member->gender === 'Female' ? 'selected' : '' }}>Female</option>
                        <option value="Other" {{ $member->gender === 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Date of Birth</label>
                    <input type="date" name="date_of_birth" value="{{ $member->date_of_birth?->format('Y-m-d') }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Blood Group</label>
                    <input type="text" name="blood_group" value="{{ $member->blood_group }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 uppercase">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Father / Husband Name</label>
                    <input type="text" name="father_husband_name" value="{{ $member->father_husband_name }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Occupation</label>
                    <input type="text" name="occupation" value="{{ $member->occupation }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Membership Status</label>
                    <select name="membership_status" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 bg-white">
                        <option value="Active" {{ $member->membership_status === 'Active' ? 'selected' : '' }}>Active</option>
                        <option value="Inactive" {{ $member->membership_status === 'Inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="Suspended" {{ $member->membership_status === 'Suspended' ? 'selected' : '' }}>Suspended</option>
                    </select>
                </div>
            </div>

            <!-- Contact Details -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-100">
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Primary Mobile</label>
                    <input type="text" name="mobile_primary" value="{{ $member->mobile_primary }}" required class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Secondary Mobile</label>
                    <input type="text" name="mobile_secondary" value="{{ $member->mobile_secondary }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Email Address</label>
                    <input type="email" name="email" value="{{ $member->email }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                </div>

                <div class="sm:col-span-3">
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Residential Address</label>
                    <textarea name="residential_address" rows="2" class="block w-full text-xs rounded-xl border border-slate-300 p-3 focus:ring-2 focus:ring-teal-500">{{ $member->residential_address }}</textarea>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">City</label>
                    <input type="text" name="city" value="{{ $member->city }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">State</label>
                    <input type="text" name="state" value="{{ $member->state }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Postal PIN Code</label>
                    <input type="text" name="pincode" value="{{ $member->pincode }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                </div>
            </div>

            <!-- Action buttons -->
            <div class="pt-4 border-t border-slate-100 flex items-center justify-between">
                <a href="{{ route('admin.members.show', $member) }}" class="px-4 py-2.5 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800 transition">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-md shadow-teal-500/20">
                    Save Changes & Update Audit Trail
                </button>
            </div>
        </form>
    </div>

</div>
@endsection