@extends('layout.default')
@section('content')

@section('page_toolbar')
&nbsp;<a class="btn btn-info px-2 font-weight-bold btn-sm"  href="{{ url('admin/blog') }}">
<i class="fas fa-list-ul" aria-hidden="true"></i> List Blog
</a>

&nbsp;<a class="btn btn-success px-2 font-weight-bold btn-sm"  href="{{ URL::previous() }}">
<i class="fas fa-angle-double-left" aria-hidden="true"></i> Back
</a>
@endsection

<!--begin::Content-->
@if ($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.tiny.cloud/1/jbywozz915kglhawyeg0qs7w5mbkx2ow53hbhbpbk2y478ur/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    //   tinymce.init({
    //     selector: '#mytextarea',
    //     setup: function (editor) {
    //     editor.on('change', function () {
    //         tinymce.triggerSave();
    //     });
    // },
    //     height: 500,
    //     menubar: true,
    //     plugins: [
    //         'advlist autolink lists link image charmap print preview anchor',
    //         'searchreplace visualblocks code fullscreen',
    //         'insertdatetime media table paste code help wordcount'
    //     ],
    //     toolbar: 'undo redo | formatselect | ' +
    //     'bold italic backcolor | alignleft aligncenter ' +
    //     'alignright alignjustify | bullist numlist outdent indent | ' +
    //     'removeformat | help',
    //     content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    //   });

      tinymce.init({
        selector: '#meta_description',
        setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    },
        height: 500,
        menubar: true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
      });
    </script>
    <script>
    var blogURL = "{{ url('admin/blogupload') }}";
        tinymce.init({
            selector: '#mytextarea',

            image_class_list: [
            {title: 'img-fluid', value: 'img-fluid'},
            ],
            height: 500,
            setup: function (editor) {
                editor.on('init change', function () {
                    editor.save();
                });
            },
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste imagetools"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ",

            image_title: true,
            automatic_uploads: true,
            images_upload_url: blogURL,
            file_picker_types: 'image',
            file_picker_callback: function(cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.onchange = function() {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                };
                input.click();
            }
        });
</script>

<div class="card card-custom">
    <div class="card-body">
      <form class="form-horizontal" id="blog-ajax" action="{{ url('admin/blog/'.$blog->id.'/update') }}" method="POST" enctype="multipart/form-data" id="blogForm" >

          {{ csrf_field() }}
          {!! Form::hidden('blog_id', $blog->id ?? '' , [ 'id' => 'blog_id'] ) !!}
          <div class="modal-body">
              <div class="col-md-12">
                  <div class="row">
                      <div class="form-group col-sm-12 col-xs-12">
                          <label class="col-form-label">Blog Title <span class="text-danger">*</span></label>
                          <div>
                              
                            {!! Form::text('title', $blog->title ?? '' , ['class' => 'form-control', 'id' => 'title', 'placeholder' => "Title"] ) !!}
                            
                              @if ($errors->has('title')) 
                              <span class="help-block"> <strong>{{ $errors->first('title') }}</strong> </span> 
                              @endif
                          </div>
                      </div> 

                      <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label">Author <span class="text-danger">*</span></label>
                            <div>
                        
                            {!! Form::text('author', $blog->author ?? '' , ['class' => 'form-control', 'id' => 'author', 'placeholder' => "Author"] ) !!}
                                    @if ($errors->has('author')) 
                                <span class="help-block"> <strong>{{ $errors->first('author') }}</strong> </span> 
                                @endif
                            </div>
                        </div>

                        <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label">Upload Image <span class="text-danger">*</span></label>
                            <div>
                        
                            <input type="file" name="blog_image">
                                    @if ($errors->has('author')) 
                                <span class="help-block"> <strong>{{ $errors->first('author') }}</strong> </span> 
                                @endif
                            </div>
                        </div>
                    
                        <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label">Blog Description <span class="text-danger">*</span></label>
                            <div>
                            <textarea id="mytextarea" name="description">{{$blog->description}}</textarea>
                            
                                    @if ($errors->has('description')) 
                                <span class="help-block"> <strong>{{ $errors->first('description') }}</strong> </span> 
                                @endif
                            </div>
                        </div>

                        <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label">SEO Title <span class="text-danger">*</span></label>
                            <div>
                            {!! Form::text('seo_title', $blog->seo_title , ['class' => 'form-control', 'id' => 'seo_title', 'placeholder' => "SEO Title"] ) !!}
                                    
                                @if ($errors->has('seo_title')) 
                                <span class="help-block"> <strong>{{ $errors->first('seo_title') }}</strong> </span> 
                                @endif
                            </div>
                        </div>

                        <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label">SEO Keyword <span class="text-danger">*</span></label>
                            <div>
                            {!! Form::text('seo_keyword', $blog->seo_keyword , ['class' => 'form-control', 'id' => 'seo_keyword', 'placeholder' => "SEO Keyword"] ) !!}
                                    
                                    @if ($errors->has('meta_title')) 
                                <span class="help-block"> <strong>{{ $errors->first('meta_title') }}</strong> </span> 
                                @endif
                            </div>
                        </div>

                        <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label">SEO Description <span class="text-danger">*</span></label>
                            <div>
                            <textarea  id="meta_description" name="seo_description">{{$blog->seo_description}}</textarea>
                                    
                                    @if ($errors->has('seo_description')) 
                                <span class="help-block"> <strong>{{ $errors->first('seo_description') }}</strong> </span> 
                                @endif
                            </div>
                        </div>

                        <div class="form-group col-sm-12 col-xs-12 ">
                            <label class="col-form-label col-sm-1 col-xs-1 ">Popular </label>
                            <input type="checkbox" name="popular" value="1" @if($blog->popular==1) checked @endif>
                            <div>
                            
                                    
                                    @if ($errors->has('popular')) 
                                <span class="help-block"> <strong>{{ $errors->first('popular') }}</strong> </span> 
                                @endif
                            </div>
                        </div>
                        
                  </div>  
                  

                  <div class="row">
                    <div class="form-group col-sm-4 col-xs-12">
                        <input type="hidden" name="table_rowcount" id="table_rowcount" value='' />
                        <button type="submit" id="tasksubmitbtn" class="btn btn-success sbmtSubscription">Update</button>   
                      </div>
                  </div>
              </div>
          </div> 
      </form>

    </div>
