<!DOCTYPE html>
<html>
    <head>
        {% for src in js %}
            <script type="text/javascript" src="{{ src }}"></script>
        {% endfor %}
        {% for src in css %}
            <link type="text/css" rel="stylesheet" href="{{ src }}">
        {% endfor %}
        
        <script type="text/javascript" src="{{ url_for( 'files.send_app_files', subpath = 'functions.js' ) }}"></script>
        <link type="text/css" rel="stylesheet" href="{{ url_for( 'files.send_app_files', subpath = 'app.css' ) }}">
        
        <style type="text/css">
            .icnml_button {
                margin-top: 50px;
            }
            .icnml_button > div > a {
                width: 60%;
                margin-bottom: 10px;
            }
        </style>
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            
            var password_local = decrypt( sessionStorage.getItem( "session_key" ), "{{ session_security_key }}" );
            var nickname = decrypt( "{{ nickname }}", password_local );
            var filename = decrypt( "{{ file[ 'filename' ] }}", password_local );
            
            var new_field = function( field_name )
            {
                var add_new_field_to_db = function()
                {
                    var field = $( "#new_field_confirmation_input" ).val() || null;
                    
                    $.ajax( {
                        url: "{{ url_for( 'submission.add_new_field' ) }}",
                        dataType: "json",
                        method: "POST",
                        data: {
                            field: field,
                            field_name: field_name
                        },
                        success: function( data )
                        {
                            $( "#delete_confirmation" ).remove();
                            window.location.reload();
                        },
                        error: function( data )
                        {
                            $( "#delete_confirmation" ).remove();
                        }
                    } );
                };
    
                $( "<div />" )
                    .attr( "id", "new_field_confirmation" )
                    .text( "What is the new " + field_name + " you'd like to add?" )
                    .append(
                        $( "<input />" )
                            .attr( "id", "new_field_confirmation_input" )
                            .css( "margin-top", "10px" )
                    )
                    .dialog( {
                        title: "New " + field_name,
                        modal: true,
                        buttons: {
                            "OK": add_new_field_to_db,
                            "Cancel": function()
                            {
                                $( this ).dialog( "close" );
                            },
                        },
                        close: function()
                        {
                            $( this ).remove();
                        }
                    } );
                
                $( "#new_field_confirmation_input" ).on( "keypress", function( event )
                {
                    if( event.keyCode == 13 )
                    {
                        add_new_field_to_db();
                    }
                } );
                
                $( "#new_field_confirmation_input" ).focus();
            }
            
            var update_note_db = function()
            {
                var note = $( "#file_note" ).val() || null;
                
                $.ajax( {
                    url: "{{ url_for( 'submission.submission_file_set_note', submission_id = submission_id, file_uuid = file[ 'uuid' ] ) }}",
                    dataType: "json",
                    method: "POST",
                    data: {
                        note: note
                    }
                } );
            }
            
            var update_field_db = function( field )
            {
                var field_value = [];
                
                $.each( $( "#file_{{ file[ 'uuid' ] }}_" + field + " > select > option:checked" ), function() {
                    field_value.push( $( this ).val() );
                } );
                
                $.ajax( {
                    url: "{{ url_for( 'submission.submission_mark_set_field', submission_id = submission_id, mark_id = file[ 'uuid' ], field = '<field>' ) }}".replace( "%3Cfield%3E", field ),
                    dataType: "json",
                    method: "POST",
                    data: {
                       value: JSON.stringify( field_value )
                    }
                } );
            }
            
            var next_information = function()
            {
                window.location = "{{ url_for( 'submission.submission_mark_pfsp', submission_id = submission_id, mark_id = file[ 'uuid' ] ) }}";
            }
            
            var delete_mark = function()
            {
                $( "<div />" )
                    .attr( "id", "delete_confirmation" )
                    .text( "Do you really want to delete this mark?" )
                    .dialog( {
                        title: "Confirm mark deletion",
                        modal: true,
                        buttons: {
                            "OK": function()
                            {
                                $.ajax( {
                                    url: "{{ url_for( 'submission.submission_mark_delete', submission_id = submission_id, mark_id = file[ 'uuid' ] ) }}",
                                    dataType: "json",
                                    success: function( data )
                                    {
                                        $( "#delete_confirmation" ).remove();
                                        window.location = "{{ url_for( 'submission.submission_mark_list', submission_id = submission_id, mark_type = file[ 'file_type' ] ) }}";
                                    },
                                    error: function( data )
                                    {
                                        $( "#delete_confirmation" ).remove();
                                    }
                                } );
                            },
                            "Cancel": function()
                            {
                                $( this ).dialog( "close" );
                            },
                        },
                        close: function()
                        {
                            $( this ).remove();
                        }
                    } );
            }
        </script>
        
        <style type="text/css">
            .mark_preview {
                height: 100%;
                width: 100%;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content icnml_lp_oneperpage">
            <form id="icnml_file_update_{{ file[ 'uuid' ] }}">
                <div class="ui-widget-header ui-corner-top icnml_box_top">File '<span id="header_filename">-</span>'</div>
                <div class="ui-widget-content ui-corner-bottom icnml_box_content_central">
                    <div class="icnml_lp_cardbox">
                        <div
                            class="mark_preview"
                            style="background-image: url( {{ url_for( 'image.image_file_serve', file_id = file[ 'uuid' ] ) }} )">
                        </div>
                        <div>
                            <div class="icnml_box_fields">
                                <div>Name</div>
                                <div id="box_filename"></div>
                                
                                <div>Format</div>
                                <div>{{ file[ 'format' ] }}</div>
                                
                                <div>Resolution</div>
                                <div>{{ file[ 'resolution' ] }} dpi</div>
                                
                                <div>Width</div>
                                <div>{{ file[ 'width' ] }} px</div>
                                
                                <div>Height</div>
                                <div>{{ file[ 'height' ] }} px</div>
                                
                                <div>Size</div>
                                <div>{{ file[ 'size' ] }} Mo</div>
                                
                                <div>Upload time</div>
                                <div id="file_{{ file[ 'uuid' ] }}_uploadtime">-</div>
                                
                                <div>Detection</div>
                                <div id="file_{{ file[ 'uuid' ] }}_detection">
                                    <select multiple id="file_{{ file[ 'uuid' ] }}_detection_select" data-placeholder="select..." class="chosen-select">
                                        {% for dt in all_detection_technics %}
                                            <option value="{{ dt[ 'id' ] }}">{{ dt[ 'name' ] }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div>Surface</div>
                                <div>
                                    <div id="file_{{ file[ 'uuid' ] }}_surface">
                                        <select multiple id="file_{{ file[ 'uuid' ] }}_surface_select" data-placeholder="select..." class="chosen-select">
                                            {% for s in all_surfaces %}
                                                <option value="{{ s[ 'id' ] }}">{{ s[ 'name' ] }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div style="text-align: right;">
                                        <a id="add_a_new_surface" style="cursor: pointer;">Add a new surface</a>
                                    </div>
                                </div>
                                
                                <div>Activity</div>
                                <div>
                                    <div id="file_{{ file[ 'uuid' ] }}_activity">
                                        <select multiple id="file_{{ file[ 'uuid' ] }}_activity_select" data-placeholder="select..." class="chosen-select">
                                            {% for a in all_activities %}
                                                <option value="{{ a[ 'id' ] }}">{{ a[ 'name' ] }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div style="text-align: right;">
                                        <a id="add_a_new_activity" style="cursor: pointer;">Add a new activity</a>
                                    </div>
                                </div>

                                <div>Distortion</div>
                                <div>
                                    <div id="file_{{ file[ 'uuid' ] }}_distortion">
                                        <select multiple id="file_{{ file[ 'uuid' ] }}_distortion_select" data-placeholder="select..." class="chosen-select">
                                            {% for d in all_distortions %}
                                                <option value="{{ d[ 'id' ] }}">{{ d[ 'name' ] }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div style="text-align: right;">
                                        <a id="add_a_new_distortion" style="cursor: pointer;">Add a new distortion</a>
                                    </div>
                                </div>
                                <div>Notes</div>
                                <div><textarea rows="6" id="file_note">{{ file[ 'note' ] }}</textarea></div>
                            </div>
                            <div>
                                <div class="icnml_button">
                                    <div id="next_button_div">
                                        <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="next_button">
                                            <span class="ui-button-text" id="next_button_span_text">Next</span>
                                        </a>
                                    </div>
                                    <div id="delete_button_div">
                                        <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="delete_button">
                                            <span class="ui-button-text" id="delete_button_span_text">Delete mark</span>
                                        </a>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </body>
    <script type="text/javascript">
        $( "#header_filename" ).text( filename );
        $( "#box_filename" ).text( filename );
        $( "#file_note" ).on( "change", update_note_db );
        
        _.forEach( [ "detection", "surface", "activity", "distortion" ], function( f ){
            $( "#file_{{ file[ 'uuid' ] }}_" + f + " > select" ).on( "change", function(){ update_field_db( f ); } )
        } );

        $( "#file_{{ file[ 'uuid' ] }}_uploadtime" )
            .text( moment.utc( "{{ file[ 'creation_time' ] }}" ).local().format( "MMMM Do YYYY, HH:mm:ss" ) );
        
        $( "#next_button" ).on( "click", next_information );
        $( "#delete_button" ).on( "click", delete_mark );
       
        _.forEach( [ "detection", "surface", "activity", "distortion" ], function( f )
        {
            $( "#file_{{ file[ 'uuid' ] }}_" + f + "_select" )
                .chosen( {
                    search_contains: true,
                    width: "100%"
                } );
        } );

        var detection_technics = []
        {% for dt in detection_technics %}
            detection_technics.push( "{{ dt }}" );
        {% endfor %}
        $( "#file_{{ file[ 'uuid' ] }}_detection_select" ).val( detection_technics ).trigger( "chosen:updated" );
        
        var surface = []
        {% for s in surface %}
            surface.push( "{{ s }}" );
        {% endfor %}
        $( "#file_{{ file[ 'uuid' ] }}_surface_select" ).val( surface ).trigger( "chosen:updated" );
        
        var activity = []
        {% for a in activity %}
            activity.push( "{{ a }}" );
        {% endfor %}
        $( "#file_{{ file[ 'uuid' ] }}_activity_select" ).val( activity ).trigger( "chosen:updated" );
        
        var distortion = []
        {% for a in distortion %}
            distortion.push( "{{ a }}" );
        {% endfor %}
        $( "#file_{{ file[ 'uuid' ] }}_distortion_select" ).val( distortion ).trigger( "chosen:updated" );

        _.forEach( [ "surface", "activity", "distortion" ], function( f ){
            $( "#add_a_new_" + f ).on( "click", function(){ new_field( f ); } );
        } );
        
        $( "#icnml_navigation_submissions" )
            .addClass( "activated" );
        
        $( "#navloc" ).append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_list' ) }}" )
                .text( "Submissions" )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_upload_tenprintmark', submission_id = submission_id ) }}" )
                .text( nickname )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<a />" )
                .attr( "href", "{{ url_for( 'submission.submission_mark_list', submission_id = submission_id ) }}" )
                .text( "Marks" )
        )
        .append(
            $( "<span />" ).text( ">" )
        )
        .append(
            $( "<span />" ).text( filename )
        );
    </script>
    
</html>
        
