@extends('backend.template.main')
@push('breadcrumb')
@include('backend.shared._breadcrumb', [
'breadcrumb' => $breadcrumb,

])
@endpush
@section('content')

{!! Form::open(['url' => Config::get('sysconfig.prefix').'/contents', 'files' => true,'id' => 'my-form']) !!}

<div class="page-header">
    <div class="row">
        <div class="col-lg-12">
            <button type="submit" name="btnPublish" value="publish"
                    class="btn btn-white btn-primary btn-bold no-border">
                <i class="ace-icon fa fa-database  bigger-120 blue"></i>
                {{trans('translate.btn_save')}}
            </button>
            <button type="submit" name="btnapply" value="apply" id="btnapply"
                    class="btn btn-white btn-primary btn-bold no-border">
                <i class="ace-icon fa fa-retweet  bigger-120 green"></i>
                {{trans('translate.btn_apply')}}
            </button>
            <a href="{{ url()->previous() }}" class="btn btn-white btn-danger btn-bold no-border">
                <i class="ace-icon fa fa-reply  bigger-120 blue"></i>
                {{trans('translate.btn_cancel')}}
            </a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 col-xs-12 col-lg-12">
        <div class="row">
            <div class="col-xs-12">

                <div class="widget-box">
                    <div class="widget-header widget-header-blue widget-header-flat">
                        <h4 class="widget-title lighter">{{ __('menu.content')}}</h4>

                    </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <div class="form-horizontal">
                                <div class="form-group @if ($errors->has('txtname')) has-error @endif">
                                    {!!Form::label('name','Title',['class' => 'col-sm-3 control-label no-padding-right required'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::text('txtname',old('txtname'),['class' => 'form-control','id'=>'name'])!!}
                                        @if ($errors->has('txtname')) <p
                                            class="help-block">{{ $errors->first('txtname') }}</p> @endif
                                    </div>
                                </div>
                                <div class="form-group @if ($errors->has('txtslug')) has-error @endif">
                                    {!!Form::label('slug','Slug',['class' => 'col-sm-3 control-label no-padding-right required'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::text('txtslug',old('txtslug'),['class' => 'form-control','id' => 'slug' ])!!}
                                        @if ($errors->has('txtslug')) <p
                                            class="help-block">{{ $errors->first('txtslug') }}</p> @endif
                                    </div>
                                </div>
                                <div class="form-group ">
                                    {!!Form::label('aliase','Aliase',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::text('txtaliase',old('txtaliase'),['class' => 'form-control'])!!}

                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-3 control-label no-padding-right required">
                                        <label>Category</label>
                                    </div>
                                    <div class="col-sm-5">
                                        {{--{!!Form::select('contentcategory',$selectOption,old('contentcategory'),['class' => 'form-control','data-level' => '0'])!!}--}}
                                        <select class="form-control" name="contentcategory">
                                            <option value="">Please Select Category</option>
                                            {!! CommonFunction::generateSubCagetoryCombobox()!!}
                                        </select>
                                    </div>
                                </div>
                                <section id="subCategory">

                                </section>
                                <div class="form-group @if($errors->has('featuredfile')) has-error @endif">
                                    {!!Form::label('featuredfile','Featured Image',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::file('featuredfile',['id' =>'featuredfile'])!!}
                                        @if ($errors->has('featuredfile')) <p
                                            class="help-block">{{ $errors->first('featuredfile') }}</p> @endif
                                    </div>
                                </div>

                                <div class="form-group">
                                    {!!Form::label('shortdesc','Brief',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::textarea('shortdesc',old('shortdesc'),['rows' => 5,'class' => 'form-control'])!!}
                                    </div>
                                </div>


                                <div class="form-group">
                                    {!!Form::label('','Body',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <section id="frm-entry" class="col-sm-7 no-padding-left no-padding-right">
                                        <div id="loader"></div>
                                    </section>
                                    {!!Form::hidden('entrycount',0,['id' => 'entrycount'])!!}
                                </div>
                                <div class="form-group">
                                    {!!Form::label('','Add New Entry',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-9" id="btn-entry-form">
                                        <a class="btn btn-info add-entry-frm" href="javascript:void(0)"
                                           id="entry-text" data-type="text">
                                            <i class="ace-icon fa fa-file-text align-top bigger-125"></i>
                                            Description
                                        </a>
                                        <a class="btn btn-info add-entry-frm" href="javascript:void(0)"
                                           id="entry-image" data-type="image">
                                            <i class="ace-icon fa fa-picture-o align-top bigger-125"></i>
                                            Image
                                        </a>
                                        <a class="btn btn-info add-entry-frm" href="javascript:void(0)"
                                           id="entry-event" data-type="date">
                                            <i class="ace-icon fa fa-calendar align-top bigger-125"></i>
                                            Event Time
                                        </a>

                                        <a class="btn btn-info add-entry-frm" href="javascript:void(0)"
                                           id="entry-youtube" data-type="youtube">
                                            <i class="ace-icon fa fa-youtube-play  align-top bigger-125"></i>
                                            Youtube
                                        </a>
                                        <a class="btn btn-info add-entry-frm" href="javascript:void(0)"
                                           id="entry-facebook" data-type="facebook">
                                            <i class="ace-icon fa fa-facebook  align-top bigger-125"></i>
                                            Facebook
                                        </a>
                                        <a class="btn btn-info add-entry-frm" href="javascript:void(0)"
                                           id="entry-gallery" data-type="gallery">
                                            <i class="ace-icon fa fa-th-large  align-top bigger-125"></i>
                                            Gallery
                                        </a>

                                    </div>
                                </div>
                                <div class="form-group">
                                    {!!Form::label('tagskey','Tags Key',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::text('txttagskey',old('txttagskey'),['class' => 'form-control','id' => 'txttagskey'])!!}
                                    </div>
                                </div>
                                <div class="form-group">
                                    {!!Form::label('status','Publish',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-1">
                                        <label>
                                            <input name="chkstatus" class="ace ace-switch ace-switch-4 btn-flat"
                                                   type="checkbox">
                                            <span class="lbl"></span>
                                        </label>
                                    </div>

                                    <div class="col-sm-2">
                                        <label>
                                            Front Page
                                            <input name="chkfeatured" class="ace ace-switch ace-switch-4 btn-flat"
                                                   type="checkbox">
                                            <span class="lbl"></span>
                                        </label>
                                    </div>
                                </div>
                                <hr/>
                                <div class="form-group">
                                    {!!Form::label('metakey','Meta Key',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::text('txtmetakey',old('txtmetakey'),['class' => 'form-control','id' => 'metakeyword'])!!}
                                    </div>
                                </div>
                                <div class="form-group">
                                    {!!Form::label('metadesc','Meta Description',['class' => 'col-sm-3 control-label no-padding-right'])!!}
                                    <div class="col-sm-5">
                                        {!!Form::text('txtmetadesc',old('txtmetadesc'),['class' => 'form-control'])!!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{!!Form::close()!!}
@endsection
@push('css_plugin')
<link rel="stylesheet" href="{{ asset('backend/assets/css/daterangepicker.css') }}"/>
<link href="{{asset('backend/assets/fileinput/css/fileinput.css')}}" media="all" rel="stylesheet" type="text/css"/>
<link href="{{asset('backend/assets/fileinput/themes/explorer-fas/theme.css')}}" media="all" rel="stylesheet" type="text/css"/>
@endpush
@push('css')
<style>
    .tags {
        width: 100%;
    }

    #frm-entry {
        min-height: 180px;
    }

    /* Center the loader */
    #loader {
        position: absolute;
        left: 50%;
        /* top: 50%;*/
        bottom: 0px;
        z-index: 100;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border: 10px solid #f3f3f3;
        border-radius: 50%;
        border-top: 10px solid #3498db;
        width: 80px;
        height: 80px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        background-color: #eee;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* Add animation to "page content" */
    .animate-bottom {
        position: relative;
        -webkit-animation-name: animatebottom;
        -webkit-animation-duration: 1s;
        animation-name: animatebottom;
        animation-duration: 1s
    }

    @-webkit-keyframes animatebottom {
        from {
            bottom: -100px;
            opacity: 0
        }
        to {
            bottom: 0px;
            opacity: 1
        }
    }

    @keyframes animatebottom {
        from {
            bottom: -100px;
            opacity: 0
        }
        to {
            bottom: 0;
            opacity: 1
        }
    }

    .entry-frm-remove .ace-icon {
        color: #fff;
    }

    .entry-frm-remove .ace-icon:hover {
        color: #ffcccc;
    }
</style>
@endpush

@push('jslink')

<script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>

<script src="{{asset('backend/assets/js/jquery-ui.js')}}"></script>
<script src="{{asset('backend/assets/js/bootstrap-tag.js')}}"></script>
<script src="{{asset('backend/assets/js/jquery.ui.touch-punch.js')}}"></script>
<script src="{{asset('backend/assets/js/date-time/moment.js') }}"></script>
<script src="{{asset('backend/assets/js/date-time/bootstrap-datepicker.js') }}"></script>
<script src="{{asset('backend/assets/js/date-time/daterangepicker.js') }}"></script>

<script src="{{asset('backend/assets/fileinput/js/fileinput.js')}}" type="text/javascript"></script>
<script src="{{asset('backend/assets/fileinput/themes/fas/theme.js')}}" type="text/javascript"></script>


@endpush

@push('jsscript')

@include('backend.shared._tinymce',['textarea' => '.bodydesc'])
{!!JsValidator::formRequest('App\Http\Requests\ContentRequest', '#my-form')!!}
<script type="text/javascript">




jQuery(document).ready(function () {
    entryid = $('#entrycount').val();
    type = 'text';

    $.ajax({
        url: '{{ url(_ADMIN_PREFIX_URL."/addnewform")}}',
        type: "GET",
        data: {type, entryid},
        dataType: "json",
        beforeSend: function () {
            document.getElementById("loader").style.display = "block";
        },
        success: function (data) {
            $('#frm-entry').append(data.loadform).ready(function () {

                if (type === 'text') {
                    tinymce.init(loadtinymce);
                } else if (type === 'image') {
                    $('.viewimage').ace_file_input({
                        style: 'well',
                        btn_choose: 'Drop files here or click to choose',
                        btn_change: null,
                        no_icon: 'ace-icon fa fa-cloud-upload',
                        droppable: true,
                        thumbnail: 'fit'//small | fit

                    });
                }
                $('.widget-container-col').sortable({
                    connectWith: '.widget-container-col',
                    items: '> .widget-box',
                    handle: ace.vars['touch'] ? '.widget-header' : false,
                    cancel: '.fullscreen',
                    opacity: 0.8,
                    revert: true,
                    forceHelperSize: true,
                    placeholder: 'widget-placeholder',
                    forcePlaceholderSize: true,
                    tolerance: 'pointer',
                    cursor: 'move',
                    start: function (e, ui) {
                        $(ui.item).find('input').focus();
                        $(ui.item).find('textarea').each(function () {
                            tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                        });
                    },
                    stop: function (e, ui) {
                        $(ui.item).find('input').focus();
                        $(ui.item).find('textarea').each(function () {
                            tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
                        });
                    }
                });

                $('.widget-container-col input').bind('click.sortable mousedown.sortable', function (ev) {
                    ev.target.focus();
                });

            });
            $('#entrycount').val(data.entryid);
        },
        complete: function () {
            document.getElementById("loader").style.display = "none";
            entryRemoveFrm();
        }

    });


});
var form = document.getElementById("my-form");
document.getElementById("btnapply").addEventListener("click", function () {
  hiddeninput = '<input type="hidden" value="apply" name="btnapply"/>';
  $('.page-header').append(hiddeninput);
  form.submit();
});

$('#featuredfile').ace_file_input({
    style: 'well',
    btn_choose: 'Drop files here or click to choose',
    btn_change: null,
    no_icon: 'ace-icon fa fa-cloud-upload',
    droppable: true,
    thumbnail: 'fit', //small | fit
    maxSize: 2000000,
    allowExt: ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff', 'bmp'],
    allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/tif', 'image/tiff', 'image/bmp'] //html5 browsers only

}).on('file.error.ace', function (event, info) {
    if (info.error_count['size']) {
        Swal(
                'Information!',
                'Your file is big 2MB.',
                'info'
                );
    } else if (info.error_count['ext']) {
        Swal(
                'Information!',
                'Your file invalid extension',
                'info'
                );
    }
    event.preventDefault();
});

var tag_input = $('#metakeyword,#txttagskey');
tag_input.tag(
        {
            placeholder: tag_input.attr('placeholder')
        }
);
$(document).on('keyup', 'input#name', function () {
    var slug = slugify($(this).val());
    $('#slug').val(slug);
});

$('.add-entry-frm').on('click', function (e) {
    e.preventDefault();
    type = $(this).data('type');
    entryid = $('#entrycount').val();
    $.ajax({
        url: '{{ url(_ADMIN_PREFIX_URL."/addnewform")}}',
        type: "GET",
        data: {type, entryid},
        dataType: "json",
        beforeSend: function () {
            document.getElementById("loader").style.display = "block";
        },
        success: function (data) {
            $('#frm-entry').append(data.loadform).ready(function () {
                if (type === 'text') {
                    tinymce.init(loadtinymce);
                } else if (type === 'image') {
                    $('.viewimage').ace_file_input({
                        style: 'well',
                        btn_choose: 'Drop files here or click to choose',
                        btn_change: null,
                        no_icon: 'ace-icon fa fa-cloud-upload',
                        droppable: true,
                        thumbnail: 'fit', //small | fit
                        maxSize: 2000000,
                        allowExt: ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff', 'bmp'],
                        allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/tif', 'image/tiff', 'image/bmp'] //html5 browsers only
                    });
                } else if (type === 'date') {
                    $('input[name=date-range-picker]').daterangepicker({
                        'applyClass': 'btn-sm btn-success',
                        'cancelClass': 'btn-sm btn-default',
                        locale: {
                            applyLabel: 'Apply',
                            cancelLabel: 'Cancel'
                        }
                    });
                    $(this).find("#entry-event").addClass("disabled");
                } else if (type === 'gallery') {

                    entryGallery();
                    $(this).find("#entry-gallery").addClass("disabled");
                }
                $('.widget-container-col').sortable({
                    connectWith: '.widget-container-col',
                    items: '> .widget-box',
                    handle: ace.vars['touch'] ? '.widget-header' : false,
                    cancel: '.fullscreen',
                    opacity: 0.8,
                    revert: true,
                    forceHelperSize: true,
                    placeholder: 'widget-placeholder',
                    forcePlaceholderSize: true,
                    tolerance: 'pointer',
                    cursor: 'move',
                    start: function (e, ui) {
                        $(ui.item).find('textarea').each(function () {
                            tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                        });
                    },
                     stop: function (e, ui) {
                        $(ui.item).find('textarea').each(function () {
                            tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
                        });
                    }
                });
                $('.widget-container-col input').bind('click.sortable mousedown.sortable', function (ev) {
                    ev.target.focus();
                });
            });
            if (type != 'date') {
                $('#entrycount').val(data.entryid);
            }


        },
        complete: function () {

            document.getElementById("loader").style.display = "none";
            entryRemoveFrm();

        }
    });

});

$('.widget-container-col').disableSelection();

function entryGallery() {
    var  tCaption = '\n<div class="file-caption form-control" tabindex="500">\n' +
                '  <input class="file-caption-name"  value="{caption}" name="gallerycaptions[]">\n' +
                '</div>\n\n {indicator}\n{actions}\n';
    $('#kv-explorer').fileinput({
        theme: 'fas',
        uploadUrl:'#',
        uploadAsync: false,
        overwriteInitial: false,
        initialPreviewAsData: true,
        showUpload: false,
        showCancel: false,
        maxFileSize: 1024,
        previewFileType: "image",
        allowedFileExtensions: ["jpg", "jpeg", "gif", "png"],
        layoutTemplates: {footer: tCaption},
        fileActionSettings: {
             showUpload: false,
             showZoom: false
         }

    });
        $('.file-caption input').bind('click.fileinput mousedown.fileinput', function (ev) {
                    ev.target.focus();
                });
}
function entryRemoveFrm() {
    $('.entry-frm-remove').on('click', function () {
        Swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, remove it!'
        }).then((result) => {
            if (result.value) {
                $(this).parent('.widget-toolbar').parent('.widget-header').parent('.widget-box').parent('.widget-container-col').fadeOut("slow", function () {
                    $(this).remove();
                    $("#entry-event").removeClass("disabled");
                    $("#entry-gallery").removeClass("disabled");
                });
                $oldvalue = $('#entrycount').val();
                $('#entrycount').val(parseInt($oldvalue) - 1);
                Swal(
                        'Removed!',
                        'Your file has been removed.',
                        'success'
                        );
            }
        });
    });
    $('.entry-frm-delete-date').on('click', function () {
        Swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, remove it!'
        }).then((result) => {
            if (result.value) {
                $(this).parent('.widget-toolbar').parent('.widget-header').parent('.widget-box').parent('.widget-container-col').fadeOut("slow", function () {
                    $(this).remove();
                    $("#entry-event").removeClass("disabled");
                });
                $oldvalue = $('#entrycount').val();
                $('#entrycount').val(parseInt($oldvalue) - 1);
                Swal(
                        'Removed!',
                        'Your file has been removeed.',
                        'success'
                        );
            }
        });
    });


}

</script>

@endpush