@extends('layouts.master', ['title' => 'Routes Permissions'])
@section('content')
<div class="content-wrapper">
    <div class="row">
      <div class="col-12 grid-margin">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Permission</h4>
            <form action="{{ route('permissions.store') }}" method="post">
              @csrf
            <div class="row">
              <div class="col-md-3">
                  <div class="form-group">
                      <label for="inputName">Roles</label>
                      <select id="inputStatus" name="role_id" class="form-control custom-select">
                          <option>Select one</option>
                          @foreach($roles as $key => $role)
                              <option value="{{$role->id}}">{{ $role->name }}</option>
                          @endforeach
                      </select>
                          @error('role_id')
                              <small class="text-danger">{{ $message }}</small>
                          @enderror
                      </div>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="form-group" id="checkboxInput" style="height: 400px; overflow-y: scroll;">
                      <label for="inputName">Route Name </label></br>
                      @error('route_name')
                              <small class="text-danger">{{ $message }}</small>
                          @enderror
                      </div>
                  </div>
                  <button type="submit" class="btn btn-success float-right">Submit</button>
              </div>
          </div>                               
        </form>
          </div>
        </div>
      </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
       $('#inputStatus').change(function() {
        var roleId = $(this).val(); 

        $.ajax({
            url: "{{ route('permissions.fetch') }}",
            type: "GET",
            data: { role_id: roleId },
            success: function(response) {

                // console.log(response);

                var routes = response.routes;
                // console.log(routes);

                var resultData = response.data;
                // var resultData = response.data.route_name;
                $('#checkboxInput').empty();
                // if(resultData.length > 0){
                    routes.forEach(function(route) {
                        var checked = '';
                        if (resultData) {
                            var checked = resultData.route_name.includes(route.route_name) ? 'checked' : ''; // Check if route_name is present in resultData
                        }
                        $('#checkboxInput').append(`<input type="checkbox" name="route_name[]" value="${route.route_name}" ${checked}> <span class="text-bold">${route.route_name}<span><br/>`);
                    });
                // } else {
                //     $('#checkboxInput').html('<option>No data available.</option>');
                // }
            },
            error: function(xhr) {
                console.log(xhr.responseText); // Log any errors for debugging
            }
        });
    });
    </script>
@endsection