{{--
 * Created by PhpStorm.
 * User: Programmer 1
 * Date: 15-Feb-18
 * Time: 5:05 PM
--}}


<style>
    .widgetcontent .tabs {
        padding: 5px;
        border-top: 1px solid #bbb;
        border-left: 1px solid #bbb;
        border-right: 1px solid #bbb;
        border-bottom: 0;
        border-top: 0;
        background: #f5f5f5;
    }

    .widgetcontent .tabs li {
        border-top: 1px solid #bbb;
        border-left: 1px solid #bbb;
        border-right: 1px solid #bbb;
        border-bottom: 0;
        color: #0e0e0e;
    }

    .widgetcontent .tabs li a {
        color: #0e0e0e;
    }

    .widgetcontent .tabs li a:active {
        color: #51a7c6;
        background-color: #ffffff;
    }
    #tabs div{
        background-color: #ffffff;
    }
    .widgetcontent{
        margin-top: 10px;
    }
</style>

<div class="widgetcontent">
    <div class="tabs">
        <ul class="tabs">
            <li><a href="#tabs-3">Items <span class="badge">{{ $item_group->items->count()  }}</span></a></li>
            <li><a href="#tabs-2">Sub-groups <span class="badge">{{ $item_group->childGroups->count()  }}</span></a></li>
            {{--<li><a href="#tabs-1">Parent Group <span class="badge">{{ $item_group->parentGroup  }}</span></a></li>--}}
        </ul>
        <div id="tabs-3">
            <table class="table table-bordered table-condensed">
                <tr>
                    <th width="03%">S/N</th>
                    <th width="50%">Particulars</th>
                    <th width="10%">Quantity</th>
                    <th width="10%">Unit</th>
                    <th width="10%">Price</th>
                    <th width="10%">Value</th>
                </tr>
                                @forelse($item_group->items as $key => $item)
                                        <tr>
                        <td>{{ ++$key }}</td>
                        <td>{{ $item->name }}</td>
                        <td class="number">{{ number_format($quantity, 2) }}</td>
                        <td>{{ isset($item->unit->name) ? $item->unit->name : '' }}</td>
                        <td class="number">{{ number_format($average_price, 2) }}</td>
                        <td class="number">{{ number_format($amount, 2) }}</td>
                    </tr>
                @empty
                    <tr><td colspan='10'>No data found!</td></tr>
                @endforelse
                <tr>
                    <td></td>
                    <th>Total Amount</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <th class="number">{{ number_format($total_amount, 2) }}</th>
                </tr>
            </table>
        </div>
        <div id="tabs-2">
            <table class="table table-bordered table-condensed">
                <tr>
                    <th>S/N</th>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
                @forelse($item_group->childGroups as $key => $child_group)
                    <tr>
                        <td width="03%">{{ ++$key }}</td>
                        <td width="27%">{{ $child_group->name }}</td>
                        <td width="70%">{{ $child_group->description }}</td>
                    </tr>
                @empty
                    <tr><td colspan='10'>No data found!</td></tr>
                @endforelse
            </table>
        </div>
        {{--<div id="tabs-1">
            <table class="table table-bordered table-condensed">
                <tr>
                    <th>S/N</th>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
                @if(isset($item_group->parentGroup->name))
                    <tr>
                        <td>{{ 1 }}</td>
                        <td>{{ $item_group->parentGroup->name }}</td>
                        <td>{{ $item_group->parentGroup->description }}</td>
                    </tr>
                @else
                    <tr><td colspan='10'>No data found!</td></tr>
                @endif
            </table>
        </div>--}}

    </div><!--#tabs-->
</div><!--widgetcontent-->
<script>
    jQuery('.tabs').tabs();
</script>