@extends('Layout.master')

@section('title', 'Create a range')

@section('content')

    <section id="content">
        <form method="POST" action="/ranges" role="form" class="vbox form-horizontal clearfix">
            {{ csrf_field() }}
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="."><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="/ranges">Range manager</a></li>
                    <li>Create a range</li>
                </ul>
                <section class="panel panel-default col-md-4 no-padder" style="margin-right:30px;">
                    <header class="panel-heading font-semibold">
                        Create and configure a range
                    </header>
                    <div class="panel-body pull-in">
                        @include('Layout.errors')
                        <div class="col-md-12">
                            <label class="control-label">Range name</label>
                            <input type="text" class="form-control {{ ($errors->has('range-name'))?'input-danger':'' }}" name="range-name" value="{{ old('range-name') }}">
                        </div>
                        <div class="col-md-12">
                            <label class="control-label">Payroll item</label>
                            <select class="form-control {{ ($errors->has('payroll-item'))?'input-danger':'' }}" name="payroll-item">
                                <option value="">Select an income type</option>
                                <option value="1">Allowances</option>
                                <option value="2">Deductions</option>
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="control-label">Calculate Rate/Amount as</label>
                            <select class="form-control {{ ($errors->has('payroll-item'))?'input-danger':'' }}" name="calculation-method">
                                <option value="">Select a calculation method</option>
                                <option value="1">Constant amount</option>
                                <option value="2">Percentage of income</option>
                                <option value="3">Tax (i.e. PAYE)</option>
                            </select>
                        </div>
                        <div class="col-md-12" style="margin-top:10px;">
                            <div class="pull-right">
                                <a href="/ranges"  class="btn btn-default"><i class="fa fa-close"></i>Cancel</a>
                                <button type="submit" class="btn btn-success"><i class="fa fa-save"></i>Save</button>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="panel panel-default col-md-7 range-form no-padder">
                    <header class="panel-heading font-semibold">
                        Add the range classes
                    </header>
                    <div class="panel-body pull-in">
                        <div class="range-class">
                            <div class="col-md-4">
                                <label class="control-label">Lower limit</label>
                                <input type="number" class="form-control {{ ($errors->has('range-lower-limit[]'))?'input-danger':'' }}" name="range-lower-limit[]">
                            </div>
                            <div class="col-md-4">
                                <label class="control-label">Upper limit</label>
                                <input type="number" class="form-control {{ ($errors->has('range-upper-limit[]'))?'input-danger':'' }}" name="range-upper-limit[]" min="0">
                            </div>
                            <div class="col-md-3">
                                <label class="control-label">Rate/Amount</label>
                                <input type="number" class="form-control {{ ($errors->has('range-rate[]'))?'input-danger':'' }}" name="range-rate[]" min="0">
                            </div>
                            <div class="col-md-1" style="padding-top:33px;">
                                <i class="fa fa-close remove-range"></i>
                            </div>
                        </div>
                        <div class="col-md-12 range-class-action-bar" style="margin-top:10px;">
                            <div class="">
                                <span class="btn btn-default new-range"><i class="fa fa-plus-square"></i>New range</span>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </form>
    </section>

@endsection

@section('footer-include')
    <!-- fuelux -->
    <script src="/js/libs/underscore-min.js"></script>
    <script src="/js/fuelux/fuelux.js"></script>
    {{--<script src="js/fuelux/demo.datagrid.js"></script>--}}
    <!-- select2 -->
    <script src="/js/select2/select2.min.js"></script>
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>
        $(document).on('ready', function(){
            $('.new-range').last().on('click', function(){
                let newRange = "" +
                    "<div class=\"range-class\">\n" +
                    "    <div class=\"col-md-4\">\n" +
                    "        <label class=\"control-label\">Lower limit</label>\n" +
                    "        <input type=\"number\" class=\"form-control {{ ($errors->has('range-lower-limit[]'))?'input-danger':'' }}\" name=\"range-lower-limit[]\" min=\"0\">\n" +
                    "    </div>\n" +
                    "    <div class=\"col-md-4\">\n" +
                    "        <label class=\"control-label\">Upper limit</label>\n" +
                    "        <input type=\"number\" class=\"form-control {{ ($errors->has('range-upper-limit[]'))?'input-danger':'' }}\" name=\"range-upper-limit[]\" min=\"0\">\n" +
                    "    </div>\n" +
                    "    <div class=\"col-md-3\">\n" +
                    "        <label class=\"control-label\">Rate/Amount</label>\n" +
                    "        <input type=\"number\" class=\"form-control {{ ($errors->has('range-rate[]'))?'input-danger':'' }}\" name=\"range-rate[]\" min=\"0\">\n" +
                    "    </div>\n" +
                    "    <div class=\"col-md-1\" style=\"padding-top:33px;\">\n" +
                    "        <i class=\"fa fa-close remove-range\"></i>\n" +
                    "    </div>\n" +
                    "</div>";
                $('.range-class-action-bar').before(newRange);
            });

            $(document).on('click', '.remove-range', function(){
                let el = $(this);

                el.parent().parent().remove();
            });
        });
    </script>
@endsection