@extends('front.layouts.main')


@section('content')


<div class="container-fluid">
    <br><br>
    <form action="{{ route('expense-search') }}" method="GET">
    <div class="col-md-12 form-row">
        <div class="col-md-3">
            <div class="form-group">
                <label for="">From Date</label>
                <input type="date" class="form-control"   name="fromDate"
                    placeholder="Name, batch ,Product ID" autocomplete="off">

            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label for="">To Date</label>
                <input type="date" class="form-control"   name="toDate"
                    placeholder="Name, batch ,Product ID" autocomplete="off">

            </div>
        </div>

        <div class="col-md-2">
            <button type="submit" class="btn btn-success btn-block " style="margin-top:32px;">Search</button>
        </div>
    </div>
</form>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Expense Type</th>
                <th scope="col">Amount</th>          
                <th scope="col">Received By</th>
                <th scope="col">Payment By</th>
                <th scope="col">Expense Date</th>
                <th scope="col">Purpose</th>
                <th>Month</th>
                <th>
                    Action
                </th>
                
            </tr>
        </thead>
        @foreach($data as $key => $item)
        <tbody>
            <tr>
                <td>{{$item->expensetype}}</td>
                <td>{{$item->amount}}</td>              
                <td>{{$item->receivedby}}</td>
                <td>{{$item->paymentby}}</td>
                <td>{{$item->receiveddate}}</td>              
                <td>{{$item->purpose}}</td>            
                <td>January</td>
                <td>
                    <a href="{{route('edit-expense',[$item->id])}}" class="btn btn-primary fa fa-trash btn-sm">Edit</a>
                    <a href="{{route('delete-expense',[$item->id])}}" class="btn btn-danger fa fa-trash  btn-sm" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>
                </td>
            </tr>
        </tbody>
        @endforeach

        <tr>
            <td>Total</td>
            <td>{{ $total}}</td>
        </tr>
    </table>
</div>
@endsection

@section('js')

<script>
    var $table = $('#table')
    var $remove = $('#remove')
    var selections = []

    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        })
    }

    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.state = $.inArray(row.id, selections) !== -1
        })
        return res
    }

    function detailFormatter(index, row) {
        var html = []
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>')
        })
        return html.join('')
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="fa fa-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="fa fa-trash"></i>',
            '</a>'
        ].join('')
    }

    window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row))
        },
        'click .remove': function (e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            })
        }
    }

    function totalTextFormatter(data) {
        return 'Total'
    }

    function totalNameFormatter(data) {
        return data.length
    }

    function totalPriceFormatter(data) {
        var field = this.field
        return '$' + data.map(function (row) {
            return +row[field].substring(1)
        }).reduce(function (sum, i) {
            return sum + i
        }, 0)
    }

    function initTable() {
        $table.bootstrapTable('destroy').bootstrapTable({
            height: 550,
            locale: $('#locale').val(),
            columns: [
                [{
                    field: 'state',
                    checkbox: true,
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: 'Item ID',
                    field: 'id',
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    footerFormatter: totalTextFormatter
                }, {
                    title: 'Item Detail',
                    colspan: 3,
                    align: 'center'
                }],
                [{
                    field: 'name',
                    title: 'Item Name',
                    sortable: true,
                    footerFormatter: totalNameFormatter,
                    align: 'center'
                }, {
                    field: 'price',
                    title: 'Item Price',
                    sortable: true,
                    align: 'center',
                    footerFormatter: totalPriceFormatter
                }, {
                    field: 'operate',
                    title: 'Item Operate',
                    align: 'center',
                    clickToSelect: false,
                    events: window.operateEvents,
                    formatter: operateFormatter
                }]
            ]
        })
        $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table',
            function () {
                $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)

                // save your data, here just save the current page
                selections = getIdSelections()
                // push or splice the selections if you want to save all data selections
            })
        $table.on('all.bs.table', function (e, name, args) {
            console.log(name, args)
        })
        $remove.click(function () {
            var ids = getIdSelections()
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            })
            $remove.prop('disabled', true)
        })
    }

    $(function () {
        initTable()

        $('#locale').change(initTable)
    })

    function deleteFunction(id) {
        // body...
    }

</script>


@endsection