@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <h5 align="center">Neues Video Hochladen</h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card" style="margin-top: 2%">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <a href="{{url('home')}}" class="btn btn-light">zurück</a>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-success hidden" role="alert" id="successAlert"
                                     style="display: none">
                                </div>
                                <div class="alert alert-danger hidden" role="alert" id="errorAlert"
                                     style="display: none">
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>Informationen</h6>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="videoTitle">Titel des Videos</label>
                                <input type="text" class="form-control" id="videoTitle" placeholder="Titel">
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="videoCategory">Kategorie des Videos</label>
                                <select name="" id="videoCategory" class="form-control">
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="videoDescription">Text</label>
                                <textarea name="" id="videoDescription" cols="30" rows="10"
                                          class="form-control" placeholder="Beschreibung..."></textarea>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>Video</h6>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="videoUpload">Video Upload</label>
                                <div id="videoUpload" style="width: 100%" class="dropzone"></div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>Studios</h6>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label>Studios in denen das Video verfügbar sein soll</label>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            @foreach($studios as $key => $studio)
                                <div class="col-md-3">
                                    <div class="checkbox">
                                        <label><input type="checkbox" value="{{$studio->id}}" id="stud{{$key}}" data-id="{{$studio->id}}">{{$studio->title}}</label>
                                    </div>
                                </div>
                                <input type="hidden" value="{{count($studios)}}" id="studioCount">
                            @endforeach
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>News</h6>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label>Zeitraum in dem das Video als News in der App angezeigt werden soll</label>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-4">
                                <label for="videoFrom">Von</label>
                                <input type="date" class="form-control" id="videoFrom">
                            </div>
                            <div class="col-md-4">
                            </div>
                            <div class="col-md-4">
                                <label for="videoTo">Bis</label>
                                <input type="date" class="form-control" id="videoTo">
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <button class="btn btn-secondary" onclick="uploadVideo()">Speichern</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection