@extends('layouts.master')
@section('title', 'Cash Transactions')
@push('css')

@endpush

@section('content')

    <div class="row">
        <div class="col-xl-12" style="margin-bottom: 10px;">
            <form class="form-inline">
                <div class="form-group ">
                    <label class="col-md-3 control-label">Type: </label>
                    <div class="col-md-9">
                        <div class="form-group">
                            <select data-placeholder="Transaction Type"  name="category_name" class="chosen-select" id="transaction_type" tabindex="2">
                                <option value="All">All</option>
                                <option value="recieve">Received</option>
                                <option value="payment">Payment</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="col-md-3 control-label">Date From: </label>
                    <div class="col-md-9">
                        <div class="form-group">
                            <input type="date" name="date_from" id="date_from" placeholder="ID"
                                   class="form-control" value="2025-12-13">
                        </div>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="col-md-3 control-label">To: </label>
                    <div class="col-md-9">
                        <div class="form-group">
                            <input type="date" name="date_to" id="date_to" placeholder="ID" value="2025-12-13"
                                   class="form-control">
                        </div>
                    </div>
                </div>
            </form>
            <div class="justify-content-end">
                <a class="btn btn-primary" type="submit" onclick="cashTransactionByType()">Search</a>
            </div>
        </div>


    </div>
    <hr/>
        <div class="col-xl-12" id="cashTransactionByAccountShow">
            <div id='loader' style='display: none;text-align: center'>
                <img src='site_image/64x64.gif' width='32px' height='32px'>
            </div>

        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            var table = $('#example').DataTable( {
                lengthChange: false,
                buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
            } );

            table.buttons().container()
                .appendTo( '#example_wrapper .col-md-6:eq(0)' );
        } );
    </script>
    <script>
        function cashTransactionByType() {
            var transaction_type = $('#transaction_type').val();
            var date_to = $('#date_to').val();
            var date_from = $('#date_from').val();

            // alert(transaction_type+'/'+date_to+'/'+date_from);

            $.ajax({
                url: '/accounts/cashTransactionByType/'+transaction_type+'/'+date_to+'/'+date_from ,
                type: 'GET',
                beforeSend  : function() {
                    $('#cashTransactionByAccountShow').html('');
                    $("#loader").show();
                },
                success:(function(response) {
                    console.log(response);
                    $('#cashTransactionByAccountShow').html(response);
                }),
                complete:function(response){
                    $("#loader").hide();
                }
            })

        }
    </script>
@endpush