@extends('base.layouts.master')

@section('style')
    <link rel="stylesheet" href="/base/assets/css/persian-datepicker.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('title', __('menu.content.create'))
@section('page-title', __('menu.content.create'))
@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.content.title')</span>
                <span class="caption-helper">@lang('menu.content.create') ...</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-->
           @include('base.layouts.partials.general.errors')
           @include('base.layouts.partials.general.message')
            <form id="fileupload" enctype="multipart/form-data"  action="{{route('contents.store')}}" class="horizontal-form" method="POST">
                {{ csrf_field() }}
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label"> @lang('menu.content.title')</label>
                                <input type="text" id="title" name="title" class="form-control" placeholder=" @lang('menu.content.title')">
                                <span class="help-block">  </span>
                            </div>
                        </div>
                        <!--/span-->
                        <div class="col-md-4">
                            <div class="input-group">
                                <label class="control-label">@lang('form.inputs.category')</label>
                                <select name="category_id" id="category_id" class="form-control no-padding">
                                    <option value=""> @lang('form.inputs.select') </option>
                                    @foreach($categories as $category)
                                    <option value="{{$category->id}}">{{$category->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>
                        <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">@lang('form.inputs.order')</label>
                                    <input type="text" id="content_order" name="content_order" class="form-control" placeholder="@lang('form.inputs.order')">
                                    <span class="help-block">  </span>
                                </div>
                        </div>
                        <!--/span-->
                    </div>
                    <!--/row-->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">@lang('form.inputs.publish.title')</label><br>
                                <input type="checkbox" name="active" class="make-switch" data-on-text="@lang('form.inputs.publish.yes')" data-off-text="@lang('form.inputs.publish.no')">
                            </div>
                        </div>
                        <!--/span-->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label">@lang('form.inputs.start-date')</label>
                                <input type="text" name="publish_date" class="form-control @if(app()->getLocale() == 'en') gregorian_date_picker @else persian_date_picker @endif"  placeholder="تاریخ شروع"  >
                                </div>
                            </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">@lang('form.inputs.start-time')</label>
                                <input class="form-control @if(app()->getLocale() == 'en') gregorian_time_picker @else timePicker @endif" id="timePicker" name="start_time" value="00:00:00" />
                            </div>
                        </div>


                        <!--/span-->
                    </div>
                    <!--/row-->
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">@lang('form.inputs.end-date')</label>
                                <input id="end_date" type="text" name="end_publish_date" class="form-control @if(app()->getLocale() == 'en') gregorian_date_picker @else persian_date_picker @endif"  placeholder="تاریخ پایان"   >
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label"> @lang('form.inputs.end-time')</label>
                                <input class="form-control  @if(app()->getLocale() == 'en') gregorian_time_picker @else timePicker @endif" id="timePicker" name="end_time" value="23:59:59" />
                            </div>
                        </div>

                        <!--/span-->
                    </div>
                    <!--/row-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>@lang('form.inputs.keywords')</label>
                                <input type="text" name="keywords" class="form-control">
                            </div>
                        </div>
                        <!--/span-->
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>@lang('form.inputs.description')</label>
                                <input type="text" name="description" class="form-control">
                            </div>
                        </div>
                        <!--/span-->
                    </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"></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"></textarea>
                            </div>
                        </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>
                        <!-- 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>حذف</span>
                                  </button>
                              {% } %}
                          </td>
                      </tr>
                  {% } %}
                </script>
                        <!-- 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="">
                    @can('add-ezafeKardanMohtava')
                    <button type="submit" class="btn blue">
                        <i class="fa fa-check"></i>@lang('form.inputs.save')
                    </button>
                    @endcan
                </div>
            </form>
            <!-- END FORM-->
        </div>
    </div>
@endsection

