@extends('layouts.app')

@section('title') Podgląd sali @endsection
@section('additional_meta')
    <script type="text/javascript" src="{{ asset('js/map/jquery.seat-charts.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/map/seatchart.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/map/seatchart-preview.js') }}"></script>

    <link rel="stylesheet" type="text/css" href="{{ asset('css/map/jquery.seat-charts.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/map/seatchart-preview.css') }}">
@endsection

@section('content')
    <div class="front-indicator">
        <div class="preview-box checkout-button-preview">
            <a href="{{ route('user_classes') }}" class="checkout-button"> Zakończ podgląd </a>
        </div>
        <div class="seat-p-preview">
            <p class="seat-p">
                {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->name }},
                {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->weekday }}
                {{ App\Classes::find($classes_id)->date }} {{ App\Subject::find(App\Classes::find($classes_id)->subject_id)->time }},
                <b>sala {{ App\Room::find(App\Subject::find(App\Classes::find($classes_id)->subject_id)->room_id)->name }}</b>
            </p>
        </div>

    </div>
    <div class="preview-page-content">
        <div class="preview-attendance-table">
            <div class="card-header custom-header">
                <h4> Lista obecności <span class="badge badge-secondary"> {{ $attendances->count() }} </span></h4>
                <a href="{{ route('user_export', [$classes_id]) }}" class="btn btn-success btn-export" title="Wyeksportuj tabelę do xlsx"> <i class="fa fa-file-excel-o"></i> Wyeksportuj (.xlsx) </a>
            </div>
            <div class="card-body card-custom">
                <span class="sort-span"> Sortuj: </span>
                <input type="hidden" id="orderBy-hidden" value="{{ $orderBy }}">
                <input type="hidden" id="orderDirection-hidden" value="{{ $orderDirection }}">
                <select id="sort-select" class="form-control form-custom" name="sort-select">
                    <option value="{{ route('user_preview_classes', ['classes_id' => $classes_id, 'orderBy' => 'student_surname', 'orderDirection' => 'ASC']) }}">po nazwisku A-Z</option>
                    <option value="{{ route('user_preview_classes', ['classes_id' => $classes_id, 'orderBy' => 'student_surname', 'orderDirection' => 'DESC']) }}">po nazwisku Z-A</option>
                    <option value="{{ route('user_preview_classes', ['classes_id' => $classes_id, 'orderBy' => 'student_id_number', 'orderDirection' => 'ASC']) }}">po numerze indeksu rosnąco</option>
                    <option value="{{ route('user_preview_classes', ['classes_id' => $classes_id, 'orderBy' => 'student_id_number', 'orderDirection' => 'DESC']) }}">po numerze indeksu malejąco</option>
                    <option value="{{ route('user_preview_classes', ['classes_id' => $classes_id, 'orderBy' => 'seat_number', 'orderDirection' => 'ASC']) }}">po numerze miejsca rosnąco</option>
                    <option value="{{ route('user_preview_classes', ['classes_id' => $classes_id, 'orderBy' => 'seat_number', 'orderDirection' => 'DESC']) }}">po numerze miejsca malejąco</option>
                </select>
            </div>
            <div class="table-responsive">
                @include('user.attendances_table_preview', ['attendances' => $attendances, 'export' => 0])
            </div>
        </div>
        <div class="seat-chart-wrapper">
            @if($twoparts)
                <div id="map-carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
                    <div class="carousel-inner" id="twoparts-map">
                        <div class="carousel-item active">
                            <div id="seat-map-first"></div>
                        </div>
                        <div class="carousel-item">
                            <div id="seat-map-second"></div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#map-carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Pierwsza część</span>
                    </a>
                    <a class="carousel-control-next" href="#map-carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Druga część</span>
                    </a>
                </div>
            @else
                <div id="seat-map"></div>
            @endif
        </div>
        <input type="hidden" class="room_arrangement" name="room_arrangement" id="room_arrangement" value="{{ $room_arrangement }}">
        <input type="hidden" class="twoparts" name="twoparts" id="twoparts" value="{{ $twoparts }}">
    @foreach($seat_numbers as $seat_number)
            <input type="hidden" class="unavailable_place" value="{{ $seat_number }}">
        @endforeach
    </div>

@endsection