<style>
    #pdfViewer {
        width: 33%;
        height: 400px;
        overflow: auto;
        border-radius: 20px;
        border: 1px solid #9993;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        margin-top: 30px;
        background-image: url(pdf.png);
        background-size: cover;
        background-position: center;
    }
</style>


@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{ $head ?? '' }}</h3>
</div>

<div class="border-item">
    <form class="form-row"  enctype="multipart/form-data"  method="post" action="{{ $action }}">
        @if($task ?? ''  && $task->id)
            @method('PUT')
        @endif
        @CSRF

   <div class="form-group col-lg-12">
            <label>{{ meta('name', getCurrentLocale()) ?? __('tasks.user') }} </label>

           <select multiple class="form-control {{ $errors->has('user_id') ? 'is-invalid' : '' }}"  name="user_id[]" id="user_id">
               <option selected disabled>{{__('tasks.select')}}</option>
            @foreach($users as $user)
            <option value="{{$user['id']}}"
            @if($task ?? ''  && $task->id)
            @if($user['id'] == $task->user_id)
            selected=""
            @endif
            @endisset
            >{{$user['name']}}</option>
           @endforeach
       </select>
        </div>
        <div class="form-group col-lg-6">
            <label>{{ meta('title', getCurrentLocale()) ?? __('tasks.title') }} </label>
            <input type="text" class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}" name="title" placeholder="{{ meta('title', getCurrentLocale()) ??__('tasks.title') }}" value='{{ old("title", $task->title ?? "") }}'/>
        </div>

    
           <div class="form-group col-lg-6">
            <label>{{ meta('description', getCurrentLocale()) ?? __('tasks.description') }} </label>
            <textarea class="form-control {{ $errors->has('description') ? 'is-invalid' : '' }}" name="description" placeholder="{{ meta('description', getCurrentLocale()) ?? __('tasks.description') }}">{{ old("description", $task->description ?? "") }}</textarea> 
        </div>
           <div class="form-group col-lg-6">
            <label>{{ meta('time', getCurrentLocale()) ?? __('tasks.time') }} </label>
            <input type="number" class="form-control {{ $errors->has('time') ? 'is-invalid' : '' }}" name="time" placeholder="{{ meta('time', getCurrentLocale()) ?? __('tasks.time') }}" value='{{ old("time", $task->time ?? "") }}'/>
        </div>
          
          <div class="form-group col-lg-6">
            <label>{{ meta('start', getCurrentLocale()) ?? __('tasks.start') }} </label>
            <input type="date" class="form-control {{ $errors->has('start') ? 'is-invalid' : '' }}" name="start" placeholder="{{ meta('start', getCurrentLocale()) ?? __('tasks.start') }}" value='{{ old("start", $task->start ?? "") }}'/>
        </div>
       
          <div class="form-group col-lg-6">
            <label>{{ meta('end', getCurrentLocale()) ?? __('tasks.end') }} </label>
            <input type="date" class="form-control {{ $errors->has('end') ? 'is-invalid' : '' }}" name="end" placeholder="{{ meta('end', getCurrentLocale()) ?? __('tasks.end') }}" value='{{ old("end", $task->end ?? "") }}'/>
        </div>
        
       
        
        
        
              <div class="row pricing-list-item border-item mb-4 col-lg-12" @if(!($task ?? ''  && $task->id))  style="display:none" @endif id="files">
                 @if($task ?? ''  && $task->id)
                    @foreach($task_files as $key=>$row)
                    
               <div class="form-group col-lg-12">
            <label>{{ meta('file', getCurrentLocale()) ?? __('tasks.file') }} </label>
            <input id="image_thumbnail{{$key}}" class="{{$key}}" type="hidden" name="file" value="{{old("file", $row->file ?? "")}}"/>

            <div class="images main_image{{$key}} {{ old('file', $row->file ?? '') ? ' wow fadeInUp' : 'hide' }}">
                <div class="col-lg-12">
                    <div class="items">
                        <div class="img">
                            <a href="#" id="lfm" data-input=".image_thumbnail{{$key}}" data-preview=".image_holder{{$key}}" class="lfm" data-hide=".pick_button">
                               {{$row->file}}
                            </a>
                        </div>
                        <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail{{$key}}" data-hide=".main_image{{$key}}" data-show=".pick_button"><i class="fas fa-times"></i></a>
                    </div>
                </div>
            </div>

           
        </div>
            
             @endforeach
             @endif
                </div>
<div class="col-lg-12">
       <a style="cursor: pointer;" @if($task ?? ''  && $task->id) data-id="{{count($task_files)}}" @else data-id="0" @endif onclick="addfiles(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>{{__("tasks.add_file")}}</a>
                   
</div>
        
        
        
        
       <div class="border-item photos col-md-12 other_image_container">
            <div class="row">
                @if ($task ?? false)
                    @foreach ($task_photos as $photo)
                        <div class="col-md-4">
                            <div class="items">
                                <div class="img">
                                    <a href="{{ asset($photo->file ?? '')}}" data-fancybox="gallery"><img src="{{ asset($photo->file ?? '')}}" alt=""></a>
                                </div>
                                <input type="hidden" name="images[]" value="{{ $photo->file ?? "" }}">
                                <a href="#" class="close"><i class="fas fa-times"></i></a>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="text-center">
                <input id="other_image_thumbnail" class="other_image_thumbnail" type="hidden"/>
                <div class="clearfix"></div>
                <span id="add">
                    <a id="lfm" data-width="" data-cache="article_gallery" data-input=".other_image_thumbnail" data-preview="" data-show="" data-hide="" class="lfm add">
                        Add New Image
                    </a>
                </span>
            </div>
        </div>
       
       
        

       


        <div class="text-center mt-5 col-12">
            <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

@endsection

@section('inner_js')
<script>
    function addfiles(elem){
        $("#files").css("display", "block");
        var num = $(elem).attr('data-id');
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
         $.ajax({
          url : urls+'/'+num,
          type : 'GET',
          data : 'nothing',
          dataType : 'json',
          success:function(data)
          {
            $('#files').append(data);
          }
        })
    }
</script>
    <!-- Editor JS files -->
        <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

    <script>
        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
        $("#myPdf").on("change", function(e) {
            var file = e.target.files[0]
            if (file.type == "application/pdf") {
                var fileReader = new FileReader();
                fileReader.onload = function() {
                    var pdfData = new Uint8Array(this.result);
                    // Using DocumentInitParameters object to load binary data.
                    var loadingTask = pdfjsLib.getDocument({
                        data: pdfData
                    });
                    loadingTask.promise.then(function(pdf) {
                        console.log('PDF loaded');

                        // Fetch the first page
                        var pageNumber = 1;
                        pdf.getPage(pageNumber).then(function(page) {
                            console.log('Page loaded');

                            var scale = 1.5;
                            var viewport = page.getViewport({
                                scale: scale
                            });

                            // Prepare canvas using PDF page dimensions
                            var canvas = $("#pdfViewer")[0];
                            var context = canvas.getContext('2d');
                            canvas.height = viewport.height;
                            canvas.width = viewport.width;

                            // Render PDF page into canvas context
                            var renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            var renderTask = page.render(renderContext);
                            renderTask.promise.then(function() {
                                console.log('Page rendered');
                            });
                        });
                    }, function(reason) {
                        // PDF loading error
                        console.error(reason);
                    });
                };
                fileReader.readAsArrayBuffer(file);
            }
        });
        function remove(elem){
            $(elem).closest('.form-row').remove();
        }
    </script>
{{--    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>--}}
            <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            urls = "{{url('/')}}/admin/addfile",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
@endsection
