@extends('layouts.master')
@section('title', 'Cash View')
@push('css')
    <style>
        .table>tbody>tr>td,
        .table>tbody>tr>th,
        .table>tfoot>tr>td,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>thead>tr>th {
            padding: 3px 8px;
        }

        .balancesheet-table {
            width: 100%;
            border-collapse: collapse;
        }

        .balancesheet-table td,
        .balancesheet-table th {
            border: 1px solid #ccc;
            padding: 5px;
        }

    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-xl-12" style="margin-bottom: 10px;">
            <form class="form-inline">
                <div class="form-group ">
                    <div class="col-md-10">
                        <div class="form-group">
                            <label class="control-label">Date From: </label>
                            <input type="date" name="date_from" id="date_from" placeholder="ID" class="form-control"
                                value="{{ date('Y-m-d') }}">
                        </div>
                    </div>
                </div>
                <div class="form-group ">
                    <div class="col-md-9">
                        <div class="form-group">
                            <label class="control-label">To: </label>
                            <input type="date" name="date_to" id="date_to" placeholder="ID" value="{{ date('Y-m-d') }}"
                                class="form-control">
                        </div>
                    </div>
                </div>
            </form>
            <br>
            <div class="justify-content-end">
                <a class="btn btn-primary" type="submit" onclick="bankTransactionByAccount()">Search</a>
            </div>
        </div>
    </div>
    <hr />
    <div class="col-xl-12" id="bankTransactionByAccountShow">
        <div id='loader' style='display: none;text-align: center'>
            <img src='site_image/64x64.gif' width='32px' height='32px'>
        </div>

    </div>
    <div id="reportshow">

    </div>
    </div>
@endsection

@push('js')
    <script>
        function bankTransactionByAccount() {

            var date_to = $('#date_to').val();
            var date_from = $('#date_from').val();
            $.ajax({
                url: '/accounts/blancesheet/report/' + date_to + '/' + date_from,
                type: 'GET',
                beforeSend: function() {
                    $('#bankTransactionByAccountShow').html('');
                    $("#loader").show();
                },
                success: (function(response) {
                    console.log(response);
                    $('#reportshow').html(response);
                }),
                complete: function(response) {
                    $("#loader").hide();
                }
            })

        }
    </script>
@endpush