@extends('admin.layouts.master')
@section('content')
<style>
    .error{
        color:red;
        font-size:12px;
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div class="header-title">
                        <h4 class="card-title">{!! __('heading.edit_gallery') !!}</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="btn-group float-right">
                                <ol class="breadcrumb hide-phone p-0 m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.gallery.index') }}">{!! __('heading.gallery_list') !!}</a></li>
                                    <li class="breadcrumb-item active">{!! __('heading.edit_gallery') !!}</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                {!! Form::model($result, ['route' => ['admin.gallery.update', $result->id], 'method' => 'patch', 'id' => 'ajax-submit']) !!}

                    <div class="row">
                       
                        <div class="col-md-6">
                            <div class="form-group">
                            {!! Form::label('gallery_location', __('field.gallery_location')) !!}
                                {!! Form::select('gallery_location', galleryLocation(),null, ['class' => 'form-control gallery_location']) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                             <div class="form-group">
                                {!! Form::label('media_type', __('field.media_type')) !!}
                           
                                  {!! Form::select('media_type',mediaType(),null,['class'=>'form-control media_type __media_type','data-route' => route('admin.get-gallery-folder')]) !!}
                              </div>
                        </div>
                       
                        <div class="col-md-6" id="folder_list" style="display:none" >
                            <div class="form-group drop-icon-list">
                                {!! Form::label('gallery_folder_id', __('field.choose_folder')) !!}
                                {!! Form::select('gallery_folder_id', $folder_list, null, ['class' => 'form-control __gallery_folder']) !!}
                            </div>
                        </div>
                    </div>
                    <div id="title_description" style="display:none">
                    <div class="row" >
                        <div class="col-md-6">
                            <div class="form-group">
                            {!! Form::label('title', __('field.title')) !!}
                                {!! Form::text('title', null, ['class' => 'form-control']) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group drop-icon-list">
                                {!! Form::label('description', __('field.description')) !!}
                                {!! Form::textarea('description', null, ['class' => 'form-control','rows' => '1']) !!}
                            </div>
                        </div>
                    </div>
                    </div>
                    <!-- <div class="row"> -->
                        
                 
                    <!----------- Media Section--------------->
                    @php
                        $path = '';
                        if(isset($folder_name)){
                            $path = GALLERY_IMAGE_PATH.$folder_name.'/';
                        }
                    @endphp
                    <div class="row" id="image_section" style="display:none">
                        <div class="col-md-6" >
                           <div class="form-group">
                                  <label for="image">{!! __('field.image') !!}</label>
                                   {!! Form::file('image', ['accept' => 'image/*', 'class' => 'form-control pt-1 pl-1', 'id' => 'image']) !!}
                                   <div class="imagePreview">{!! Html::image(imageInChildFolder($result->image,$path),'No Image',array( 'width' => 100, 'height' => 100 )) !!}</div>

                            </div>
                         </div>
                    </div>
                    <div class="row" id="audio_section" style="display:none">
                        <div class="col-md-6" >
                           <div class="form-group">
                                  <label for="image">{!! __('field.audio') !!}</label>
                                   {!! Form::file('audio', ['accept' => 'audio/*', 'class' => 'form-control pt-1 pl-1', 'id' => 'audio']) !!}
                            </div>
                         </div>
                    </div>
                    <div class="row" id="video_section" style="display:none">
                        <!-- <div class="col-md-6" id="video_section" style="display:none"> -->
                         
                         <div class="row">
                             <div class="col-md-6">
                                 <div class="form-group">
                                     <label for="image">{!! __('field.video') !!}</label>
                                     {!! Form::file('video', ['accept' => 'video/*', 'class' => 'form-control pt-1 pl-1', 'id' => 'video']) !!}
                                     <div class="thumbnail_div"></div>
                                     <input type="hidden" name="video_thumbnail" id="thumbnail"/>  
                                  </div>
                             </div>
                         </div>
                     </div>
                    <!----------- Media Section--------------->
                    <!-- </div> -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group drop-icon-list">
                                {!! Form::label('status', __('field.status')) !!}
                                {!! Form::select('status', status(), 1, ['class' => 'form-control']) !!}
                            </div>
                        </div>
                    </div>
                    </div> 
                    <div class="row">
                        <div class="col-md-12">
                            <button type="submit" name="submit" class="btn btn-primary">{!! __('heading.save_details') !!}</button>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('script')
<script>
    //Media Type Selection
   /*  $('.media_type').change(function(){
        var type = $('.media_type').val();
    
        if(type == 1)
        {
            //If image
            $('#image_section').css('display','block');
            $('#audio_section').css('display','none');
            $('#video_section').css('display','none');
        } else if(type == 2)
        {
            //If Audio
            $('#audio_section').css('display','block');
            $('#image_section').css('display','none');
            $('#video_section').css('display','none');
        } else if(type == 3)
        {
            //If Video
            $('#audio_section').css('display','none');
            $('#image_section').css('display','none');
            $('#video_section').css('display','block');
        }
        
    }); */
    $(document).ready(function(){
        var type = $('.gallery_location').val();
        if(type == 1)
        {
            //If Inside the folder
            $('#folder_list').css('display','block');
            // $('#title_description').css('display','block');

        } else  {
            //If outside the folder
            // $('#title_description').css('display','none');
            $('#folder_list').css('display','none');
        } 
        //Display image video audio input
        var mediaType = $('.media_type').val();
    if(mediaType == 1)
    {
        //If image
        $('#image_section').css('display','block');
        $('#audio_section').css('display','none');
        $('#video_section').css('display','none');
        $('#title_description').css('display','none');
    } else if(mediaType == 2)
    {
        //If Audio
        $('#audio_section').css('display','block');
        $('#image_section').css('display','none');
        $('#video_section').css('display','none');
        $('#title_description').css('display','block');
    } else if(mediaType == 3)
    {
        //If Video
        $('#audio_section').css('display','none');
        $('#image_section').css('display','none');
        $('#video_section').css('display','block');
        $('#title_description').css('display','none');
    }
    });
    //Folder Selection
    $('.gallery_location').change(function(){
        var type = $('.gallery_location').val();
        if(type == 1)
        {
            //If Inside the folder
            $('#folder_list').css('display','block');
            // $('#title_description').css('display','block');

        } else  {
            //If outside the folder
            // $('#title_description').css('display','none');
            $('#folder_list').css('display','none');
        } 
    });
    $('.media_type').change(function(){
        var type = $('.media_type').val();
        if(type == 2)
        {
            //if audio
            $('#title_description').css('display','block');

        } else  {
            $('#title_description').css('display','none');
        } 
    });
     //Create Video Thumbnail
     document.getElementsByName('video')[0].addEventListener('change', function(event) {
  var file = event.target.files[0];
  var fileReader = new FileReader();
  if (file.type.match('image')) {
    fileReader.onload = function() {
      // var img = document.createElement('img');
      // img.src = fileReader.result;
      // document.getElementsByTagName('div')[0].appendChild(img);
      document.getElementsByName("video_thumbnail")[0].setAttribute("value", fileReader.result); //Display base64 image to hidden input

    };
    fileReader.readAsDataURL(file);
  } else {
    fileReader.onload = function() {
      var blob = new Blob([fileReader.result], {type: file.type});
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
        }
      };
      video.addEventListener('loadeddata', function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
        }
      });
      var snapImage = function() {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var image = canvas.toDataURL();
        var success = image.length > 100000;
        if (success) {
          // var img = document.createElement('img');
          // img.src = image;
          // document.getElementsByTagName('div')[0].appendChild(img);
          URL.revokeObjectURL(url);
          document.getElementsByName("video_thumbnail")[0].setAttribute("value", image); //Display base64 image to hidden input

        }
        return success;
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      // Load video in Safari / IE11
      video.muted = true;
      video.playsInline = true;
      video.play();
    };
    fileReader.readAsArrayBuffer(file);
  }
});

</script>
@endsection