@section('script')
    <script src="/base/assets/plugins/tinymce/tinymce.min.js"></script>
    <script src="/base/assets/js/persian-date.min.js"></script>
    <script src="/base/assets/js/persian-datepicker.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',
            plugins: "directionality",
            directionality : 'rtl'
        });

        $(document).ready(function () {

            get_category();

            // 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,
            });

            // date picker
            // --------------------------------------------
            //window.persianDatepickerDebug = true;

            // Normal Sample
            // --------------------------------------------
            window.pd = $('#normal').persianDatepicker({
                altField: '#normalAlt',
                altFormat: 'LLLL',
                initialValue: false,
                observer: true,
                format: 'YYYY/MM/DD',
                timePicker: {
                    enabled: true
                }
            });

            // Timepicker With initial Value
            // --------------------------------------------
            $('.timePicker').persianDatepicker({
                onlyTimePicker: true,
                timePicker: {
                    meridian: {
                        enabled: true
                    },
                    second: {
                        enabled: false
                    }
                },
                format: 'HH:mm:ss'
            });

            // Input Group Sample
            // --------------------------------------------
            $('#end_date').persianDatepicker({
                altField: '#end_date,#inputGroupAlt2',
                altFormat: 'L',
                timePicker: {
                    enabled: true
                }
            });

            $('#start_date').persianDatepicker({
                altField: '#start_date,#inputGroupAlt2',
                altFormat: 'l',
                timePicker: {
                    enabled: true
                }
            });

            $('.persian_date_picker').persianDatepicker({
                altField: '.persian_date_picker,#inputGroupAlt2',
                altFormat: 'l',
                timePicker: {
                    enabled: true
                }
            });

            $('.gregorian_date_picker').persianDatepicker({
                altField: '#gregorianExampleAlt',
                calendarType: 'gregorian',
                format: 'l',
                altFormat: 'l',
                timePicker: {
                    enabled: true
                }
            });

            $('.gregorian_time_picker').persianDatepicker({
                altField: '#gregorianExampleAlt',
                calendarType: 'gregorian',
                onlyTimePicker: true,
                format: 'HH:mm:ss',
                altFormat: 'HH:mm:ss',
                timePicker: {
                    enabled: true
                }
            });


//         Inline Sample
//         --------------------------------------------
            $("#inlineGregorian").persianDatepicker({
                inline: true,
                calendar: {
                    persian: {
                        showHint: true
                    },
                    gregorian: {
                        showHint: true
                    }
                },
                calendarType__: 'gregorian',
                altField: '#inlineAltGregorian',
                altFormat: 'LLLL',
                format: "lll",
//            maxDate: new persianDate().add('days', 90).valueOf(),
//            minDate: new persianDate().subtract('days', 90).valueOf(),
//            checkDate: function (unix) {
//                return new persianDate(unix).day() != 3;
//            },
                toolbox: {
                    calendarSwitch: {
                        enabled: true
                    }
                },
                timePicker: {
                    enabled: true,
                    meridian: {
                        enabled: false
                    }
                },
            });

            // Inline Sample
            // --------------------------------------------
            $("#inline").persianDatepicker({
                initialValueType: 'persian',
                minDate: 1506550581778,
                calendar: {
                    persian: {
                        enabled: true,
                        locale: 'en',
                        leapYearMode: "algorithmic" // "astronomical"
                    },

                    gregorian: {
                        enabled: false,
                        locale: 'en'
                    }
                },
                inline: true,
                viewMode: 'day',
                altField: '#inlineAlt',
                altFormat: 'LLLL',
                format: "lll",
                toolbox: {
                    calendarSwitch: {
                        enabled: true,
                        format: 'YYYY'
                    }
                },
                navigator: {
                    scroll: {
                        enabled: true
                    }
                },
                dayPicker: {
                    enabled: true
                },
                yearPicker: {
                    enabled: true
                },
                timePicker: {
                    enabled: true,
                    meridian: {
                        enabled: true
                    },
                    second: {
                        enabled: true
                    }
                }
            });

            // Inline Sample
            // --------------------------------------------
            $("#inline2").persianDatepicker({
                calendar: {
                    persian: {
                        enabled: true,
                        locale: 'fa',
                        showHint: true,
                        leapYearMode: "astronomical" // "astronomical"
                    },
                    gregorian: {
                        enabled: false,
                        showHint: true,
                        locale: 'en'
                    }
                },
                altField: '#inlineAlt2',
                altFormat: 'LLLL',
                inline: true,
                viewMode: 'day',
                format: "lll",
                navigator: {
                    scroll: {
                        enabled: true
                    }
                },
                dayPicker: {
                    enabled: true
                },
                yearPicker: {
                    enabled: true
                },
                timePicker: {
                    enabled: false,
                    meridian: {
                        enabled: true
                    }
                },
            });
        });
    </script>
@endsection