@extends('layouts.app')
@section('title', __('Item Stock Report'))

@section('content')
    <section class="content-header">
        <h1>{{ __('Item Stock Report') }}</h1>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12" id="filter_form">
                @component('components.filters', ['title' => __('report.filters')])
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-map-marker"></i>
                                </span>
                                <select class="form-control select2" id="location_id" name="location_id" multiple>
                                    @foreach ($business_locations as $business_location)
                                        <option value="{{ $business_location->id }}">{{ $business_location->name }} </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('search_product', __('lang_v1.search_product') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-search"></i>
                                </span>
                                <select class="form-control select2" id="product_id" name="product_id">
                                    <option value="">All</option>
                                    @foreach ($products as $product)
                                        <option value="{{ $product->id }}">{{ $product->name }} | {{ $product->sku }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('category_id', __('product.category') . ':') !!}
                            {!! Form::select('category_id', $categories, null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'id' => 'category_id',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('brand_id', __('product.brand') . ':') !!}
                            {!! Form::select('brand_id', $brands, null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'id' => 'product_list_filter_brand_id',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>
                @endcomponent
            </div>
        </div>
        <div class="row" hidden>
            <div class="col-md-12">
                @component('components.widget', ['class' => 'box-solid'])
                    <div class="card">
                        <div class="col-md-4">
                            <h4 id="p_name">Product Name :</h4>
                        </div>
                        <div class="col-md-3">
                            <h4 id="selling_price">Selling Price :</h4>
                        </div>
                    </div>
                @endcomponent
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                @component('components.widget', ['class' => 'box-primary'])
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="items_stock_report_table">
                            <thead>
                                <tr>
                                    <th style="">@lang('Item Name')</th>
                                    <th>@lang('report.current_stock')</th>
                                    <th style="">@lang('purchase.business_location')</th>
                                    <th>@lang('purchase.unit_selling_price')</th>
                                    <th style="">@lang('product.category')</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr class="bg-gray font-17 text-center footer-total">
                                    <td colspan="1"><strong>@lang('sale.total'):</strong></td>
                                    <td id="footer_total_qty" style="text-align: left;"></td>
                                    <td></td>
                                    <td id="footer_unit_price" style="text-align: left;"></td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @endcomponent
            </div>
        </div>
    </section>
@endsection
@section('javascript')
    <script type="text/javascript">
        items_stock_report_table = $('#items_stock_report_table').DataTable({
            dom: "<'row'<'col-md-12 text-center'B>>" + // Centers buttons
                "<'row'<'col-md-6'l><'col-md-6'f>>" +
                "<'row'<'col-md-12'tr>>" +
                "<'row'<'col-md-5'i><'col-md-7'p>>",
            lengthMenu: [
                [25, 50, 100, 500],
                ['25 ', '50 ', '100', '500']
            ],
            buttons: [{
                    extend: 'csv',
                    text: '<i class="fa fa-file-csv" aria-hidden="true""></i> ' + LANG.export_to_csv,
                    className: 'btn-sm',
                    exportOptions: {
                        columns: ':visible',
                    },
                    footer: true,
                },
                {
                    extend: 'excel',
                    text: '<i class="fa fa-file-excel" aria-hidden="true"></i> ' + LANG.export_to_excel,
                    className: 'btn-sm',
                    exportOptions: {
                        columns: ':visible',
                    },
                    footer: true,
                },
                {
                    extend: 'print',
                    text: '<i class="fa fa-print" aria-hidden="true"></i> ' + LANG.print,
                    className: 'btn-sm',
                    exportOptions: {
                        columns: ':visible',
                        stripHtml: true,
                    },
                    footer: true,
                    customize: function(win) {
                        if ($('.print_table_part').length > 0) {
                            $($('.print_table_part').html()).insertBefore($(win.document.body).find(
                                'table'));
                        }
                        if ($(win.document.body).find('table.hide-footer').length) {
                            $(win.document.body).find('table.hide-footer tfoot').remove();
                        }
                        __currency_convert_recursively($(win.document.body).find('table'));
                    }
                },
                {
                    extend: 'colvis',
                    text: '<i class="fa fa-columns" aria-hidden="true"></i> ' + LANG.col_vis,
                    className: 'btn-sm',
                },
            ],
            processing: true,
            serverSide: true,
            ajax: {
                url: '/reports/stock/item',
                data: function(d) {
                    d.location_id = $('select#location_id').val();
                    d.product_id = $('select#product_id').val();
                    d.category_id = $('select#category_id').val();
                    d.brand_id = $('select#product_list_filter_brand_id').val();
                },
            },
            columns: [{
                    data: 'product',
                    name: 'p.name',
                    searchable: false
                },
                {
                    data: 'stock',
                    name: false,
                    searchable: false
                },
                {
                    data: 'location_name',
                    name: 'l.name',
                    searchable: false
                },
                {
                    data: 'unit_price',
                    name: false,
                    searchable: false
                },
                {
                    data: 'category_name',
                    name: 'c.name',
                    searchable: false
                },
            ],
            "footerCallback": function(row, data, start, end, display) {
                var footer_total_items = 0;
                var footer_unit_price = 0;
                for (var r in data) {
                    footer_total_items += $(data[r].stock).data('orig-value') ?
                        parseFloat($(data[r].stock).data('orig-value')) : 0;
                    footer_unit_price += $(data[r].unit_price).data('orig-value') ?
                        parseFloat($(data[r].unit_price).data('orig-value')) : 0;
                }
                var formatted_number = footer_total_items.toLocaleString();
                $('#footer_total_qty').html(formatted_number);
                $('#footer_unit_price').html(__currency_trans_from_en(footer_unit_price));

            },
        });
        $(document).on('change', '#location_id, #product_id, #category_id, #product_list_filter_brand_id', function() {
            items_stock_report_table.ajax.reload();
        });

        $(document).on('change', '#product_id', function() {
            var product_id = $('#product_id').val();
            axios.get('{{ url('/reports/get/product/name/') }}/' + product_id)
                .then(function(data) {
                    $('#p_name').text(data.data.product_name);
                    $('#selling_price').text(data.data.selling_price);
                })
                .catch(function(error) {
                    console.log(error);
                })
        });
        $(document).on('click', '#print_btn', function() {
            $('#filter_form').hide();
            $('#print_btn').hide();
            $("#items_stock_report_table").show();
            window.print();
            $('#filter_form').show();
            $('#print_btn').show();
        });
    </script>
@endsection