{{--
 * 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>S/N</th>
                    <th>Name</th>
                    {{--<th>Quantity</th>
                    <th>Unit</th>--}}
                    <th>Description</th>
                </tr>
                @forelse($item_group->items as $key => $item)
                    <tr>
                        <td>{{ ++$key }}</td>
                        <td>{{ $item->name }}</td>
                        {{--<td>{{ $item->quatity }}</td>
                        <td>{{ $item->unit }}</td>--}}
                        <td>{{ $item->description }}</td>
                    </tr>
                @empty
                    <tr><td colspan='10'>No data found!</td></tr>
                @endforelse
            </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>{{ ++$key }}</td>
                        <td>{{ $child_group->name }}</td>
                        <td>{{ $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>