@include ('layouts.header')

<div class="container">
     <div class="card">
         <a href="{{ url('index') }}" target="_self" class="btn btn-info" style="float:right">Back</a>
          <label for="location">Location</label>
          <select  id="location" class="custom-select" name="location">
            <option value="SELECT">SELECT</option>
            @foreach($location as $loc)
            <option value="{{ $loc->lid }}">{{$loc->lname}}</option>
             @endforeach
        </select>
    </div>
    <!-- Roles will be  displayed here -->
    <div class="roles"></div>
    <!-- Roles -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
        $(document).ready(function() {
                $('#location').change(function(){
                        var locationId= $(this).val();
            if (locationId) {
                    $.ajax({
                        url: '{{ route('fetch.location') }}',  // Use named route for AJAX request
                        type: 'POST',
                        data: {
                            loc_id: locationId,
                            _token: '{{ csrf_token() }}'  // Add CSRF token for security
                        },
                  success: function(data) {
                 // Clear the existing roles display
                  $('.roles').html('');
                   if (data.length > 0) {
                     var rolesHtml = '<h1>Roles:</h1><div class="box1">';
                            $.each(data, function(index, role) {
                                // Generate the URL dynamically using Laravel's route helper
                                var roleUrl = '{{ route("userinfo") }}' + '?role_id=' + encodeURIComponent(role.role_id) + '&loc_id=' + locationId;
                                
                                rolesHtml += '<div class="role-box"><p><a href="' + roleUrl + '">' + role.role_name + '</a></p></div>';
                            });
                            rolesHtml += '</div>';
                            $('.roles').html(rolesHtml);  // Display roles
                        } else {
                            $('.roles').html('<p>No roles found for the selected location.</p>');
                        }
                    },
                        error: function(xhr, status, error) {
                            console.error('Error fetching roles:', error);
                        }
                    });
                } else {
                    // Clear the roles display if no location is selected
                    $('.roles').html('');
                }
            });
        });
</script>
@include('layouts.footer')