@extends('Layout.Payslipmaster')

@section('title', 'Deductions')

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

@section('content')

    <section id="content">
        <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 class="active">Deductions</li>
                </ul>
                @include('Layout.messages')
                <section class="panel panel-default">
                    <header class="panel-heading font-bold clearfix">
                        Deductions
                    </header>
                    <div class="table-responsive">
                        <table class="table table-striped m-b-sm datagrid">
                            <thead>
                                <tr>
                                    <th colspan="6">
                                        <div class="row clearfix">
                                            <div class="col-sm-4 m-t-xs m-b-xs">
                                                <div class="input-group search datagrid-search">
                                                    <input type="text" class="input-sm form-control" placeholder="Search">
                                                    <div class="input-group-btn">
                                                        <button class="btn btn-default btn-sm"><i class="fa fa-search"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="pull-right" style="margin:5px 10px 0 0;">
                                                <a href="/deductions/create" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>Create</a>
                                                <a href="/deductions" class="btn btn-info btn-sm"><i class="fa fa-refresh"></i>Refresh</a>
                                            </div>
                                        </div>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="sortable">Code</th>
                                    <th class="sortable">Name</th>
                                    <th class="sortable">Deduction type</th>
                                    <th class="sortable">Tabulation type</th>
                                    <th class="sortable">Tax option</th>
                                    <th class="sortable">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            @if(count($deductions) > 0)
                                @foreach($deductions as $deduction)
                                    <tr id="allowance-row-{{ $deduction->id }}">
                                        <td>DD{{ $deduction->id + 9 }}</td>
                                        <td>{{ $deduction->deduction_name }}</td>
                                        <td>
                                            @foreach($list_items as $item)
                                                @if($deduction->deduction_type == $item->code && $item->item_type == 'deduction_type')
                                                    {{ $item->item }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td>
                                            @foreach($list_items as $item)
                                                @if($deduction->tabulation_type == $item->code && $item->item_type == 'tabulation_type')
                                                    {{ $item->item }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td>
                                            @foreach($list_items as $item)
                                                @if($deduction->tax_option == $item->code && $item->item_type == 'tax_option')
                                                    {{ $item->item }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td>
                                            <a href="/deductions/employees/{{ $deduction->id }}?tblt={{ $deduction->tabulation_type }}"><span class="btn btn-default btn-sm"><i class="fa fa-plus no-margin"></i></span></a>
                                            <a href="/deductions/{{ $deduction->id }}"><span class="btn btn-default btn-sm"><i class="fa fa-eye no-margin"></i></span></a>
                                            <a href="/deductions/{{ $deduction->id }}/edit"><span class="btn btn-default btn-sm"><i class="fa fa-edit no-margin"></i></span></a>
                                            <a href="javascript:void(0)"><span class="btn btn-danger btn-sm" onclick="deleteAllowance($(this), {{ $deduction->id }})"><i class="fa fa-trash no-margin"></i></span></a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6" class="text-center">
                                        Create a new deduction by clicking &apos;Create&apos;
                                    </td>
                                </tr>
                            @endif
                            </tbody>
                            <tfoot>
                            <tr>
                                <th class="row">
                                    <div class="datagrid-footer-left col-sm-6 text-center-xs m-l-n" style="display:none;">
                                        <div class="grid-controls m-t-sm">
                                                <span>
                                                    <span class="grid-start"></span> -
                                                    <span class="grid-end"></span> of
                                                    <span class="grid-count"></span>
                                                </span>
                                            <div class="select grid-pagesize dropup" data-resize="auto">
                                                <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
                                                    <span class="dropdown-label"></span>
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li data-value="5"><a href="#">5</a></li>
                                                    <li data-value="10"><a href="#">10</a></li>
                                                    <li data-value="20" data-selected="true"><a href="#">20</a></li>
                                                    <li data-value="50"><a href="#">50</a></li>
                                                    <li data-value="100"><a href="#">100</a></li>
                                                </ul>
                                            </div>
                                            <span>Per Page</span>
                                        </div>
                                    </div>
                                    <div class="datagrid-footer-right col-sm-6 text-right text-center-xs" style="display:none;">
                                        <div class="grid-pager m-r-n">
                                            <button type="button" class="btn btn-sm btn-default grid-prevpage"><i class="fa fa-chevron-left"></i></button>
                                            <span>Page</span>
                                            <div class="inline">
                                                <div class="input-group dropdown combobox">
                                                    <input class="input-sm form-control" type="text">
                                                    <div class="input-group-btn dropup">
                                                        <button class="btn btn-sm btn-default" data-toggle="dropdown"><i class="caret"></i></button>
                                                        <ul class="dropdown-menu pull-right"></ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <span>of <span class="grid-pages"></span></span>
                                            <button type="button" class="btn btn-sm btn-default grid-nextpage"><i class="fa fa-chevron-right"></i></button>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </section>
            </section>
        </section>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
    </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>

        function deleteAllowance(el, id){
            if(!confirm('Are you sure you want to delete this deduction?')){
                return false;
            }

            let data = "deductionId=" + id;
            let deleteRequest = $.ajax({
                type:'POST',
                url:'deductions/destroy',
                data:data,
                timeout:10000,
                beforeSend:function(){
                    console.log('Started');
                    el.empty().html("<i class='fa fa-circle-o-notch fa-spin'></i>").addClass('disabled');
                },
                success:function(response){
                    el.empty().html("<i class='fa fa-trash no-margin'></i>").removeClass('disabled');
                    if (response.status === 1){
                        $('#allowance-row-' + id).fadeOut(1000);
                    }else{
                        alert(errorMessage);
                        Console.log('Request failed.');
                    }
                },
                error(x,t,m){
                    if (t === "timeout"){
                        deleteRequest.abort();
                        console.log('Request time out');
                    }
                }
            });
        }

        $(document).on('ready', function(){
            //JQuery that requires page to load first goes here.
        });
    </script>
@endsection