<x-app-layout>
    {{-- <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot> --}}


    <div class="py-4">
        <div class="container-fluid">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="app-content content">
                <div class="details-wrapper">
                    <div class="content-detached content-right">
                    <div class="content-body">
                        <section id="configuration">
                            <div class="row">
                            <div class="col-12">
                            <nav aria-label="breadcrumb ">
                          <ol class="breadcrumb bg-white">
                            <li class="breadcrumb-item"><a href="{{ url('quicklinks/list/Published') }}">Quick Links</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Edit</li>
                          </ol>
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <form method="POST" action="{{ route('quicklinkslist.update',$datarepository->id) }}" id="editquicklinks" class="edit-form" enctype="multipart/form-data">
                                        @csrf
                                        <div class="card-header">
                                            <h4 class="card-title">Edit Quick Link </h4>
                                            <button class="btn btn-primary" type="button" id="editquicklinkbutton" onclick="updateQuicklink();">Update </button>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-content">
                                                <div class="row">

                                                    <div class="col-12">
                                                        <div class="row">
                                                            
                                                            <div class="col-md-4 col-sm-6 col-12">
                                                                <label class="control-label"> Title<span class="text-danger">*</span></label>
                                                                <input type="text" name="title" class="form-control" placeholder="" value="{{$datarepository->title}}" required autofocus>
                                                            </div>

                                                            <div class="col-md-4 col-sm-6 col-12">
                                                                <label class="control-label">Category<span class="text-danger">*</span></label>
                                                                <select id="categoryList" class="form-control" name="category_id" required>
                                                                <option value="">--Select--</option>
                                                                @if(!empty($category) && isset($category))
                                                                @foreach($category as $categories)
                                                                    <option value="{{$categories->id}}"@if( $datarepository->category_id == $categories->id ) selected @endif>{{$categories->categoryname}}</option>
                                                                @endforeach
                                                                @endif
                                                                </select>
                                                            </div>
                                                            
                                                            <!-- <div class="col-md-4 col-sm-6 col-12">
                                                                <label class="control-label">Sub Category<span class="text-danger"></span></label>
                                                                <select id="subcategoryList" class="form-control" name="sub_category_id">
                                                                <option value="">--Select--</option>
                                                                @if(!empty($subcategories) && isset($subcategories))
                                                                @foreach ($subcategories as $subcategory)
                                                                <option class='parent-{{ $subcategory->sub_of }} subcategory' value="{{ $subcategory->id }}"@if( $datarepository->category_id == $subcategory->id ) selected @endif>{{ $subcategory->categoryname }}</option>
                                                                @endforeach
                                                                @endif
                                                                </select>
                                                            </div> -->

                                                            <div class="col-md-4 col-sm-6 col-12">
                                                                <label class="control-label">Doc Name<span class="text-danger">*</span></label>
                                                                <input type="text" name="doc_name" class="form-control" placeholder="" value="{{$datarepository->doc_name}}" required autofocus>
                                                            </div>



                                                            <!-- <div class="col-md-4 col-sm-6 col-12">
                                                                <label class="control-label">Doc Priority<span class="text-danger"></span></label>
                                                                <select class="form-control" name="doc_priority">
                                                                <option value="">--Select--</option>
                                                                <option value="1" @if( $datarepository->doc_priority == 1 ) selected @endif >Public</option>
                                                                <option value="2" @if( $datarepository->doc_priority == 2 ) selected @endif >Confidential </option>
                                                                <option value="3" @if( $datarepository->doc_priority == 3 ) selected @endif >Highly Confidential </option>
                                                                </select>
                                                            </div> -->

                                                            <div class="col-12">
                                                            <div class="form-group" id="txtArea" style="display:none;">
                                                             <label class="control-label">Description<span class="text-danger">*</span></label>
                                                              <textarea style="height:auto;" name="description" id="description" class="form-control autoExpand">{{$datarepository->description}}</textarea>
                                                            </div>
                                                              <input  class="ml10" type="hidden" name="hascontent" id="hascontent" value="@if( $datarepository->description != '' ) 1 @endif" />
                                                          <input class="ml10" type="hidden" name="editorcount" id="editorcount" value="1" />
                                                              <p id="pretxt" class="alert alert-warning tc">Loading Content Editor ...</p>
                                                          </div>

                                                            <div class="col-md-6 col-12">
                                                                <label class="control-label">Display Date</label>
                                                                <input type="date" name="publish_date" class="form-control" placeholder="" value="{{$datarepository->publish_date}}">
                                                            </div>
                                                            <div class="col-md-6 col-12">
                                                                <label class="control-label">Uploaded By</label>
                                                                <input type="text" name="uploaded_by" class="form-control" placeholder="" value="{{$datarepository->uploaded_by}}">
                                                            </div>
                                                            <div class="col-md-12 col-12 pt-3">
                                                                <label class="control-label">Do you want to show it on home page?</label>
                                                                <div class="inputDiv">
                                                                    <input type="radio" name="allow_show"class="control-label  yeschk" onclick="countCheck();" value="y"  @if( $datarepository->allow_show == 'y' ) checked @endif> Yes
                                                                    <input type="radio" name="allow_show" class="control-label ml-3" value="n"  @if( $datarepository->allow_show == 'n' ) checked @endif> No<br>
                                                                </div> 
                                                            </div>

                                                            <div class="col-md-4 col-sm-6 col-12 pt-4" id="adddoc" @if( $datarepository->doc_path != '' ) style="display: none" @endif >
                                                                <label class="control-label">Add a Document</label>
                                                                <div class="remove-img remove-doc justify-content-end doc-upload">
                                                                    <div class="doc-controls">
                                                                        <div class="docControls">
                                                                            <div class="remove-icon" onclick="removeDoc()" id="remove-icon" style="display: none">
                                                                                <i class="fas fa-times icon-img"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="position-relative uploadImg">
                                                                        <input type="file" name="upload_doc" id="upload_doc">
                                                                        <span id="upload-icon"><i class='fas fa-upload'></i></span>
                                                                    </div>

                                                                    <div class="upload-doc-name" id="file-upload-filename"></div>

                                                                </div>
                                                            </div>

                                                            @if( $datarepository->doc_path != '' )
                                                                <div class="col-md-4 col-sm-6 col-12 pt-4" id="docdiv" >
                                                                <label class="control-label">Document</label>
                                                                    <div class="remove-img remove-doc" id="docdiv">
                                                                        <p class="mb-0 text-truncate pr-3">{{$datarepository->originalname}}</p>
                                                                        <div class="docControls">
                                                                            <div class="remove-icon" onclick="removeDoc()" id="remove-icon">
                                                                                <i class="fas fa-times icon-img"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                             <div class="col-12"></div>
                                                                    <div class="col-lg-4 col-md-4 col-sm-6">
                                                                        <label class="control-label">Add Image</label>
                                                                        <div class="upload-imgblock">
                                                                            <div class="upload-field">
                                                                                @if( $datarepository->image_path != '' )
                                                                                    <img style="height:100%; object-fit:contain;" class="" src="{{$datarepository->image_path}}" id="userimage">
                                                                                @else
                                                                                     <img style="height:100%; object-fit:contain;" class="" id="userimage" src="{!! asset('images/upload-img.png') !!}">
                                                                                @endif
                                                                                <div class="imgControls">
                                                                                    <div class="position-relative uploadImg">
                                                                                        <a href="{{ url('crop/thumbnail')}}" name="upload-img" id="upload-img" data-toggle="modal"  class="aupload btn btn-upload"> 
                                                                                        <span id="uploadimg"><i class='fas fa-upload'></i></span>
                                                                                    </a>
                                                                                    </div>
                                                                                    <div class="remove-icon" onclick="removeImage()" id="removeimg" style="display: none;">
                                                                                        <i class="fas fa-times icon-img"></i>
                                                                                    </div>
                                                                                    @if($datarepository->image_path != '')
                                                                                    <div class="remove-icon" onclick="removeImage()" id="remove-img">
                                                                                        <i class="fas fa-times icon-img"></i>
                                                                                    </div>
                                                                                    @endif
                                                                                </div>
                                                                            </div>
                                                                             <span class="doc-up-note mb-3"><strong>Note:</strong> Please upload an image of size greater than <sab>240px X 240px</sab>. You can upload only  .jpg, png, jpeg files.</span>
                                                                             <div class="pt-3">
                                                                                 
                                                                        <input type="hidden" name="uploadvalue" id="uploadvalue"  @if( $datarepository->image_path != '' ) value="1" @else value="" @endif>
                                                                             </div>
                                                                             
                                                                        </div>

                                                                    <input type="hidden" name="upload_img" id="upload_img" value="">
                                                                    </div>
                                                             <input type="hidden" id="tempimage" name="tempimage" value="">
                                                            <input type="hidden" name="isremove" id="isremove" value="0">
                                                            <input type="hidden" name="isremoveimg" id="isremoveimg" value="0">
                                                            

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=f4xmcmxdltpuabqrju9bvz7gtauleb4ebiua6d1n6farq25z"></script> 
    <script type="text/javascript">
       tinymce.init({
          selector: 'textarea',
          menubar: false,
          height: 500,
          paste_as_text: true,
          relative_urls: false,
          convert_urls: false,
         remove_script_host : false,
         plugins: 'searchreplace autolink directionality visualblocks visualchars fullscreen image link media charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern, paste',
         toolbar1: 'formatselect | italic underline forecolor backcolor | media | link | image | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent',
          image_advtab: true,
          setup: function (ed) {
            ed.on('init', function(args) {
                $('#pretxt').hide();
                $('#txtArea').show();
            });
            ed.on('change', function(e) {
               calculateEditorCountPrimary();
           });
           ed.on('keyup', function(e) {
               calculateEditorCountPrimary();
                //$("#channelcontent").val(ed.getContent());
           });
          }
     });
        $(document).ready(function () {
            $(".aupload").colorbox({
            iframe: true,
            width: "650px",
            height: "650px"
        });
        <?php if($datarepository->image_path != '') { ?>
            $("#upload-img").hide();
        <?php } ?> 
            $('#editquicklinks').validate({
                 ignore : [],
            rules : {
                title : 'required',
                category_id: 'required',
                sub_category_id  : 'required',
                doc_name  : 'required',
                doc_priority  : 'required',
                uploadvalue : {
                    required: {
                        depends: function(element) {
                            return ($("input[name='allow_show']:checked").val() == 'y');
                        }
                    },
                },
                hascontent : 'required',
                editorcount : 'required',
            },
            messages : {
                title :'Please enter title.',
                category_id: 'Please select category.',
                sub_category_id: 'Please select sub category.',
                doc_name: 'Please enter doc name.',
                doc_priority: 'Please select doc priority.',
                hascontent : 'Please enter description',
                editorcount : 'Maximum word limit for the content is 12,000.',   
                uploadvalue : 'Please upload an image.', 
            }
            });
            $(document).on('change','#upload_doc',function(event){
                var filename = $('input[type=file]').val().split('\\').pop();
                var ext = $('#upload_doc').val().split('.').pop().toLowerCase();
                //var infoArea = document.getElementById( 'file-upload-filename' );
                if($.inArray(ext, ['doc','docx','pdf','ppt','pptx','xls','xlsx']) == -1) {
                    alert('Upload a document with size less than 25MB.');
                }else{
                    var _URL = window.URL || window.webkitURL;
                    var file, img;
                if ((file = this.files[0])) {
                    var fileExtension = ['doc', 'docx', 'pdf'];
                    var tmppath = URL.createObjectURL(event.target.files[0]);
                    $("#userdoc").attr("src",tmppath);
                    $("#file-upload-filename").show();
                    $("#file-upload-filename").html('');
                    document.getElementById('file-upload-filename').innerHTML =
                    document.getElementById('file-upload-filename').innerHTML
                    +
                    '<br /> ' + 'Uploaded file: <b>' + filename;
                    $("#remove-icon").show(); 
                    $("#upload-icon").hide();   
                    $("#userdoc").hide();     
                }
                }
            });
            $(document).on('change','#upload-img',function(event){
                var ext = $('#upload-img').val().split('.').pop().toLowerCase();
                if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
                    alert('Upload a JPG/GIF/PNG image with a dimension of 1600 x 400px (Width/Height).');
                }else{
                    var _URL = window.URL || window.webkitURL;
                    var file, img;
                if ((file = this.files[0])) {
                    img = new Image();
                    var fileExtension = ['jpeg', 'jpg', 'png', 'gif'];
                    img.onload = function () {
                    var w = this.width ;
                    var h = this.height ;
                    var tmppath = URL.createObjectURL(event.target.files[0]);
                    $("#userimage").attr("src",tmppath);
                    $("#removeimg").show();
                    $("#uploadimg").hide();
                    $("#upload_img").val(1);
                    $("#uploadvalue").val('1');

                };
                img.src = _URL.createObjectURL(file);
                }
                }
            });
        });
        function updateQuicklink(){
         if($("#editquicklinks").valid()){
            $("#editquicklinkbutton").prop('disabled',true);
            $("#editquicklinks").submit();
         }else{
            setTimeout(function(){
                $('html, body').animate({
                    scrollTop: ($('.error:visible').first().offset().top - 100)
            }, 500);
            //$('.error:visible').first().focus();
            },500);
         }
        }
        function countCheck(){
            <?php if($count >= 2){ ?>
                alert('Sorry!You have already selected 2 quicklinks') 
                $(".yeschk").prop("checked", false);
            <?php } ?>
        }
        function removeDoc(){
            if (confirm('Are you sure you want to delete this document?')) {
                $("#adddoc").show();
                $("#docdiv").hide();
                $("#file-upload-filename").hide();
                $("#upload-icon").show();
                $("#remove-icon").hide(); 
                $("#isremove").val('1');
            }
        }
        function calculateEditorCountPrimary(){
            var editorwordcount = getStatsPrimary('description').words;
            editorwordcount = editorwordcount - 1;
            $("#editorcount").val('');
            $("#hascontent").val('');
            if( editorwordcount <= 12000 ){
                $("#editorcount").val(1);
            }
            if( editorwordcount > 0 ){
                $("#hascontent").val(1);
            }

            $("#editorcount").valid();
            $("#hascontent").valid();
        }
        function getStatsPrimary(id) {
            var body = tinymce.get(id).getBody(), text = tinymce.trim(body.innerText || body.textContent);

            return {
                chars: text.length,
                words: text.split(/[\w\u2019\'-]+/).length
            };
        }
        function removeImage(){
            if (confirm('Are you sure you want to delete this image?')) {
                $("#userimage").attr("src","{{asset('images/upload-img.png')}}");
                $("#removeimg").hide();
                $("#remove-img").hide();
                $("#uploadimg").show();
                $("#isremoveimg").val('1');
                $("#upload-img").show();
                $("#uploadvalue").val('');
            }
        }
        function thumbnailImage(imagekey,imagePath){
            $("#tempimage").val(imagekey);
            $("#userimage").attr("src",imagePath);
            $("#userimage").show();
            $("#upload-img").hide();
            $("#removeimg").show();
            $("#uploadvalue").val('1');
            $("#uploadvalue").valid();
        }

    </script>
</x-app-layout>