<!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">
            #img_preview > img {
                max-height:500px;
                max-width:500px;
                height:auto;
                width:auto;
            }
            
            .icnml_button {
                margin-top: 50px;
            }
            .icnml_button > div > a {
                width: 60%;
                margin-bottom: 10px;
            }
            
            #location_img {
                background-image: url( '{{ url_for( 'files.send_static_files', subpath = 'location/main.png' ) }}' );
                background-repeat: no-repeat;
                background-size: 100%;
            }
            #location_img > img {
                height: 500px;
                width: auto;
            }
            
            .icnml_lp_cardbox {
                display: grid;
                grid-template-columns: auto auto;
                grid-gap: 30px;
            }
        </style>
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
            current_pfsp = "{{ current_pfsp }}";
            
            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 note     = decrypt( "{{ file[ 'note' ] }}", password_local );
            
            var updateMapCoordinates = function( data, fac )
            {
                data.children( "area" ).each( function( i )
                { 
                    $( this )[ 0 ].coords = $( this )[ 0 ].coords
                        .split( "," )
                        .map( x => x * fac )
                        .join( "," );
                } );
            }
            var updateSelection = function( data )
            {
                var location_base_url = "{{ url_for( 'files.send_static_files', subpath = 'location' ) }}";
                
                var d = [ "main" ]
                    .concat( data )
                    .filter( x => x != "None" )
                    .filter( x => x != "" )
                    .map( x => "url( " + location_base_url + "/" + x + ".png )" )
                    .join( ", " );
                
                $( "#location_img" )
                    .css( "background-image", d );
            }
            var update_pfsp_db = function( data )
            {
                if( data !== null )
                    data = data.join( "," )
                
                $.ajax( {
                    url: "{{ url_for( 'submission.submission_mark_pfsp_set', submission_id = submission_id, mark_id = file[ 'uuid' ] ) }}",
                    dataType: "json",
                    method: "POST",
                    data: {
                        pfsp: data
                    },
                    error: function()
                    {
                        toastr.error( "Error while saving the location data" );
                    }
                } );
            }
        </script>
    </head>
    <body class="icnml_main_layout">
        {% include "header.html" %}
        {% include navigation %}
        
        <div class="icnml_content">
            <div class="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 id="img_preview" class="icnml_img">
                                <img src="{{ url_for( 'image.image_file_serve', file_id = file[ 'uuid' ] ) }}">
                            </div>
                            <div>
                                <div id="pfsp">
                                    <div id="location_img">
                                        <img src="{{ url_for( 'files.send_static_files', subpath = 'location/empty.png' ) }}" usemap="#location_map" />
                                    </div>
                                    <map id="Map" name="location_map" class="location_map">
                                        {% for zone in pfsp_zones %}
                                            <area
                                                shape="polygon"
                                                id="area_{{ zone[ 'sel' ] | join( '_' ) }}"
                                                coords="{{ zone[ 'coords' ] }}"
                                                data-selection="{{ zone[ 'sel' ] | join( ',' ) }}"
                                                data-desc="{{ zone[ 'desc' ] }}"
                                                data-zone="{{ zone[ 'zone' ] }}"
                                                data-lat="{{ zone[ 'lat' ] }}"
                                            />
                                        {% endfor %}
                                    </map>
                                </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="clear_pfsp_button">
                                            <span class="ui-button-text" id="clear_pfsp_button_span_text">Unset the location</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $( "#header_filename" ).text( filename );
        $( "#box_filename" ).text( filename );
        
        $( "#clear_pfsp_button" ).on( "click", function()
        {
            update_pfsp_db( null );
            current_pfsp = [];
            updateSelection( current_pfsp );
        } );
        
        // Action for the PFSP zones
        
         updateMapCoordinates( $( "#Map" ), 500 / 656 );
        
        var current_pfsp = "{{ current_pfsp }}".split( "," );
        
        var areas = new Array();
        {% for zone in pfsp_zones %}
            areas.push( "#area_{{ zone[ 'sel' ] | join( '_' ) }}" );
        {% endfor %}
        
        for( var i = 0; i < areas.length; i++ )
        {
            $( areas[ i ] )
                .mouseover( function()
                {
                    var s = $( this )[ 0 ].dataset.selection.split( "," );
                    updateSelection( s );
                } )
                .mouseout( function()
                {
                    updateSelection( current_pfsp );
                } )
                .on( "click", function()
                {
                    var s = $( this )[ 0 ].dataset.selection.split( "," );
                    
                    current_pfsp.push( ...s );
                    current_pfsp = current_pfsp.filter( ( v, i, a ) => a.indexOf( v ) === i );
                    
                    i = current_pfsp.indexOf( "" )
                    if( i >= 0 )
                        current_pfsp.splice( i, 1 );
                    
                    update_pfsp_db( current_pfsp );
                    updateSelection( current_pfsp );
                } );
        }
        
        updateSelection( current_pfsp );
        
        //
        
        $( "#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>
        
