@extends('layout.admin', ['title' => 'Админка - Справочник образование'])
  
  @section('script')

      <script>
          const btns = document.querySelectorAll('.btn_del');
          btns.forEach(btn => {
              btn.addEventListener('click', (e) => {
                  console.log('click button');
                  let id = e.target.id;
                  let form = document.getElementById("form_modal_del");

                  let action_template = form.getAttribute("data-action-template");
                  form.action = action_template + "/" + e.target.getAttribute('data-education');

                  //document.getElementById("title_modal").innerHTML = id;
                  console.log(e.target.getAttribute('data-education'));
              });
          });
      </script>
  @endsection

  @section('modal')
      @include('admin.education.modal')

  @endsection
  
  @section('search')
  
  @endsection
  
  @section('content')
  
      <a href="{{ route('admin.education.create') }}" style="width: 195px" class="px-3 py-1 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-md active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
          Добавить образование
      </a>
      <br>
      <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">№</th>
                      <th class="px-4 py-3">Название образования</th>

                      <th class="px-4 py-3">Редактировать</th>

                      <th class="px-4 py-3">Дата создан/изменен</th>

                  </tr>
                  </thead>
                  <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                  @foreach($education as $cat)
                      <tr class="text-gray-700 dark:text-gray-400">

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

                              {{$cat->id}}
                          </td>

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

                              {{ mb_strimwidth($cat->name, 0, 50, "...") }}

                          </td>

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

                              @if ($cat->id)
                                <a href="{{ route('admin.education.edit', ['education' => $cat->id]) }}">Изменить</a>
                              | <a @click="openModal" style="cursor: pointer;" data-education="{{$cat->id}}" class="btn_del btn btn-danger">Удалить</a>
                              @endif

                          </td>

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

                               <div class="flex items-center text-sm">
                                   <div>
                                       <p class="font-semibold">{{ date('d.m.Y', strtotime($cat->created_at)) }}</p>
                                       <p class="text-xs text-gray-600 dark:text-gray-400">
                                           {{ date('d.m.Y', strtotime($cat->updated_at)) }}
                                       </p>
                                   </div>
                               </div>

                          </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">
              <?=$education->appends($_GET)->links('admin.pagginate'); ?>
          </div>
      </div>
  @endsection