@extends('front/layouts/main')

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

@section('content')

    <main class="new-movement-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-10">
                    <div class="main-content">
                        <form id="storeMovement" action="{{ route('front.movement.editstore') }}" method="post">@csrf
                            <input type="hidden" name="id" id="id" value="@if($movement){{$movement->id}} @endif">
                            <input type="hidden" name="uniqid" id="uniqid" value="{{$movement->uniqid}}">
                            <div class="box white">
                                <div class="title-wrapper">
                                    <h2 class="box-title">{{ @trans('movement.update_movement') }}<p class="w-100 regular body-font-size my-2">{{ @trans('movement.article_small_text') }}</p></h2>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group select btm-arrow">
                                            <label class="control-label">{{ @trans('movement.select_series_option') }}</label>
                                            <select class="form-control" id="series_id" name="series_id">
                                                <option value="" hidden>{{ @trans('movement.select_series_text') }}</option>
                                                @foreach($seriesList as $series)
                                                <option value="{{ $series->id }}" @if($series_id == $series->id) selected
                                                @endif>{{ $series->series_name }}</option>
                                                @endforeach
                                                <option value="new">{{ @trans('movement.create_new_series') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">                                        
                                        <div class="form-group file-upload-box large-size">
                                            <input type="hidden" name="cover_image4" id="cover_image4" value="@if(isset($movementUpdates['cover_image']) && $movementUpdates['status'] == '0'){{$movementUpdates['cover_image']}}@endif" />
                                            <input type="hidden" name="cover_image3" id="cover_image3" value="@if(isset($movementUpdates['cover_image'])){{$movementUpdates['cover_image']}}@elseif($movement) {{$movement->cover_image}}@endif" />
                                            <input type="hidden" name="cover_image2" id="cover_image2" value="" />
                                            <div class="custom-file new-bg" id="output">
                                                <input type="file" class="custom-file-input form-control" id="cover_image" class="required" name="cover_image">
                                                @if($existimage)
                                                    @if(isset($movementUpdates['cover_image'])) 
                                                        <label class="custom-file-label rounded-circle p-0 h-100" for="profile_image">
                                                    <span class="material-icons edit-image-icon">edit</span>
                                                    <img id="output_other" class="w-100 h-100 fit-img rounded-lg" src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/{{$movementUpdates['cover_image']}}">
                                                    <input type="hidden" name="act" id="act" value="0" />
                                                    @elseif($movement)
                                                        @if($movement->cover_image != '')
                                                         <label class="custom-file-label rounded-circle p-0 h-100" for="profile_image">
                                                        <span class="material-icons edit-image-icon">edit</span>
                                                        <img id="output_other" class="w-100 h-100 fit-img rounded-lg" src="{{ config('custom.download.url')}}{{ config('custom.upload.movement.movement') }}/{{$movement->mover_user_id}}/{{$movement->id}}/{{$movement->cover_image}}" alt="{{ @trans('movement.upload') }}"><input type="hidden" name="act" id="act" value="0" />
                                                        @endif
                                                    @endif
                                                @else
                                                <label class="custom-file-label body-font-size gray rounded-circle p-0" for="customFile">
                                                    <input type="hidden" name="act" id="act" value="1" />
                                                    <span class="material-icons large-font-size d-block mx-auto">{{ @trans('movement.photo') }}</span>{{ @trans('movement.upload_cover_image_for_your_movement') }}<small class="d-block">{{ @trans('movement.upload_size_notes_movement') }}</small></label>
                                                @endif  

                                                
                                            </div>
                                            <span id="cover_image-error" class="invalid-feedback"></span>


                                            <div id="cropping" style="display: none;">
                                                    <div id="image" style="width:830px;"></div>

                                                    <div class="modal-footer d-flex justify-content-between">
                                                        <button type="button" class="btn btn-bordered w-50 cancel" >{{ @trans('movement.cancel') }}</button>
                                                        <a class="btn btn-transparent w-50 crop_image">{{ @trans('movement.save_changes') }}</a>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="control-label d-flex">{{ @trans('movement.movement_title') }}<span class="ml-auto gray xs-font-size">(<span id="tcount">0</span>/300 {{ @trans('movement.characters') }})</span></label>
                                            <input type="text" id="movement_title" name="movement_title" onkeyup="countChar(this, 'tcount', 301)" value="@if(isset($movementUpdates['movement_title'])){{$movementUpdates['movement_title']}} @elseif($movement) {{$movement->movement_title}} @endif" class="form-control" maxlength="300" placeholder="{{ @trans('movement.movement_title') }}" value="" />
                                            <label style="display: none;"></label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group select btm-arrow clstopic">
                                            <label class="control-label">{{ @trans('movement.select_topic') }}</label>
                                            <select class="js-example-tags form-control" multiple="multiple" id="movement_topic_ids" name="movement_topic_ids[]">                      
                                                @foreach($topicList as $topic)
                                                <option value="{{ $topic->name }}" @if(isset($movementUpdates['movement_topic_ids']))
                                                    @if(in_array($topic->name, $movementUpdates['movement_topic_ids'])) selected @endif
                                                @elseif(count($topicsArr) > 0 && in_array($topic->name, $topicsArr)) selected @endif>{{ $topic->name }}</option>
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="text-center">
                                 <input type="submit" name="submit" id="submit" class="btn btn-em submitBtn" value="{{ @trans('movement.continue') }}">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
   

    <div id="uploadimageModal" class="modal fullwidth" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="title-wrapper">
                        <h2 class="box-title">{{ @trans('movement.crop_movement_image') }}</h2>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="row">
                        <div class="col-md-8 text-center">                            
                        </div>                        
                    </div>
                </div>
                
            </div>
        </div>
    </div>
@endsection

@push('pageJs')
<script type="text/javascript" src="{{ asset('js/vendor/jsvalidation.min.js') }}"></script>
{!! JsValidator::formRequest('App\Http\Requests\Movement\StoreMovement', '#storeMovement') !!}
@endpush

@push('pageJs')

<script>

    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: "{{ @trans('movement.okay') }}"
    });
    @endif
    $(document).ready(function() {

        $('#series_id').on('change', function() {
           if($('#series_id').val() == 'new')
           {    
                window.location = "{{route('front.series.create')}}";
           }
        });
        $('#movement_title').blur(function(){
             $.ajax({
                url: "{{ route('front.movement.checktitle')}}",
                type: "POST",
                data: {
                    "_token": "{{csrf_token()}}",
                    "movement_title": $('#movement_title').val(),
                    "id": $('#id').val()
                },
                success:function(result)
                {
                    if(result.trim() == 1)
                    {
                        $('#movement_title-error').html("<label class='text-danger'>{{trans('movement.movement_title_exist')}}</label>");
                        $('#movement_title').addClass('is-invalid');
                        $('#submit').attr('disabled', 'disabled');
                        
                    }
                    else
                    {
                        $('#movement_title-error').html('');
                        $('#movement_title').removeClass('is-invalid');
                        $('#submit').attr('disabled', false);
                    }
                }
            });      
        });

    $('#submit').click(function()
    {
        //$('#storeMovement').validate();
        if($('#storeMovement').valid()) // check if form is valid
        {
            if($('#cropping').css('display') != 'none') {
                $('.crop_image').trigger('click');
            }
            $(".submitBtn").val("Please Wait...");            
        }
    });



     /*$('form').submit(function (event) {
        alert('test');
        if ($(this).hasClass('submitted')) {
            event.preventDefault();
            alert("dddd");
        }
        else {
            $(".submitBtn").attr("disabled", true).val("Please Wait...");
            $(this).addClass('submitted');
        }
    });*/
        
        // $('.multiple').select2();

        /*$('.js-example-basic-multiple')
          .dropdown({
            allowAdditions: true
          })
        ;*/

        $(".cancel").click(function(){
            $('#cropping').hide();
            $('#output').show();
            $('#cover_image').val('');
            if($('#output img')[0].src != '') {
                $('#cover_image2').val($('#output img')[0].src);
            } else {
                $('#cover_image2').val('');
            }
        });

       /* $('#AgencyDetails').on('change',function(){
            $('#result').html($(this).val());   
        });*/

        $(".js-example-tags").select2({
            tags: true,
/*            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600*/
        });

        /*$('#movement_topic_ids').on('change', function() {
            //$('.clstopic .select2-selection__choice__remove').css({float:'right', 'margin-left':'5px'});
            //alert($('#movement_topic_ids').val());
            if(this.value == '' )
            {
                $('.clstopic').css('padding-bottom', '0px');
            }
            else
            {
                $('.clstopic').css('padding-bottom', '40px');
            }
        });

        
        $('#movement_topic_ids').change()

         $(function() {
              //Here you add the bottom pixels you need. I added 200px.
              $('.clstopic .select2-selection__rendered').css({top:'50px',position:'relative'});
        });*/

       

        $image_crop = $('#image').croppie({
            enableExif: true,
            viewport: {
                width: 830,
                height: 470,
                type: 'square' //square circle
            },
            boundary: {
                width: 830,
                height: 470
            }
        });

        
        $(document).on('change', '#cover_image', function(e) {

            $('#cover_image-error').html('');
            var ext = $('#cover_image').val().split('.').pop().toLowerCase();
            if($.inArray(ext, ['png','jpg','jpeg']) == -1) { 
                $('#cover_image-error').val('Only JPEG/JPG and PNG images are allowed.');
                this.value = '';
            }
            else
            {
                @if((new \Jenssegers\Agent\Agent())->isMobile())
                var fileUpload = document.getElementById("cover_image");
                var reader = new FileReader();
                //Read the contents of Image File.
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {
                    //Initiate the JavaScript Image object.
                    var image = new Image();
     
                    //Set the Base64 string return from FileReader as source.
                    image.src = e.target.result;
                           
                    //Validate the File Height and Width.
                    image.onload = function () {
                        var height = this.height;
                        var width = this.width;
                        if (height < 470 || width < 830) {
                            $('#cover_image-error').html('Please upload an image at least with 830X470 pixels dimension');
                            this.value = '';
                        }
                        else
                        {
                            $("#output").html('<input type="file" class="custom-file-input form-control" id="cover_image" class="required" name="cover_image"><span class="material-icons edit-image-icon">edit</span><img src="'+e.target.result+'" class="w-100 h-100 fit-img rounded-lg" >');
                            $("#cover_image2").val(e.target.result);
                        }
                    };     
                }
                @else       
                var reader = new FileReader();            
                reader.onload = function(event) {
                    $image_crop.croppie('bind', {
                        url: event.target.result
                    }).then(function() {
                        console.log('jQuery bind complete');
                    });

                    $("#cover_image2").val(event.target.result);
                }            
                reader.readAsDataURL(this.files[0]);
                $('#output').hide();
                $('#cropping').show();           
                @endif
            }           
        });
        
        

        $(document).on('click', '.crop_image', function(event) {
            $image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function(response) {
                $("#output").html('<input type="file" class="custom-file-input form-control" id="cover_image" class="required" name="cover_image"><span class="material-icons edit-image-icon">edit</span><img src="'+response+'" class="w-100 h-100 fit-img rounded-lg" >');
                //$('#uploadimageModal').modal('hide');
                $('#cropping').hide();
                $('#output').show();
                $("#cover_image2").val(response);
            })
        });
    });
</script>
@endpush