@extends('layouts.app')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css" rel="stylesheet">
<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">Create Member</h4>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('members.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <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" required>
                                </div>
                                <div class="mb-3">
                                    <label for="family_id" class="form-label">Family</label>
                                    <select class="form-control" id="family_id" name="family_id" required>
                                        <option value="">Select Family</option>
                                        @foreach($families as $family)
                                            <option value="{{ $family->id }}">{{ $family->family_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <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" required>
                                </div>
                                <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">
                                </div>
                                <div class="mb-3">
                                    <label for="geolocation" class="form-label">Geolocation (Lat, Long)</label>
                                    <input type="text" class="form-control" id="geolocation" name="geolocation">
                                </div>
                                <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">
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email">
                                </div>
                                <div class="mb-3">
                                    <label for="occupation" class="form-label">Occupation</label>
                                    <input type="text" class="form-control" id="occupation" name="occupation">
                                </div>
                                <div class="mb-3">
                                    <label for="organization" class="form-label">Organization</label>
                                    <input type="text" class="form-control" id="organization" name="organization">
                                </div>
                                <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">
                                </div>
                                <div class="mb-3">
                                    <label for="member_groups" class="form-label">Member Groups</label>
                                    <select class="form-control" id="member_groups" name="member_groups[]" multiple>
                                        @foreach($memberGroups as $memberGroup)
                                            <option value="{{ $memberGroup->id }}">{{ $memberGroup->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="photo" class="form-label">Photo</label>
                                    <input type="file" class="form-control" id="photo" name="photo">
                                </div>
                                <button type="submit" class="btn btn-primary">Create Member</button>
                                <a href="{{ route('members.index') }}" class="btn btn-secondary">Cancel</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>
@endsection

@push('scripts')
<script>
    // Initialize ChoiceJS for the member_groups select element
    document.addEventListener('DOMContentLoaded', function () {
        const memberGroupsSelect = document.getElementById('member_groups');
        if (memberGroupsSelect) {
            new Choices(memberGroupsSelect, {
                removeItemButton: true, // Allow removing selected items
                searchEnabled: true, // Enable search functionality
                placeholder: true, // Show a placeholder
                placeholderValue: 'Select member groups', // Custom placeholder text
                searchPlaceholderValue: 'Search member groups', // Custom search placeholder text
            });
        }
    });
</script>
@endpush