@extends('admin::layouts.master')
@section('pageTitle')
    Kérdőív létrehozása
@endsection
@section('css')
<style>

</style>
@endsection

@section('js')

<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' });

$(function(){

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

    $('.dropzone').each(function() {
        dp($(this));
    })
})

</script>
@endsection

@section('header')
    @include('admin::layouts.header', ['title' => 'Kérdőív', 'subtitle' => 'Új kérdőív', 'button' => route('kerdoiv.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('kerdoiv.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">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">Leírás (opcionális)</label>
                    <div class="col-lg-10">
                        <textarea name="description" class="form-control @error('description') border-danger @enderror">{{ old('description') }}</textarea>
                        @error('description')
                        <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