@extends('layouts.app')

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Family '])
<div class="container">
    <div class="card">
   <div class="card-header">
    <h5>Add Family Members</h5>
   </div>
<div class="card-body">
    <!-- Dynamic form for family members -->
    <form action="{{route('family-store')}}" method="POST" enctype="multipart/form-data">
        @csrf

        <input type="hidden" name="parent_id" value="{{ $parent->id }}">

        <div id="family-members">
            <!-- Family member row template -->
            <div class="family-member-row row mb-4">
                <div class="col-md-3 mb-3">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" name="family_members[0][name]" required>
                </div>

                <div class="col-md-3 mb-3">
                    <label for="age" class="form-label">Age</label>
                    <input type="number" class="form-control" name="family_members[0][age]" required>
                </div>

                <div class="col-md-3 mb-3">
                    <label for="relationship" class="form-label">Relationship</label>
                    <select class="form-control" name="family_members[0][relationship]" required>
                        <option value="1">Father</option>
                        <option value="2">Mother</option>
                        <option value="3">Son</option>
                        <option value="4">Daughter</option>
                        <option value="5">Wife</option>
                        <option value="6">Husband</option>
                    </select>
                </div>

                <div class="col-md-3 mb-3">
                    <label for="profession" class="form-label">Profession</label>
                    <input type="text" class="form-control" name="family_members[0][profession]" required>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="profession" class="form-label">Contact Number</label>
                    <input type="number" class="form-control" name="family_members[0][contact]" required>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="profession" class="form-label">Address</label>
                    <input type="text" class="form-control" name="family_members[0][address]" required>
                </div>

                <div class="col-md-3 mb-3">
                    <label for="profile_image" class="form-label">Profile Image</label>
                    <input type="file" class="form-control" name="family_members[0][profile_image]" accept="image/*">
                </div>

                <div class="col-md-3 mt-4">
                    <button type="button" class="btn btn-danger remove-row">Remove Row</button>
                </div>
                <hr>
            </div>
        </div>

        <!-- Add New Row Button -->
        <button type="button" class="btn btn-primary" id="add-row">Add Row</button>
        <button type="submit" class="btn btn-success">Save All Members</button>
        <button type="button" class="btn btn-secondary" onclick="window.history.back();">Cancel</button>

    </form>
</div>
</div>
</div>
@endsection

@push('scripts')
<script>
    let rowCount = 1; // Keep track of how many rows have been added

    // Add new row when "Add Row" button is clicked
    document.getElementById('add-row').addEventListener('click', function () {
        const familyMembersContainer = document.getElementById('family-members');
        
        // Create a new row with incremented index
        const newRow = document.createElement('div');
        newRow.classList.add('family-member-row', 'row', 'mb-4');
        newRow.innerHTML = `
            <div class="col-md-3 mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" name="family_members[${rowCount}][name]" required>
            </div>

            <div class="col-md-3 mb-3">
                <label for="age" class="form-label">Age</label>
                <input type="number" class="form-control" name="family_members[${rowCount}][age]" required>
            </div>

            <div class="col-md-3 mb-3">
                <label for="relationship" class="form-label">Relationship</label>
                <select class="form-control" name="family_members[${rowCount}][relationship]" required>
                    <option value="1">Father</option>
                        <option value="2">Mother</option>
                        <option value="3">Son</option>
                        <option value="4">Daughter</option>
                        <option value="5">Wife</option>
                        <option value="6">Husband</option>
                </select>
            </div>

            <div class="col-md-3 mb-3">
                <label for="profession" class="form-label">Profession</label>
                <input type="text" class="form-control" name="family_members[${rowCount}][profession]" required>
            </div>

           <div class="col-md-3 mb-3">
                    <label for="profession" class="form-label">Contact Number</label>
                    <input type="number" class="form-control" name="family_members[${rowCount}][contact]" required>
                </div>

             <div class="col-md-3 mb-3">
                    <label for="profession" class="form-label">Address</label>
                    <input type="text" class="form-control" name="family_members[${rowCount}][address]" required>
                </div>

                <div class="col-md-3 mb-3">
                    <label for="profile_image" class="form-label">Profile Image</label>
                    <input type="file" class="form-control" name="family_members[${rowCount}][profile_image]" accept="image/*">
                </div>

                <div class="col-md-3 mt-4">
                    <button type="button" class="btn btn-danger remove-row">Remove Row</button>
                </div>
            <hr>
        `;

        // Add the new row to the container
        familyMembersContainer.appendChild(newRow);

        // Increment the row count
        rowCount++;
    });

    // Remove row when "Remove Row" button is clicked
    document.addEventListener('click', function (event) {
        if (event.target && event.target.classList.contains('remove-row')) {
            event.target.closest('.family-member-row').remove();
        }
    });
</script>
@endpush