@extends('layouts.master')

@section('title','Durga Bhawani Dashboard')

@section('styles')

<link rel="stylesheet" href="{{asset('css/cropper.css')}}">
<style type="text/css">
  img {
    display: block;

    /* This rule is very important, please don't ignore this */
    max-width: 100%;
}
    #img-preview {
        display: none;
        width:60%; 
        border: 2px dashed #333;
        margin-bottom: 20px;
    }
    #img-preview img {
        width: 100%;
        height: auto;
        display: block;
    }
</style>
@endsection

@section('content')

<div class="sb2-2">



<div class="sb2-2-2">
</div>

@if(session()->has('success'))

<div class="alert alert-success alert-dismissible">

  <button type="button" class="close" data-dismiss="alert">&times;</button>

  <strong>Success!</strong> {{session('success')}}

</div>

@endif

@if(session()->has('failure'))

<div class="alert alert-success alert-dismissible">

  <button type="button" class="close" data-dismiss="alert">&times;</button>

  <strong>Failure!</strong> {{session('failure')}}

</div>

@endif



<div class="sb2-2-add-blog sb2-2-1">

    <div class="box-inn-sp">

        <div class="inn-title">

            <h4>Publications</h4>
            <a href="{{url('admin/resourcemanger/'.$resources->slug)}}" class="mantra-btn pull-right">Back to list</a>
        </div>

        <div class="bor">

            <form method="post" action="{{ url('admin/publication') }}" enctype="multipart/form-data">

                {{ csrf_field() }}
                <input type="hidden" name="resource_id" value="{{$resources->id}}">
                <div class="row">  
                	<div class="input-field col s4">
                        <select name="category_id" required> 
                            <option value="">--Select Option--</option>
                            @foreach($category as $key=>$list)
                            <option value="{{$list->id}}">{{$list->title}}</option>
                            @endforeach
                        </select>
                        <label>Select Category</label>
                    </div>
                    <div class="input-field col s4">
                        <span class="label-title">Image</span>
                        <div class="input-group mb-10">
                            <input name="image"  accept="image/*" type="file" id="imageupload">

                            <div id="img-preview">
                            </div>
                            <input type="hidden" name="img[x]" id="imgx">
                            <input type="hidden" name="img[y]" id="imgy">
                            <input type="hidden" name="img[width]" id="imgwidth">
                            <input type="hidden" name="img[height]" id="imgheight">
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <input type="number" value="" class="validate" name="price" step="any">
                        <label>Price</label>
                    </div>

                    <div class="input-field col s12">
                        <input type="text" value="" class="validate" name="title" required>
                        <label>Title</label>
                    </div>
                    <div class="input-field col s12" style="margin-top: 35px;">
                        <span class="label-title">Sub Title:</span>
                        <textarea class="full-featured" name="subtitle">  
                        	
                        </textarea>
                    </div>

                    <div class="input-field col s12" style="margin-top: 35px;">
                        <span class="label-title">Descriptions:</span>
                        <textarea class="full-featured" name="description">  
                        </textarea>
                    </div> 

                    <div class="input-field col s12">
                        <div class="file-field">
                            <div class=" image-uploader">
                            <span class="label-title">Content Images</span>
                                <input type="file" id="files" class="image-uploader custom-file-input" name="files[]" multiple />
                            </div>
                        </div>
                    </div>
                    <div class="input-field col s12">
                        <p style="margin-top: 15px;font-size: 20px;"><b>Other Features :</b></p>
                    </div>

                    <div class="input-field col s3">
                        <select name="language[]" multiple>
                            @foreach($language as $lanlist)
                            <option value="{{$lanlist->name}}">{{$lanlist->name}}</option>
                            @endforeach
                        </select>
                        <label>Language</label>
                    </div>

                    @foreach($attribute as $atlist)
                    <div class="input-field col s3">
                        <input type="text" value="" class="validate" name="{{$atlist->slug}}">
                        <label>{{$atlist->title}}</label>
                    </div>
                    @endforeach

                    

                    <div class="input-field col s12">
                        <p class="label-title">Status</p>
                        <input type="radio" name="status" value="0" class="slider-status" checked="checked">Show
                        <input type="radio" name="status" value="1"  class="slider-status">Hide
                    </div>
                </div>

                <div class="row">

                    <div class="input-field col s12">

                        <input type="submit" class="waves-effect waves-light btn-large" value="Submit">

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

</div>



    

@endsection

@section('scripts')
    <!-- <script src="{{ asset('backend/vendor/cropperjs/dist/cropper.min.js') }}"></script>
    <script src="{{ asset('backend/js/cropperjs-init.js') }}"></script>  -->
    <script src="{{asset('js/cropper.min.js')}}"></script>
    <!-- <script src="{{asset('js/jquery-cropper.js')}}"></script> -->
    <script>
        const chooseFile = document.getElementById("imageupload");
        const imgPreview = document.getElementById("img-preview");
        chooseFile.addEventListener("change", function () {
            getImgData();
        });
        getImgData();

        function getImgData() {
            const files = chooseFile.files[0];
            if (files) {
                const fileReader = new FileReader();
                fileReader.readAsDataURL(files);
                fileReader.addEventListener("load", function () {
                    imgPreview.style.display = "block";
                    //$('#image').prop('src',this.result);
                    imgPreview.innerHTML = '<img src="' + this.result + '" id="image"/>';
                    initCropper(true);
                });
            }
        }
        initCropper(false);

        function initCropper(autoCrop)
        {
            const image = document.getElementById('image');
            const cropper = new Cropper(image, {
                aspectRatio:3/5 ,
                zoomable:false,
                autoCrop:autoCrop,
                crop(event) {
                    document.querySelector('#imgx').value=event.detail.x;
                    document.querySelector('#imgy').value=event.detail.y;
                    document.querySelector('#imgwidth').value=event.detail.width;
                    document.querySelector('#imgheight').value=event.detail.height;
                    console.log(event.detail.x);
                    console.log(event.detail.y);
                    console.log(event.detail.width);
                    console.log(event.detail.height);
                    console.log(event.detail.rotate);
                    console.log(event.detail.scaleX);
                    console.log(event.detail.scaleY);
                },
            });

            cropper.clear();
        }

    </script>
       
   
@endsection