@extends('layouts/acc_layout')
@section('title', '| New Budget Configuration')
@section('content')
    <div class="row add-data-form" style="padding-bottom: 1%">
        <div class="col-md-12">
            <div class="col-md-2"></div>
            <div class="col-md-8 fullbody">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{ url('acc/viewBudgetConfig/') }}" class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-th-list viewIcon">
                        </i>Configuration List</a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">Add Budget Configuration</div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Form::open(['url' => '', 'id' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups']) !!}
                                <div class="row">
                                    <div class="col-md-12 col-md-offset-2">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('parentLedger', 'Parent Ledger:', ['class' => 'col-sm-12 control-label']) !!}
                                                <div class="col-sm-12">
                                                    <select class="form-control select2" id="parentLedger"
                                                        name="parentLedger">
                                                        <option value="">--Select--</option>
                                                        @foreach ($ledgerAccounts as $id => $ledgerAccount)
                                                            <option value="{{ $id }}">{{ $ledgerAccount }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('parentNature', 'Parent Nature:', ['class' => 'col-sm-12 control-label']) !!}
                                                <div class="col-sm-12">
                                                    <select class="form-control" id="parentNature" name="parentNature">
                                                        <option value="">--Select--</option>
                                                        <option value="debit">Debit</option>
                                                        <option value="credit">Credit</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- CHILD ROW INCREMENTABLE --}}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('childLedger', 'Child Ledger:', ['class' => 'col-sm-12 control-label']) !!}
                                                <div class="col-sm-12">
                                                    <select class="form-control select2" id="childLedger"
                                                        name="childLedger">
                                                        <option value="">--Select--</option>
                                                        @foreach ($ledgerAccounts as $id => $ledgerAccount)
                                                            <option value="{{ $id }}">{{ $ledgerAccount }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('childNature', 'Child Nature:', ['class' => 'col-sm-12 control-label']) !!}
                                                <div class="col-sm-12">
                                                    <select class="form-control" id="childNature" name="childNature">
                                                        <option value="">--Select--</option>
                                                        <option value="debit">Debit</option>
                                                        <option value="credit">Credit</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {!! Form::label('percentage', 'Percentage:', ['class' => 'col-sm-12 control-label']) !!}
                                                <div class="col-sm-12">
                                                    {!! Form::text('percentage', $value = null, ['class' => 'form-control', 'id' => 'percentage', 'type' => 'text']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div style="padding-right: 47px;">
                                            <button class="btn btn-info" id="addChild" style="float: right;"
                                                type="button">Add</button>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-bottom: 20px">
                                        <div class="col-md-0"></div>
                                        <div class="col-md-12" style="padding: 0px 45px 0px 45px; ">
                                            <table id="addChildTable" class="table table-striped table-bordered">
                                                <thead id="theadRow">
                                                    <tr id="headerRow">
                                                        <th style="padding: 10px 5px; width: 30%;text-align:center;">Child
                                                            Account</th>
                                                        <th style="padding: 10px 5px; width: 20%;text-align:center;">Nature
                                                        </th>
                                                        <th style="padding: 10px 5px; width: 12%;text-align:center;">
                                                            Percentage</th>
                                                        <th style="padding: 10px 5px; width: 8%;text-align:center;">Actions
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <th colspan="5"></th>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <p id='tablePVe' style="max-height:3px; color: red;"></p>
                                        </div>
                                        <div class="col-md-0"></div>
                                    </div>

                                    <div class="form-group">
                                        {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
                                        <div class="col-sm-9 text-right" style="padding-right: 45px;">
                                            <input type="button" name="" id="submit" class="btn btn-success" value="Submit">
                                            <a href="{{ url('acc/viewBudgetConfig') }}"
                                                class="btn btn-danger closeBtn">Close</a>
                                            <span id="success" style="color:green; font-size:16px;"
                                                class="pull-right"></span>
                                        </div>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footerTitle" style="border-top:1px solid white"></div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
@endsection

<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $('#addChild').click(function() {
            var parentLedgerVal = $("#parentLedger option:selected").val();
            var parentnature = $("#parentNature option:selected").val();
            var childLedgerVal = $("#childLedger option:selected").val();
            var childLedgerName = $("#childLedger option:selected").html();
            var childNatureVal = $("#childNature option:selected").val();
            var childNatureName = $("#childNature option:selected").html();
            var percentage = $("#percentage").val();

            // Validations
            if (parentLedgerVal == '' || parentnature == '') {
                toastr.warning('Please input all parent ledger detail.');
                return false;
            }

            if (childLedgerVal == '' || childNatureVal == '' || percentage == '') {
                toastr.warning('Please input all child ledger detail.');
                return false;
            }

            // Total percentage can't be more than 100
            // var totalPercentage = parseInt(percentage);
            // $('.percentageInput').each(function(){
            //     totalPercentage += parseInt($(this).val());
            // });    

            // if(totalPercentage > 100){
            //     toastr.warning('Total percentage can\'t be greater than 100');
            //     return false;
            // }

            var markup =
                "<tr class='valueRow'>" +
                "<td style='padding: 8px 5px; text-align:center;' class='childLedger'>" +
                "<input type='hidden' name='childLedgerIds[]' class='childLedgerInput' value='" +
                childLedgerVal + "'>" + childLedgerName + "" +
                "</td>" +
                "<td style='padding: 8px 5px; text-align:center;' class='childNature'>" +
                "<input type='hidden' name='childLedgerNatures[]' class='childNatureInput' value='" +
                childNatureVal + "'>" + childNatureName + "" +
                "</td>" +
                "<td style='padding: 8px 5px; text-align:right;' class='percentage' >" +
                "<input type='hidden' name='childPercentages[]' class='percentageInput' value='" +
                percentage + "'>" + percentage + "" +
                "</td>" +
                "<td style='padding: 8px 5px; text-align: center;'><a href='javascript:;' class='removeButton'><i class=' glyphicon glyphicon-trash' style='color:red; font-size:14px'><i></a></td>" +
                "</tr>";

            $("#theadRow").append(markup);
        });

        $(document).on('click', '.removeButton', function() {
            $(this).closest('.valueRow').remove();
        });
        $(document).on('input', '#percentage', function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });

        $("#submit").click(function() {
            event.preventDefault();
            $("#submit").prop('disabled', true);
            var csrf = "<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/shikkhaplus/public_html/morning_bird_bk/resources/views/accounting/budgetConfig/addBudgetConfig.blade.php:218
Stack trace:
#0 {main}
  thrown in <b>/home/shikkhaplus/public_html/morning_bird_bk/resources/views/accounting/budgetConfig/addBudgetConfig.blade.php</b> on line <b>218</b><br />