@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::open(['route' => 'mitarbeiter.sorted', 'enctype' => 'multipart/form-data', 'accept-charset' => 'UTF-8']) !!}
        <button type="submit" class="red-button save-sort-order">Speichern</button>
        {!! Form::hidden('sort_order', "", ['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::close() !!}
@endsection

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