@extends('admin.layouts.app')

@push('scripts_header')
    <style type="text/css">
        .error {
            color: red;
        }

        .red-mark {
            color: red;
        }
          .error{
            color: red;
        }
    </style>
@endpush

@section('content')
<div class="pagetitle">
    <!-- <h1>Add User</h1> -->
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin-dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">New Blog</li>
        </ol>
    </nav>
</div><!-- End Page Title -->

<section class="section">
    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">New Blog</h5>

                    <!-- General Form Elements -->
                    <form class="row g-3" role="form" name="frm-create" id="frm-create" action="{{route('admin-blog.store')}}" method="post" enctype="multipart/form-data">
                    @csrf

                    <div class="col-md-12">
                        <label for="title" class="col-sm-2 col-form-label"> Title<span class="red-mark">*</span></label>
                        
                        <input type="text" placeholder="Enter title" name="title" id="title" class="form-control" value="{{ old('title') }}">
                        
                        @if($errors->has('title'))
                        <div class="error">{{ $errors->first('title') }}</div>
                        @endif                        
                    </div>   

                    <div class="col-md-12">
                        <label for="inputPassword" class="col-sm-2 col-form-label">Description</label>
                        
                        <textarea placeholder="Enter description" name="blog_description" class="form-control" value="{{ old('blog_description') }}" style="height: 100px"></textarea>
                        
                        @if($errors->has('blog_description'))
                            <div class="error">{{ $errors->first('blog_description') }}</div>
                        @endif                            
                    </div>

                    <div class="col-md-6">
                        <label for="posted_at" class="col-sm-2 col-form-label"> Posted At</label>
                        
                        <input type="text" placeholder="Enter date" name="posted_at" id="posted_at" class="form-control" value="{{ old('posted_at') }}">
                        
                        @if($errors->has('posted_at'))
                        <div class="error">{{ $errors->first('posted_at') }}</div>
                        @endif                        
                    </div> 

                    <div class="col-md-12">
                        <label for="inputNumber" class="col-sm-2 col-form-label">Image</label>
                    
                        {{--<input type="file" class="form-control" id="image" name="image" placeholder="" value="{{ old('image') }}">--}}
                        
                        <div class="needsclick dropzone" id="document-dropzone">
                                            
                        </div>  
                        @if($errors->has('image'))
                        <div class="error">{{ $errors->first('image') }}</div>
                        @endif                        
                    </div>                    
                    
                    <div class="text-center">
                        
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <a class="btn btn-default" href="{{ route('admin-blog.index') }}">Back</a>                        
                    </div>
                </form><!-- End General Form Elements -->
                    <!-- End General Form Elements -->
                </div>
            </div>
        </div>   
    </div>
</section>
@endsection

@push('scripts_footer')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
    <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script> 

    <link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    {{-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> --}}
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>


    @include('admin.misc.scripts.dropzone_blog')

    <script>
        CKEDITOR.replace('blog_description', {
            toolbar : [
                { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
                { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
                { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
                { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
                { name: 'tools', items: [ 'Maximize' ] },
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
                { name: 'others', items: [ '-' ] },
                { name: 'basicstyles', items : [ 'Bold','Italic','TextColor','BGColor' ] },
                { name: 'basicstyles', items : [ 'NumberedList','fontSize','fontFamily','BulletedList','Strike','Underline' ] },
                { name: 'align', items: [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                '/',
                // { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic'] },
                // { name: 'paragraph', items: [ 'NumberedList', 'BulletedList'] },
                { name: 'styles', items: [ 'Styles', 'Format' ] },
                { name: 'about', items: [ 'About' ] }
            ]
        });

        blockPage = function(unblock) {
            var unblock = unblock || false;

            if (unblock) {
                mApp.unblockPage();
            } else {
                mApp.blockPage({
                    overlayColor: '#000000'
                    , type: 'loader'
                    , state: 'success'
                    , message: 'Please wait...'
                });
            }
        }

        ajaxSubmitPostBlog = function(form) {
            jQuery(form).ajaxSubmit({
                dataType: 'json', 
                beforeSubmit: function(xhr) {
                    //
                    blockPage();
                }, 
                success: function(res) {
                    //
                    //unblockPage();  

                    //showMessage(res);

                    if (res.status == 'success') {
                        window.setTimeout(function() {
                            window.location = res.location
                        }, 3000);
                    }
                }, 
                error: function(error) {
                    unblockPage();

                    // validation error    
                    if (error.status == 422) {
                        jQuery('#frm-create').find("label[for]").find('em').remove();
                        jQuery.each(error.responseJSON.errors, function(k, v) {
                            var em = jQuery('<em>', {
                                class: "error"
                            }).append(
                                v[0]
                            );

                            jQuery('#frm-create').find("label[for='" + k + "']").append(em);
                        })
                    }
                }
            });

            return false;
        }


        validatePostBlogForm = function() {
            jQuery('#frm-create').validate({
                submitHandler: function(form) {

                    // form.submit();
                    ajaxSubmitPostBlog(form);
                },

                errorElement: 'span', 
                focusInvalid: true,

                errorPlacement: function(error, element) {

                    var target = element.prop('name');
                    var label = element.parent();

                    //error.appendTo( label.find("label[for='"+target+"']") ); 
                    error.appendTo(element.parent().after());
                }, 
                ignore: '', 
                rules: {
                    //posted_at: "required",                                      
                    title: {
                        required: true, 
                        maxlength: 255,
                    }
                },

                messages: {
                    //posted_at: "Please select valid date",
                    property_type: "Please select any one",
                    title: {
                        required: "Please enter blog title", 
                        maxlength: "Please enter a value less than or equal to 255 digit.",
                    }
                }
            });
        }

        $(document).ready(function () {
            var today = new Date();
            $('#posted_at').datepicker({
                format: 'Y-m-d',
                autoclose:true,
                endDate: "today",
                maxDate: today
            }).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });

            $('#posted_at').keyup(function () {
                if (this.value.match(/[^0-9]/g)) {
                    this.value = this.value.replace(/[^0-9^-]/g, '');
                }
            });

            validatePostBlogForm();
        });

    </script>
@endpush