@extends('admin.layouts.master')
@section('title', 'Dashboard')
@section('content')

<style>
    .btn-danger {
    background-color: #f5707a !important;
    border: 1px solid #f5707a !important;
    color: #fff !important;
   
}
</style> 
<!-- start page content --> 
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                @if(Session::has('message'))
              <div class="alert alert-success">
                <strong>Well done!</strong> {{ Session::get('message') }}
            </div>
            @endif

                <h3>Update Service Text</h3>
           
            <br>
          
            
        </div>
            <div class="card-body">
				@if(Session::has('true'))
					<div class="alert alert-primary" role="alert">
						{{ Session::get('true') }}
					</div>
					@endif
                    {{-- <div class="row">
                        <div class="col-md-10"></div>
                        <div class="col-md-2">
                            <div class="pull-right mb-5">
                                <button type="button" class="btn btn-theme" data-toggle="modal" data-target="#exampleModal">
                                    Add Text
                                  </button>
                            </div>
                        </div>
                    </div> --}}
                    <form action="{{route('admin.edit.servicetext.random')}}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="hidden" name="id" value="{{$servicetext->id}}">
                                        <label for="">Update text</label>
                                        <textarea name="randomtext" id="" cols="30" rows="10" class="form-control">{{$servicetext->content}}</textarea>
                                    </div>
                                </div>
                       
                          <button type="Submit" class="btn btn-theme">Save changes</button>
                        
                        </form>

 				</div>
             
            </div>
        </div>
        {{-- modal box --}}
        <!-- Button trigger modal -->

  
  <!-- Modal -->
  
        {{-- modal box end  --}}
    </div>
</div>
</body>
<!-- end page content -->
@endsection

@section('scripts')
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js) -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>

<!-- include summernote css/js-->
<script>
$(document).ready(function(){
$('#summernote').summernote({
        codemirror: {
          mode: 'text/html',
          htmlMode: true,
          lineNumbers: true,
          lineWrapping: true,
          theme: 'monokai'
        }
    });
    $('#exampleFormControlTextarea1').summernote({});
});
</script>
<script>
    function myFunction(i) {
        // alert(url)
        // console.log($(this).parent().parent());
      var copyText = document.getElementById(`link${i}`);
      copyText.select();
      copyText.setSelectionRange(0, 99999);
      document.execCommand("copy");

      $(`#link${i}`).tooltip('show')
      
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copied: " + copyText.value;
  
      
    }
    function _(el) 
        {
            return document.getElementById(el);
        }

        function uploadFile(e) 
        {
            let news_image = document.getElementById('news_image').value;

        if(news_image === ""){
            alert("Image | Video is field is required");
        }
            else{

            e.preventDefault();
            var file = _("news_image").files[0];
            // alert(file.name+" | "+file.size+" | "+file.type);
            var formdata = new FormData();
            formdata.append("news_image", file);
            formdata.append('_token', "{{ csrf_token() }}");
            var ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.addEventListener("load", completeHandler, false);
            ajax.addEventListener("error", errorHandler, false);
            ajax.addEventListener("abort", abortHandler, false);
            ajax.open("POST", "{{ route('web.pages.fileupload') }}"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
            //use file_upload_parser.php from above url
            ajax.send(formdata);
            }
        }

        function progressHandler(event) 
        {
            _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
            var percent = (event.loaded / event.total) * 100;
            _("progressBar").value = Math.round(percent);
            _("status").innerHTML = Math.round(percent) + "% Uploading";
            document.getElementById('upload').value = "processing";
        }

        function completeHandler(event) 
        {
            _("status").innerHTML = event.target.responseText;
            _("progressBar").value = 100; //wil clear progress bar after successful upload
            _("status").innerHTML = "File Uploaded";
            if(event.target.status == 200)
            {
                console.log(event);
                $("#news_image").prop('disabled', true);
                document.getElementById('upload').value = "Add News";
                location.reload() ;
            }
        }

        function errorHandler(event) 
        {
            _("status").innerHTML = "Upload Failed";
        }

        function abortHandler(event) 
        {
            _("status").innerHTML = "Upload Aborted";
        }

        // function edittextservices(id,content){
        //     alert(id +" "+ content);
        //     // consle.log(id +" "+content);
        // }
        $(document).ready(function(){
            $('.edittext').on('click',function(){
                var id = $(this).data('id');
                var content = $(this).data('content');
                console.log(id+" "+content);
            });
        });
</script>
@endsection