@extends('layouts/acc_layout')
@section('title', '| Chart Of Accounts Impairments')
@section('content')

    <div class="row">
        <div class="col-md-12">
            <div class="" style="">
                <div class="">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-options">
                                <a href="{{ Request::url() . '/add' }}" class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-plus-sign addIcon"></i>Add</a>
                            </div>
                            <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Chart
                                Of Accounts Impairments</h3>
                        </div>
                        <div class="panel-body panelBodyView">

                            <!-- Filtering Start-->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        {!! Form::open(['url' => 'charOfAccountsImpairments/', 'role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'fillterForm0', 'method' => 'get']) !!}


                                        <div class="col-md-1">
                                            <div class="form-group" style="">
                                                {!! Form::label('', '', ['class' => 'control-label col-sm-12']) !!}
                                                <div class="col-sm-12" style="padding-top: 13%;">
                                                    {!! Form::submit('Search', ['id' => 'budgetSearchSubmit', 'class' => 'btn btn-primary btn-xs']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2"></div>

                                        {!! Form::close() !!}

                                        <div class="col-md-10"></div>
                                    </div>
                                </div>

                            </div>
                            <!-- filtering end-->

                            <div>
                                <table class="table table-striped table-bordered dt-responsive"
                                    style="color:black; font-size: 11px;">
                                    <thead>
                                        <tr>
                                            <th style="width:2%">SL#</th>
                                            <th style="width:15%;text-align: center;">Impairment Code</th>
                                            <th style="width:15%;text-align: center;">Branch</th>
                                            <th style="width:15%;text-align: center;">Voucher Type</th>
                                            <th style="width:7%;text-align: center;">Effective From</th>
                                            <th style="width:7%;text-align: center;">Effective To</th>
                                            <th style="width:5%" class="">Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {

            var dataTable = $('table').DataTable({
                "sDom": "ltipr", // For removing default Search bar //
                "processing": true,
                "serverSide": true,
                "ordering": false,
                /* "language": {
                    "processing": $('#loadingModal').show(),
                }, */
                "ajax": {
                    "url": "{{ Request::url() }}",
                    "type": "POST",
                    "data": function(d) {
                        var inputs = {};
                        $.each($('form').serializeArray(), function() {
                            inputs[this.name] = this.value;
                        });
                        d.filter = inputs;
                    }
                },

                "columns": [{
                        "data": "sl"
                    },
                    {
                        "data": "impairment_code"
                    },
                    {
                        "data": "branch"
                    },
                    {
                        "data": "voucherType"
                    },
                    {
                        "data": "date_from"
                    },
                    {
                        "data": "date_to"
                    },
                    {
                        "data": "id"
                    }
                ],

                "columnDefs": [{
                    "targets": -1,
                    "data": "id",
                    "render": function(data, type, row) {

                        var viewIcon = '<a href="{{ Request::url() }}/view/' + data +
                            '" class="btn btn-xs btn-success"><i class="fa fa-eye" aria-hidden="true"></i></a>';

                        var updateIcon = '<a href="{{ Request::url() }}/edit/' + data +
                            '" class="btn btn-xs btn-info"><i class="fa fa-edit" aria-hidden="true"></i></a>';

                        // var deleteIcon = '<a onClick="delete_record(\'' + data +
                        //     '\')" class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';

                        var deleteIcon =
                            '<a class="btn btn-xs btn-danger delete-action" data-id=' + data +
                            '><i class="fa fa-trash" aria-hidden="true"></i></a>';

                        return (viewIcon + updateIcon + deleteIcon);
                    }
                }]
            });

            $(document).on('click', '.delete-action', function(e) {
                e.preventDefault();
                var id = $(this).data('id');

                if (confirm('Are You sure to delete this record?')) {
                    $.ajax({
                        type: "POST",
                        url: "{{ Request::url() }}/delete",
                        data: {
                            id: id
                        },
                        dataType: "json",
                        success: function(response) {
                            if (response.responseTitle == 'error') {
                                toastr.warning(response.responseText, response.responseTitle,
                                    opts);
                            } else {
                                toastr.success(response.responseText, response.responseTitle,
                                    opts);
                                dataTable.draw();
                            }
                        },
                        error: function(response) {
                            alert('Something went wrong!');
                        }
                    });
                }
            });

            $("#searchForm").submit(function(e) {
                e.preventDefault();
                dataTable.draw();
            });
        });
    </script>

@endsection