<script src="<?= getBaseUrl() ?>assets/plugins/jquery/jquery.min.js"></script>
<script src="<?= getBaseUrl() ?>assets/js/paho-mqtt/paho-mqtt.js"></script>
<script src="<?= getBaseUrl() ?>assets/js/mqtt-connect.js"></script>


<!-- Content Header (Page header) -->
<?php App\Controllers\BackendController::createService()->showBreadCrumbs( $arrmixBreadCrumbData ) ?>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="js-show-alert-message">
            <?php App\Controllers\BackendController::createService()->showAlertMessage( $arrmixFlashData ) ?>
        </div>

        <div class="card card-default">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-maroon"><i class="fas fa-bolt"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Current Version</span>
                                <span class="info-box-number" id="js-show-current-version">Loading...</span>
                            </div>
                        </div>
                    </div>  
                    <div class="col-md-3 col-sm-6 col-12">
                        <div class="info-box">
                            <span class="info-box-icon bg-orange"><i class="far fa-plus-square"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">New Version</span>
                                <span class="info-box-number" id="js-show-new-version">Loading...</span>
                            </div>
                        </div>
                    </div>  
                    <!-- <div class="col-md-3 col-sm-6 col-12"></div> -->
                    <div class="col-md-3 col-sm-6 col-12">
                        <button type="button" class="btn btn-outline-primary mt-4" id="js-check-upgrade">
                            <i class="fas fa-search"></i> &nbsp; Check Upgrade
                        </button>
                    </div> 
                </div> 
                <div class="mt-5 js-firmware-version-details" id="js-show-version-same-details">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="text-danger">Both the versions are same. There is nothing to upgrade.</span>
                        </div>
                    </div>  
                </div>
                <div class="mt-5 js-firmware-version-details" id="js-show-version-details">
                    <div class="row">
                        <div class="col-md-12">
                            <span>A new version is available for upgrade. Would you like to proceed with the upgrade?</span>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <span><b>New Changes</b>
                            <ul id="js-new-changes-list">
                                <li>Bug Fix 102</li>
                                <li>New support adde</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-outline-success js-button-upgrade-version" id="js-upgrade-new-version" data-toggle="tooltip" data-placement="top" title="This will upgrade a new firmware version.">
                                <i class="fas fa-download"></i> &nbsp; Upgrade
                            </button>&nbsp; &nbsp;
                            <button type="button" class="btn btn-outline-danger js-button-upgrade-version" id="js-cancel-new-version" data-toggle="tooltip" data-placement="top" title="This will cancel the process and will keep the latest version haas it is.">
                                <i class="fas fa-window-close"></i> &nbsp; Cancel
                            </button>
                        </div>    
                    </div>    
                </div>

                <div class="mt-5 js-firmware-version-details" id="js-show-progress-bar">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="js-progress-text">Download in progress. Please wait a few minutes for the process to complete.</span>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="progress">
                                <div class="progress-bar bg-primary progress-bar-striped" id="js-progress-bar-data" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 5%" data-toggle="tooltip" data-placement="top" title="5%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-5 js-firmware-version-details" id="js-apply-new-version">
                    <div class="row">
                        <div class="col-md-12">
                            <span>Do you want to apply the new firmware changes?</span>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-outline-success js-button-apply-changes" id="js-yes-apply-changes">
                                <i class="fas fa-share-square"></i> &nbsp; Yes
                            </button>&nbsp; &nbsp;
                            <button type="button" class="btn btn-outline-danger js-button-apply-changes" id="js-no-apply-changes">
                                <i class="fas fa-window-close"></i> &nbsp; No
                            </button>
                        </div>    
                    </div>
                </div>

                <div class="mt-5 js-firmware-version-details" id="js-applied-version">
                    <div class="row">
                        <div class="col-md-12">
                            <h5><span class="text-success">Please wait, Upgrading the deivce. Device will be rebooting shortly...</span></h5>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>    
            <!-- /.card-body -->
        </div>
    </div><!-- /.container-fluid -->
</section>

