@include ('layouts.header')

<div class="container-fluid">
    <div class="card p-3">
        <label for="team_type" class="form-label">SELECT Team Type</label>
       <select class="custom-select" id="team_type">
            <option value="1">Operations</option>
            <option value="2">Others</option>
       </select>       
    </div>

    @if(!empty($members) && count($members))
<div class="card mt-4 p-3">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Department</th>
                <th>Designation</th>
            </tr>
        </thead>
        <tbody>
            @foreach($members as $mem)
                <tr>
                    <td>{{ $mem->empname }}</td>
                    <td>{{ $mem->dept_id }}</td>
                    <td>{{ $mem->designation }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@elseif(request('team_type'))
    <div class="alert alert-warning mt-4">No members found for this team type.</div>
@endif

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#team_type').on('change', function () {
        const teamTypeId = $(this).val();

        $.ajax({
            url: '/get-members',  // Laravel route
            method: 'POST',
            data: {
                team_type: teamTypeId,
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {
                console.log(response); // Do something with data
                // Optionally display in DOM
            },
            error: function (xhr) {
                console.error('Error:', xhr.responseText);
            }
        });
    });
</script>
  @include('layouts.footer')