</div>

<!--end::Content-->
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>   
<script>
$("body").on("submit", "#blog-ajax", function (e) {
    var field;
    e.preventDefault();
    field = this.id;
    form = $('#' + field);
    $('.error').hide();
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: formData,
        processData: false,
        contentType: false,
        // data: form.serialize(),
        success: ajaxSuccess,
        error: ajaxError
    });
});

function ajaxSuccess(html) {
    if (html.flagError === false) {
             //showSuccess(html.message);
             showAlert(html.message, "success");
             setTimeout(function () {
                //window.location.href = questionUrl+"/"+html.id+"/edit";
                window.location.href = "{{url('admin/blog')}}";
                }, 1000);
        
    } else {
        //showError(html.message);
        showAlert(html.message, "error");
    }
}

function ajaxError(html) {console.log(html);

}
// var indexURL = "{{ url('admin/blog') }}";

//     // $('#add').click(function(){  
         
//     //     $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="ordinal_number[]" placeholder="Ordinal Number" class="form-control check_numeric ordinal_number_list" /></td><td><input type="text" name="discount_rate[]" placeholder="Discount Rate" class="form-control check_numeric ordinal_discount_rate_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
//     //     $("#table_rowcount").val(i);
//     // });  

//     document.addEventListener('DOMContentLoaded', function(e) {
//             FormValidation.formValidation(
//                 document.getElementById('blogForm'),
//                 {
//                     fields: {
//                         title: {
//                             validators: {
//                                 notEmpty: {
//                                     message: 'Please enter title'
//                                 }
//                             }
//                         },
//                         description: {
//                             validators: {
//                                 notEmpty: {
//                                     message: 'Please enter description'
//                                 }
//                             }
//                         },
//                         author: {
//                             validators: {
//                                 notEmpty: {
//                                     message: 'Please enter author'
//                                 }
//                             }
//                         },
                        
//                     },
//                     plugins: {
//                         trigger: new FormValidation.plugins.Trigger(),
//                         bootstrap: new FormValidation.plugins.Bootstrap(),
//                         submitButton: new FormValidation.plugins.SubmitButton(),
//                         trigger: new FormValidation.plugins.Trigger(),
       
                        
//                     },
//                 }
//             ).on('core.form.valid', function() {
//                 id = $("#blog_id").val();
               
//                 subscription_Id = "" == id ? "" : "/" + id;        
//                 user_type   = $("#user_type").val();  
//                 var forms = $("#blogForm");               
//                 console.log(forms.serialize());
//                 $.ajax({
//                     url: "{{ url('admin/blog') }}" + subscription_Id,
//                     type: "PUT",
//                     data: forms.serialize(),
//                     dataType: "html"
//                 })
//                     .done(function (a) {
//                         var data = JSON.parse(a);
//                         console.log(data);
//                         if (data.flagError == true) {
//                             formValidate.showErrors(data.errors);
//                             showAlert(data.message, "error");
//                         }
//                         else {
//                             $("#blogForm")[0].reset();
//                             showAlert(data.message, "success");
//                             setTimeout(function () {
//                                 window.location.href = indexURL;
//                             }, 3000);
//                             // location.reload();
//                         }
//                     });
                
//             });

