@extends('layouts.backend')

@section('extra_css')
    <meta name="token" id="token" value="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('assets/vendors/iCheck/skins/flat/green.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{{ asset('assets/vendors/google-code-prettify/bin/prettify.min.css') }}">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.min.css" rel="stylesheet" type="text/css">
@endsection

@section('extra_js')
    <script src="{{ asset('assets/vendors/parsleyjs/dist/parsley.min.js') }}"></script>
    <script src="{{ asset('vendor/laravel-filemanager/js/lfm.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/js/tag-it.min.js"></script>
    
<script src="{{ asset('assets/js/stand-alone-button.js')}}"></script>
    <script>
        $(document).ready(function () {
            
            $('#lfm').filemanager('image');
                    // Update image preview whenever input value changes
            $('#thumbnail').on('change', function() {
                var url = $(this).val();
                $('#holder').attr('src', url);
            });

            let post_status = $("#post_status");
            post_status.click(function () {
                if (post_status.is(':checked')) {
                    post_status.val(1);  // checked
                } else {
                    post_status.val(0);
                }
            });

            let sticky = $("#sticky");
            sticky.on('click', function () {
                if (sticky.is(':checked')) {
                    sticky.val(1);  // checked
                    $("#sticky_position_input").css("display", "block");
                } else {
                    sticky.val(0);
                    $("#sticky_position_input").css("display", "none");
                    $("#sticky_position").val('');
                }
            });

            let watermark = $("#watermark");
            watermark.click(function () {
                if (watermark.is(':checked')) {
                    watermark.val(1);  // checked
                } else {
                    watermark.val(0);
                }
            });

            let show_user_photo = $("#show_user_photo");
            show_user_photo.click(function () {
                if (show_user_photo.is(':checked')) {
                    show_user_photo.val(1);  // checked
                } else {
                    show_user_photo.val(0);
                }
            });

            $('#division_list').select2({
                    divisions: true
                }
            );

            $('#division_list').on('change', function (e) {
                var division_id = e.target.value;
                $.get("{{ route('division.district') }}/" + division_id, function (data) {
                    $('#district_list').empty();
                    $.each(data, function (index, districtObj) {
                        $('#district_list').append('<option value="' + districtObj.id + '">' + districtObj.name + '</option>')
                    })
                })
            });
        })

    </script>
    
     <script>
      $(document).ready(function() {
         //ajax category sub category
            $('#category_list').on('change', function (e) {
                var category_id = e.target.value;
                console.log(category_id);
                if(category_id){
                 $.ajax({
                    url:"{{ route('category.subcategory') }}/"+category_id,
                    type:"get",
                    dataType:"json",
                    success:function(data){
                      $("#sub_cat_list").empty();
                       $("#sub_cat_list").append('<option selected value="">--select sub category--</option>')
                      $.each(data,function(key, value){
                        $('#sub_cat_list').append('<option value="' + value.slug + '">' + value.name + '</option>')
                      })
                    }
                  })
                }else{
                  alert("danger");
                }
            });
      });
    </script>

<script type="text/javascript">
  $(document).ready(function(){
      $('#profileImg').width('50');
    $('.profile-img-input').change(function(e){
      var reader = new FileReader();
      reader.onload = function(e){
        $('.profileImgShow').attr('src',e.target.result);

      }
      reader.readAsDataURL(e.target.files['0']);
    })
  });
  
$('#lfm').filemanager('image');
$('#lfm2').filemanager('image');
</script>
<script type="text/javascript">
    $("#myTags").tagit({
        singleField: true,
        singleFieldNode: $('#mySingleField'),
        allowSpaces: true,
        minLength: 2,
        removeConfirmation: true,
        tagSource: function(request, response){
            let keyword = request.term;
            $.ajax({
                url: "{{ route('tagLiveSearch') }}/"+keyword, 
                data: { term:request.term },
                dataType: "json",
                success: function(data){
                    console.log('ff')
                    response($.map(data, function(item){
                        return {
                            label: item.name,
                            value: item.name
                        }
                    }));
                }
            });
        }
    });
</script>
@endsection




@section('content')

