@extends('layouts.app')

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Edit Member</h4>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('members.update', $member) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                <!-- Member Name -->
                                <div class="mb-3">
                                    <label for="member_name" class="form-label">Member Name</label>
                                    <input type="text" class="form-control" id="member_name" name="member_name" value="{{ $member->member_name }}" required>
                                </div>

                                <!-- Family -->
                                <div class="mb-3">
                                    <label for="family_id" class="form-label">Family</label>
                                    <select class="form-control" id="family_id" name="family_id" required>
                                        @foreach($families as $family)
                                            <option value="{{ $family->id }}" {{ $member->family_id == $family->id ? 'selected' : '' }}>{{ $family->family_name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Address 1 -->
                                <div class="mb-3">
                                    <label for="address_1" class="form-label">Address 1</label>
                                    <input type="text" class="form-control" id="address_1" name="address_1" value="{{ $member->address_1 }}" required>
                                </div>

                                <!-- Address 2 -->
                                <div class="mb-3">
                                    <label for="address_2" class="form-label">Address 2</label>
                                    <input type="text" class="form-control" id="address_2" name="address_2" value="{{ $member->address_2 }}">
                                </div>

                                <!-- Geolocation -->
                                <div class="mb-3">
                                    <label for="geolocation" class="form-label">Geolocation (Lat, Long)</label>
                                    <input type="text" class="form-control" id="geolocation" name="geolocation" value="{{ $member->geolocation }}">
                                </div>

                                <!-- Whatsapp Number -->
                                <div class="mb-3">
                                    <label for="whatsapp_number" class="form-label">Whatsapp Number</label>
                                    <input type="text" class="form-control" id="whatsapp_number" name="whatsapp_number" value="{{ $member->whatsapp_number }}">
                                </div>

                                <!-- Email -->
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" value="{{ $member->email }}">
                                </div>

                                <!-- Occupation -->
                                <div class="mb-3">
                                    <label for="occupation" class="form-label">Occupation</label>
                                    <input type="text" class="form-control" id="occupation" name="occupation" value="{{ $member->occupation }}">
                                </div>

                                <!-- Organization -->
                                <div class="mb-3">
                                    <label for="organization" class="form-label">Organization</label>
                                    <input type="text" class="form-control" id="organization" name="organization" value="{{ $member->organization }}">
                                </div>

                                <!-- Date of Birth -->
                                <div class="mb-3">
                                    <label for="date_of_birth" class="form-label">Date of Birth</label>
                                    <input type="date" class="form-control" id="date_of_birth" name="date_of_birth" value="{{ $member->date_of_birth }}">
                                </div>

                                <!-- Member Groups -->
                                <div class="mb-3">
                                    <label for="member_groups" class="form-label">Member Groups</label>
                                    <select class="form-control choicejs-multiple" id="member_groups" name="member_groups[]" multiple>
                                        @foreach($memberGroups as $memberGroup)
                                            <option value="{{ $memberGroup->id }}" {{ in_array($memberGroup->id, $member->memberGroups->pluck('id')->toArray()) ? 'selected' : '' }}>{{ $memberGroup->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Photo -->
                                <div class="mb-3">
                                    <label for="photo" class="form-label">Photo</label>
                                    <input type="file" class="form-control" id="photo" name="photo">
                                    @if ($member->photo)
                                        <div class="mt-2">
                                            <img src="{{ asset('../../admin/storage/app/public/' . $member->photo) }}" alt="Member Photo" class="img-thumbnail" width="150">
                                        </div>
                                    @endif
                                </div>

                                <!-- Submit Button -->
                                <button type="submit" class="btn btn-primary">Update Member</button>
                                <a href="{{ route('members.index') }}" class="btn btn-secondary">Cancel</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Initialize ChoiceJS for multiselect
    document.addEventListener('DOMContentLoaded', function () {
        new Choices('#member_groups', {
            removeItemButton: true,
        });
    });
</script>
@endpush