@extends('backend.layouts.app')

@section('blog') open @endsection
@section('blog-add') active @endsection

@section('content')
<!-- Page Content -->
<div class="content">
    <div class="row">
        <!-- Row #2 -->
        <div class="col-md-12">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        Add New Blog
                    </h3>
                    <a href="{{ route('blog.index') }}" class="btn btn-success"><i class="fa-solid fa-list"></i> &nbsp; List</a>
                </div>
                <div class="block-content block-content-full">
                    <form action="{{ route('blog.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="title">Title:</label>
                                <input type="text" class="form-control" id="title" name="title"
                                    placeholder="Title" value="{{ old('title') }}">
                                @error('title')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="tags">Tags:</label> <br>
                                <input type="text" class="form-control" id="tags" name="tags"
                                    placeholder="tags" data-role="tagsinput" value="{{ old('tags') }}">
                                @error('tags')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                                
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="thumbnail">Thumbnail:</label>
                                <input type="file" class="form-control" id="breadcrumb" name="thumbnail"
                                    placeholder="Choose thumbnail" onchange="loadBreadcrumb(event)">
                                @error('thumbnail')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <img id="preview-breadcrumb" src="{{ asset('common/no-image.jpg') }}"
                                            alt="breadcrumb" style="width: 100px; height: 100px;" class="mt-3">
                            </div>                                                   
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="image">Image:</label>
                                <input type="file" class="form-control" id="image" name="image"
                                    placeholder="Choose Photo" onchange="loadFile(event)">
                                @error('image')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                                <img id="output" src="{{ asset('common/no-image.jpg') }}"
                                            alt="Image" style="width: 180px; height: 100px;" class="mt-3">
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="description">Description:</label>
                                <textarea name="description" id="description" rows="3" class="form-control editor" placeholder="Description">{{ old('description') }}</textarea>
                                @error('description')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                        <div class="block-content block-content-full block-content-sm text-center border-top">
                            <button type="button" class="btn btn-alt-secondary" data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" class="btn btn-alt-primary">
                                Submit
                            </button>
                        </div>
                    </form>                    
                </div>
            </div>           
        </div>
        <!-- END Row #2 -->
    </div>
</div>
<!-- END Page Content -->
@endsection

@section('script')
    <script src="/backend/assets/js/plugins/select2/js/select2.full.min.js"></script>
    <script>
        Codebase.helpersOnLoad(['js-flatpickr', 'jq-datepicker', 'jq-colorpicker', 'jq-maxlength', 'jq-select2', 'jq-rangeslider', 'jq-masked-inputs', 'jq-pw-strength']);
    </script>

    <script>
        var loadBreadcrumb = function(event) {
            var reader = new FileReader();
            reader.onload = function(){
            var output = document.getElementById('preview-breadcrumb');
            output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        };
    </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script>
  $(function () {
    $('input')
      .on('change', function (event) {
        var $element = $(event.target);
        var $container = $element.closest('.example');

        if (!$element.data('tagsinput')) return;

        var val = $element.val();
        if (val === null) val = 'null';
        var items = $element.tagsinput('items');

        $('code', $('pre.val', $container)).html(
          $.isArray(val)
            ? JSON.stringify(val)
            : '"' + val.replace('"', '\\"') + '"'
        );
        $('code', $('pre.items', $container)).html(
          JSON.stringify($element.tagsinput('items'))
        );
      })
      .trigger('change');
  });
</script>
@endsection