@extends('admin.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</p>
            <a class="btn btn-sm btn-warning" href="{{route('campus-facilitie.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('campus-facilitie.store')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-3" id="thumbnail_input">
                                    <label class="form-label">Thumbnail *</label>
                                    <input type="file" class="form-control rounded-0 image-cropper-img @error('img') is-invalid @enderror" name="img" value="{{old('img')}}">
                                    @error('img')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
{{--                                <div class="col-md-12 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Title *</label>--}}
{{--                                    <input type="text" class="form-control rounded-0 @error('name') is-invalid @enderror" name="name" value="{{old('name')}}">--}}
{{--                                    @error('name')--}}
{{--                                    <strong class="text-danger">{{ $message }}</strong>--}}
{{--                                    @enderror--}}
{{--                                </div>--}}
{{--                                <div class="col-md-6 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Gallery *</label>--}}
{{--                                    <input type="file" class="form-control rounded-0 @error('gallery') is-invalid @enderror"  name="gallery[]" multiple="multiple" value="{{old('gallery')}}">--}}
{{--                                    @error('gallery')--}}
{{--                                    <strong class="text-danger">{{ $message }}</strong>--}}
{{--                                    @enderror--}}
{{--                                </div>--}}
{{--                                <div class="col-md-12 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Description *</label>--}}
{{--                                    <textarea name="description" id="" class="form-control @error('description') is-invalid @enderror" cols="30" rows="5"></textarea>--}}
{{--                                    @error('description')--}}
{{--                                    <strong class="text-danger">{{ $message }}</strong>--}}
{{--                                    @enderror--}}
{{--                                </div>--}}
                                <div class="col-md-12 mb-3 text-right">
                                    <input type="submit" class="btn btn-sm btn-success" value="Create">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal --}}
    <div class="modal fade bd-example-modal-lg imageCropImg" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel " 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 " id="cropperModal">Thumbnail</h5>
                    <button type="button" class="close btn-close" id="reset-image-img" data-bs-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="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>
    {{-- End: Modal --}}
@endsection
@push('js')
    <script src="{{asset('admin/js')}}/canvas-to-blob.min.js"></script>
    <script>
        //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) {
                e.preventDefault();
                var files = e.target.files;
                var done = function (url) {
                    image.src = url;
                    $modal.modal('show');
                };
                var reader;
                var file;
                var URL;
                if (files && files.length > 0) {
                    file = files[0];
                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function (e) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
            $modal.on('shown.bs.modal', function () {
                cropper = new Cropper(image, {
                    dragMode: 'move',
                    aspectRatio: 4 / 3,
                    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: 900,
                    height: 600,
                });
                canvas.toBlob(function (blob) {
                    // Crop & Convert it to image
                    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');
                });
            });
        });
    </script>
@endpush