@extends('front/layouts/main')

@section('title')
{{ @trans('movement.movement_content') }}
@endsection

@section('content')
<main class="new-movement-page">
    <form id="storeMovement" name="frmMovement" action="{{ route('front.movement.store2') }}" method="post" enctype="multipart/form-data">@csrf
        <input type="hidden" name="id" value="{{$movement->id}}">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="main-content">
                        <div class="box white">
                            <div class="title-wrapper">
                                <h2 class="box-title">{{ @trans('movement.start_creating') }}<p class="w-100 regular body-font-size my-2">{{ @trans('movement.use_our_notes') }}</p></h2>
                            </div>
                            <div class="row">
                                <div class="col-12 audioFileNameClass">
                                    <div class="form-group file-upload-box small-size" style="margin-bottom: 5px;">
                                        <div class="custom-file new-bg">
                                            <input type="file" id="audio_file" name="audio_file" class="custom-file-input form-control">
                                            <label class="custom-file-label body-font-size gray d-flex align-items-center" for="customFile">
                                                <span class="material-icons large-font-size gray d-inline-block mr-3">audiotrack</span>
                                                <span class="d-inline-block text-left gray">{{ @trans('movement.drag_or_click_to_upload') }}<small class="d-block">{{ @trans('movement.upload_audio_notes') }}</small></span>
                                            </label>
                                        </div>
                                    </div>
                                    @if($errors->has('audio_file'))
                                    <span class="invalid-feedback audiio-error">{{$errors->first('audio_file')}}</span>
                                    @endif
                                    <div class="xs-font-size audioFileName" style="margin-bottom: 10px;"></div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('movement.add_movement_content') }}</label>
                                        <textarea class="form-control editable" name="content" id="content" data-placeholder="{{ @trans('movement.start_tying_here') }}">{!! $movement->content !!}</textarea>
                                        <label></label>
                                        @if($errors->has('content'))
                                        <span class="invalid-feedback">{{$errors->first('content')}}</span>
                                        @endif
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mt-4 mt-md-0">
                    <div class="sidebar right">
                        <div class="vertical-design-card">
                            <label class="control-label gray small-font-size">{{ @trans('movement.cover_image') }}</label>
                            @if($movement->cover_image != '')
                                    
                                <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/medium/{{$movement->cover_image}}" alt="Cover Image" class="fit-img mb-3 d-block" />
                            @endif
                           
                            <label class="control-label gray small-font-size mb-3">{{ @trans('movement.movement_title') }}</label>
                            <h3 class="h3">{{$movement->movement_title}}</h3>
                            <div class="border bg-white p-3 rounded-lg d-flex align-items-center">
                                @if($movement->series->cover_image != '')
                                            
                                    <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.series') }}/{{$movement->series_id}}/medium/{{$movement->series->cover_image}}" class="fit-img mr-3" style="height: 84px;" />
                                @endif

                                
                                <h3 class="h3 m-0">{{$movement->series->series_name}}</h3>
                            </div>
                            @if(count($topics) > 0)
                            <label class="control-label gray small-font-size mt-3">{{ @trans('movement.topics') }}</label>
                            <div class="chips d-flex align-items-center flex-wrap">
                                @foreach($topics as $key => $topic)
                                     <a href="{{route('front.movement.topicdetails',['slug' => $topic->slug])}}" target="_blank" class="em-chip rounded-chip d-flex align-items-center">{{$topic->name}} <span class="material-icons gray small-font-size ml-1">clear</span></a>                  
                                @endforeach
                            </div>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="fixed-bottom bg-white py-2">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="d-flex align-items-center flex-wrap">
                            <a href="{{route('front.movement.create', ['id' => $movement->id])}}" class="mr-auto my-1 mr-3 btn btn-gray">{{ @trans('movement.previous') }}</a>
                            <div>
                                <button id="previewbtn" name="btnpreview" value="Preview" style="border: 0px; background: none;" class="my-1"><i class="material-icons">remove_red_eye</i> {{ @trans('movement.preview_movement') }}</a></button>
                                 <input type="submit" name="btnSubmit1" id="submit2" class="my-1 mr-3 btn btn-em submitBtn2" value="Save as Draft">
                                 <input type="submit" name="btnSubmit2" id="submit" class="my-1 btn btn-em submitBtn" value="Publish">
                                 <input type="hidden" name="btnSubmit" id="btnSubmit" value="">                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" class="is_video" name="does_contain_video" value="0">
    </form>
</main>
<div class="full-loader hide">
    <div>
        <img src="{{ asset('img/loader.gif')}}" alt="loader" />
        <p> {{ @trans('movement.please_wait') }}</p>
    </div>
</div>
@endsection

@push('pageCss')
    <link href="{{ asset('css/medium/default.css') }}" rel="stylesheet">
    <link href="{{ asset('css/medium/font-awesome.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/medium/medium-editor-insert-plugin-frontend.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/medium/medium-editor-insert-plugin.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/medium/medium-editor.min.css') }}" />
@endpush
@push('pageJs')
    <script src="{{ asset('js/medium/handlebars.runtime.min.js') }}"></script>
    <script src="{{ asset('js/medium/jquery-sortable-min.js') }}"></script>
    <script src="{{ asset('js/medium/jquery.ui.widget.js') }}"></script>
    <script src="{{ asset('js/medium/jquery.iframe-transport.min.js') }}"></script>
    <script src="{{ asset('js/medium/jquery.fileupload.min.js') }}"></script>
    <script src="{{ asset('js/medium/medium-editor.min.js') }}"></script>
    <script src="{{ asset('js/medium/medium-editor-insert-plugin.min.js') }}"></script>

