@extends('layout.admin', ['title' => 'Роли администраторов и менеджеров для каждой страницы'])
  
  @section('script')
      <script>
          $(document).ready(function() {
              $(document).on('click', '.check_click', function () {
                  var this_ = $(this);

                  var value_id = this_.attr('data-id');

                  var field = this_.attr('data-field');
                  var ajax_block = $('#ajax_block');
                  var bool = 0;
                  var str_get = '';
  
                  if(this.checked){
                      bool = 1;
                  } else {
                      bool = 0;
                  }

                  console.log(field);

                  str_get = "id=" + value_id + "&" + field + "=" + bool;

                  console.log(str_get);
  
                  $.ajax({
                      type: "GET",
                      url: "{{ url()->full()}}",
                      data: str_get,
                      success: function (data) {

                          console.log('Обновление таблицы ролей ');

                          //data = JSON.parse(data);
                          //console.log(data);
                          ajax_block.html(data);
                      },
                      headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                      },
                      error: function (data) {
                          console.log('Error: ' + data);
                      }
                  });
              });
          });
      </script>
  @endsection
  
  @section('content')
      <div class="w-full overflow-hidden rounded-lg shadow-xs" id="ajax_block">
          <div class="w-full overflow-x-auto">
              <table class="w-full whitespace-no-wrap">
                  <thead>
                  <tr
                      class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800"
                  >
                      <th class="px-4 py-3 text-xs">№</th>
                      <th class="px-4 py-3 text-xs">Раздел</th>
                      <th class="px-4 py-3 text-xs">URL-страницы</th>
                      <th class="px-4 py-3 text-xs">Админ</th>
                      <th class="px-4 py-3 text-xs">Менеджер</th>
                      <th class="px-4 py-3 text-xs">Дата регист.</th>
                  </tr>
                  </thead>
                  <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                  @foreach($roles as $role)
                      <tr class="text-gray-700 dark:text-gray-400">
                          <td class="px-4 py-3 text-xs">
                              {{$role->id}}
                          </td>
                          <td class="px-4 py-3 text-xs">
                              {{$role->name}}
                          </td>
                          <td class="px-4 py-3 text-xs">
                              {{ $role->url_page }}
                          </td>
                          <td class="px-4 py-3 text-xs">

                              <input type="checkbox" class="check_click" data-id="{{$role->id}}" data-field="is_admin" name="admin_{{$role->id}}" {{ ($role->is_admin) ? "checked" : "" }}/>

                          </td>
                          <td class="px-4 py-3 text-xs">

                              <input type="checkbox" class="check_click"  data-id="{{$role->id}}" data-field="is_manager" name="manager_{{$role->id}}" {{ ($role->is_manager) ? "checked" : "" }}/>

                          </td>
  
                          <td class="px-4 py-3 text-xs">
                              {{ date('d.m.Y', strtotime($role->created_at)) }}
                          </td>
                      </tr>
                  @endforeach
                  </tbody>
              </table>
          </div>
  
          <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">

              {{$roles->links('admin.pagginate') }}
          </div>
      </div>
  
  @endsection