@extends('layouts.master')
@section('title', 'Product Ledger')
@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-5 control-label">Products : </label>
                    <div class="col-md-7">
                        <div class="form-group">
                            <select data-placeholder="Account"  name="account_name" class="chosen-select" id="product_id" tabindex="2">
                                @foreach($products as $products)
                                    <option value="{{$products->id}}">{{$products->product_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-8">
                        <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>
            </form>
            <div class="justify-content-end">
                <a class="btn btn-primary" type="submit" onclick="productLedger()">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>
@endsection

@push('js')

    <script>
        function productLedger() {

            var product_id = $('#product_id').val();
            var transaction_type = $('#transaction_type').val();
            var date_to = $('#date_to').val();
            var date_from = $('#date_from').val();
            $.ajax({
                url: '/administration/product_ledger/report/' + product_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