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

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

@section('breadcrumb')
<ol class="page-summary">
    <li>
        Beginning: <span class="orders orders-total"><b>@currency($viewModel->beginningValue())</b></span> {{ $currency->symbol }}
    </li>

    <li>
        In: <span class="orders orders-total"><b>@currency($viewModel->inValue())</b></span> {{ $currency->symbol }}
    </li>

    <li>
        Out: <span class="orders orders-payed"><b>@currency($viewModel->outValue())</b></span> {{ $currency->symbol }}
    </li>
    <li>
        Ending: <span class="orders orders-open"><b>@currency($viewModel->endingValue())</b></span> {{ $currency->symbol }}
    </li>
</ol>
@endsection

@section('content')


<div class="row" style="margin-bottom: 12px;">
    <form action="{{ action("Inventory\OverviewController@index", ['division' => $division]) }}" method="GET" class="form-inline">

    <div class="col-md-12">
            {{ Form::select('product', $products, Request::input('product'), ['class' => 'form-control improved-select', 'placeholder' => 'Please choose ...', '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">
                @foreach($viewModel->categories as $category)
                    <li class="{{ $loop->first ? "active" : "" }}">
                        <a href="#@htmlsafeid($category->name)" data-toggle="tab" data-target="#@htmlsafeid($category->name)">
                            {{ $category->name }}
                            <small class="label bg-blue">
                                @currency($category->endingValue()) {{ $currency->symbol }}
                            </small>
                        </a>
                    </li>
                @endforeach
                    <li class="pull-right">


                    </li>
            </ul>

            <div class="tab-content">

                @foreach($viewModel->categories as $category)
                    <div class="tab-pane {{ $loop->first ? "active" : "" }}" id="@htmlsafeid($category->name)">

                        @foreach($category->groups as $group)

                            <b>{{ $group->name }}</b>

                            <table class="table table-hover table-condensed">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th class="text-right">Units at start</th>
                                        <th class="text-right">Units in</th>
                                        <th class="text-right">Units out</th>
                                        <th class="text-right">Units at end</th>
                                        <th class="text-right">Average unit price</th>
                                        <th class="text-right">Total</th>
                                    </tr>
                                </thead>


                                <tbody>
                                    @foreach($group->items->sortBy('goodName') as $good)
                                    <tr>
                                        <td>
                                            {{ $good->goodName }}
                                        </td>
                                        <td class="text-right">@quantity($good->quantityStart) {{ $good->unitName }}</td>
                                        <td class="text-right">@quantity($good->quantityIn) {{ $good->unitName }}</td>
                                        <td class="text-right">@quantity($good->quantityOut) {{ $good->unitName }}</td>
                                        <td class="text-right">@quantity($good->quantityEnd()) {{ $good->unitName }}</td>

                                        <td class="text-right">@currency($good->averageUnitPrice) {{ $currency->symbol }}</td>
                                        <td class="text-right">@currency($good->endingValue()) {{ $currency->symbol }}</td>
                                    </tr>
                                    @endforeach

                                </tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="7" class="text-right">
                                            <i>Total value: </i> @currency($group->endingValue())  {{ $currency->symbol }}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>

                        @endforeach

                    </div>
                @endforeach

            </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