@extends('front/layouts/main')

@section('title')
Movement Content
{{ @trans('movement.update_movement_content') }}
@endsection

@section('content')
<main class="new-movement-page">
    <form id="storeMovement" name="frmMovement" action="{{ route('front.movement.editstore2') }}" method="post" enctype="multipart/form-data">@csrf
        <input type="hidden" name="id" value="{{$movement->id}}">
        <input type="hidden" name="status" value="{{$movement->status}}">
        <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_updating') }}<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">
                                            @if(isset($movementUpdates['audio_basename'])) 
                                            <span class="material-icons edit-image-icon">edit</span>
                                            @elseif($movement->audio_basename != '') 
                                            <span class="material-icons edit-image-icon">edit</span>
                                            @endif
                                            <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" style="margin-bottom: 10px;">{{$errors->first('audio_file')}}</span>
                                    @endif
                                    <div class="xs-font-size audioFileName" style="margin-bottom: 10px;"></div>
                                        
                                   
                                     @if(isset($movementUpdates['audio_basename'])) 
                                        <div class="deletesection" style="width: 90%; float: left;">
                                            <audio class="w-100 mb-4 audioplayer" controls>
                                              <source src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/{{$movementUpdates['audio_basename']}}.ogg" type="audio/ogg">
                                              <source src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/{{$movementUpdates['audio_basename']}}.mp3" type="audio/mpeg">
                                            Your browser does not support the<code>audio</code> element.
                                            </audio>
                                         </div>
                                         <div class="deletesection" style="float: left; padding: 15px;">
                                            <a href="javascript:void(0)" watever-data="{{route('front.movement.deleteaudio',['id' => $movement->id, 'batch_number' => $movementUpdates['batch_number']])}}" class="px-2 deleteentity">
                                            <span class="material-icons gray">delete</span></a>

                                        </div>
                                        @elseif($movement->audio_basename != '') 
                                        <div class="deletesection" style="width: 90%; float: left;">
                                        <audio class="w-100 mb-4 audioplayer" controls>
                                          <source src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/{{$movement->audio_basename}}.ogg" type="audio/ogg">
                                          <source src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/{{$movement->audio_basename}}.mp3" type="audio/mpeg">
                                        Your browser does not support the audio element.
                                        </audio>
                                        </div>
                                         <div class="deletesection" style="float: left; padding: 15px;">
                                            <a href="javascript:void(0)" watever-data="{{route('front.movement.deleteaudio',['id' => $movement->id, 'batch_number' => 0])}}" class="px-2 deleteentity"><span class="material-icons gray">delete</span></a>
                                            <!-- <a href="javascript:void(0)" id="{{$movement->id}}" batch_number="0" class="px-2 deleteaudio"><span class="material-icons gray">delete</span></a> -->
                                        </div>
                                        @endif
                                    </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') }}">
                                        @if(isset($movementUpdates['content']))
                                            {!! $movementUpdates['content'] !!}
                                        @else
                                        {!! $movement->content !!}
                                        @endif
                                            </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(isset($movementUpdates['cover_image'])) 
                                           <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/medium/{{$movementUpdates['cover_image']}}" alt="Cover Image" class="fit-img mb-3 d-block" />
                                        
                            @elseif($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">@if(isset($movementUpdates['movement_title'])){{$movementUpdates['movement_title']}} @else{{$movement->movement_title}}@endif</h3>
                            <div class="border bg-white p-3 rounded-lg d-flex align-items-center">
                                @if(isset($movementUpdates['series_id']))
                                <img src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.series') }}/{{$movementUpdatesSeries->id}}/medium/{{$movementUpdatesSeries->cover_image}}" class="fit-img mr-3" style="height: 84px;" />
                                <h3 class="h3 m-0">{{$movementUpdatesSeries->series_name}}</h3>
                                @else
                                    @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>
                                @endif
                            </div>
                            @if(isset($movementUpdates['movement_topic_ids']))
                            <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($movementUpdates['movement_topic_ids'] as $topic)
                                     <a href="javascript:void(0);" target="_blank" class="em-chip rounded-chip d-flex align-items-center">{{$topic}} <span class="material-icons gray small-font-size ml-1">clear</span></a>                  
                                @endforeach
                            </div>
                            @elseif(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.edit', ['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>
                                @if($movement->status != 2)
                                <input type="submit" name="btnSubmit1" id="submit" class="my-1 btn btn-em submitBtn" value="Save as Draft">
                               
                                <input type="submit" name="btnSubmit2" id="submit2" class="my-1 btn btn-em submitBtn2" value="Publish">
                                @endif
                                <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="{{$movement->does_contain_video}}">
        <input type="hidden" name="batch_number" value="@if(isset($movementUpdates['batch_number'])){{$movementUpdates['batch_number']}}@endif">
    </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('pageModals')
@include('front.components.deletemodal')
@endpush
@push('pageJs')

@if(isset($_REQUEST['preview']) && $_REQUEST['preview'] == '1')
<script type="text/javascript">
    window.open("{{route('front.movement.movementpreview', ['slug' => $movement->slug])}}");
</script>
@endif
    <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 = '';
        }
    });


    $(document).on("click", ".deleteentity", function() {
            var deleteUrl = $(this).attr("watever-data");
            $("#modalDeleteYes").attr("deleteUrl", deleteUrl);
            $("#modalDeleteConfirm").modal("show").on("click", "#modalDeleteYes", function() {
                axios.get(deleteUrl)
                    .then(function(response, sectiondata) {                        
                        $('.deletesection').hide();
                        $("#modalDeleteConfirm").modal("hide");
                    })
            });
        });
    $(document).on("click", ".resetauido", function() {
        $('#audio_file').val(''); 
        $('.audioFileName').hide();  
    });
    
    $('#submit').click(function()
    {     
        $('#btnSubmit').val('Save as Draft');
        $(".submitBtn").val("Please Wait...");
        $('.full-loader').removeClass('hide');
    });

    $('#submit2').click(function()
    { 
        $('#btnSubmit').val('Publish');            
        $(".submitBtn2").val("Please Wait...");
        $('.full-loader').removeClass('hide');
    });
    /*if ($('#storeMovement').valid()) // check if form is valid
    {
        alert('teeeee');
        // do some stuff
    }
    else 
    {
        alert('test');
        // just show validation errors, dont post
    }*/


    /*$("#storeMovement").validate({
        rules: {
            'audio_file': {
                extension: 'mp3|ogg|wav'
            },
            'content': {
                    required: true
                }
        },
        messages: {
            document: {             
                extension: 'Valid files are PDF, Word, Excel, Images (png/jpg)'
            },
            content: {
                    required: 'This field is required'
                }
        }
    });*/
    

 
    var editor = new MediumEditor('.editable', {
        delay: 1000,
        disableExtraSpaces: true,
        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').keyup(function() {
        var content = $('#content').val();
        console.log("--------"+content+ '========');
        var str1 = "ABCDEFGHIJKLMNOP";
        var str2 = '<p class=""><br></p>';
        if(content.indexOf(str2) != -1){
            //alert(str2);
            console.log(str2 + " found");
            $('#content').html('<p class="medium-insert-active"><br></p>');
        }
        if($.trim(content) == '<p class=""><br></p>')
        {
            alert(content);
            //$('.medium-insert-buttons').hide();
           //  $('#content').html('<p>><br><br></p>')
            $('#content').html('<p class="medium-insert-active"><br></p>');
        }
      //$( ".editable" ).keyup();
    });*/
    $('.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