@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Transaction List</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('subcontent')
    <div class="flex items-center mt-8">

        <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-exam" class="btn btn-primary w-24 ml-auto mr-2">
            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
        </a>
        <div style="float: right; width:150px;">
            <select name="account_type" class="form-control" id="transaction_type" data-toggle="tab"
                onchange="filter(this.value)">
                <option value="">All Transactions</option>
                <option value="income" > Income</option>
                <option value="expense" > Expense</option>
                <option value="liable" > Liable</option>
                <option value="fixed" > Fixed Assets</option>
                <option value="current" > Current Assets</option>
                <option value="equity" > Equity</option>
            </select>
        </div>
    </div>

    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Transaction List</h2>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12 table-responsive">
                <table class="table table-bordered transaction_datatable" id="">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Account</th>
                            <th>Ammount</th>
                            <th>Date</th>
                            <th width="100px">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    @include('../pages/transaction/create')
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>

    <script type="text/javascript">
     function account_change(elem){
            alert(elem);
            $.ajax({
                method: 'GET',
                url: "{{ url('/transaction/getaccounts') }}",
                data: {
                    account: elem,
                },
                success: function(response) {
                    jQuery('#accounts').html(response);
                    console.log(response);
                }
            });
        }

       

        $('#transaction_type').change(function() {
            var url = '';
            if (this.value == "income") {
                url = "{{ route('transaction.income') }}";
            } else if (this.value == "expense") {
                url = "{{ route('transaction.expense') }}";
            } else if (this.value == "liable") {
                url = "{{ route('transaction.liable') }}";
            } else if (this.value == "fixed") {
                url = "{{ route('transaction.fixed.asset') }}";
            } else if (this.value == "current") {
                url = "{{ route('transaction.current.asset') }}";
            } else if (this.value == "equity") {
                url = "{{ route('transaction.equity') }}";
            }else{
                url = "{{ route('transaction') }}";
            }
            $('.transaction_datatable').dataTable().fnClearTable();
            $('.transaction_datatable').dataTable().fnDestroy();
            var table = $('.transaction_datatable').DataTable({
                processing: true,
                serverSide: true,
              
                ajax: url,
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'title', name: 'title'},
                    {data: 'account_id', name: 'account_id'},
                    {data: 'amount', name: 'amount'},
                    {data: 'timestamp', name: 'timestamp'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
 
        $(function() {
            var table = $('.transaction_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('transaction') }}",
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'title', name: 'title'},
                    {data: 'account_id', name: 'account_id'},
                    {data: 'amount', name: 'amount'},
                    {data: 'timestamp', name: 'timestamp'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
        

        // function getAccount(elem){
        //     var acc_id = $(this).val();
        //     alert(acc_id);
        //     $.ajax({
        //         method: 'GET',
        //         url: "{{ url('/account/edit') }}",
        //         data: {
        //             id: acc_id,
        //         },
        //         success: function(response) {
        //             jQuery('#account_id').val(response[0]['id']);
        //             jQuery('#editName').val(response[1]);
        //             jQuery('#edit_op_ba').val(response[2]);
        //             jQuery('#accountEdit').html(response[3]);
        //             if(response[0]['debit_account_id'] != 0 && response[0]['debit_account_id'] != '' && response[0]['debit_account_id'] != null){
        //                 jQuery('#debit_from_acc_type').show();
        //                 jQuery('#edit_debit_account_id').html(response[4]);
        //             }
        //             if(response[0]['credit_account_id'] != 0 && response[0]['credit_account_id'] != '' && response[0]['credit_account_id'] != null){
        //                 jQuery('#credit_from_acc_type').show();
        //                 jQuery('#edit_credit_account_id').html(response[5]);
        //             }
        //             if(response[0]['account_type'] == 'income'){
        //                 jQuery('#current_account').show();
        //                 jQuery('#edit_current_account_id').html(response[6]);

        //             }
        //             console.log(response);

        //         }
        //     });
        // }

    </script>
@endsection