@extends('base.layouts.master')

@section('style')
<link rel="stylesheet" href="/base/assets/plugins/jquery-file-upload/css/jquery.fileupload.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="/base/assets/plugins/jquery-file-upload/css/jquery.fileupload.css">
<link rel="stylesheet" href="/base/assets/plugins/jquery-file-upload/css/jquery.fileupload-ui.css">
@endsection

@section('content')

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-equalizer font-blue-hoki"></i>
                <span class="caption-subject font-blue-hoki bold uppercase">@lang('menu.ContentCategory.title')</span>
                <span class="caption-helper">@lang('menu.ContentCategory.edit') ...</span>
            </div>
            <div class="tools">
                <a href="" class="collapse"> </a>
                <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                <a href="" class="reload"> </a>
                <a href="" class="remove"> </a>
            </div>
        </div>
        <div class="portlet-body form">
            <!-- BEGIN FORM-->
            @if(count($errors))
                <div class="alert alert-danger">
                    <ul>
                @foreach($errors->all() as $error)
                    <li>{{$error}}</li>
                @endforeach
                    </ul>
                </div>
            @endif
           @include('base.layouts.partials.general.message')
            <form id="fileupload" enctype="multipart/form-data"   action="{{route('categories.update', $category->id)}}" class="horizontal-form" method="POST">
                {{ csrf_field() }}
                @method('PUT')
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">@lang('form.inputs.name') </label>
                                <input type="text" id="category_name" name="category_name" class="form-control" placeholder="  نام بخش" value="{{$category->category_name}}">
                                <span class="help-block">  </span>
                            </div>
                        </div>
                        <!--/span-->
                        @if(app()->getLocale() != 'en')
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">نام لاتین</label>
                                <input type="text" id="category_name_en" name="category_name_en" class="form-control" placeholder="  نام بخش" value="{{$category->category_name_en}}" >
                                <span class="help-block">  </span>
                            </div>
                        </div>
                        @endif

                        <!--/span-->
                        <div class="col-md-4">
                            <div class="input-group">
                                <label class="control-label">@lang('form.inputs.parent')</label>
                                <select name="parent_id" id="content_category" class="form-control no-padding">
                                    <option value="">@lang('form.inputs.select')</option>
                                    @foreach($categories as $categoryItem)
                                        <option value="{{$categoryItem->id}}" {{($categoryItem->id == $category->parent_id) ? 'selected' : NULL}}>{{$categoryItem->category_name}}</option>
                                    @endforeach
                                </select>
                                <span class="input-group-btn refresh-btn" style="vertical-align:bottom;">
                                    <a href="javascript:;"  class="btn yellow" id="newCategory">
                                        <i class="icon-refresh"></i>
                                    </a>
                                </span>
                            </div>
                        </div>
                        <!--/col-->
                    </div>
                    <!--/row-->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label"> @lang('form.inputs.order')</label>
                                <input type="text" id="category_order" name="category_order" class="form-control" placeholder="ترتیب" value="{{$category->category_order}}" >
                                <span class="help-block">  </span>
                            </div>
                        </div>
                        <!--/col-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label> @lang('form.inputs.keywords')</label>
                                <input type="text" name="keywords" class="form-control" value="{{$category->keywords}}" >
                            </div>
                        </div>
                        <!--/col-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>@lang('form.inputs.description')</label>
                                <input type="text" name="description" class="form-control"  value="{{$category->description}}" >
                            </div>
                        </div>
                        <!--/col-->
                    </div>

                    <!--/row-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label >@lang('form.inputs.prepare-for-mobile')</label><br>
                                <input type="checkbox" name="text_for_mobile" class="make-switch text-for-mobile" data-on-text="@lang('form.inputs.publish.yes')" data-off-text="@lang('form.inputs.publish.no')" checked >
                            </div>
                        </div>
                        <div class="col-md-6 ">
                            <div class="form-group">
                                <label>@lang('form.inputs.small-text')</label>
                                <textarea type="text" id="mytextarea" name="small_text" class="form-control mytextarea">{{$category->small_text}}</textarea>
                            </div>
                        </div>
                        <div class="col-md-6 ">
                            <div class="form-group">
                                <label>@lang('form.inputs.full-text')</label>
                                <textarea type="text" id="mytextarea1" name="full_text" class="form-control mytextarea">{{$category->full_text}}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row margin-top-20">
                        <div class="col-md-4">
                            <img src="/images/categories/{{$category->image_location}}" style="max-width: 150px; max-height: 150px;" class="img-thumbnail" alt="@lang('form.inputs.current-image')">
                        </div>
                    </div>

                    <!-- BEGIN FileUpload SECTION -->
                    <div class="row margin-top-20 fileupload">
                        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                        <div class="row fileupload-buttonbar margin-bottom-20">
                            <div class="col-lg-7">
                                <!-- The fileinput-button span is used to style the file input field as button -->
                                <span class="btn btn-success fileinput-button">
                              <i class="glyphicon glyphicon-plus"></i>
                              <span> @lang('form.inputs.choose-image')</span>
                              <input type="file" name="files[]" multiple />

                            </span>
                                <!-- The global file processing state -->
                                <span class="fileupload-process"></span>
                            </div>
                        </div>
                        <!-- The table listing the files available for upload/download -->
                        <table role="presentation" class="table table-striped">
                            <tbody class="files"></tbody>
                        </table>

                        @if(app()->getLocale() == 'en')
                        <!-- The template to display files available for upload -->
                        <script id="template-upload" type="text/x-tmpl">

                            {% for (var i=0, file; file=o.files[i]; i++) { %}
                                <tr class="template-upload fade">
                                    <td>
                                        <span class="preview"></span>
                                    </td>
                                    <td>
                                        <p class="size">Processing...</p>
                                    </td>
                                    <td>
                                        {% if (window.innerWidth > 480 || !o.options.loadImageFileTypes.test(file.type)) { %}
                                            <p class="name">{%=file.name%}</p>
                                        {% } %}
                                        <strong class="error text-danger"></strong>
                                    </td>
                                    <td>
                                        {% if (!i) { %}
                                            <button class="btn btn-danger cancel">
                                                <i class="glyphicon glyphicon-ban-circle"></i>
                                                <span>delete</span>
                                            </button>
                                        {% } %}
                                    </td>
                                </tr>
                            {% } %}
                        </script>

                        @else
                            <script id="template-upload" type="text/x-tmpl">

                                {% for (var i=0, file; file=o.files[i]; i++) { %}
                                    <tr class="template-upload fade">
                                        <td>
                                            <span class="preview"></span>
                                        </td>
                                        <td>
                                            <p class="size">Processing...</p>
                                        </td>
                                        <td>
                                            {% if (window.innerWidth > 480 || !o.options.loadImageFileTypes.test(file.type)) { %}
                                                <p class="name">{%=file.name%}</p>
                                            {% } %}
                                            <strong class="error text-danger"></strong>
                                        </td>
                                        <td>
                                            {% if (!i) { %}
                                                <button class="btn btn-danger cancel">
                                                    <i class="glyphicon glyphicon-ban-circle"></i>
                                                    <span>حذف</span>
                                                </button>
                                            {% } %}
                                        </td>
                                    </tr>
                                {% } %}
                            </script>
                        @endif
                        <!-- The template to display files available for download -->
                        <script id="template-download" type="text/x-tmpl">

                            {% for (var i=0, file; file=o.files[i]; i++) { %}
                                <tr class="template-download fade">
                                    <td>
                                        <span class="preview">
                                            {% if (file.thumbnailUrl) { %}
                                                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                                            {% } %}
                                        </span>
                                    </td>
                                    <td>
                                        {% if (window.innerWidth > 480 || !file.thumbnailUrl) { %}
                                            <p class="name">
                                                {% if (file.url) { %}
                                                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                                                {% } else { %}
                                                    <span>{%=file.name%}</span>
                                                {% } %}
                                            </p>
                                        {% } %}
                                        {% if (file.error) { %}
                                            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                                        {% } %}
                                    </td>
                                    <td>
                                        <span class="size">{%=o.formatFileSize(file.size)%}</span>
                                    </td>
                                    <td>
                                        {% if (file.deleteUrl) { %}
                                            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                                                <i class="glyphicon glyphicon-trash"></i>
                                                <span>Delete</span>
                                            </button>
                                            <input type="checkbox" name="delete" value="1" class="toggle">
                                        {% } else { %}
                                            <button class="btn btn-warning cancel">
                                                <i class="glyphicon glyphicon-ban-circle"></i>
                                                <span>Cancel</span>
                                            </button>
                                        {% } %}
                                    </td>
                                </tr>
                            {% } %}
                        </script>
                    </div>
                    <!-- END FileUpload SECTION -->
                </div>
                <div class="form-actions right">
                    <button type="button" class="btn default">@lang('form.inputs.clear')</button>
                    <input id="image_name" name="image_name" type="hidden" value="{{$category->image_name}}">
                    <button type="submit" class="btn blue">
                        <i class="fa fa-check"></i>@lang('form.inputs.save')
                    </button>
                </div>
            </form>
            <!-- END FORM-->
        </div>
    </div>
@endsection

@section('script')
    <script src="/base/assets/plugins/tinymce/tinymce.min.js"></script>
    <script src="{{mix('base/assets/plugins/jquery-file-upload/js/vendor/jquery.fileupload-vendor.all.min.js')}}"></script>
    <script src="{{mix('base/assets/plugins/jquery-file-upload/js/jquery.fileupload.all.min.js')}}"></script>
    <script src="/base/assets/js/custom-script.js"></script>

    <script>
        tinymce.init({
            selector: '.mytextarea'
        });
        $(document).ready(function () {
            'use strict';

            // Initialize the jQuery File Upload widget:
            $('#fileupload').fileupload({
                // Uncomment the following to send cross-domain cookies:
                //xhrFields: {withCredentials: true},
                url: 'server/php/',
                // By default, the file input field is replaced with a clone after
                // each input field change event. This is required for iframe transport
                // queues and allows change events to be fired for the same file
                // selection, but can be disabled by setting the following option to false:
                replaceFileInput: false
            });

            get_category();
        });
    </script>
@endsection