@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'User Verification'])
    <div class="container">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h4>User</h4>
                {{-- <a href="{{route('user-add')}}" class="btn btn-primary text-end"><i
                        class="fa-solid fa-plus mx-2"></i>Add
                    User</a> --}}
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="myTable1">
                        <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">Name</th>
                                <th class="text-center">Email</th>
                                <th class="text-center">Phone</th>
                                <th class="text-center">City</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($user as $index => $data)                                     
                                <tr>
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td class="text-center">{{$data->first_name ?? ''}}</td>
                                    <td class="text-center">{{$data->email ?? ''}}</td>
                                    <td class="text-center">{{$data->phone ?? ''}}</td>
                                    <td class="text-center">{{$data->city ?? ''}}</td>
                                    <td class="text-center">
                                        <a  href="{{ url('/family-add/' . $data->id) }}">
                                            <i class="fa-solid fa-user-plus"></i>
                                        </a>
                                        <a href="#" class="view-family-members" data-bs-toggle="tooltip" data-bs-placement="top" title="View" data-id="{{ $data->id }}">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
   
    <!-- Modal for displaying family members -->
<!-- Modal for displaying family members -->
<div class="modal fade" id="familyMembersModal" tabindex="-1" aria-labelledby="familyMembersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="familyMembersModalLabel">Family Members</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                <!-- Table to display family members -->
                <table class="table table-bordered table-striped" id="familyMembersTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Relationship</th>
                            <th>Profession</th>
                            <th>Age</th>
                            <th>Contact Number</th>
                            <th>Address</th>
                        </tr>
                    </thead>
                    <tbody id="familyMembersList">
                        <!-- Family members will be populated here dynamically -->
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
</div>


@endsection
@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('.tooltip-trigger'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
    // Open the modal when the "View" button is clicked
    $('.view-family-members').click(function (e) {
        e.preventDefault();  // Prevent the default link behavior

        var userId = $(this).data('id');  // Get the user ID from the clicked button

        // Make an AJAX request to fetch family members
        $.ajax({
            url: '/get-family-members/' + userId,  // Your route for fetching family members
            method: 'GET',
            success: function (response) {
                var familyMembersHtml = '';  // Variable to store the family members' HTML

                // Loop through the family members and create an HTML table row for each one
                response.forEach(function (member) {
                    familyMembersHtml += `
                        <tr>
                            <td>${member.name}</td>
                            <td>${member.relationship.name}</td>
                            <td>${member.profession}</td>
                            <td>${member.age}</td>
                            <td>${member.contact_number}</td>
                            <td>${member.address}</td>
                        </tr>
                    `;
                });

                // Populate the modal with the family members' HTML
                $('#familyMembersList').html(familyMembersHtml);

                // Show the modal
                $('#familyMembersModal').modal('show');
            },
            error: function () {
                alert('Error fetching family members!');
            }
        });
    });
});
    </script>

@endpush