@extends('layouts.master')
@section('title', 'Bank Ladger')
@push('css')
    <style>
        .table-scroll {
            position: relative;
            width: 100%;
            z-index: 1;
            max-height: 430px;
            margin: auto;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        #table1 {
            border-collapse: collapse;
            width: 100%;
        }

        #table1 thead {
            background-color: #cbd6e7;
        }

        #table1 th {
            text-align: center;
        }

        #table1 td,
        #table1 th {
            padding: 5px;
            border: 1px solid #909090;
        }

        .table-scroll thead th {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background-color: #0097df;
            color: white;
        }

    </style>
@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-5 control-label"> Customer: </label>
                    <div class="col-md-6">
                        <div class="form-group">
                            <select data-placeholder="Account" name="account_name" class="chosen-select" id="customer_id"
                                tabindex="2">
                                @foreach ($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group ">
                    <label class="col-md-4 control-label">Date From: </label>
                    <div class="col-md-6">
                        <div class="form-group">
                            <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 ">
                    <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="{{ date('Y-m-d') }}"
                                class="form-control">
                        </div>
                    </div>
                </div>
                <div class="form-group" style="margin-left: 25px">
                    <a class="btn btn-primary" type="submit" onclick="bankTransactionByAccount()">Search</a>
                </div>
            </form>
        </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>
@endsection

@push('js')

    <script>
        function bankTransactionByAccount() {

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

        }
    </script>
@endpush