{!! JsValidator::formRequest('App\Http\Requests\Movement\StoreMovement', '#storeMovement') !!}
</script>

<script type="text/javascript">
    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: "{{ @trans('movement.okay') }}"
    });
    @endif
    /*$("#previewbtn").click(function(){        
        // $('#submit').val('preview');
        $('#storeMovement').submit();
    });*/

        /*document.getElementById('submit').value = 'preview';
        document.getElementById('storeMovement').submit();*/
        /*document.frmMovement.btnSubmit.value = 'preview';
        document.frmMovement.submit();*/
    
$(document).ready(function() {
    $(document).on('change','#audio_file',function(e){
        var ext = this.value.match(/\.(.+)$/)[1];
        switch (ext) {
            case 'mp3':
                $('.audioFileName').show();
                $(this).parents('.audioFileNameClass').find('.audioFileName').html(e.target.files[0].name+'<a href="javascript:void(0)" class="px-2 resetauido"><span class="material-icons gray">delete</span></a>');
                $('#audio_file').before('<span class="material-icons edit-image-icon">edit</span>');
                $('.audiio-error').html('');
                break;
            default:
                $('.audioFileName').hide();     
                $(this).parents('.audioFileNameClass').find('.audioFileName').text();
                $('.audioFileName').before('<span class="invalid-feedback audiio-error" style="margin-bottom: 10px;">Audio file must be of .mp3 type only!</span>');
               this.value = '';
        }
    });

    $('#submit').click(function()
    {     
        $('#btnSubmit').val('Publish');         
        $(".submitBtn").val("Please Wait...");
        $('.full-loader').removeClass('hide');
    });
    
    $('#submit2').click(function()
    {       
        $('#btnSubmit').val('Save as Draft');            
        $(".submitBtn2").val("Please Wait...");
        $('.full-loader').removeClass('hide');
    });
    
    $(document).on("click", ".resetauido", function() {
        $('#audio_file').val(''); 
        $('.audioFileName').hide();  
    });    
       
 
    var editor = new MediumEditor('.editable', {
        delay: 1000,
        targetBlank: true,           
        anchor: {
            placeholderText: "{{ @trans('movement.type_a_link') }}",
            customClassOption: 'btn',
            customClassOptionText: "{{ @trans('movement.create_button') }}"
        },
        paste: {
            cleanPastedHTML: true,
            cleanAttrs: ['style', 'dir'],
            cleanTags: ['label', 'meta']
        },
        anchorPreview: {
            hideDelay: 300
        },
        placeholder: {
            text: "{{ @trans('movement.click_to_edit') }}"
        }
    });
   
    $('.editable').mediumInsert({
        editor: editor,
        addons: {
            images: { // (object) Image addon configuration
                deleteScript: "{{ route('front.movement.deleteimage',['id' => $movement->id])}}", // (string) A relative path to a delete script
                fileUploadOptions: { // (object) File upload configuration. See https://github.com/blueimp/jQuery-File-Upload/wiki/Options
                    url: "{{ route('front.movement.uploadimage', ['id' => $movement->id])}}" // (string) A relative path to an upload script
                }
            },
            embeds: { // (object) Embeds addon configuration
                label: '<span class="fa fa-youtube-play"></span>', // (string) A label for an embeds addon
                placeholder: "{{ @trans('movement.youtub_link_notes') }}", // (string) Placeholder displayed when entering URL to embed
                captions: true, // (boolean) Enable captions
                captionPlaceholder: "{{ @trans('movement.type_caption') }}", // (string) Caption placeholder
                oembedProxy: 'https://medium.iframe.ly/api/oembed?iframe=1', // (string/null) URL to oEmbed proxy endpoint, such as Iframely, Embedly or your own. You are welcome to use "http://medium.iframe.ly/api/oembed?iframe=1" for your dev and testing needs, courtesy of Iframely. *Null* will make the plugin use pre-defined set of embed rules without making server calls.
                styles: { // (object) Available embeds styles configuration
                    wide: { // (object) Embed style configuration. Key is used as a class name added to an embed, when the style is selected (.medium-insert-embeds-wide)
                        label: '<span class="fa fa-align-justify"></span>', // (string) A label for a style
                        added: function ($el) {}, // (function) Callback function called after the style was selected. A parameter $el is a current active paragraph (.medium-insert-active)
                        removed: function ($el) { } // (function) Callback function called after a different style was selected and this one was removed. A parameter $el is a current active paragraph (.medium-insert-active)
                    },
                    left: {
                        label: '<span class="fa fa-align-left"></span>'
                    },
                    right: {
                        label: '<span class="fa fa-align-right"></span>'
                    }
                },
                actions: { // (object) Actions for an optional second toolbar
                    remove: { // (object) Remove action configuration
                        label: '<span class="fa fa-times"></span>', // (string) Label for an action
                        clicked: function ($el) { // (function) Callback function called when an action is selected                                
                            $('.is_video').val(0);
                            var $event = $.Event('keydown');
                            
                            $event.which = 8;
                            $(document).trigger($event);   
                        }
                    }
                }
            }
        }
    });   
    
});
</script>
@endpush