@extends('layouts.app')
@section('title','Add New')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Add New Blog</p>
            <a class="btn btn-sm btn-warning" href="{{route('blog-events.index')}}">View All</a>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="row">
                    <form action="{{ route('blog-events.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="name">Name *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                       name="name" id="name" placeholder="Name" value="{{ old('name') }}">
                                @error('name')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Blog Category *</label>
                                <select name="b_cate" class="form-select rounded-0">
                                    <option disabled selected hidden>Select Blog Category</option>
                                    @foreach ($blogcategory as $category)
                                        <option
                                            value="{{ $category->id }}" {{ old('b_cate') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('b_cate')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Blog Tags *</label>
                                <select name="b_tag[]" id="b_tag" class="form-select rounded-0" multiple>
                                    @foreach ($blogtag as $tag)
                                        <option value="{{ $tag->id }}"
                                            {{ (is_array(old('b_tag')) && in_array($tag->id, old('b_tag'))) ? 'selected' : '' }}>
                                            {{ $tag->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('b_tag')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="b_date">Blog Date *</label>
                                <input type="date" class="form-control rounded-0 @error('b_date') is-invalid @enderror"
                                       name="b_date" value="{{ old('b_date') }}" id="b_date">
                                @error('b_date')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>

                            <div class="col-6" id="banner_input">
                                <div class="mb-3">
                                    <div class="image-edit custom-file-button">
                                        <label class="form-label" for="banner">Cover Image *</label>
                                        <input type="file" id="banner-cropper" accept=".png, .jpg, .jpeg"
                                               name="banner"
                                               class="form-control wizard-required banner-cropper @error('banner') is-invalid @enderror">
                                        @error('banner')<strong
                                            class="text-danger mb-1">{{ $message }}</strong>@enderror
                                        <p><small>Click on Choose File to upload department banner image.</small></p>
                                    </div>
                                </div>
                            </div>

{{--                            <div class="col-md-12 mb-3">--}}
{{--                                <label class="form-label">Short Detail</label>--}}
{{--                                <textarea class="form-control" rows="3" cols="10" name="short_description"--}}
{{--                                          value="{{old('description')}}"></textarea>--}}
{{--                            </div>--}}

                            <div class="col-12 col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="long_description">Detail *</label>
                                    <textarea name="long_description" id="long_description" cols="30" rows="3"
                                              class="form-control">{{ old('long_description') }}</textarea>
                                    @error('long_description')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                            </div>

                        </div>

                        <div class="row mt-4">
                            <h3 class="mb-3">SEO Meta Data</h3>

                            <div class="col-md-12 col-sm-12 mb-3">
                                <label class="form-label">Meta Title</label>
                                <input type="text" class="form-control rounded-0" name="meta_title"
                                       value="{{ old('meta_title') }}">
                            </div>

                            <div class="col-md-12 col-sm-12 mb-3">
                                <label class="form-label">Meta Description</label>
                                <textarea name="meta_description" cols="30" rows="3"
                                          class="form-control rounded-0">{{ old('meta_description') }}</textarea>
                            </div>

                            <div class="col-md-12 col-sm-12 mb-3">
                                <label class="form-label">Meta Keywords</label>
                                <input type="text" class="form-control rounded-0" name="meta_keywords"
                                       value="{{ old('meta_keywords') }}">
                            </div>

                            <div class="col-md-12 col-sm-12 mb-3">
                                <label class="form-label">Meta Tags</label>
                                <input type="text" class="form-control rounded-0" name="meta_tags"
                                       value="{{ old('meta_tags') }}">
                            </div>

                            <div class="col-12">
                                <input type="submit" class="btn btn-sm btn-success" value="Add New">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bd-example-modal-lg bannerCrop" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel" aria-hidden="true" data-coreui-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0 px-3 bg-dark-green" style="background-color: #a51313">
                    <h5 class="modal-title text-white fw-bold" id="cropperModal">Cover Image</h5>
                    <button type="button" class="close btn-close" id="reset-image-banner" data-coreui-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img class="cropper-image" id="previewBanner" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm bg-dark-green text-white crop" id="cropBanner"
                            style="background-color: #a51313;">Crop
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif

    <script>
        $(document).ready(function () {
            $('#b_tag').select2({
                placeholder: "Choose multiple tags",
                allowClear: true
            });
        });
    </script>


    <!-- CKEditor initialization -->
    <script>
        $(document).ready(function () {
            var editor_hod = CKEDITOR.replace('long_description', {
                filebrowserUploadUrl: "{{route('ckeditor.blog-event', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#reset-image-banner').on('click', function () {
                $('.banner-cropper').val('');
            });

            var $modal = $('.bannerCrop');
            var banner = document.getElementById('previewBanner');
            var cropper;

            $("body").on("change", ".banner-cropper", function (e) {
                e.preventDefault();
                var files = e.target.files;
                var done = function (url) {
                    banner.src = url;
                    $modal.modal('show');
                };

                if (files && files.length > 0) {
                    var file = files[0];
                    var reader = new FileReader();
                    reader.onload = function () {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

            $modal.on('shown.coreui.modal', function () {
                cropper = new Cropper(banner, {
                    dragMode: 'move',
                    aspectRatio: 16 / 8,
                    viewMode: 1,
                    autoCropArea: 1,
                    restore: false,
                    guides: false,
                    center: false,
                    highlight: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    toggleDragModeOnDblclick: false
                });
            }).on('hidden.coreui.modal', function () {
                cropper.destroy();
                cropper = null;
            });

            $("body").on("click", "#cropBanner", function () {
                canvas = cropper.getCroppedCanvas({
                    width: 1200,
                    height: 800,
                });

                canvas.toBlob(function (blob) {
                    const bannerInput = document.getElementById("banner_input");
                    var x = document.createElement("INPUT");
                    x.setAttribute("type", "file");
                    x.setAttribute("name", "banner");
                    x.classList.add("d-none");
                    bannerInput.appendChild(x);
                    const file = new File([blob], 'banner.jpg', {type: 'image/jpeg'})
                    const dataTransfer = new DataTransfer()
                    dataTransfer.items.add(file)
                    x.files = dataTransfer.files
                    $modal.modal('hide');
                });
            });
        });
    </script>
@endpush