@extends('front/layouts/main')

@section('title')
{{ @trans('movement.new_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.store') }}" method="post">@csrf
                            <input type="hidden" name="act" id="act" value="{{$act}}" />
                            <input type="hidden" name="id" value="@if($movement){{$movement->id}} @endif">
                            <div class="box white">
                                <div class="title-wrapper">
                                    <h2 class="box-title">{{ @trans('movement.creata_a_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($movement)
                                                @if($movement->series_id == $series->id) selected @endif
                                                @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_image3" id="cover_image3" value="@if($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($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') }}">
                                                @endif
                                                @else
                                                <label class="custom-file-label body-font-size gray rounded-circle p-0" for="customFile">
                                                    <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($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 select-two form-control" multiple="multiple" id="movement_topic_ids" name="movement_topic_ids[]">                      
                                                @foreach($topicList as $topic)
                                                <option value="{{ $topic->name }}"  @if(count($topicsArr) > 0 && in_array($topic->name, $topicsArr)) selected @endif>{{ $topic->name }}</option>
                                                @endforeach 
                                            </select>

                                        <!-- <select class="form-control js-data-example-ajax select-two" id="movement_topic_ids" name="movement_topic_ids" multiple="multiple">
                                            <option value="" hidden="">{{ @trans('movement.select_topic') }}</option>
                                        </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()
            },
            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...");            
        }        
    });
        
       

        $(".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('');
            }
        });

        $(".js-example-tags").select2({
            allowClear: true,
            tags: true
        });

        /* $('#movement_topic_ids').select2({
            placeholder: 'Select an option',
            tags: true,
            allowClear: true,
            ajax: {
                delay: 250,
                url: '{{route("front.movement.get_search_json")}}',
                dataType: 'json',
                data: function(params) {
                    var query = {
                        search: params.term,
                        type: 'topic'
                    }
                    return query;
                },
                processResults: function(response) {
                    return {
                        results: response,
                    };
                }
            }
        });*/

        /*$('#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').html('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" >');
                            $('#act').val(0); 
                            $("#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();
                $('#act').val(0); 
                $("#cover_image2").val(response);
            })
        });
    });
</script>
@endpush