@extends('admin.layout.master')
@section('css')
@stop
@section('body')
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <button name="btn_add" class="btn btn-primary pull-right bold mr-2" data-toggle="modal"
                        data-target="#addBlock"><i class="fa fa-plus"></i> Add block
                </button>
                <div class="tile-body">
                    <form class="form-horizontal" method="post" role="form" enctype="multipart/form-data">
                        {!! csrf_field() !!}
                        <div class="form-body">

                            <div class="form-group{{ $errors->has('about') ? ' has-error' : '' }}">
                                <label class="col-md-12"><strong style="text-transform: uppercase;">About Page</strong></label>
                                <div class="col-md-12">
                                    <textarea class="form-control my-editor" rows="15" name="about">{{ $basic->about }}</textarea>
                                    @if ($errors->has('about'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('about') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <br>

                            <div class="form-group">
{{--
                            <div class="col-md-12">
                                <h6>Video Thumbnail</h6>
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput">
                                        <img style="width: 200px" src="{{asset('assets/images/about-video-image.jpg')}}" alt="...">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
                                    <div>
                                                <span class="btn btn-info btn-file">
                                                    <span class="fileinput-new bold uppercase"><i class="fa fa-file-image-o"></i> Select image</span>
                                                    <span class="fileinput-exists bold uppercase"><i class="fa fa-edit"></i> Change</span>
                                                    <input type="file" name="image" accept="image/*" >
                                                </span>
                                        <a href="#" class="btn btn-danger fileinput-exists bold uppercase" data-dismiss="fileinput"><i class="fa fa-trash"></i> Remove</a>
                                    </div>
                                </div>
                                @if ($errors->has('image'))
                                    <div class="error">{{ $errors->first('image') }}</div>
                                @endif
                            </div>
--}}
                                <br>

                            {{--<div class="col-md-12">
                                <h6> Video link</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg"
                                           name="about_video" value="{{$basic->about_video}}">
                                    <div class="input-group-append"><span class="input-group-text">
                                            <i class="fa fa-font"></i>
                                            </span>
                                    </div>
                                </div>
                                @if ($errors->has('about_video'))
                                    <div class="error">{{ $errors->first('about_video') }}</div>                                @endif
                            </div>--}}

                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput">
                                        <img style="width: 200px" src="{{asset($basic->about_image)}}" alt="...">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
                                    <div>
                                                <span class="btn btn-info btn-file">
                                                    <span class="fileinput-new bold uppercase"><i class="fa fa-file-image-o"></i> Select image</span>
                                                    <span class="fileinput-exists bold uppercase"><i class="fa fa-edit"></i> Change</span>
                                                    <input type="file" name="about_image" accept="image/*" >
                                                </span>
                                        <a href="#" class="btn btn-danger fileinput-exists bold uppercase" data-dismiss="fileinput"><i class="fa fa-trash"></i> Remove</a>
                                    </div>
                                </div>
                                @if ($errors->has('image'))
                                    <div class="error">{{ $errors->first('image') }}</div>
                                @endif
                            </div>



                            <br>

                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary btn-block btn-lg"><i class="fa fa-send"></i> Update About</button>
                                </div>


                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @if ($about_blocks->count() > 0)
        <h3>Blocks:</h3><br>
        <div class="row">
            @foreach($about_blocks as $block)
                <div class="col-md-3">
                    <div class="tile">
                        <img src="{{ asset($block->image) }}" style="height: 100px;width: 100%;overflow: hidden" alt="">
                        <p>{!! $block->title !!}</p>
                        <p>{!! $block->content !!}</p>
                        <a href="#" data-toggle="modal" data-target="#editBlock{{ $block->id }}" class="btn btn-success">Edit</a>
                        <a href="{{ route('about-delete-block', $block->id) }}"
                           onclick="return confirm('Are you sure ?')" class="btn btn-danger">Delete</a>
                    </div>
                </div>
                <div class="modal fade" id="editBlock{{$block->id}}" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true"
                     style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form role="form" method="POST" action="{{route('about-edit-block', $block->id)}}" name="editForm"
                                  enctype="multipart/form-data">
                                <div class="modal-header">
                                    <h4 class="modal-title"><b class="text-uppercase"> <span
                                                    id="modal-heading">{{ "Edit block {$block->title}" }}</span>
                                        </b></h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                    </button>
                                </div>
                                <div class="modal-body">

                                    {{ csrf_field() }}

                                    <div class="row">
                                        <div class="col-md-12">
                                            <h6>Title</h6>
                                            <div class="input-group">
                                                <input type="text" class="form-control input-lg"
                                                       name="title" value="{{ $block->title }}">
                                                <div class="input-group-append"><span class="input-group-text">
                                            <i class="fa fa-font"></i>
                                            </span>
                                                </div>
                                            </div>
                                            @if ($errors->has('title'))
                                                <div class="error">{{ $errors->first('title') }}</div>
                                            @endif
                                        </div>
                                        <div class="col-md-12">
                                            <h6>Content</h6>

                                            <textarea name="content" rows="6"
                                                      class="form-control my-editor">{{ $block->content }}</textarea>
                                            @if ($errors->has('content'))
                                                <div class="error">{{ $errors->first('content') }}</div>
                                            @endif
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <img src="{{ asset($block->image) }}" style="height: 100px;width: auto" alt="">
                                            <br><br>
                                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
                                                <div>
                                                <span class="btn btn-info btn-file">
                                                    <span class="fileinput-new bold uppercase"><i class="fa fa-file-image-o"></i> Select image</span>
                                                    <span class="fileinput-exists bold uppercase"><i class="fa fa-edit"></i> Change</span>
                                                    <input type="file" name="image" accept="image/*" >
                                                </span>
                                                    <a href="#" class="btn btn-danger fileinput-exists bold uppercase" data-dismiss="fileinput"><i class="fa fa-trash"></i> Remove</a>
                                                </div>
                                            </div>
                                            @if ($errors->has('image'))
                                                <div class="error">{{ $errors->first('image') }}</div>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">Save</button>

                                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                                        Close
                                    </button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            @endforeach
        </div>
    @endif

    <div class="modal fade" id="addBlock" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <form role="form" method="POST" action="{{route('about-add-block')}}" name="editForm"
                      enctype="multipart/form-data">
                    <div class="modal-header">
                        <h4 class="modal-title"><b class="text-uppercase"> <span
                                        id="modal-heading">{{ 'Add block' }}</span>
                            </b></h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                        </button>
                    </div>
                    <div class="modal-body">

                        {{ csrf_field() }}

                        <div class="row">
                            <div class="col-md-12">
                                <h6>Title</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg"
                                           name="title" value="">
                                    <div class="input-group-append"><span class="input-group-text">
                                            <i class="fa fa-font"></i>
                                            </span>
                                    </div>
                                </div>
                                @if ($errors->has('title'))
                                    <div class="error">{{ $errors->first('title') }}</div>
                                @endif
                            </div>
                            <div class="col-md-12">
                                <h6>Content</h6>

                                <textarea name="content" rows="6"
                                          class="form-control my-editor"></textarea>
                                @if ($errors->has('content'))
                                    <div class="error">{{ $errors->first('content') }}</div>
                                @endif
                            </div>

                            <div class="col-md-12 mt-3">
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
                                    <div>
                                                <span class="btn btn-info btn-file">
                                                    <span class="fileinput-new bold uppercase"><i class="fa fa-file-image-o"></i> Select image</span>
                                                    <span class="fileinput-exists bold uppercase"><i class="fa fa-edit"></i> Change</span>
                                                    <input type="file" name="image" accept="image/*" >
                                                </span>
                                        <a href="#" class="btn btn-danger fileinput-exists bold uppercase" data-dismiss="fileinput"><i class="fa fa-trash"></i> Remove</a>
                                    </div>
                                </div>
                                @if ($errors->has('image'))
                                    <div class="error">{{ $errors->first('image') }}</div>
                                @endif
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>

                        <button type="button" class="btn btn-danger" data-dismiss="modal">
                            Close
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>

@stop
@section('script')
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>

<script type="text/javascript">
    bkLib.onDomLoaded(function() { new nicEditor({fullPanel : true}).panelInstance('area1'); });
</script>
<script src="{{ asset('assets/admin/js/tinymce/tinymce.min.js') }}" type="text/javascript"></script>
<script>
    var editor_config = {
        path_absolute: "/",
        selector: "textarea.my-editor",
        plugins: [
            "advlist autolink lists link image charmap print preview hr pagebreak",
            "searchreplace wordcount visualblocks visualchars code",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons paste textcolor colorpicker textpattern"
        ],
        toolbar: 'undo redo | styleselect | forecolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview',
        relative_urls: false,
        height: 350,
        language: '{{ app()->getLocale() }}',
    };

    tinymce.init(editor_config);
</script>
@stop