@extends('dashboard.layouts.index')
@section('page_title')
    @lang('global.create_banner')
@stop


@section('breadcrumb')
    <div class="breadcrumb-item">
        <a href="{{route("dashboard.banner.index")}}"> @lang('global.banners')</a>
    </div>
    <div class="breadcrumb-item">
        @lang('global.create_banner')
    </div>
@stop

@section('content')
    <form class="form" id="form" enctype="multipart/form-data" action="{{route("dashboard.banner.store")}}"
          novalidate
          method="POST">
        @csrf
        <div class="row">

            <div class="col-sm-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>@lang("global.banner_information")</h4>
                    </div>
                    <div class="card-body">


                      
                        <div class="form-group row mb-4">
                            <label
                                class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Thumbnail</label>
                            <div class="col-sm-12 col-md-7">

                                <div id="image_preview" class="image-preview">
                                    <label for="image-upload" id="image-label">Choose Image</label>
                                    <input type="file" id="upload_file" name="image"
                                           onchange="preview_image();">
                                </div>

                            </div>
                        </div>

                        <div class="card-footer text-right">
                            <button class="btn btn-primary">@lang("global.save")</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
@stop

@push('js')
    <script src="https://cdn.tiny.cloud/1/n7ktzsgqxg5xtbpjdizih48kxpa99cyvff45mr62naqhy7wy/tinymce/5/tinymce.min.js"
            referrerpolicy="origin"></script>
    <script>
        tinymce.init({selector: 'textarea', height: "500"});
    </script>

<script>
    $(document).ready(function () {
    });

    function preview_image() {
        var total_file = document.getElementById("upload_file").files.length;
        for (var i = 0; i < total_file; i++) {
            $('#image_preview').append("<img src='" + URL.createObjectURL(event.target.files[i]) + "'><br>");
        }
    }
</script>

@endpush