@extends('layouts.master')

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

@section('styles')

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

    /* 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;
    }

    .imageholder{
        display: inline-block;
        text-align: center;
    }
    .imageholder img{
        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/'.$publication->id)}}" enctype="multipart/form-data">

                {{ csrf_field() }}
                {{method_field('PUT')}}
                <input type="hidden" name="resource_id" value="{{$publication->resource_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}}" selected>{{$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>

                        @if(isset($publication->image))
                        <div id="originalImage">
                            <img id='img-upload' src="{{ asset('uploads/publication/'.$publication->image) }}" style="max-width: 50%;" />
                        </div>
                        @endif
                    </div>
                    <div class="input-field col s4">
                        <input type="number" value="{{ $publication==null?'':$publication->price}}" class="validate" name="price" step="any">
                        <label>Price</label>
                    </div>

                    <div class="input-field col s12">
                        <input type="text" value="{{ $publication==null?'':$publication->title}}" 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">  
                        	{{$publication==null?'':$publication->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">  
                        	{{$publication==null?'':$publication->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>
                            
                            @foreach($publication->images as $image)
                                <div class="imageholder">
                                    <img src="{{ asset('uploads/publication/'.$image) }}" alt="" width="100">
                                    <button class="btn delimage" type="button" data-target="#deleteimage" data-toggle="modal" data-delid='{{$publication->id}}' data-imgname='{{$image}}' style="height: 2rem;line-height: 2rem;background: #e90f0f;float:none"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
                                </div>
                            @endforeach
                        </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}}" @if(isset($moresetting->language) && (in_array($lanlist->name, $moresetting->language))) {{'selected'}} @endif>{{$lanlist->name}}</option>
                            @endforeach
                        </select>
                        <label>Language</label>
                    </div>
                    @foreach($attribute as $atlist)
                        <div class="input-field col s3">
                            <input type="text" value="@if(isset($moresetting->{$atlist->slug})) {{ $moresetting->{$atlist->slug} ?? '' }} @endif" 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" @if($publication->status == '0'){{'checked'}}@endif>Show
                        <input type="radio" name="status" value="1"  class="slider-status" @if($publication->status == '1'){{'checked'}}@endif>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>

    <div class="modal" id="deleteimage">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete This Image ?</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form method="post" action="{{url('admin/delimg_public')}}">
                    {{csrf_field()}}
                    <input type="hidden" name="id" id="pubid">
                    <input type="hidden" name="imagename" id="imagename">

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                        <button type="submit" class="btn btn-secondary" style="margin-right: 10px;">Yes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="{{asset('js/cropper.min.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>

    <script>

        $(".delimage").click(function(){
            $('#pubid').val($(this).data('delid'));
            $('#imagename').val($(this).data('imgname'));
        });
    </script>
@endsection