{% extends '@EasyAdmin/page/content.html.twig' %}



{% block content_title %}Add New File{% endblock %}
{% block page_actions %}


{% endblock %}

{% block main %}

    <div class="row">

        <div class="col-md-6 col-sm-12" style="margin-top: 20px">


            {# ... #}

            {{ form_start(form) }}

            <div class="col-sm-12 error-message">
                {{ form_errors(form) }}
            </div>
                <div class="form-group">

                    <div class="col-sm-12" style="height: 2px; background-color: gray; margin-bottom: 10px"></div>
                    <br><br>

                    <select name="{{ field_name(form.file_type) }}" class="form-control col-sm-12">
                        <option value="">{{ field_label(form.file_type) }}</option>

                        {% for label, value in field_choices(form.file_type) %}
                            <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="input-group">

                    <div class="custom-file">
                        {{ form_row(form.media) }}
                    </div>

                </div>

                <br><br>
                <button type="submit" id="sendRes" class="btn btn-primary col-sm-10 offset-s1">Save
                    <i class="fa fa-upload"></i>
                </button>
                {{ form_end(form) }}
        </div>
        <div class="col-md-6 col-sm-12">


            <div class="row">
                <div class="col-sm-10 offset-sm-1">
                    <img id="previewing" class="" style="max-height: 350px" src="{{ asset('img/preview-icon-8.jpg') }}"/>
                </div>
            </div>
        </div>
    </div>


    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $(".user-name").html("{{ user.lastName }} {{ user.firstName }}")

            $(".dropdown-menu").append('<li><div class="container"><a class="" href="{{ path('app_logout') }}"><i class="fa-fw fa fa-sign-out" style=" margin: 10px"></i>Logout</a></div></li>');


            $("#media_object_media").change(function() {
                $("#message").empty(); // To remove the previous error message
                var file = this.files[0];
                var imagefile = file.type;

                console.log('size=' + file.size);
                console.log('type=' + file.type);
                console.log('name=' + file.name);

                var match= ["image/jpeg","image/png","image/jpg","image/JPEG","image/PNG","image/JPG","image/gif"];
                if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]) || (imagefile==match[3])))
                {
                    $("#sendRes").addClass("disabled");
                    $('#previewing').attr('src','{{ asset('img/preview-icon-8.jpg') }}');
                    $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h5>Note</h5>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
                    return false;
                } else
                if(file.size>8000000)
                {
                    $("#sendRes").addClass("disabled");
                    $('#previewing').attr('src','{{ asset('img/preview-icon-8.jpg') }}');
                    $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h5>Note</h5>"+"<span id='error_message'>File size is higher than 8M</span>");
                    return false;
                }
                else
                {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                    $("#sendRes").removeClass("disabled");
                }
            });

        });


        function imageIsLoaded(e) {
            $("#file").css("color","green");

            $('#previewing').attr('src', e.target.result).attr('width', '350px').attr('height', '350px');

        }



    </script>



{% endblock %}