<?php (defined('BASEPATH')) OR exit('No direct script access allowed'); ?>
<link href="<?= $assets ?>plugins/bootstrap-toggle/bootstrap-toggle.min.css" rel="stylesheet">
<script src="<?= $assets ?>plugins/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<style>
    .slow .toggle-group {
        transition: left 0.7s;
        -webkit-transition: left 0.7s;
    }
    #preview img {
        width: 15rem;
        height: 15rem;
    }

    /* ESTILO DEL TAB */
    .nav-tabs{
        background-color:#1b609c;
    }
    .nav-tabs > li > a{
        color:black;
        background-color: white;
    }
    .nav-tabs > li > a:hover{
        border: medium none;
        border-radius: 0;
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
        background-color: #1b609c !important;
        border: medium none;
        border-radius: 0;
        color:#fff;
    }
    
</style>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box" style="border-top: 2.5px solid #004785;">
                <!--div class="box-header">
                    <h3 class="box-title"><?= lang('update_info'); ?></h3>
                </div-->
                <div class="box-body">
                    <div class="col-lg-12">

                        <?php echo form_open_multipart("categories/edit/".$categories->id);?>
                       
                        <div class="row">
                            <div class="col-md-6">

                                <div class="form-group">
                                    <?= lang('code', 'code'); ?>
                                    <?= form_input('code', set_value('code',(isset($form_data['code'])?$form_data['code']:$categories->code)), 'class="form-control tip" id="code"  required="required" maxlength="10"'); ?>
                                </div>
                             
                                <div class="form-group">
                                    <?= lang('name', 'name'); ?>
                                    <?= form_input('name', set_value('name',(isset($form_data['name'])?$form_data['name']:$categories->name)), 'class="form-control tip" id="name"  required="required" maxlength="40"'); ?>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?= lang('image', 'image'); ?>
                                <input type="file" name="userfile" id="image">
                                <center><div id="preview">
                                    <img src="<?php echo base_url('uploads/'.$categories->image); ?>" alt="" class="img-responsive">
                                </div></center>
                            </div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-md-12">
                                <div class="col-md-12 text-right">
                                    <?php echo form_submit('edit_category', $this->lang->line("accept"), 'class="btn btn-primary" id="btn-accept"'); ?>
                                    <a id="btn-cancel" class="btn btn-danger"><?= lang("cancel") ?></a>
                                </div>
                            </div>
                        </div>

                        <?php echo form_close();?>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    document.getElementById("image").onchange = function(e) {
        let reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = function(){
            let preview = document.getElementById('preview'),
                    image = document.createElement('img');
            image.src = reader.result;

            preview.innerHTML = '';
            preview.append(image);
        };
    }

$(document).ready(function () {
    $('#code').focus();
    $('#btn-cancel').click(function (e) {
        if (confirm("¿Está seguro que desea cancelar?")) {
            window.location.href = base_url + "categories"
        }
    });
});
</script>
