
<div class="page-content">
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-home"></i>
                <a href="#">Setting</a>
            </li>
            <li class="active">Transaction Type</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->

    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1>
                Transaction Type
            </h1>
        </div>
        <!--Header Buttons-->
        <div class="header-buttons">
            <a class="sidebar-toggler" href="#">
                <i class="fa fa-arrows-h"></i>
            </a>
            <a class="refresh" id="refresh-toggler" href="">
                <i class="glyphicon glyphicon-refresh"></i>
            </a>
            <a class="fullscreen" id="fullscreen-toggler" href="#">
                <i class="glyphicon glyphicon-fullscreen"></i>
            </a>
        </div>
        <!--Header Buttons End-->
    </div>
    <!-- /Page Header -->
    <!-- Page Body -->
    



    
    <!-- End Page Body -->
                

    <div class="page-body">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="row">
                    <div class="col-xs-12 col-md-12">
                        <div class="widget">
                            <div class="widget-header ">
                                <span class="widget-caption">Transaction Type</span>
                                <div class="widget-buttons">
                                    <a href="#" data-toggle="maximize">
                                        <i class="fa fa-expand"></i>
                                    </a>
                                    <a href="#" data-toggle="collapse">
                                        <i class="fa fa-minus"></i>
                                    </a>
                                    <a href="#" data-toggle="dispose">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="widget-body">
                                <div class="table-toolbar">
                                    
                                    <a id="close" href="<?php echo site_url('trans')?>" class="btn btn-danger">
                                        <span class="fa fa-arrow-left"></span>
                                    </a>
                                    <div class="btn-group pull-right">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12 col-sm-12 col-xs-12">
                                        <div class="well bordered-left bordered-themeprimary">
                                            <h3>Overview</h3>
                                            <p>vBizz allows you to Categorize your transactions into infinite category and subcategory(nested categories) to give you a clear picture of your Income/Expense.</p>
                                            <p>You can set specific color and budget for your category.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class = "row center">
                                    <div class="col-lg-10 col-sm-6 col-xs-12">
                                        <div class="widget center">
                                            <div class="widget-header bordered-bottom bordered-lightred">
                                                <span class="widget-caption">Add New Record</span>
                                            </div>
                                            <div class="widget-body">
                                                <div id="horizontal-form">
                                                    <form class="form-horizontal" role="form" method="POST" action="<?php echo site_url('add_tran')?>">
                                                        <input type="hidden" title="id" name="id" value="<?php echo !empty($tran)?$tran->id:''?>">
                                                        <div class="form-group">
                                                            <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">Title</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control" name="title" placeholder="Transaction Mode" required
                                                                    value="<?php echo !empty($tran)?$tran->title:''?>"
                                                                >
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">Select Parent</label>
                                                            <div class="col-sm-10">
                                                                <select id="parent_id" name="parent_id" style="width:100%" >
                                                                    <option value>Select Parent</option>
                                                                    <?php
                                                                    foreach ($parent_ids as $key => $value) {
                                                                        echo "<option value=\"".$value->id."\" >".$value->title."</option>";    
                                                                    }
                                                                    ?>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">Pick Color</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control date-picker" name="color" placeholder="Color" 
                                                                    value="<?php echo !empty($tran)?$tran->color:''?>"
                                                                >
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">Budget</label>
                                                            <div class="col-sm-10">
                                                                <input type="number" class="form-control" name="budget" placeholder="Transaction Mode" 
                                                                    value="<?php echo !empty($tran)?$tran->budget:''?>"
                                                                >
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="col-sm-offset-2 col-sm-10">
                                                                <button type="submit" class="btn btn-success">
                                                                <span class="fa fa-check"></span>
                                                                Save</button>
                                                                <a id="close" href="<?php echo site_url('trans')?>" class="btn btn-danger">
                                                                    <span class="fa fa-close"></span>
                                                                    Close
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div> 
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Page Content -->
<script>
    $(document).ready(function(){
        $('.colorpicker').each(function () {
            $(this).minicolors({
                control: $(this).attr('data-control') || 'hue',
                defaultValue: $(this).attr('data-defaultValue') || '',
                inline: $(this).attr('data-inline') === 'true',
                letterCase: $(this).attr('data-letterCase') || 'lowercase',
                opacity: $(this).attr('data-opacity'),
                position: $(this).attr('data-position') || 'bottom left',
                change: function (hex, opacity) {
                    if (!hex) return;
                    if (opacity) hex += ', ' + opacity;
                    try {
                        console.log(hex);
                    } catch (e) { }
                },
                theme: 'bootstrap'
            });

        });

        $("#parent_id").select2().val("<?php echo !empty($tran)?$tran->parent_id:''?>").trigger("change");
    });
</script>   