<style>
    .bg-full{
        direction: ltr
    }

    .select2-container .select2-choice .select2-arrow {

        left: auto!important;
        right: 0!important;
    }
    .select2-container .select2-choice > .select2-chosen {
        margin-right: 26px!important;
        margin-left: auto!important
    }
    a.tree-toggle.closed, a.tree-toggle-icon-only.closed {
        background-position: left 3px!important;
    }
    a.tree-toggle {
        padding-left: 25px!important;
    }
    a.tree-toggle {
        padding-left: 23px!important;
        background-position: left -20px!important;
    }


</style>
<div class="row bg-full">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#"> Expenses and revenues</a></li>
            <li><a href="#">
                    Expenses</a></li>
            <li class="active"> Add expense</li>
        </ol>
        <div class="panel panel-default panel-m">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <h3 class="panel-title"> Add expense</h3>
            </div>
            <div class="panel-body">
                <!-- tree >
                <div class="col-lg-4 " style="float:left">
                    <div class="row">
                        <div class="container">
                            <div class="panel panel-default panel-m">
                                <div class="panel-heading">
                                    <div class="caption"><i class="icon-comments"></i>Tree expenses </div>
                                    <div class="actions"> <a href="javascript:;" id="tree_expense_collapse" class="btn btn-success">  Close All</a> <a href="javascript:;" id="tree_expense_expand" class="btn btn-warning">  open All</a> </div>
                                </div>
                                <div class="panel-body" style="overflow-x:auto;  overflow-y:auto; height:400px;">
                                    <div class=" portlet-body fuelux">
                                        <ul class="tree" id="tree_expense">
                                            <li> <a href="#" data-role="branch" class="tree-toggle" data-toggle="branch" data-value="Categories"> Categories </a>
                                                <ul class="branch in">
                                                    {$treeHTML}
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- tree end -->

                <div class="col-lg-12">
                    <input name="selectedId" id="selectedId" type="hidden" value="" />
                    <input name="selectedClass" id="selectedClass" type="hidden" value="" />
                    <input name="addParent" id="addParent" type="button"  onclick="addParent();" style="display:none;" class="btn btn-primary conformdel"  value="  Add an expense type"/>&nbsp;&nbsp;
                    <input name="addExpense" id="addExpense" type="button" onclick="addExpense();" style="display:none;" class="btn btn-primary" value=" Add expenses"  />
                    <!------------    Start  expensesTypeformDiv  --------------------------->
                    <div id="expensesTypeformDiv" style="display:none">

                    </div>
                    <!------------    End  expensesTypeformDiv  --------------------------->

                    <div class="clearfix"></div>

                    <div id="expensesEdit"></div>
                    <div class="clearfix"></div>

                    <!------------    Start  expensesformDiv  --------------------------->
                    <div id="expensesformDiv">
                        <form  action="expensesController.php?do=add"  method="post" class=" form-horizontal" id="myExpenseForm" name="myExpenseForm" >
                            <div class="form-group"   >
                                <label class="col-lg-2 control-label">Expense type</label>
                                <div class="col-lg-4">
                                    <select class="select2 wdt100" name="expensetype" id="expensetype" >
                                        <option value="-1">Choose expense type</option>
                                        {foreach $allParents as $data}
                                        <option value="{$data->expensestypeid}">{$data->expensestypename}</option>
                                        {/foreach}
                                    </select>
                                    <div id="expensetypeError" style="display:none;"></div>
                                </div>
                            </div>
                            <div  {if $Programsettingdata->costcenter eq 0} {else} style="display:none" {/if}>
                                <div class="form-group"   >
                                    <label class="col-lg-2 control-label">Cost center </label>
                                    <div class="col-lg-4">
                                        <select class="select2 wdt100" name="Costcenterid" id="Costcenterid" >
                                            <option value="-1">Select Cost center  </option>
                                            {foreach $allCostcenter as $myallCostcenter}
                                            <option value="{$myallCostcenter->id}">{$myallCostcenter->name}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Pay method</label>
                                <div class="col-lg-4">
                                    <div class="radio-inline">
                                        <label>
                                            <input value="0"  name="paymethod" id="PMSave" class="PMethod" checked="checked"   type="radio" />

                                            save </label>
                                    </div>
                                    <div class="radio-inline">
                                        <label>
                                            <input value="1" name="paymethod" id="PMBank" class="PMethod" type="radio" />
                                            bank </label>
                                    </div>

                                </div>
                            </div>
                            <div id="save-div">
                                {if $userData->searchinonesave eq 0}
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">Save</label>
                                    <div class="col-lg-4">
                                        <span id="spryselect3">
                                            <select name="saveid"  id="saveid" class="select2">
                                                <option value="-1">Choose save</option>
                                                {foreach $allSave as $data}
                                                <option value="{$data->saveid}" {if $userData->saveid == $data->saveid}selected{/if}>{$data->savename}</option>
                                                {/foreach}
                                            </select>
                                            <span class="selectInvalidMsg">Choose save</span></span>
                                    </div>
                                </div>
                                {else}
                                <div class="form-group">
                                    <label for="inputEmail1" class="col-lg-2 control-label">Save</label>
                                    <div class="col-lg-4">
                                        {foreach $allSave as $data}
                                        {if $userData->saveid == $data->saveid}{$data->savename}{/if}
                                        <input type="hidden" name="saveid" id="saveid" value="{$userData->saveid}"/>
                                        {/foreach}

                                    </div>
                                </div>
                                {/if}
                            </div>
                            <div id="bank-div" style="display: none">
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">Bank</label>
                                    <div class="col-lg-4">
                                        <span id="spryselect4">
                                            <select name="bankid"  id="bankid" class="select2">
                                                <option value="-1">Choose bank</option>
                                                {foreach $bank as $data}
                                                <option value="{$data->bankid}">{$data->bankname}</option>
                                                {/foreach}
                                            </select>
                                            <span class="selectInvalidMsg">Choose bank</span></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">Bank account</label>
                                    <div class="col-lg-4">
                                        <span id="spryselect5">
                                            <select name="bankaccountid"  id="bankaccountid" class="">

                                            </select>
                                            <span class="selectInvalidMsg">Choose bank account</span></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">Check NO.</label>
                                    <div class="col-lg-4">
                                        <span id="sprytextfield3">
                                            <input name="checkNo" id="checkNo" type="text"   class="form-control" />
                                            <span class="textfieldRequiredMsg">*</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail1" class="col-lg-2 control-label">Expenses Name </label>
                                <div class="col-lg-4">
                                    <input type="text" name="expensesname" id="expensesname"   onchange="checkExpenseName(this.value);"class="form-control" placeholder=" Expenses Name">
                                    <div id="nameError" style="display:none;"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputEmail1" class="col-lg-2 control-label">The expenses of value </label>
                                <div class="col-lg-4">
                                    <input type="text" name="expensevalue" id="expensevalue"   class="form-control positivefloat"  placeholder="The expenses of value ">
                                    <div id="valueError" style="display:none;"></div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="inputEmail1" class="col-lg-2 control-label">Comment</label>
                                <div class="col-lg-4">
                                    <textarea name="expensecomment" class="form-control "></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-offset-2 col-lg-4">
                                    <input type="button" id="expsave" name="ss" class="btn btn-primary pull-left" value="Save"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!------------    End  expensesformDiv  --------------------------->
                    <div class="clearfix"></div>

                </div><!----col-lg-8-->
                <div class="clearfix"></div>


                <!-- Modal -->
                <div class="modal fade" id="catModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content bg-modal">
                            <div class="modal-header">
                                <button type="button" class="close pull-left" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title"> Add Type</h4>
                            </div>
                            <div class="modal-body">

                                <form class="nameToBeChecked2 form-horizontal" action="expensesControllerajex.php?do=addCat"  id="catForm" name="catForm" method="post"  >


                                    <input name="parent" id="parent" type="hidden" value="" />
                                    <div class="form-group">
                                        <label class="col-lg-2 control-label">Name of expense type   </label>
                                        <div class="col-lg-4">
                                            <input type="text" name="name" id="name" required="required" class="form-control" />
                                            <div id="nameError" class="alert alert-block alert-danger fade in" style="display:none">
                                                <button type="button" class="close pull-left" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                <h4>Error Message </h4>
                                                <p>
                                                    this name is already taken </p>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--==============================-->

                                    <div class="form-group">
                                        <label class="col-lg-2 control-label">other details </label>
                                        <div class="col-lg-4">

                                            <textarea   name="descripe" id="descripe" class="form-control" cols="45" rows="5" ></textarea>
                                        </div>
                                    </div>

                                    <!--==============================-->

                                    <div class="form-group">
                                        <div class="col-lg-offset-2 col-lg-4">
                                            {literal}
                                            <input type="button"  id="ww" name="ww" class="btn btn-primary pull-left" value="Add" onclick="if (Spry.Widget.Form.validate(this)) {
                                                        checkCatName(event, 'expensestype', 'name');
                                                        return true;
                                                    } else {
                                                        return false;
                                                    }"/>
                                            {/literal}
                                            <!--validate the form before checking name-->
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <!--              <button type="reset" class="btn btn-default" data-dismiss="modal">اغلاق</button>
                                -->              <!--<button type="submit" class="btn btn-primary savemodel">حفظ</button>-->
                            </div>
                        </div>

                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            <!--------=====================================================================---->

        </div>
        <div class="clearfix"></div>
    </div>
</div>


{literal}
<script type="text/javascript">
    var spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {invalidValue: "-1", isRequired: false});
    var spryselect4 = '';
    var spryselect5 = '';
    var sprytextfield3 = '';

    $(".PMethod").live('change', function () {
        var whatis = $(this).val();
        if (whatis == 0) {
            $('#save-div').show();
            $('#bank-div').hide();
            spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {invalidValue: "-1", isRequired: false});
            spryselect4.destroy();
            spryselect5.destroy();
            sprytextfield3.destroy();
        } else if (whatis == 1) {
            $('#save-div').hide();
            $('#bank-div').show();
            spryselect3.destroy();
            spryselect4 = new Spry.Widget.ValidationSelect("spryselect4", {invalidValue: "-1", isRequired: false});
            spryselect5 = new Spry.Widget.ValidationSelect("spryselect5");
            sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3");
        }

    });
    $("#bankid").live('change', function () {
        var id = $(this).val();
        $.post("projectControllerAjax.php?do=getbankaccount", {id: id}, function (data) {
            $("#bankaccountid").html(data);
        });
    });

</script>
{/literal}