@extends('layouts.master')
@section('page_title','View Accounts Transaction')
@section('title','View Accounts Transaction')
@section('main_item','View Accounts Transaction')
@section('sub_item','View Accounts Transaction')
@section('content')

<div class="col-md-12">
    <div class="card">
        <div class="card-body">
            <h4 class="mt-0 header-title">View Account Transaction </h4>
            <form method="POST" action="{{ route('payment-accounts.add_transaction_store') }}"
                enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="card col-md-4">
                        <div class="card-header">
                            Payment Account
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered table-striped">
                                <tbody>
                                    <tr>
                                        <th>
                                            Account Name
                                        </th>
                                        <td>
                                            {{ $payment_account->account_name }}
                                            <input type="hidden" class="form-control account_id" name="account_id" id="account_id" value="  {{ $payment_account->id }}">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Branch
                                        </th>
                                        <td>
                                            @if(!empty($payment_account->branch_id))
                                            {{ $payment_account->branch->branch_name }}
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Amount
                                        </th>
                                        <td>
                                            {{ $amount }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card col-md-8">
                        <div class="card-header">
                            Filters
                        </div>
                        <div class="card-body">
                            <div class="row mg-b-50">
                                <div class="col-lg-5">
                                    <div class="form-group">
                                        <label class="form-control-label">Date Range<span class="tx-danger"></span></label>
                                        <input type="text" class="form-control dates" name="dates" id="dates" placeholder="All Records">
                                    </div>
                                </div>

                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label class="form-control-label">Transaction Type<span
                                            class="tx-danger"></span></label>
                                    <select class="form-control select2 type" data-placeholder="Select" id="type">
                                        <option value="all">All</option>
                                        <option value="credit">Credit</option>
                                        <option value="debit">Debit</option>

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
    <div class="card">
        <div class="card-header">

        </div>

        <div class="card-body">
            <div class="section-wrapper ">


                <div class="table-responsive">
                    <table class="table table-striped mg-b-0" id="transaction_datatable">
                        <thead>
                            <tr>
                                <th> Date</th>
                                <th>ID</th>
                                <th> Type </th>

                                <th>Note</th>
                                <th>Amount</th>


                            </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('scripts')

    <script>

        $(document).ready(function() {


            $('#dates').val('');
            let transaction_table = $('#transaction_datatable').DataTable({
 
                processing: true,
                serverSide: true,
                "autoWidth": false,
                ajax: {
                    url: "{{ route('payment-accounts.index_table') }}",
                    data: function(d) {

                        d.dates = $('#dates').val();
                        d.type = $('#type').val();
                        d.id = $('#account_id').val();


                    }

                },
                columnDefs: [{
                    "targets": [4],
                    "orderable": false,
                    "searchable": false,

                }],
                "fnDrawCallback": function(oSettings) {
                    $.fn.tooltip && $('[data-toggle="tooltip"]').tooltip()
                },
                columns: [{
                        data: 'payment_date',
                        name: 'payment_date'
                    },

                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },

                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },


                ]
            });
            $(document).on('change', '#dates , #type', function() {
                transaction_table.ajax.reload();
            });


        });

    </script>
@endsection