<main>
    <div class="container-fluid"> 
    <form role="form" method="post" action="{{ route('news.store') }}"  enctype="multipart/form-data">
                {{ csrf_field() }}
				<div class="mb-4 mt-2"></div>
        <div class="row justify-content-center">
			<div class="col-lg-12"><a href="{{ route('post.index') }}"><button type="button" class="btn btn-info btn-sm"><i class="fa fa-bars"></i> View All</button></a></div>
            <div class="col-lg-8">
                <div class="card shadow-lg rounded-lg mt-2 mb-5">
                    <div class="card-header"><h4 class="text-center font-weight-light my-2">Create Post</h4></div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="mb-1" >Headline</label>
                            <input name="headline" type="text" class="form-control" required="required">
                        </div>
                        <div class="form-group">
                            <label class="mb-1" >Sub Headline</label>
                            <input name="sub_headline" type="text" class="form-control">
                        </div>
                        
                        <div class="form-group body__edit">
                            <label>Post Content <span class="text-danger">*</span></label>
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/tinymce.min.js"></script>
                            <textarea id="post_content" name="post_content" class="form-control my-editor" rows="15" >{{ old('post_content') }}</textarea>
                            <script>
                                var editor_config = {
                                    path_absolute: "/",
                                    selector: "#post_content",
                                    plugins: [
                                        "textcolor advlist autolink lists link image charmap print preview hr anchor pagebreak",
                                        "searchreplace wordcount visualblocks visualchars code fullscreen",
                                        "insertdatetime media nonbreaking save table directionality",
                                        "emoticons template paste textcolor colorpicker textpattern"
                                    ],
                                    toolbar: "forecolor backcolor insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
                                    relative_urls: false,
                                    file_browser_callback: function (field_name, url, type, win) {
                                        var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                                        var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

                                        var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
                                        if (type == 'image') {
                                            cmsURL = cmsURL + "&type=Images";
                                        } else {
                                            cmsURL = cmsURL + "&type=Files";
                                        }

                                        tinyMCE.activeEditor.windowManager.open({
                                            file: cmsURL,
                                            title: 'Filemanager',
                                            width: x * 0.8,
                                            height: y * 0.8,
                                            resizable: "yes",
                                            close_previous: "no"
                                        });
                                    }
                                };
                                tinymce.init(editor_config);
                            </script>
                            @error('post_content')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        
                                    
                                        
                    </div> 
                </div>
            </div> <!--col-->
            
            <div class="col-lg-4">
                <div class="card shadow-lg rounded-lg mt-2 mb-5">
                    <div class="card-body">
											
                                            
                                            <div class="form-group">
                                                <label class="mb-1">Featured Image <span style="color: #f10000; font-weight: bold;">(width: 640px; height: 360px)</span></label>
                                                <div class="input-group">
                                                    <input id="thumbnail" class="form-control" type="text" name="featured_image" >
                                                    <span class="input-group-btn"> <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary"> <i class="fa fa-image"></i> Choose </a> </span> 
                                                </div> 
                                                <img id="holder"  style="margin-top:15px;max-height:100px;">
                                            </div>
                                            
                                           <!--<div class="form-group">-->
                                           <!--     <label class="mb-1">Featured Image  <span style="color: #f10000; font-weight: bold;">(width: 640px; height: 360px)</span></label>-->
                                           <!--     <div class="input-group">-->
                                           <!--         <input id="thumbnail" class="form-control" type="text"-->
                                           <!--                name="featured_image">-->
                                           <!--         <span class="input-group-btn">-->
                                           <!--             <a id="lfm" data-input="thumbnail" data-preview="holder"-->
                                           <!--                class="btn btn-primary">-->
                                           <!--               <i class="fa fa-image"></i> Choose-->
                                           <!--             </a>-->
                                           <!--         </span>-->

                                           <!--     </div>-->
                                           <!--     <img id="holder" style="margin-top:15px;max-height:100px;">-->
                                           <!-- </div>-->
                                            
                                          {{--<div class="form-group" class="profile-img">
                                            <label class="mb-1">Featured Image  <span style="color: #f10000; font-weight: bold;">(width: 640px; height: 360px)</span></label>
                                            <input class="profile-img-input" id="photo" name="featured_image"  type="file" >
                                            <span class="text-danger">{{ $errors->has('featured_image') ? $errors->first('featured_image'):''}}</span>
                                            <br>
                                            <label class="pt-1" id="profileLabel" for="photo">
                                              <img id="profileImg" class="profileImgShow" src="{{ asset('defaults/default3.png')}}" >
                                            </label>
                                          </div>--}}
              
                                            
                                            {{--<div class="form-group">
                                                <label class="mb-1">Featured Image Caption</label>
                                                <input name="featured_image_caption" type="text" class="form-control" required="required">
                                            </div>
                                            
                                            --}}
                                            
                                            <div class="form-group">
                                                <label class="mb-1">Publisher Name</label>
                                                <input name="publisher_name" type="text" class="form-control">
                                            </div>
                                            
                                            {{--<div class="form-group">
                                                <label class="mb-1">Photo Optional</label>
												<div class="input-group">
                                                    <input id="thumbnail2" class="form-control" type="text" name="reporter_photo">
                                                    <span class="input-group-btn">
                                                        <a id="lfm2" data-input="thumbnail2" data-preview="holder2"
                                                           class="btn btn-primary">
                                                          <i class="fa fa-image"></i> Choose
                                                        </a>
                                                    </span>
                                                </div>
                                                <img id="holder2" style="margin-top:15px;max-height:100px;">
                                            </div>--}}
                                       
                                        
                                        <div class="form-group ui-front ">
                                               <label class="mb-1" for="title">Tag</label>
                                               <input type="text" id="myTags" name="tag_list" class="form-control ui-autocomplete tag__list ">
                                            </div>
                                            
                                            
                                        <div class="form-group">
                                            <label for="sub_cat_id"> Category <span class="text-danger">*</span></label>
                                            <select class="form-control" id="category_list" name="category_id[]" required="">
                                              <option disabled="" selected="">--Category--</option>
                                              @foreach($categories as $category)
                                               <option value="{{ $category->id }}">{!! $category->name !!}</option>
                                              @endforeach
                                            </select>
                                        </div>
                                    
                                   
                
                                            <div class="form-group">
                                                <label class="mb-1">publish now?</label>
                                                <select class="form-control" name="post_status">
                                                    <option value="1">Yes</option>
                                                    <option value="0">No</option>
                                                </select>
                                            </div>
                                        
                            <div class="form-group">
                                <div class="form-group mt-4 mb-0">
                                    <button type="submit" class="btn btn-success submit">Create</button>
                                </div>
                            </div>
                            
                            
                    </div>
                    
                </div>
            </div> <!--col-->
            
       
            
        </div>
             
        </form>
    </div>
</main>




@endsection