@extends('admin::layouts.master')
@section('pageTitle')
    Videó létrehozása
@endsection
@section('css')
<style>

</style>
@endsection

@section('js')
<script src="https://cdn.tiny.cloud/1/eumbjna8twih5m1m7m5cwnee01dfvy2vo5a9qf7pzi8i0exp/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ asset('js/dropzone.js')}}"></script>
<script>

Dropzone.autoDiscover = false;

    function dp(elem) {
        elem.dropzone({
            paramName: "file",
            url: "{{ url(route('fileupload')) }}",
            acceptedFiles: 'image/jpeg, image/png',
            maxFilesize: 10,
            thumbnailWidth: null,
            thumbnailHeight: null,
            uploadMultiple: false,
            previewTemplate: document.querySelector("#tpl").innerHTML,
            dictInvalidFileType: 'Csak jpg vagy png képet tölthet fel',
            dictFileTooBig: 'A kép mérete nem lehet több, mint 10 Mb',
            params: {
                _token: $('input[name="_token"]').val(),
                type: 'quiz'
            },
            thumbnail: function(file, dataURL) {
                elem.find('img.preview').data('preview', dataURL);
            },
            error: function(file, response) {
                $('.invalid-feedback').remove();
                $('#dropzone_image').after('<span class="invalid-feedback" role="alert" style="display: inline;"><strong>' + response + '</strong></span>')
            },
            sending: function() {
                // loading($("div#entry_image_con"));
            },
            uploadprogress: function() {
                //  $("#entry_image_con .fa-spinner").show();
            },
            success: function(file, response) {
                console.log(file);
                // loadfinished($("div#entry_image_con"));
                elem.next('input').val(response.url);
                elem.find('img.preview').attr('src', elem.find('img.preview').data('preview'));
            }
        });
    }


var primary = document.querySelector('.form-check-input-switchery-primary');
var switchery = new Switchery(primary, { color: '#2196F3' });
</script>

<script>
$(function(){

    $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            }
        });

    tinymce.init({
        selector: '.tiny',
        plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
        toolbar_mode: 'floating',
        images_upload_url: "{{ url(route('fileupload')) }}",
        automatic_uploads: true,
        image_title: true,
        height: 400,
        relative_urls : false,
        remove_script_host : false,
        convert_urls : true
   });

   $('.dropzone').each(function() {
            dp($(this));
        })
})
    
  </script>
@endsection

@section('header')
    @include('admin::layouts.header', ['title' => 'Videó oldalak', 'subtitle' => 'Új videó', 'button' => route('video.create')])
@endsection

@section('content')

<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">{{ __('messages.add-new') }}</h5>
    </div>
    <div class="card-body">
        <form action="{{route('video.store')}}" method="POST">
            @csrf
            <fieldset class="mb-3">
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Cím</label>
                    <div class="col-lg-10">
                        <input type="text" name="title" value="{{ old('title') }}" class="form-control pl-2 @error('title') border-danger @enderror">
                        @error('title')
                        <span class="form-text text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Autó kép</label>
                    <div class="col-md-10">
                        <div class="dropzone">
                            <div class="dz-message" data-dz-message style="position: absolute; top: 0; text-align: center; left: 0; bottom: 0; color: #aaa; width: 100%; display: flex; align-items: flex-end; justify-content: center;"><span>Húzd ide a képet, vagy kattints a feltöltéshez</span></div>
                            <img src="{{old('image') ? old('image') : ( $model->image ?? '' ) }}" width="100%" class="preview" />
                        </div>
                        <input type="hidden" class="form-control" name="image" value="{{old('image')}}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Videó url</label>
                    <div class="col-lg-10">
                        <input type="text" name="url" value="{{ old('url') }}" class="form-control pl-2 @error('url') border-danger @enderror">
                        @error('url')
                        <span class="form-text text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Lead</label>
                    <div class="col-lg-10">
                        <textarea name="lead" class="form-control pl-2 @error('lead') border-danger @enderror">{{ old('lead') }}</textarea>
                        @error('lead')
                        <span class="form-text text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>
<hr />
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Cikktörzs</label>
                    <div class="col-lg-10">
                        <textarea name="content" class="tiny form-control pl-2 @error('content') border-danger @enderror" style="min-height: 400px;">{{ old('content') }}</textarea>
                        @error('content')
                        <span class="form-text text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Státusz</label>
                    <div class="col-lg-10">
                        <div class="form-check form-check-switchery">
                        <input type="hidden" name="status" value="0">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input-switchery-primary" name="status" value="10"  data-fouc>
                            </label>
                        </div>
                    </div>
                </div>
            </fieldset>
            <div class="text-right">
                <button type="submit" class="btn btn-primary legitRipple">{{ __('messages.save') }} <i class="icon-paperplane ml-2"></i></button>
            </div>
        </form>
    </div>
</div>

<div id="tpl">
    <div></div>
</div>


@endsection