@extends('layouts.master')
@inject('dateranges', 'App\Services\DateRangePickerService')

@section('page-title')
Stock flow
@endsection

@section('content')

<div class="row" style="margin-bottom: 12px;">
    <form action="{{ action("Stock\StockFlowController@index") }}" method="GET" class="form-inline">

    <div class="col-md-12">
        {{ Form::select('good', $goods, Request::input('good'), ['class' => 'form-control improved-select', 'placeholder' => 'Choose good ...', 'style' => 'height: 34px; width: 250px;']) }}

        {{ Form::select('supplier', $supplier, Request::input('supplier'), ['class' => 'form-control improved-select', 'placeholder' => 'Choose supplier ...', 'style' => 'height: 34px; width: 250px;']) }}

        {{ Form::select('consumer', $consumer, Request::input('consumer'), ['class' => 'form-control improved-select', 'placeholder' => 'Choose consumer ...', 'style' => 'height: 34px; width: 250px;']) }}

        <div class="form-group has-feedback">
            <input type="text" class="form-control" id="filter-datetimerange"  style="width: 100%;">
            <span class="fa fa-calendar form-control-feedback"></span>
        </div>

        <button type="submit" class="btn btn-primary btn-flat">filter</button>

        <input type="hidden" id="filterFrom" name="filterFrom" />
        <input type="hidden" id="filterTo" name="filterTo" />
        <input type="hidden" id="activeTab" name="activeTab" value="{{ $activeTab }}"/>
    </div>

    </form>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="">
                    <a href="#purchases_tab" data-toggle="tab" data-target="#purchases_tab">
                        <i class="fa fa-fw fa-shopping-cart"></i> Purchases
                        <small class="label bg-blue">
                            {{ $purchases->count() }}
                        </small>
                    </a>
                </li>
                <li class="">
                    <a href="#movements_tab" data-toggle="tab" data-target="#movements_tab">
                        <i class="fa fa-fw fa-retweet"></i> Movements
                        <small class="label bg-blue">
                            {{ $movements->count() }}
                        </small>
                    </a>
                </li>
                <li>
                    <a href="#returns_tab" data-toggle="tab" data-target="#returns_tab">
                        <i class="fa fa-fw fa-reply"></i> Returns
                        <small class="label bg-blue">
                            {{ $returns->count() }}
                        </small>
                    </a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane" id="purchases_tab">
                    @include('stock.report.purchases', ['movements' => $purchases])
                </div>

                <div class="tab-pane" id="movements_tab">
                    @include('stock.report.movements', ['movements' => $movements])
                </div>

                <div class="tab-pane" id="returns_tab">
                    @include('stock.report.returns', ['movements' => $returns])
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script type="text/javascript">
$('#filter-datetimerange').daterangepicker({
    timePicker: true,
    timePicker24Hour: true,
    showDropdowns: true,

    startDate: moment('{{ $filterFrom->setTimezone('Asia/Manila')->toIso8601String() }}'),
    endDate: moment('{{ $filterTo->setTimezone('Asia/Manila')->toIso8601String() }}'),

    ranges: {
        @foreach($dateranges->default() as $range)
        '{{ $range["label"] }}': [moment('{{ $range["start"]->toIso8601String() }}'), moment('{{ $range["end"]->toIso8601String() }}')],
        @endforeach
    },
});

$('#filter-datetimerange').on('apply.daterangepicker', function(ev, picker) {
  $('#filterFrom').val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
  $('#filterTo').val(picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
});

$('a[href="' + $('#activeTab').val() +'"]').tab('show');

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('#activeTab').val( $(e.target).data('target'));
});

</script>
@endsection