@extends('admin.layouts.master')
@section('title', 'Dashboard')
@section('content')
<style>
    .mt-4, .my-4 {
    margin-top: 2.5rem!important;
}
@media only screen and (max-width: 1200px){
  .fileuplodlist div{
    display:grid;
  }
  .btn-responsive{
    margin-top: 4rem!important;
  }
}
</style>
<!-- start page content -->
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                    <div class="page-title">Categories</div>
                </div>
                <ul class="breadcrumb page-breadcrumb pull-right">
                    <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{route('admin.deshbord')}}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                    </li>
                    <li class="active">Categories Content</li>
                </ul>
            </div>
        </div>
      {{-- <div class="container"> --}}
 	<div class="row">

 		<div class="col-md-12">
            @if(Session::has('message'))
            <div class="alert alert-primary" role="alert">
               {{ Session::get('message') }}
             </div>
            @endif
 			<div class="card">
 				<div class="card-header">
 					<div class="row">
 						<div class="col-md-12">
 							<p class="text-dark">Categories Content</p>
 						</div>
 						{{-- <div class="col-md-4 text-right">
                            <button type="button" class="btn btn-theme" data-toggle="modal" data-target="#exampleModal">
                                Add Sub Category
                              </button>
 						</div> --}}
 					</div>
 				</div>
 				<div class="card-body">
                    <form action="{{route('add-category-content')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="usr">Select Category:</label>
                            <select class="form-control" name="cate_id" id="sel1" onchange="getsubcat(this)">
                                <option selected disabled>Select Category</option>
                                @foreach ($categories as $category )
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="usr">Select Sub Category:</label>
                            <select class="form-control" name="sabcate_id" onchange="getsubcatcont(this)" id="sabcate_id">
                                    <option>Select Category First</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="usr">Category Content:</label>
                            <textarea id="summernote" name="content" cols="30" rows="10"></textarea>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-theme">Submit</button>
                        </div>
                    </form>

 				</div>
                 <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">
                                        <div class="row fileuplodlist"> 
                                            <div class="col-lg-8 col-md-6 col-sm-6 col-xs-12">
                                        <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> -->
                                        </div>
                                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                            <input type="submit"
                                            class="btn btn-theme mt-4 btn-responsive"
                                            value="Add News" onclick="uploadFile(event);" id="upload">
                                        </div>
                                        </div>
                                    </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 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>
                                    @php
                                        $ext = explode('.',$file->name);
                                        $extention = $ext[1];
                                    @endphp
                                    @if($extention == 'mp4')
                                    <td>
                                        <video width="100" controls>
                                            <source src="{{asset('Web/file/'.$file->name)}}" type="video/mp4">
                                            {{-- <source src="mov_bbb.ogg" type="video/ogg"> --}}
                                          </video>
                                        {{-- <video src="" width="100"></video> --}}
                                    </td>
                                    @else
                                    <td><img src="{{asset('Web/file/'.$file->name)}}" class="image img-responsive" width="100;"></td>
                                    @endif
                                    <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> -->

       
        
      
        
     
    {{-- </div> --}}
</div>
<!-- end page content -->
@endsection
@section('scripts')
<script>
    $(document).ready(function(){
    var editor = $('#summernote');
    editor.summernote({
        height: ($(window).height()- 250),
        focus: false,
        toolbar: [
				['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough']],
                ['fontsize', ['fontsize']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['view', ['fullscreen', 'codeview']],
			],
        oninit: function() {
            // Add "open" - "save" buttons
            var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Identify a music note" data-event="something" tabindex="-1"><i class="fa fa-music"></i></button>';            
            var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
            $(fileGroup).appendTo($('.note-toolbar'));
            // Button tooltips
            $('#makeSnote').tooltip({container: 'body', placement: 'bottom'});
            // Button events
            $('#makeSnote').click(function(event) {
                var highlight = window.getSelection(),  
                    spn = document.createElement('span'),
                    range = highlight.getRangeAt(0)
                
                spn.innerHTML = highlight;
                spn.className = 'snote';  
                spn.style.color = 'blue';
            
                range.deleteContents();
                range.insertNode(spn);
            });
         },
        
    });
    });
    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) 
        {
            // alert();
            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 getsubcat(val){
            // alert(val.value);
            var catid = val.value;
            $.ajax({
                url:"{{route('get-subcategory')}}",
                type:'get',
                data:{
                    catid:catid
                },success:function(data){
                    console.log(data);
                    var option = '';
                    option += '<option selected disabled>Select Sub Category</option>';
                    $.each(data,function(key,value)
                        {
                            option += '<option value="'+value.id+'">'+value.name+'</option>';
                        });
                        // console.log(t);
                        $("#sabcate_id").html(option);
                }
            });
        }
        function getsubcatcont(val){
            var catid = val.value;
            $.ajax({
                url:"{{route('get-subcategory-content')}}",
                type:'get',
                data:{
                    catid:catid
                },success:function(data){
                    console.log(data.content);
                    // replied = JSON.parse(data);
                    // var str = "Hello World";
                    $('.note-editable').html(data.content);
                    // $('#summernote').summernote('pasteHTML',data.content);
                   
                }
            });
        }
</script>
@endsection