Amr87 1 Junior Poster in Training

I have the following code that craete homepage builder setting page under the appearance tab
I am saving and retrieving the option successfuly
but when I am echoing them to the hidden input type values I got NULL value

why is that although the saving and retrieval is ok ?

add_action( 'admin_menu', 'demo_add_options_page' );
 add_action( 'admin_init', 'demo_initialize_theme_options' );

function demo_add_options_page() {

    add_theme_page(
        'HomePage Builder',         
        'HomePage Builder',         
        'manage_options',               
        'demo-theme-options',           
        'demo_theme_options_display'    
    );

} 



function demo_initialize_theme_options() {

    add_settings_section(
        'homepage_layout',                  
        '',                 
        'demo_footer_options_display',      
        'demo-theme-options'            
    );

    // Define the settings field
    add_settings_field( 
        'hp_layout',                    // The ID (or the name) of the field
        '',                                 // The text used to label the field
        'demo_footer_message_display',      // The callback function used to render the field
        'demo-theme-options',               // The page on which we'll be rendering this field
        'homepage_layout'                   // The section to which we're adding the setting
    );



    register_setting(
        'homepage_layout',                  
        'hp_layout'                 
    );

} 



function demo_theme_options_display() {
?>
    <div class="wrap">
        <div id="icon-options-general" class="icon32"></div>
        <h2>HomePage Builder</h2>
        <form method="post" action="options.php">
            <?php

            settings_fields( 'homepage_layout' );

            do_settings_sections( 'demo-theme-options' );

            submit_button(); 

            ?>          
        </form>
    </div><!-- /.wrap -->
<?php
} 


function demo_footer_options_display() {
    echo "";
} 


function demo_footer_message_display() {

    // Read the options for the footer message section 
    $options = get_option( 'hp_layout' );
    //$message = $options['message'];

    //echo '<input type="text" name="hp_layout[message]" id="hp_layout[value]" value="' . $message . '" />';
    echo "<pre>";
    print_r($options);

    echo "</pre>";
    ?>
    <div id="elem_1" class='iplus_hl'>
     <h2>The Slider</h2>
    </div>
    <div class='top_area_wrap'><!-- start of top area -->
    <div class='iplus_half_hl' id="elem_2" data-name="offer">
      <h2>The Offer</h2>
      <input type="hidden" name="hp_layout['top_offer']" value='<?php echo $options['top_offer'];?>'/>
    </div> 
        <div class='iplus_half_hl' id="elem_3" data-name="product">
      <h2>The Product</h2>
      <input type="hidden" name="hp_layout['top_product']" value='<?php echo $options['top_product'];?>'/>
    </div>
    </div><!-- end of top  area wrap -->
    <br class="clear"/>

    <div class="l_p_wrap"><!-- start of latest products wrap -->
    <h1 align='center'>Latest Products</h1>
    <div class='iplus_third_hl' id="elem_4" data-name="product">
      <h2>Latest Product</h2>
      <input type="hidden" name="hp_layout['latest_product'][]" value='<?php echo $options['latest_product'][0];?>'/>
    </div>
    <div class='iplus_third_hl' id="elem_5" data-name="product">
      <h2>Latest Product</h2>
      <input type="hidden" name="hp_layout['latest_product'][]" value='<?php echo $options['latest_product'][1];?>'/>
    </div>
    <div class='iplus_third_hl' id="elem_6" data-name="product">
      <h2>Latest Product</h2>
      <input type="hidden" name="hp_layout['latest_product'][]" value='<?php echo $options['latest_product'][2];?>'/>
    </div>

        <div class='iplus_third_hl' id="elem_7" data-name="product">
      <h2>Latest Product</h2>
      <input type="hidden" name="hp_layout['latest_product'][]" value='<?php echo $options['latest_product'][3];?>'/>
    </div>
    <div class='iplus_third_hl' id="elem_8" data-name="product" >
      <h2>Latest Product</h2>
      <input type="hidden" name="hp_layout['latest_product'][]" value='<?php echo $options['latest_product'][4];?>'/>
    </div>
    <div class='iplus_third_hl' id="elem_9" data-name="product">
      <h2>Latest Product</h2>
      <input type="hidden" name="hp_layout['latest_product'][]" value='<?php echo $options['latest_product'][5];?>'/>
    </div>
    <br class="clear"/>
    </div> <!-- end of latest products wrap -->
    <div class="b_offers"><!-- start of bottom area wrap -->

      <h1 align='center'>Best Offers</h1>
    <div class='iplus_half_hl' id="elem_10" data-name="offer" >
      <h2>Best Offer</h2>
      <input type="hidden" name="hp_layout['best_offer'][]" value='<?php echo $options['best_offer'][0];?>'/>
    </div>
        <div class='iplus_half_hl' id="elem_11" data-name="offer">
      <h2>Best Offer</h2>
      <input type="hidden" name="hp_layout['best_offer'][]" value='<?php echo $options['best_offer'][1];?>'/>
    </div>
    </div><!-- end of bottom area wrap -->
    <div id="dialog-product"  title="Product Options">
    <?php global $wpdb;

    $products = $wpdb->get_results("SELECT ID,post_title FROM ".$wpdb->posts." WHERE post_type='product' AND post_status='publish'");
    ?>
   <label for="products_list">Choose Product(s): </label>
   <select id="products_list" name="products_list"  class="widefat" style="height:50px" data-placeholder="Choose a product..."  >
   <?php 

    foreach($products as $product):
   ?>
   <option value = "<?php echo $product->ID; ?>" >
   <?php echo $product->post_title; ?>
   </option>
    <?php endforeach;?>
    </select>
       <script>
        jQuery(function($){
          $("select#products_list").chosen();
          $("select#products_list").trigger("liszt:updated");

        });
       </script>

    </div>
    <div id="dialog-offer"  title="Offer Options">
    <?php global $wpdb;

    $products = $wpdb->get_results("SELECT ID,post_title FROM ".$wpdb->posts." WHERE post_type='offer' AND post_status='publish'");
    ?>
   <label for="offer_list">Choose Offer: </label>
   <select id="offer_list" name="offer_list"   style="height:50px" data-placeholder="Choose a offer..."  >
   <?php 

    foreach($products as $product):
   ?>
   <option value = "<?php echo $product->ID; ?>">
   <?php echo $product->post_title; ?>
   </option>
    <?php endforeach;?>
    </select>
       <script>
        jQuery(function($){
          $("select#offer_list").chosen();
          $("select#offer_list").trigger("liszt:updated");

        });
       </script>


    </div>
    <?php

    }