@extends('Layout.master')

@section('title', 'Edit deductions')

@section('header-include')
    <link rel="stylesheet" href="/js/fuelux/fuelux.css" type="text/css"/>
@endsection

@section('content')

    <section id="content">
        <form method="POST" action="/deductions/{{ $deduction->id }}" role="form" class="vbox form-horizontal clearfix">
            {{ method_field('PATCH') }}
            {{ csrf_field() }}
            <section class="vbox">
                <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="/allowances"><i class="fa fa-home"></i>Deductions</a></li>
                        <li class="active">Edit deduction</li>
                    </ul>
                    <section class="panel panel-default col-md-6 no-padder" style="margin-right:30px;">
                        <header class="panel-heading font-semibold">
                            Edit a deduction
                        </header>
                        <div class="panel-body pull-in">
                            @include('Layout.errors')
                            <div class="col-md-6">
                                <label class="control-label">Deduction name</label>
                                <input type="text" class="form-control {{ ($errors->has('deduction-name'))?'input-danger':'' }}" name="deduction-name" value="{{ $deduction->deduction_name }}">
                            </div>
                            <div class="col-md-6">
                                <label class="control-label">Income type</label>
                                <select class="form-control {{ ($errors->has('deduction-type'))?'input-danger':'' }}" name="deduction-type">
                                    <option value="">Select a deduction type</option>
                                    @foreach($list_items as $item)
                                        @if($item->item_type == 'deduction_type')
                                            @if($deduction->deduction_type && $item->code == $deduction->deduction_type)
                                                <option value="{{ $item->code }}" selected>{{ $item->item }}</option>
                                                @continue
                                            @endif
                                            <option value="{{ $item->code }}">{{ $item->item }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="control-label">Tabulation type</label>
                                <select class="form-control {{ ($errors->has('tabulation-type'))?'input-danger':'' }}" name="tabulation-type" id="tabulation-type">
                                    <option value="">Select a tabulation type</option>
                                    @foreach($list_items as $item)
                                        @if($item->item_type == 'tabulation_type')
                                            @if($deduction->tabulation_type && $item->code == $deduction->tabulation_type)
                                                <option value="{{ $item->code }}" selected>{{ $item->item }}</option>
                                                @continue
                                            @endif
                                            <option value="{{ $item->code }}">{{ $item->item }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="control-label">Tax option</label>
                                <select class="form-control {{ ($errors->has('tax-option'))?'input-danger':'' }}" name="tax-option">
                                    <option value="">Select a tax option</option>
                                    @foreach($list_items as $item)
                                        @if($item->item_type == 'tax_option')
                                            @if($deduction->tax_option && $item->code == $deduction->tax_option)
                                                <option value="{{ $item->code }}" selected>{{ $item->item }}</option>
                                                @continue
                                            @endif
                                            <option value="{{ $item->code }}">{{ $item->item }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 hide" id="range">
                                <label class="control-label">Range</label>
                                <select class="form-control {{ ($errors->has('range'))?'input-danger':'' }}" name="range">
                                    <option value="">Select an income type</option>
                                    @if ($ranges){
                                    @foreach ($ranges as $range)
                                        @if($deduction->range && $range->id == $deduction->range)
                                            <option value="{{ $range->id }}" selected>{{ $range->range_name }}</option>
                                            @continue
                                        @endif
                                        <option value="{{ $range->id }}">{{ $range->range_name }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-12" style="margin-top:10px;">
                                <div class="pull-right">
                                    <a href="/deductions"  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>
            </section>
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </form>
    </section>
    <aside class="bg-light lter b-l aside-md hide" id="notes">
        <div class="wrapper">Notification</div>
    </aside>

@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>--}}
@endsection

@section('j-script')
    <!-- JQuery -->
    <script>
        $(document).on('ready', function(){
            let tabulationTypeEl = $('#tabulation-type');

            if (tabulationTypeEl.val() === '3'){
                $('#range').removeClass('hide');
            }else{
                $('#range').addClass('hide');
            }

            tabulationTypeEl.on('change', function(){
                if ($(this).val() === '3'){
                    $('#range').removeClass('hide');
                }else{
                    $('#range').addClass('hide');
                }
            });
        });
    </script>
@endsection