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

<style>
    .btn-danger {
    background-color: #f5707a !important;
    border: 1px solid #f5707a !important;
    color: #fff !important;
    margin-top: -20px;
}
</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
            @if($Page->name == "Home Page Right")
                <h3>Main Content</h3>
            @endif
            @if($id != 12)
            <form action="{{ route('web.pages.updated') }}" method="post">
                @csrf
                <input type="hidden" name="page_id" value="{{ $id }}">
              <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <textarea name="meta" id="summernote" cols="30" rows="10">
                            @if($data)
                                {{ $data->meta }}
                            @else
                                Please write
                            @endif
                        </textarea>
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-theme">Update</button>
                    </div>
                </div>
            </form>
            @endif
            <br>
            @if($Page->name == "Home Page Left")
                <h3>Left Content</h3>
                <form action="{{ route('web.pages.updated') }}" method="post">
                    @csrf
                    <input type="hidden" name="page_id" value="{{ $id }}">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <textarea class="form-control" name="side_meta" id="summernote" rows="3">
                                @if($data)
                                    {{ $data->side_meta }}
                                @else
                                   
                                @endif
                            </textarea>
                        </div>
                    </div>
                        <br>
                        <br>
                        <div class="row">
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-theme">Update</button>
                        </div>
                    </div>
                   
                </form>
            @endif
            <div class="border  bg-white mb-3 mt-3">
                <div class="box-body px-3 pt-3 pb-0">
                    <div class="row">
                        <div class="col-sm-6 mb-6">
                            <form class="form" id="commentForm" action="" enctype="multipart/form-data">

                                @csrf
                                <div class="form-group">
                                    <label for="upload" class="bold">Select Image</label> <br>
                                    <input type="file" accept="image/jpg" id="news_image" name="news_image" class="btn btn-theme uploadbtn">
                                    <!-- <button type="submit" class="btn btn-theme p-3">submit<button> -->
                                    <input type="submit"
                                        class="btn btn-theme float-md-right"
                                        value="Add News" onclick="uploadFile(event);" id="upload">
                                
                                </div>
                            </form>
                            <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                            <h3 id="status"></h3>
                            <p id="loaded_n_total"></p>

                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
            <div class="card-body">
				@if(Session::has('true'))
					<div class="alert alert-primary" role="alert">
						{{ Session::get('true') }}
					</div>
					@endif

 					<table id="buyertable" class="table table-bordered">
 						<thead class="thead bg-light text-center">
 							<tr>
 								<th>S.No</th>
 								<th>File</th>
                                 <th>File Link</th>
								<th>Action</th>
 							</tr>
 						</thead>
 						<tbody class="tbody text-center">
                             @foreach ($files as $file )    
                            <tr>
                                <td>{{ $loop->index+1 }}</td>
                                <td><img src="{{asset('Web/file/'.$file->name)}}" class="image img-responsive" width="100;"></td>
                                <td><input type="text" class="form-control"  data-toggle="tooltip" data-placement="top" title="copied" id="link{{ $loop->index }}" value="{{ url('Web/file/'.$file->name) }}"></td>
                                <td> 
                                    <button class="btn btn-sm btn-success"  onclick="myFunction('{{ $loop->index }}')" >
                                        <i class="fa fa-copy"></i>
                                    </button>
                                    
                                    <a href="{{ route('web.pages.delete',['id'=>$file->id]) }}" class="btn btn-sm btn-danger mt-1">
                                        <i class="fa fa-trash"></i> 
                                    </a>
                                </td>
                            </tr>
                        @endforeach

 						</tbody>
 					</table>

 				</div>
             
            </div>
        </div>
    </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";
        }


</script>
@endsection