@extends('front/layouts/main')

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

@section('content')
    <main class="new-series-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-10">
                    <div class="main-content">
                        <form id="storeSeries" action="{{ route('front.series.store') }}" method="post">@csrf
                            <input type="hidden" name="act" id="act" value="1" />
                            <div class="box white">
                                <div class="title-wrapper">
                                    <h2 class="box-title">{{ @trans('movement.create_series') }}</h2>
                                </div>
                                <div class="row">
                                    <div class="col-xl-4 col-lg-5 col-sm-4">
                                        <div class="form-group file-upload-box small-size h-100">

                                            <input type="hidden" name="cover_image2" id="cover_image2" value="" />
                                            <div class="custom-file new-bg h-100" id="output">
                                                <input type="file" class="custom-file-input form-control required" id="cover_image" name="cover_image">
                                                <label class="custom-file-label body-font-size gray" for="customFile">
                                                    <span class="material-icons large-font-size d-block mx-auto">{{ @trans('movement.photo') }}</span>{{ @trans('movement.upload_cover_image_for_your_series') }}<small class="d-block">{{ @trans('movement.upload_size_notes') }}</small></label>
                                            </div>
                                            <span id="cover_image-error" class="invalid-feedback"></span>
                                        </div>
                                    </div>
                                    <div class="col-xl-8 col-lg-7 col-sm-8 mt-4 mt-sm-0">
                                        <div class="form-group">
                                            <label class="control-label d-flex">{{ @trans('movement.series_name') }}<span class="ml-auto gray xs-font-size">(<span id="mdcount">0</span>/25 {{ @trans('movement.characters') }})</span></label>
                                            <input type="text" id="series_name" name="series_name" class="form-control" maxlength="25" onkeyup="countChar(this, 'mdcount', 26)" placeholder="{{ @trans('movement.series_name') }}" />
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label d-flex">{{ @trans('movement.series_description') }}</label>
                                            <textarea class="form-control" id="series_description" name="series_description" placeholder="{{ @trans('movement.series_description') }}" rows="3"></textarea>
                                            <label style="display: none;"></label>
                                        </div>
                                        <div class="form-group select btm-arrow clstopic">
                                            <label class="control-label">{{ @trans('movement.select_category') }}</label>
                                            <select class="js-example-tags form-control" id="category_ids" name="category_ids">
                                                <option value="" hidden>{{ @trans('movement.select_category') }}</option>
                                                @foreach($categoryList as $category)
                                                <option value="{{ $category->id }}">{{ $category->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.create_series') }}">                            
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
     <div id="uploadimageModal" class="modal model685" 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_series_image') }}</h2>
                        <button type="button" class="close closebtn">&times;</button>
                    </div>
                    <div class="row">
                        <div class="col-md-8 text-center">
                            <div id="image" style="width:650px; margin-top:30px"></div>
                        </div>
                        <!-- <div class="col-md-4" style="padding-top:30px;">
                            <br />
                            <br />
                            <br />
                        </div> -->
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-bordered w-50 cancel" >{{ @trans('movement.cancel') }}</button>
                    <button class="btn btn-transparent w-50 crop_image">{{ @trans('movement.crop_upload') }}</button>
                </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\StoreSeries', '#storeSeries') !!}
@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_name').blur(function(){
             $.ajax({
                url: "{{ route('front.series.checktitle')}}",
                type: "POST",
                data: {
                    "_token": "{{csrf_token()}}",
                    "series_name": $('#series_name').val()
                },
                success:function(result)
                {
                    if(result.trim() == 1)
                    {
                        $('#series_name-error').html("<label class='text-danger'>{{trans('movement.series_name_exist')}}</label>");
                        $('#series_name').addClass('is-invalid');
                        $('#submit').attr('disabled', 'disabled');
                        
                    }
                    else
                    {
                        $('#series_name-error').html('');
                        $('#series_name').removeClass('is-invalid');
                        $('#submit').attr('disabled', false);
                    }
                }
            });      
        });


    $('#submit').click(function()
    {
        if($('#storeSeries').valid())
        {
            $(".submitBtn").val("Please Wait...");            
        }
    });
        $(".closebtn").click(function(){
            //$('#cropping').hide();
            $('#output').show();
            $('#cover_image').val('');
            $('#uploadimageModal').modal('hide');
        });

        $(".cancel").click(function(){
            //$('#cropping').hide();
            $('#output').show();
            $('#cover_image').val('');
            $('#uploadimageModal').modal('hide');
        });;

        $(".js-example-tags").select2();

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

        $(document).on('change', '#cover_image', function(e) {             
            $('#cover_image-error').html('');
            $('#cover_image-error').css('font-size', '14px');
            var ext = $('#cover_image').val().split('.').pop().toLowerCase();
            if($.inArray(ext, ['png','jpg','jpeg']) == -1) { 
                $('#cover_image-error').css('font-size', '12px');              
                $('#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 < 900 || width < 600) {
                            $('#cover_image-error').html('Please upload an image at least with 600X900 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');
                    });

                }            
                reader.readAsDataURL(this.files[0]);
                //$('#output').hide();
                //$('#cropping').show();
                $('#uploadimageModal').modal({backdrop: 'static', keyboard: false});
                //$('#uploadimageModal').modal('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');
                $('#act').val(0); 
                //$('#cropping').hide();
                //$('#output').show();
                $("#cover_image2").val(response);
            })
        });
    });
</script>
@endpush