@extends('layouts.app')

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

                <div class="panel panel-bg panel-default" style="margin-top: 2%">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-2">
                                <a href="{{url('categorylist')}}" class="btn btn-success">Kategorien</a>
                            </div>
                            <div class="col-md-9">
                                <a href="{{url('news')}}" class="btn btn-default">zurück</a>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-success" role="alert" id="successAlert"
                                     style="display: none">
                                </div>
                                <div class="alert alert-danger" role="alert" id="errorAlert"
                                     style="display: none">
                                </div>
                            </div>
                        </div>
                        <div class="row hidden" id="progressRow">
                            <div class="col-md-12">
                                <br>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="0"
                                         aria-valuemin="0" aria-valuemax="100" style="width:0%" id="progressVideo">
                                        <span id="progressVideoText">0% Hochgeladen</span>
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h4>Informationen</h4>
                            </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-11">
                                <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 class="col-md-1"><br>
                                <a href="{{url('newcategory')}}" class="btn btn-success"><i class="fas fa-plus"  style="color: blue;"></i></a>
                            </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">
                                <h4>Video</h4>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="videoUpload">Video Upload (Das Video muss im .mp4 Format vorliegen und nicht
                                    größer als 60mb sein)</label>
                                <div id="videoUpload" style="width: 100%" class="dropzone"></div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <h4>Thumbnail</h4>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="thmubnailUpload">Lade hier ein Vorschaubild für das Video hoch</label>
                                <div id="thumbnailUpload" style="width: 100%" class="dropzone"></div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <h4>Kunden</h4>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">
                                <label>Kunden in denen das Video verfügbar sein soll</label>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            @foreach($companies as $key => $companie)
                                <div class="col-md-3">
                                    <div class="checkbox">
                                        <label><input type="checkbox" value="{{$companie->id}}" id="stud{{$key}}"
                                                      data-id="{{$companie->id}}">{{$companie->title}}</label>
                                    </div>
                                </div>
                                <input type="hidden" value="{{count($companies)}}" id="companiesCount">
                            @endforeach
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <h4>News</h4>
                            </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-info" onclick="uploadVideo()">Speichern</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection