index.blade.php

<!-- TEMP LOCAL STYLE -->
<style type="text/css">
    .box {
        width: 100%;
    }
    .form-control:focus {
        border-color: #5a47fb !important;
    }
    .select2-container *:focus {
        border : 1px solid #5a47fb;
    }
    span.select2.select2-container {
        width: 100% !important;
    }
    button.btn.btn-default:focus {
        color: #5a47fb !important;
        border : 1px solid #5a47fb;
    }
    button.btn-keyboard:focus {
        box-shadow : 0px 0px 5px 0px black;
    }
    tr.showDetail {
        background: radial-gradient(black, transparent);
    }
    em {
        background: #b4bdce;
        padding: 3px 0px;
    }
    #search{
        margin-bottom: 15px;
    }
    span.select2.select2-container {
        /*width: 200px !important;*/
    }
    tr.tr-hovered:hover {
        background: #ffc8c8 !important;
    }
    tr.tr-hovered:hover + tr.tr-hovered {
        background: #fff !important;
    }
    form#stockCardShow {
        width: 100%;
    }
</style>

<div class="row col-md-12">
    <form action="" id="stockCardShow" method="GET">

        <div class="box-header with-border">

        </div>

        <input type="hidden" name="status" id="status">


        <div class="box-body">
            <div class="row" style="margin-top: 10px; margin-bottom: 5px">
                <div class="col-md-12">

                    <div class="row form-group">
                        <div class="col-sm-2 text-right">
                            <label for="warehouse_id">Warehouse</label>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control" name="warehouse_id" id="warehouse_id">
                                <option value="">-- Select Warehouse --</option>
                                @foreach($data->warehouses as $warehouse)
                                    <option {{$data->filter->warehouse_id == $warehouse->id ? 'selected' : ''}} value="{{$warehouse->id}}">{{$warehouse->warehouse_name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-2 text-right">
                            <label>Item</label>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control item_id" name="item_id" id="item_id" required>
                                <option value="">-- Select Item --</option>
                                @if($data->selected_item)
                                    <option value="{{$data->selected_item->id}}" selected>{{$data->selected_item->text}}</option>
                                @endif
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-2 text-right">
                            <label for="note">From date</label>
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
                                </div>
                                <input type="text" id="from_date" name="from_date" class="form-control fc-datepicker" required="required" value="{{$data->filter->from_date}}" placeholder="dd/mm/yyyy" autocomplete="off">
                            </div>
                        </div>

                        <div class="col-sm-2 text-right">
                            <label for="note">To date</label>
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <i class="typcn typcn-calendar-outline tx-24 lh--9 op-6"></i>
                                </div>
                                <input type="text" id="to_date" name="to_date" class="form-control fc-datepicker" required="required" value="{{$data->filter->to_date}}" placeholder="dd/mm/yyyy" autocomplete="off">
                            </div>
                        </div>

                    </div>

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

        <hr>
        <button type="button" value="show" class="showBtn btn btn-info pull-right btn-keyboard m-2">Show</button>
        <button type="button" onclick="resetFilter()" class="btn btn-danger pull-right btn-keyboard m-2">Reset</button>
        <div class="clearfix"></div>

    </form>

</div>

<div class="box-body" id="data">
</div>


<script>
var urlOriginAdmin = '/admin/products/stock-card-data/';

$(document).ready(function(e) {
    window.loca

    $('.fc-datepicker').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: 'dd/mm/yy'
    });

    $('.showBtn').click(function(e){
        e.preventDefault();
        var status = $(this).val();
        $('#status').val(status);
        $('#stockCardShow').submit();
    });

    $('#stockCardShow').submit(function(e) {
        e.preventDefault();
        formData = $(this).serializeArray();
        $.ajax({
            dataType: 'json',
            method : $(this).attr('method'),
            url : urlOriginAdmin+ 'getData',
            data : formData,
            success : function(response){
                if(response.validator)
                {
                    message = "";
                    $.each(response.validator,function(k,v){
                        $.each(v,function(k1,v1){
                            message+=v1+'<br>';
                        });
                    });

                    toastr["error"](message);
                }
                else {
                    loadData(response);
                }
            }
        })
    })

    initSelect();
})

function initSelect() {
    $('#warehouse_id').select2({
        placeholder: 'Wareouse',
    }).change(function(e){
        $('#item_id').val(null).trigger("change");
    });

    $('#item_id').select2({
        placeholder: 'Item',
        ajax: {
            dataType: 'json',
            url: urlOriginAdmin+'getDataItemsSelect2',
            delay: 10,
            data: function(params) {
                return {
                    term: params.term,
                    warehouse_id: $('#warehouse_id').val(),
                }
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (obj) {
                        return {
                            id: obj.id,
                            text: obj.text,
                        };
                    })
                };
            },
        }
    })
}

function resetFilter() {
    window.history.pushState(null, null, window.location.pathname);
    $('.form-group').find('input,textarea').val('');
    $('.form-group').find('select').val('').trigger('change');
    $('#status').val('show');
    $('#data').html('');
    // $('#stockCardShow').submit();
}

function loadData(data) {
    $('#data').html(data.map(warehouse => (`
        <hr>
        <h4 class="px-3 pb-2 pt-3">${warehouse.warehouse_name}</h4>

            ${warehouse.item.map(item => (`
                <div class="card px-3 m-2" style="width:98.5%">
                    <div class="card-body">
                        <h6 class="card-title">${item.items.item_name}</h6>
                        <div class="table-responsive">
                            <table class="table mg-b-0">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Code</th>
                                        <th>No Ref</th>
                                        <th class="text-right">In</th>
                                        <th class="text-right">Out</th>
                                        <th class="text-right">Balance</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${item.operation.map(op => (`
                                        <tr>
                                            <td>${op.created_at}</td>
                                            <td>${op.operation_code}</td>
                                            <td>${op.doc_ref}</td>
                                            <td class="text-right tx-success">
                                                ${op.type == 'in' ? `+${op.qty}`: ''}
                                            </td>
                                            <td class="text-right tx-danger">
                                                ${op.type == 'out' ? `+${op.qty}`: ''}
                                            </td>
                                            <td class="text-right">${op.balance}</td>
                                        </tr>
                                    `)).join('')}
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3"><strong>Total</strong></td>
                                        <td class="text-right"><strong>${item.total_in}</strong></td>
                                        <td class="text-right"><strong>${item.total_out}</strong></td>
                                        <td class="text-right"><strong>${item.final_balance}</strong></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            `)).join('')}
        <br>`)).join(''));
}
</script>