<div class="row">
    <div class="col-sm-12">
        <p><a href="<?= base_url('admin/home_slideshow'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back to Slideshow List</a></p><br>
        <h4><?= empty($home_slideshow->id_home_slideshow) ? 'Add a new slideshow' : 'Edit slideshow: ' . $home_slideshow->title; ?></h4> 
        <?= $this->session->flashdata('success'); //to display success message ?> 
        <?= $this->session->flashdata('result'); //to display result message ?>
    </div>
</div>  

<?= form_open_multipart(); ?> 
<div class="row">
    <div class="col-sm-3">
        <p>Type</p>
    </div>
    <div class="col-sm-9">
        <?php
            $options = array(
                ''  => 'Choose type...',
                'homepage'  => 'Homepage',
                'products'  => 'Products Page',
                'services'  => 'Services Page',
                'portfolio'  => 'Portfolio Page', 
                'showrooms'  => 'Showrooms Page',

            );
            echo form_dropdown('type', $options, $home_slideshow->type, 'class="form-control" id="select_type" required');
        ?>   
    </div> 
</div>  

<div id="container"></div> 

<div class="row">
    <div class="col-sm-3">
        <p>Slideshow Image
         <?php if (!empty($home_slideshow->image)) : ?>
            &nbsp;&nbsp;<img style="width:150px; height:auto;" src="<?= base_url() . 'uploads/banners/' . $home_slideshow->image; ?>"  alt="" />
          <?php endif; ?>    
        </p>
    </div>

     <div class="col-sm-9">
       <input type="file" name="userfile" size="20"class="form-control" /><br>  
        <?php
            //get slideshow size from configuration table
            $this->db->select('home_slideshow_width, home_slideshow_height')->from('configuration')->where('id_configuration', 1);
            $slideshow_dimensions = $this->db->get()->row();
        ?>
        <span style="font-size:12px; font-style: italic;">Image size must be
        <?= $slideshow_dimensions->home_slideshow_width; ?> pixel width. <?= $slideshow_dimensions->home_slideshow_height; ?> pixel height, jpg/jpeg/png/webp, max 1MB</span> 
        <span style="color:#F7931E;"><?= form_error('userfile'); ?></span>
        <?= $this->session->flashdata('error'); ?> 
    </div>
</div>  

<div class="row"> 
    <div class="col-sm-3">
        <p>Slideshow Text Line 1</p>
    </div>
     <div class="col-sm-9"> 
     <p>
        <?php
        $data = array(
            'name'        => 'title',
            'value'       => $home_slideshow->title,
            'class'       => 'form-control'
        );
        echo form_input($data); ?>
        <?= form_error('title'); ?>
    </p>  
    </div>
</div>   

<div class="row"> 
    <div class="col-sm-3">
        <p>Slideshow Text Line 2</p>
    </div>
    <div class="col-sm-9"> 
        <p>
            <?php
                $data = array(
                    'name'        => 'text_content',
                    'value'       => $home_slideshow->text_content,
                    'class'       => 'form-control'
                );
                echo form_input($data); ?>
                <?= form_error('text_content'); ?>
        </p>
    </div>
</div>  

<div class="row" style="display:none">
    <div class="col-sm-3">
        <p>Button Link<br>
          (full URL. Eg: http://www.xxx.com/about)</p>
    </div>
    <div class="col-sm-9">
        <p>
        <?php
        $data = array(
            'name'        => 'button_link',
            'value'       => $home_slideshow->button_link,
            'class'       => 'form-control'
         );
        echo form_input($data); ?>
        <?= form_error('button_link'); ?></p>
    </div>
</div>  

<div class="row" style="display:none">
    <div class="col-sm-3">
        <p>Button Label</p> 
    </div>
    <div class="col-sm-9">
        <p>
        <?php
        $data = array(
            'name'        => 'button_label',
            'value'       => $home_slideshow->button_label,
            'class'       => 'form-control'
         );
        echo form_input($data); ?>
        <?= form_error('button_label'); ?></p>
    </div>
</div>  

<div class="row">
    <div class="col-sm-3">
        <p>Ordering (number only)</p>
    </div>
    <div class="col-sm-9">
        <p>
        <?php
        $data = array(
            'name'        => 'priority',
            'value'       => $home_slideshow->priority,
            'class'       => 'form-control'
         );
        echo form_input($data); ?>
        <?= form_error('priority'); ?></p>
    </div>
</div>    

<div class="row">
    <div class="col-sm-3">
        <p>Banner Active ?</p>
    </div>
    <div class="col-sm-9">
        <?php
            $options = array(
                1  => 'Yes',
                0    => 'No'
            );
            echo form_dropdown('status', $options, $home_slideshow->status, 'class="form-control"');
        ?>   
    </div> 
</div>   

<div class="row">
    <div class="col-sm-3"> 
    </div>
    <div class="col-sm-9">
       	<?= form_submit('submit', 'Update', 'class="btn btn-success"'); ?>
            &nbsp;&nbsp;&nbsp;<?= anchor('admin/home_slideshow', 'cancel'); ?>
    </div>
</div>   
<?= form_close(); ?>

<script>
$(document).ready(function() {
    var type = $('#select_type').val(); 

    <?php if (!empty($home_slideshow->id_home_slideshow)) : ?>
        var current_id = '<?= $home_slideshow->id_home_slideshow; ?>';
    <?php else : ?>
        var current_id = null;    
    <?php endif; ?>

    if (type !== '') {
        load_data_ajax(type, current_id); 
    }

    $('#select_type').change(function() {
        var type = $(this).val();

        if(type !== 'homepage' && type !== 'showrooms') {
            load_data_ajax(type, current_id);
        }
        else {
            $('#container').hide();
        }
    });   
    
    function load_data_ajax(type, current_id = null) {
        $.ajax({
            'url'       : '<?php echo site_url(); ?>' + 'admin/home_slideshow/ajax_get_type',
            'type'      : 'POST',
            'data'      : {
                          'type' : type, 
                          'current_id' : current_id,
                          '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'
                          }, 
            'success'   : function(data) { 
                var container = $('#container'); 
                if (data) {
                    container.html(data);   
                };
            }
        });
    }
});
</script>