@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>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>
 					<table id="buyertable" class="table table-bordered">
 						<thead class="thead bg-light text-center">
 							<tr>
 								<th>Text</th>
								<th style="min-width: 238px;">Action</th>
 							</tr>
 						</thead>
 						<tbody class="tbody text-center">
                           @foreach ($servicetext as $item)
                               <tr>
                                   <td>{{$item->content}}</td>
                                   <td>
                                       <a href="{{route('edit.service.get',$item->id)}}" class="btn btn-theme edittext" data-id="{{$item->id}}" data-content="{{$item->content}}">
                                           Edit
                                       </a>
                                       <a href="{{route('delete.service.get',$item->id)}}" class="btn btn-danger">
                                           Delete
                                       </a>
                                   </td>
                               </tr>
                           @endforeach
 						</tbody>
 					</table>

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

  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Service page text</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{route('admin.add.servicetext.random')}}" method="post">
        <div class="modal-body">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <label for="">Add text</label>
                        <textarea name="randomtext" id="" cols="30" rows="10" class="form-control"></textarea>
                    </div>
                </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="Submit" class="btn btn-theme">Save changes</button>
        </div>
        </form>
      </div>
    </div>
  </div>
        {{-- 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