@extends('layouts.app')
@section('title', __('stock_reconciliation.title'))

@section('content')
    <section class="content-header">
        <br>
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('stock_reconciliation.title')</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-3 col-md-offset-7 col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon bg-light-blue"><i class="fa fa-map-marker"></i></span>
                    {!! Form::select('reconciliation_location_filter', $businessLocations, null, [
                        'class' => 'form-control select2',
                        'id' => 'reconciliation_location_filter',
                    ]) !!}
                </div>
            </div>
            <div class="col-md-2 col-xs-6">
                <div class="form-group pull-right">
                    <div class="input-group">
                        <button type="button" class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm" id="stock_reconciliation_date_filter">
                            <span>
                                <i class="fa fa-calendar"></i> @lang('messages.filter_by_date')
                            </span>
                            <i class="fa fa-caret-down"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <br>
        <div class="row">
            <div class="col-sm-4">
                @component('components.widget')
                    <div class="tw-flex tw-flex-col">
                        <span class="tw-text-gray-500">@lang('stock_reconciliation.total_shortage')</span>
                        <span class="tw-text-2xl tw-font-semibold" id="stock_reconciliation_summary_shortage">
                            <i class="fas fa-sync fa-spin fa-fw"></i>
                        </span>
                    </div>
                @endcomponent
            </div>
            <div class="col-sm-4">
                @component('components.widget')
                    <div class="tw-flex tw-flex-col">
                        <span class="tw-text-gray-500">@lang('stock_reconciliation.total_overage')</span>
                        <span class="tw-text-2xl tw-font-semibold" id="stock_reconciliation_summary_overage">
                            <i class="fas fa-sync fa-spin fa-fw"></i>
                        </span>
                    </div>
                @endcomponent
            </div>
            <div class="col-sm-4">
                @component('components.widget')
                    <div class="tw-flex tw-flex-col">
                        <span class="tw-text-gray-500">@lang('stock_reconciliation.net_impact')</span>
                        <span class="tw-text-2xl tw-font-semibold" id="stock_reconciliation_summary_net">
                            <i class="fas fa-sync fa-spin fa-fw"></i>
                        </span>
                    </div>
                @endcomponent
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                @component('components.widget', ['class' => 'box-primary', 'title' => __('stock_reconciliation.list_title')])
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="stock_reconciliation_table">
                            <thead>
                                <tr>
                                    <th>@lang('messages.action')</th>
                                    <th>@lang('purchase.ref_no')</th>
                                    <th>@lang('messages.date')</th>
                                    <th>@lang('business.location')</th>
                                    <th>@lang('stock_reconciliation.shortage_column')</th>
                                    <th>@lang('stock_reconciliation.overage_column')</th>
                                    <th>@lang('stock_reconciliation.net_column')</th>
                                    <th>@lang('lang_v1.added_by')</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                @endcomponent
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script src="{{ asset('js/stock_reconciliation.js?v=' . $asset_v) }}"></script>
@endsection