@extends('admin.layouts.app')
@section('title','Edit Blog')

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Edit</p>
            <a class="btn btn-sm btn-warning" href="{{route('blog.index')}}">View All</a>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <form action="{{route('blog.update', $Blog->id)}}" method="post" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">

                                {{-- Category --}}
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <label class="form-label">Category *</label>
                                    <select name="b_cate" class="form-control @error('b_cate') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        @foreach ($BlogCategory as $bCate)
                                            <option value="{{ $bCate->id }}" {{ $bCate->id == $Blog->b_cate ? 'selected' : '' }}>
                                                {{ $bCate->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('b_cate')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

                                {{-- Tags --}}
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <label class="form-label">Tags *</label>
                                    <select name="b_tag[]" id="b_tag" multiple
                                            class="form-control @error('b_tag') is-invalid @enderror">
                                        @foreach ($BlogTag as $bTag)
                                            <option value="{{ $bTag->id }}"
                                                {{ (in_array($bTag->id, $Blog->tags->pluck('id')->toArray())) ? 'selected' : '' }}>
                                                {{ $bTag->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('b_tag')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

                                {{-- Department --}}
                                <div class="col-md-4 col-sm-12 mb-3">
                                    <label class="form-label">Department *</label>
                                    <select name="dpt_id" class="form-control @error('dpt_id') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        @foreach ($Departments as $dpt)
                                            <option value="{{ $dpt->id }}" {{ $dpt->id == $Blog->dpt_id ? 'selected' : '' }}>
                                                {{ $dpt->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('dpt_id')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>


{{--                                <div class="col-md-4 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Campus *</label>--}}
{{--                                    <select name="campus" class="form-control @error('campus') is-invalid @enderror">--}}
{{--                                        <option value="">Choose</option>--}}
{{--                                        <option value="Green International  University" {{ $Blog->campus == 'Green International  University' ? 'selected' : '' }}>--}}
{{--                                            Green International University--}}
{{--                                        </option>--}}
{{--                                    </select>--}}
{{--                                    @error('campus')--}}
{{--                                    <strong class="text-danger">{{ $message }}</strong>--}}
{{--                                    @enderror--}}
{{--                                </div>--}}

{{--                                <hr>--}}

                                {{-- Title --}}
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Title *</label>
                                    <input type="text" name="name" id="name"
                                           onkeyup="listingslug(this.value)"
                                           value="{{(isset($Blog->name)?$Blog->name:old('name'))}}"
                                           class="form-control rounded-0 @error('name') is-invalid @enderror">
                                    @error('name')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Slug *</label>
                                    <input type="text" name="slug" id="slug"
                                           value="{{(isset($Blog->slug)?$Blog->slug:old('slug'))}}"
                                           class="form-control rounded-0 @error('slug') is-invalid @enderror" readonly>
                                    @error('slug')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

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

                                {{-- Cover Image --}}
                                <div class="col-md-6 mb-3" id="thumbnail_input">
                                    <label class="form-label">Cover Image *</label>
                                    <input type="file" name="img"
                                           accept=".png, .jpg, .jpeg"
                                           class="form-control rounded-0 image-cropper-img @error('img') is-invalid @enderror">
                                    @error('img')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>

{{--                                --}}{{-- Short Detail  --}}
{{--                                <div class="col-md-12 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Short Detail *</label>--}}
{{--                                    <textarea name="short_description" cols="30" rows="3"--}}
{{--                                              class="form-control @error('short_description') is-invalid @enderror">{{ $Blog->short_description }}</textarea>--}}
{{--                                    @error('short_description')--}}
{{--                                    <strong class="text-danger">{{ $message }}</strong>--}}
{{--                                    @enderror--}}
{{--                                </div>--}}

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

                                <hr>

                                {{-- SEO Meta Data --}}
                                <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" name="meta_title" value="{{ $Blog->meta_title }}"
                                               class="form-control rounded-0">
                                    </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">{{ $Blog->meta_description }}</textarea>
                                    </div>
                                    <div class="col-md-12 col-sm-12 mb-3">
                                        <label class="form-label">Meta keywords</label>
                                        <input type="text" name="meta_keywords" value="{{ $Blog->meta_keywords }}"
                                               class="form-control rounded-0">
                                    </div>
                                    <div class="col-md-12 col-sm-12 mb-3">
                                        <label class="form-label">Meta Tags</label>
                                        <input type="text" name="meta_tags" value="{{ $Blog->meta_tags }}"
                                               class="form-control rounded-0">
                                    </div>
                                </div>

                                <div class="col-md-12 mb-3 text-right">
                                    <input type="submit" class="btn btn-sm btn-success" value="Update">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal (Cropper) --}}
    <div class="modal fade bd-example-modal-lg imageCropImg" id="model" tabindex="-1" role="dialog"
         aria-hidden="true" data-bs-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">
                    <h5 class="modal-title text-white fw-bold">Thumbnail</h5>
                    <button type="button" class="close btn-close" id="reset-image-img" data-bs-dismiss="modal"></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="previewImageImg" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-2 m-0">
                    <button type="button" class="btn btn-sm bg-dark-green text-white crop" id="cropImageImg">Crop</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{asset('admin/ckeditor')}}/ckeditor.js"></script>
    <script src="{{asset('admin/ckeditor')}}/ckfinder/ckfinder.js"></script>
    <script src="{{asset('admin/ckeditor')}}/samples/js/sample.js"></script>
    <script>
        $(document).ready(function () {
            var editor = CKEDITOR.replace('news-events', {
                filebrowserUploadUrl: "{{route('events-ckeditor', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });

        // Thumbnail Cropper
        $(document).ready(function () {
            $('#reset-image-img').on('click', function () {
                $('.image-cropper-img').val('');
            });
            var $modal = $('.imageCropImg');
            var image = document.getElementById('previewImageImg');
            var cropper;
            $("body").on("change", ".image-cropper-img", function (e) {
                var files = e.target.files;
                var done = function (url) {
                    image.src = url;
                    $modal.modal('show');
                };
                if (files && files.length > 0) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(files[0]);
                }
            });
            $modal.on('shown.bs.modal', function () {
                cropper = new Cropper(image, {
                    dragMode: 'move',
                    aspectRatio: 16/8,
                    autoCropArea: 0.75,
                    viewMode: 1,
                    restore: false,
                    guides: false,
                    center: false,
                    highlight: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    toggleDragModeOnDblclick: false,
                });
            }).on('hidden.bs.modal', function () {
                cropper.destroy();
                cropper = null;
            });
            $("body").on("click", "#cropImageImg", function () {
                canvas = cropper.getCroppedCanvas({
                    width: 1200,
                    height: 800,
                });
                canvas.toBlob(function (blob) {
                    const thumbnailInput = document.getElementById("thumbnail_input");
                    var x = document.createElement("INPUT");
                    x.setAttribute("type", "file");
                    x.setAttribute("name", "cropper_thumbnail");
                    x.classList.add("d-none");
                    thumbnailInput.appendChild(x);
                    const file = new File([blob], 'thumbnail.jpg', {type: 'image/jpeg'});
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    x.files = dataTransfer.files;
                    $modal.modal('hide');
                });
            });
        });

        // Tags Select2
        $(document).ready(function() {
            $('#b_tag').select2({
                placeholder: "Choose multiple tags",
                allowClear: true
            });
        });
    </script>
    <script>
        // Slugify
        function slugify(text) {
            return text
                .toString()
                .toLowerCase()
                .normalize('NFD')               // The normalize() method returns the Unicode Normalization Form of a given string.
                .trim()                         // Remove whitespace from both sides of a string
                .replace(/ /g, '-')
                .replace(/[^\w-]+/g, '')        // Remove all non-word chars
                .replace(/\-\-+/g, '-');        // Replace multiple - with single -
        }

        function listingslug(text) {
            document.getElementById("slug").value = slugify(text);
        }
    </script>
@endpush