@extends('admin.layouts.app')
@php
$forum_categories    = @$forum_categories;

$mode = "Add";
$action = route('forum.subcat.add');
$tagsJson = @$tagsJson;


if(!empty($slug)){
    $mode = "Edit";
    $action = route('forum.subcat.edit',$slug);
    $selected_tags = @$selected_tags;
    $tags_json    = @$tags_json;
    $imgurl = empty(get_url('forum-photo/'.$forum->id.'/crop/'.$forum->banner_image)) 
                ? url("assets/images/noimage.png") 
                : get_url('forum-photo/'.$forum->id.'/crop/'.$forum->banner_image);
}else{
    $slug = 0;
    $tags_json = 0;
}
$allow_image_ext = collect(config('common.allow_image_ext'))->implode(', ');
$upload_image_ext = collect(config('common.allow_image_ext'))->implode('|');
$upload_img_size = config("common.upload_img_size");
$allowed_img_size = config("common.upload_img_size")*1024;
@endphp
@section('content')
<div class="container-fluid">
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Admin Forums</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
                @if(check_route_access('forum.subcat.list'))
                <li><a href="{{ route('forum.subcat.list') }}">Forum Category</a></li>
                @endif
                <li class="active">Add New Forum Category</li>
            </ol>
        </div>
    </div>
    <div class="row"> 
        <div class="col-md-12 col-xs-12">
            <div class="white-box">
                <div class="row">
                    <div class="col-md-6 col-xs-12">
                        <h3 class="box-title m-b-0">{{ $mode }} Forum Sub Category</h3>
                        <!--<p class="text-muted m-b-30">Add New Admin</p>-->
                    </div>
                    <div class="col-md-6 col-xs-12">
                        <div class="pull-right">
                            @if(check_route_access('forum.subcat.list'))
                            <a href="{{ route('forum.subcat.list') }}" class="btn btn-block btn-info"><i class="fa fa-list"></i> Forum Sub Category</a>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="{{ ($mode == "Edit")? 'col-md-6' : 'col-md-12'}}">
                        @include('admin.includes.status')
                        <form method="post" action="{{ $action }}" class="form-horizontal form-validator" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            <input type="hidden" name="id" value="{{ $forum->id }}" />
                            <div class="form-group {{ $errors->has('forum_title') ? 'has-error' : '' }}">
                                <label class="col-md-12">Title <span class="text-danger">*</span></label>
                                <div class="col-md-12">
                                    <input type="text" name="forum_title" id="forum_title" placeholder="Forum Title" class="form-control" required value="{{ ($mode == "Edit") ? $forum->title : old('forum_title') }}">
                                    <div class="clearfix"></div>
                                    <div class="help-block with-errors">
                                        @if ($errors->has('forum_title')){{ $errors->first('forum_title') }}@endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-group {{ $errors->has('parent_cat_id') ? 'has-error' : '' }}">
                                <label class="col-md-12">Category <span class="text-danger">*</span></label>
                                <div class="col-md-12">
                                    <select class="form-control" name="parent_cat_id" id="parent_cat_id" required>
                                        <option value="">Select Forums Category</option>
                                        @foreach($forum_categories as $item)
                                        <option value="{{ $item->id }}" {{ ( $forum->parent_category_id == $item->id || old('parent_cat_id') ==  $item->id) ? 'selected' : '' }}>{{ $item->title }}</option>
                                        @endforeach
                                    </select>
                                    <div class="clearfix"></div>
                                    <div class="help-block with-errors">
                                        @if ($errors->has('parent_cat_id')){{ $errors->first('parent_cat_id') }}@endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-group {{ $errors->has('description') ? 'has-error' : '' }}">
                                <label class="col-md-12">Description <span class="text-danger">*</span></label>
                                <div class="col-md-12">
                                    <textarea rows="5" name="description" id="description" placeholder="Forum Description" class="form-control" required>{!! ($mode == "Edit") ? $forum->description : old('description') !!}</textarea>
                                    <div class="clearfix"></div>
                                    <div class="help-block with-errors">
                                        @if ($errors->has('description')){{ $errors->first('description') }}@endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-group {{ $errors->has('keyword') ? 'has-error' : '' }}">
                                <label class="col-md-12">Keyword <span class="text-danger">* (Enter keyword then press enter for new keyword.)</span></label> 
                                <div class="col-md-12">
                                    <input type="text" name="keyword" id="keyword" placeholder="Forum Keyword" class="form-control" required value="{{ ($mode == "Edit") ? $forum->keyword : old('keyword') }}">
                                    <div class="clearfix"></div>
                                    <div class="help-block with-errors">
                                        @if ($errors->has('keyword')){{ $errors->first('keyword') }}@endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-group {{ $errors->has('tags') ? 'has-error' : '' }}">
                                <label class="col-md-12">Tags <span class="text-danger">*</span></label>
                                <div class="col-md-12">
                                    <input type="text" name="tags" id="tags" placeholder="Topic Tags" class="form-control " data-tokens="{{$mode == 'Edit' ? $selected_tags : ''}}">
                                    <div class="clearfix"></div>
                                    <div class="help-block with-errors">
                                        @if ($errors->has('tags')){{ $errors->first('tags') }}@endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Status</label>
                                <div class="col-md-12">
                                    <div class="radio-list">
                                        <label><input type="radio" name="status" value="1" checked {{ is_checked($forum->status,'1') }}> Active </label>
                                        <label><input type="radio" name="status" value="0" {{ is_checked($forum->status,'0') }}> De-Active </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="submit" class="btn btn-info">Save Forum</button>
                                    <button type="reset" class="btn btn-danger" id="reset_form">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    @if($mode == "Edit")
                        <div class="col-md-6">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="dpprofileimg">
                                                <img src="{{$imgurl}}" class="img-responsive thumbnail editprofilepicture avatar-md"> 
                                            </div> 
                                            <div id="fileHelp" class="form-text text-muted">The image file should be JPG, PNG or JPEG format. Image size must be under 2MB.</div>
                                                <button type="button" id="editCategoryImage" class="btn btn-info">Upload Image</button>
                                        </div>
                                    </div>
                                <div id="crop-container" style="display:none"></div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
    $(document).ready(function () {
        var tags_json =  JSON.parse('{{$tagsJson}}'.replace(/&quot;/g,'"'));
        $("#tags").tokenfield({
            autocomplete: {
                source: tags_json,
                delay: 100
            },
            showAutocompleteOnFocus: true
        });
        $('.tokenfield').find('.token-input').autocomplete({
            focus: function (event, ui) {
                event.preventDefault();
                $(this).val(ui.item.label);
            }
        });
        $('#tags')
            .on('tokenfield:createtoken', function (event) {
                var existingTokens = $(this).tokenfield('getTokens');
                var exists = true;
                /*PREVENT DUPLICATION*/
                $.each(existingTokens, function(index, token) {
                    if (token.label === event.attrs.label)
                    {
                        event.preventDefault();
                    }

                });
                /*ALLOW ONLY TOKENS FROM SOURCE*/
                $.each(tags_json, function(index, token) {
                    if (token.label === event.attrs.label)
                        exists = false;
                });
                if(exists === true)
                    event.preventDefault();
            });
        
        $('#keyword').tokenfield();
        /** Profile picture cropping and update IT **/
        var eyeCandy = $('#crop-container');
        var croppedOptions = {
            rotateControls: false,
            cropUrl: '{{ route("forum.cat.upload.image") }}', 
            cropData: { 
                'width' : eyeCandy.width(),
                'height': eyeCandy.height(),
                "_token": "{{ csrf_token() }}",
                "slug" : "{{$slug}}"
            },
            modal: true,
            customUploadButtonId : 'editCategoryImage',
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div>',
            processInline:true,
            onBeforeImgUpload: function (){
                var that = this;
                if ( /\.({{$upload_image_ext}})$/i.test(that.form.find("input[type=file]")[0].files[0].name) === false ) { 

                    $('html, body').css('overflowY', 'hidden'); 
                    notifyResponseTimerAlert("Image must be a file of type: {{$allow_image_ext}}.","error","Error"); 
                    $("#editCategoryImage .loader").remove();
                    setTimeout( function(){ that.reset(); },100);
                    return;
                } 
                var FileSize = Math.round(that.form.find("input[type=file]")[0].files[0].size / 1024);
                if (FileSize > {{$allowed_img_size}}) {

                    $('html, body').css('overflowY', 'hidden'); 
                    notifyResponseTimerAlert("Image must be below {{$upload_img_size}} MB.","error","Error"); 
                    $("#editCategoryImage .loader").remove();
                    var is_chrome = /chrome/i.test( navigator.userAgent );
                    if(is_chrome)
                    {
                        setTimeout( function(){ that.reset(); },50);
                    }else{
                        $(".cropControlReset")[0].click();
                    }
                    return;
                } 
            },
            onAfterImgUpload: function (){
                $("#editCategoryImage .loader").remove();
            },
            onError : function(){
                $("#editCategoryImage .loader").remove();
            },
            onAfterImgCrop : function (Response) {

                $('html, body').css('overflowY', 'hidden'); 
                $(".avatar-md").attr("src",Response.url);
                var that = this;
                that.hideLoader();
                var Html = '<div class="alert swl-alert-success"><ul><li>'+ Response.message+ '</li></ul></div>'; 
                notifyResponseTimerAlert(Html,"success","Success");

            } 
    };
    var cropperBox = new Croppic('crop-container', croppedOptions);
    });
    $("#reset_form").click(function(){
        if('{{$mode}}' == 'Add')
        {
            $('#keyword').tokenfield('setTokens', []);
            $('#tags').tokenfield('setTokens', []);
        }
    });
</script>
@endsection