@extends('layouts.master')

@section('content')
  <div class="cover-image"></div>
  <div class="page-description">
    @lang('descriptions.mitarbeiter.sorting')
  </div>

  <link type="text/css" rel="stylesheet" href="{{ asset('css/sort/jquery-ui.min.css') }}">
  <link type="text/css" rel="stylesheet" href="{{ asset('css/sort/jquery-ui.structure.min.css') }}">
  <link type="text/css" rel="stylesheet" href="{{ asset('css/sort/jquery-ui.theme.min.css') }}">
  <script src="{{ asset('js/sort/jquery-ui.min.js') }}"></script>

  <form method="POST" action="{{ route('mitarbeiter.sorted') }}" enctype="multipart/form-data" accept-charset="UTF-8">
    @csrf
    <button type="submit" class="red-button save-sort-order">Speichern</button>
    <input type="hidden" name="sort_order" value="" class="sort-order">

    <div class="sort-container">
      <div class="page-headings">
        @for ($i = 1; $i <= count($list); $i++)
          <div class="page-{{ $i }} page-heading">
            <span class="badge badge-danger">Seite {{ $i }}</span>
          </div>
        @endfor
      </div>

      <div class="sort-list">
        @foreach ($list as $users)
          @foreach ($users as $user)
            <div id="user-{{ $user->id }}" class="sort-entry"
              style="background: url({{ asset('images/profile_pictures/' . $user->image) }}) center / cover;"></div>
          @endforeach
        @endforeach
      </div>
    </div>
  </form>
@endsection

@section('back_button')
  <a href="{{ route('ipad') }}" class="grey-button">Zurück</a>
@endsection