@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.create_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.create_gallery') !!}</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {!! Form::open(['route' => 'admin.gallery.store', 'method' => 'post', 'id' => 'ajax-submit', 'files' => 'true']) !!}
                    <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--------------->
                    <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','multiple'=>true]) !!}
                            </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','multiple'=>true]) !!}
                            </div>
                         </div>
                    </div>
                    <div class="row" id="video_section" style="display:none">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="video">{!! __('field.video') !!}</label>

                                {!! Form::file('video[]', [
                                    'accept' => 'video/*',
                                    'class' => 'form-control pt-1 pl-1',
                                    'id' => 'video',
                                    'multiple' => true
                                ]) !!}

                                <div class="thumbnail_div"></div>

                                <!-- One hidden input will be created for each video -->
                                <div id="video_thumbnail_container"></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>
    //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 thumbnail for every selected video
    document.getElementById('video').addEventListener('change', function (event) {

        var files = event.target.files;
        var container = document.getElementById('video_thumbnail_container');

        // Clear previous thumbnails
        container.innerHTML = '';

        if (!files.length) {
            return;
        }

        Array.from(files).forEach(function (file, index) {

            createVideoThumbnail(file, index, container);

        });
    });


    function createVideoThumbnail(file, index, container)
    {
        var fileReader = new FileReader();

        /*
        * Create hidden input for this particular video.
        *
        * video[0] -> video_thumbnail[0]
        * video[1] -> video_thumbnail[1]
        * video[2] -> video_thumbnail[2]
        */
        var thumbnailInput = document.createElement('input');

        thumbnailInput.type = 'hidden';
        thumbnailInput.name = 'video_thumbnail[]';
        thumbnailInput.id = 'video_thumbnail_' + index;

        container.appendChild(thumbnailInput);


        if (file.type.match('image')) {

            fileReader.onload = function () {

                thumbnailInput.value = fileReader.result;

            };

            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');

                video.addEventListener('loadeddata', function () {

                    snapImage();

                });

                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('image/png');

                    /*
                    * Store thumbnail for this particular video
                    */
                    thumbnailInput.value = image;

                    URL.revokeObjectURL(url);
                };

                video.preload = 'metadata';
                video.muted = true;
                video.playsInline = true;
                video.src = url;

                video.load();

            };

            fileReader.readAsArrayBuffer(file);
        }
    }
</script>
@endsection