//     });

    function addRows(type){
        i++; 
        if(type == 'tutor'){
            $('#dynamic_field_'+type).append('<tr id="row'+i+'"><td><input type="text" name="ordinal_number[]" placeholder="Ordinal Number" class="form-control check_numeric ordinal_number_list" /></td><td><input type="text" name="discount_rate[]" placeholder="Discount Rate" class="form-control check_numeric ordinal_discount_rate_list" /></td><td><button type="button" name="remove" id="'+i+'" onclick="addRows("tutor")" class="btn btn-danger btn_remove">X</button></td></tr>');  
            $("#table_rowcount").val(i);
        }else if(type == 'school'){
            $('#dynamic_field_'+type).append('<tr id="row'+i+'"><td><input type="text" name="student_number_from[]" placeholder="Number of students from" class="form-control check_numeric ordinal_number_list" /></td><td><input type="text" name="student_number_to[]" placeholder="Number of students to" class="form-control check_numeric ordinal_number_list" /></td><td><input type="text" name="student_amount[]" placeholder="Amount" class="form-control check_numeric ordinal_discount_rate_list" /></td><td><button type="button" name="remove" id="'+i+'" onclick="addRows("school")" class="btn btn-danger btn_remove">X</button></td></tr>');  
            $("#table_rowcount").val(i);
        }
    }

    // function resetTable(type){
    //     var row_count =  $("#table_rowcount").val(); 
    //     $('#dynamic_field_'+type).find("tr:gt(0)").remove();
    //     if(type == 'tutor'){
    //         $('#dynamic_field_'+type).find("tr:gt(0)").remove();
    //         $('#dynamic_field_'+type).append('<tr id="row'+i+'"><td><input type="text" name="ordinal_number[]" placeholder="Ordinal Number" class="form-control check_numeric ordinal_number_list" /></td><td><input type="text" name="discount_rate[]" placeholder="Discount Rate" class="form-control check_numeric ordinal_discount_rate_list" /></td><td><button type="button" name="remove" id="'+i+'" onclick="addRows("tutor")" class="btn btn-danger btn_remove">X</button></td></tr>');  

    //     }else if(type == 'school'){
    //         $('#dynamic_field_'+type).append('<tr id="row'+i+'"><td><input type="text" name="student_number_from[]" placeholder="Number of students from" class="form-control check_numeric ordinal_number_list" /></td><td><input type="text" name="student_number_to[]" placeholder="Number of students to" class="form-control check_numeric ordinal_number_list" /></td><td><input type="text" name="student_amount[]" placeholder="Amount" class="form-control check_numeric ordinal_discount_rate_list" /></td><td><button type="button" name="remove" id="'+i+'" onclick="addRows("school")" class="btn btn-danger btn_remove">X</button></td></tr>');  
    //         $("#table_rowcount").val(i);
    //     }
    // }

    $(document).on('click', '.btn_remove', function(){  
        var button_id = $(this).attr("id");   
        $('#row'+button_id+'').remove();  
        var old_rowcount = $("#table_rowcount").val();
        $("#table_rowcount").val(old_rowcount-1);
    });

    $("#user_type").change(function() {
        $('.conditions').hide();
        if(this.value == 'tutor'){
            $('#tutorConditions').show();
        }else if(this.value == 'school'){
            $('#schoolConditions').show();
        }else{
            $('#studentConditions').show();
        }
    });

    // $('#startdate').datepicker({
    //   format: 'dd-mm-yyyy',
    //   todayHighlight: true,
    //   autoclose: true
    // });

    // $('#startdate').datepicker('setDate', duration_start).datepicker('fill');

    // $('#enddate').datepicker({
    //   format: 'dd-mm-yyyy',
    //   todayHighlight: true,
    //   autoclose: true
    // });

    // $('#enddate').datepicker('setDate', duration_end).datepicker('fill');

    
    // function addSubscription(yearId) {
    //     if (yearId === null) {
    //         $("#subscriptionForm")[0].reset();
    //         $("#subscriptionModal").modal("show");
    //     } else {
            
    //         $.ajax({url: "{{ url('admin/subscriptions') }}/" + yearId + "/edit", type: "GET", dataType: "html"})
    //             .done(function (a) {
    //                 var data = JSON.parse(a);
    //                 $("#subscription_id").val(data.subscription_id);
    //                 $("#name").val(data.name);
    //                 $("#user_type").val(data.user_type);
    //                 $("#duration").val(data.duration);
    //                 $("#amount").val(data.amount);

    //                 $("#subscriptionModal").modal("show");
    //             }).fail(function () {
    //                 showAlert("Please try again...", "error");
    //         });
    //     }
    // }
    
    $(".check_numeric").keydown(function (event) {
        if ((event.keyCode >= 48 && event.keyCode <= 57) || 
        (event.keyCode >= 96 && event.keyCode <= 105) || 
        event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
        event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) 
        {

        }
        else
        {
        event.preventDefault();
        }

    });
    var i=1;
    $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='discount_ordinal_number_"+i+"' type='text' placeholder='Ordinal Number' class='form-control input-md check_numeric'  /></td><td><input  name='discount_"+i+"' type='text' placeholder='Discount Value'  class='form-control input-md check_numeric'></td>");

      $('#tutorOrdinalTable').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

     

//      [{"no_stdns": 2, "discount": 10},{"no_stdns": 2, "discount": 10}]
// let questionDetails = [];
// let questionAnswer = {"question_id": $(this).attr("data-question-id"),
//                        "answer": answer};
// questionDetails.push(questionAnswer);


</script>
@endsection