<script>
    const SUBSCRIBE_UPGRADE_TOPIC = 'dt/web_to_ota/cmd';

    $(document).ready(function() {

        $( '.js-firmware-version-details' ).hide();

        initMqtt();

        $( '#js-check-upgrade' ).on( 'click', function() { 
            
            $( this ).prop( 'disabled', true );

            checkVersionUpgrade();
        } );

        $( '#js-upgrade-new-version' ).on( 'click', function() { 
            
            $( '.js-button-upgrade-version' ).prop( 'disabled', true );
            

            var objPayload = {
                "method": "cmd",
                "msg_id": 2001
            };

            publishMessage( JSON.stringify( objPayload ), SUBSCRIBE_UPGRADE_TOPIC );
        } );

        $( '#js-yes-apply-changes' ).on( 'click', function() { 
            
            $( '.js-button-apply-changes' ).prop( 'disabled', true );
            
            var objPayload = {
                "method": "cmd",
                "msg_id": 2002
            };

            publishMessage( JSON.stringify( objPayload ), SUBSCRIBE_UPGRADE_TOPIC );
        } );

        $( '#js-no-apply-changes, #js-cancel-new-version' ).on( 'click', function() { 
            
            $( '.js-button-apply-changes' ).prop( 'disabled', true );
            
            var objPayload = {
                "method": "cmd",
                "msg_id": 2003
            };

            publishMessage( JSON.stringify( objPayload ), SUBSCRIBE_UPGRADE_TOPIC );

            showAlertMessage( 'success', 'Firmware version process has been cancelled.' );
                        
            setTimeout( function(){ 
                location.reload();
            }, 2000);
        } );
    });

    function onConnect() {
        console.log( "On Connect" );
        objMqttclient.subscribe( 'dt/ota_to_web/resp' );
    }

    function checkVersionUpgrade() {
        
        var objPayload = {
            "method": "cmd",
            "msg_id": 2000
        };

        publishMessage( JSON.stringify( objPayload ), SUBSCRIBE_UPGRADE_TOPIC );
    }

    function processMessage( objMessagePayload ) {

        console.log( 'Processing Message Payload.' );
        console.log(  objMessagePayload );

        objMessagePayload = JSON.parse( objMessagePayload );

        var intResponseCode = objMessagePayload.resp_of;

        switch( intResponseCode ) {
            case 2000:
                showVersionDetails( objMessagePayload );
                break;
            
            case 2001:
                showDownloadProcess( objMessagePayload );
                break;
            
            case 2002:
                showAppliedVersion( objMessagePayload );    
            
            default:
                console.log( 'Unable to update UI for giving response code : ' + intResponseCode );
                break;
        }

        return true;
    }
    
    function showAppliedVersion( objMessagePayload ) {

        $( '.js-firmware-version-details' ).hide();

        $( '.js-button-apply-changes' ).prop( 'disabled', false );

        $( '#js-applied-version' ).show();

    }

    function showDownloadProcess( objMessagePayload ) {
        
        $( '.js-firmware-version-details' ).hide();

        $( '.js-button-upgrade-version' ).prop( 'disabled', false );

        $( '#js-show-progress-bar' ).show();

        $( '#js-progress-bar-data' ).css( 'width', objMessagePayload.dw_per + '%' );
        $( '#js-progress-bar-data' ).attr( 'data-original-title', objMessagePayload.dw_per + '%' );

        if( 100 == objMessagePayload.dw_per ) {
            $( '.js-progress-text' ).html( '100% Download completed.' );
            $( '.js-progress-text' ).addClass( 'text-success' );

            setTimeout( function() {
                $( '.js-progress-text' ).removeClass( 'text-success' );
                $( '.js-progress-text' ).html( 'Download in progress. Please wait a few minutes for the process to complete.' );

                $( '.js-firmware-version-details' ).hide();
                $( '#js-apply-new-version' ).show();
            }, 2000 );    
        }

    }

    function showVersionDetails( objMessagePayload ) {

        $( '#js-check-upgrade' ).prop( 'disabled', false );

        $( '#js-show-current-version' ).html( objMessagePayload.cur_ver );
        $( '#js-show-new-version' ).html( objMessagePayload.new_ver );

        $( '.js-firmware-version-details' ).hide();

        if( objMessagePayload.cur_ver ==  objMessagePayload.new_ver ) {
            $( '#js-show-version-same-details').show();
            
            return true;
        } 

        $( '#js-show-version-details' ).show();

        if( 'chang' in objMessagePayload ) {
            var arrobjChangesList = objMessagePayload.chang;
            
            if( false == Array.isArray( arrobjChangesList ) ) {
                return true;
            }

            $( "#js-new-changes-list" ).html( '' );
            
            arrobjChangesList.forEach( function( strList ) {
                $( "#js-new-changes-list" ).append( '<li>' + strList + '</li>' );
            } );
        }

        return true;
    }
</script>