<div class="row">
    <div class="col-sm-12">
         <a href="<?= base_url('admin/menus'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back to Menu List Page</a><br><br>
         <h4><?= empty($menus->id_menus) ? 'Add a new menu' : 'Edit menu: ' 
  . $menus->menu; ?></h4>
        <?= $this->session->flashdata('success'); //to display success message ?> 
        <?= $this->session->flashdata('result'); //to display result message ?>
  </div> 
</div> 
<div class="modal-body" style="max-height:800px;">
	<?= form_open(); ?>
    <table class="table"> 
        <tr>
            <td class="leftTabel">Menu Name</td> 
            <td class="rightTabel"><?= form_input('menu' , set_value('menu', $menus->menu, FALSE), 'class="form-control"'); ?>
            <?= form_error('menu'); ?>
            </td> 
        </tr>
        <tr>
            <td class="leftTabel">Menu Type</td> 
            <td class="rightTabel">
            <select name="menu_type" id="select_menu_type" class="form-control">
              <option value="">select menu type...</option>
              <option value="category"
              <?php if ($menus->menu_type == 'category'): ?>
                  selected="selected"
              <?php endif ?>
              >Category</option>
              <option value="brand"
              <?php if ($menus->menu_type == 'brand'): ?>
                  selected="selected"
              <?php endif ?>
              >Brand</option>
              <option value="page"
              <?php if ($menus->menu_type == 'page'): ?>
                  selected="selected"
              <?php endif ?>
              >Page</option>
              <option value="external"
              <?php if ($menus->menu_type == 'external'): ?>
                  selected="selected"
              <?php endif ?>
              >External URL</option>
              <option value="events"
              <?php if ($menus->menu_type == 'events'): ?>
                  selected="selected"
              <?php endif ?>
              >Blog & Events</option>
            </select>
            <?= form_error('menu_type'); ?>
            </td> 
        </tr>
        <tr id="container"></tr>
         <tr>
            <td class="leftTabel">Display Priority (must be number only)</td>
            <td class="rightTabel"><?= form_input('priority' , set_value('priority', $menus->priority), 'class="form-control"'); ?>
            <?= form_error('priority'); ?>
            </td> 
        </tr>
        <tr>
            <td class="leftTabel">Display</td>
            <td class="rightTabel">
            <?php
                $options = array(
                  1  => 'Yes',
                  0    => 'No'
                );
                echo form_dropdown('status', $options, $menus->status, 'class="form-control"');
             ?>   
            </td>
        </tr>
        <tr>
            <td class="leftTabel"></td>
            <td class="rightTabel">
			<?= form_submit('submit', 'Update', 'class="btn btn-primary btn-success button-brown"'); ?>
            &nbsp;&nbsp;&nbsp;<?= anchor('admin/menus', 'cancel'); ?>
            </td>
        </tr>
    </table>
    <?= form_close(); ?>
</div>

<script>
$( document ).ready(function() {

    var controller = 'menus';
    var base_url = '<?php echo site_url(); ?>'; 
    var menu_type = $('#select_menu_type').val();

    <?php if (!empty($menus->id_menus)) : ?>
        var current_menu_id = '<?= $menus->id_menus; ?>';
    <?php else : ?>
        var current_menu_id = null;    
    <?php endif; ?>

    if (menu_type != '') {
        load_data_ajax(menu_type, current_menu_id);
    }

    $('#select_menu_type').change(function() {

        var menu_type = $(this).val();
        
        load_data_ajax(menu_type);
    });   
    
    function load_data_ajax(menu_type, current_menu_id) {
        $.ajax({
            'url'       : base_url + 'admin/' + controller + '/ajax_get_menutype',
            'type'      : 'POST',
            'data'      : {'menu_type' : menu_type, 'current_menu_id' : current_menu_id}, 
            'success'   : function(data) {
                
                var container = $('#container');
                
                if (data) {
                    container.html(data);   
                };
            }
        });
    }
});
</script>