@extends('layouts.app')
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
@section('content')
<!-- BEGIN CONTENT -->
<!-- BEGIN PAGE BAR -->

<!-- END PAGE BAR -->

<!-- END PAGE HEADER-->
@if (Session('message'))

    <div class="m-heading-1 border-green m-bordered success-action">

        
        <ul class="success-body">

            <li>{{ Session('message') }}</li>

        </ul>

    </div>

@endif
@if (Session('error'))

    <div class="m-heading-1 border-red m-bordered errors-action">

        <h4 class="error-title"><strong>Whoops!</strong> </h4>
        <ul class="error-body">

            <li>{{ Session('error') }}</li>

        </ul>

    </div>

@endif
@if (count($errors) > 0)

    <div class="m-heading-1 border-red m-bordered errors-action">

        <h4 class="error-title"><strong>Whoops!</strong>  There were some problems with your input</h4>
        <ul class="error-body">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>

    </div>

@endif
<!-- BEGIN TAB PORTLET-->
<div class="row">
    <div class="portlet light bordered">
        <div class="portlet-body">
            <div class="tabbable tabbable-tabdrop">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab1" data-toggle="tab">All Items</a>
                    </li>
                    <li>
                        <a href="#tab2" data-toggle="tab">Service</a>
                    </li>
                    <li>
                        <a href="#tab3" data-toggle="tab">Inventory Part Items</a>
                    </li>
                    <li>
                        <a href="#tab4" data-toggle="tab">Inventory Assembly Items</a>
                    </li>
                    <li>
                        <a href="#tab5" data-toggle="tab">Non inventory Part Items</a>
                    </li>
                    {{--<li>--}}
                        {{--<a href="#tab6" data-toggle="tab">Other Charge Items</a>--}}
                    {{--</li>--}}
                    {{--<li>--}}
                        {{--<a href="#tab7" data-toggle="tab">Subtotal Items </a>--}}
                    {{--</li>--}}
                    {{--<li>--}}
                        {{--<a href="#tab8" data-toggle="tab">Discount Items</a>--}}
                    {{--</li>--}}
                    {{--<li>--}}
                        {{--<a href="#tab9" data-toggle="tab">Payment Items</a>--}}
                    {{--</li>--}}
                    {{--<li>--}}
                        {{--<a href="#tab10" data-toggle="tab">Sales Tax Items</a>--}}
                    {{--</li>--}}
                    {{--<li>--}}
                        {{--<a href="#tab11" data-toggle="tab">Sales Tax Group Items</a>--}}
                    {{--</li>--}}
                    <div class="page-toolbar">
                        <div class="btn-group pull-right">

                            <a href="{{route('item.create')}}">
                                <button id="sample_editable_1_new" class="btn green btn-sm btn-outline">
                                    <i class="fa fa-plus"></i> Add New
                                </button></a>
                        </div>
                    </div>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                <th>Actions</th>
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>

                        </table>
                    </div>
                    <div class="tab-pane " id="tab2">
                        <table id="myTable2" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                <th>Actions</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <table id="myTable3" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                <th>Actions</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab4">
                        <table id="myTable4" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                <th>Actions</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab5">
                        <table id="myTable5" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            {{--</tr>--}}
                            </thead>
                        </table>                    </div>
                    <div class="tab-pane" id="tab6">
                        <table id="myTable6" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>                      </div>
                    <div class="tab-pane" id="tab7">
                        <table id="myTable7" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab8">
                        <table id="myTable8" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab9">
                        <table id="myTable9" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab10">
                        <table id="myTable10" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="tab-pane" id="tab11">
                        <table id="myTable11" class="table table-striped table-bordered " cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>Item Number</th>
                                <th>Item Name</th>
                                <th>Item type</th>
                                <th>Description</th>
                                {{--<th>Account</th>--}}
                                {{--<th>Quantity</th>--}}
                                {{--<th>Rate</th>--}}
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END TAB PORTLET-->

<!-- END CONTENT BODY -->


@stop

@push('scripts')


<script sec=//code.jquery.com/jquery-1.12.4.js"></script>
<script sec=//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script sec="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script sec="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script sec="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>


<script>

    $(document).ready(function() {


        $('table.table').DataTable( {
            ajax:           '{{route("item.index")}}',
            scrollCollapse: false,
            paging:         true,
            autoWidth: false,
            columns: [
            { data: 'number', name: 'number' },
            { data: 'name', name: 'name' },
            { data: 'type', name: 'type' },
            { data: 'description', name: 'description' },
            { data: 'actions', name: 'account' },
//            { data: 'quantity', name: 'quantity' },
//            { data: 'rate', name: 'rate' },


            ]


    } );

        // Apply a search to the second table for the demo
        $('#myTable2').DataTable().search( 'Service' ).draw();
        $('#myTable3').DataTable().search( 'Inventory Part' ).draw();
        $('#myTable4').DataTable().search( 'Inventory Assembly' ).draw();
        $('#myTable5').DataTable().search( 'Non Iventory Part' ).draw();
        $('#myTable6').DataTable().search( 'Other Charge' ).draw();
        $('#myTable7').DataTable().search( 'Group' ).draw();
        $('#myTable8').DataTable().search( 'Discount' ).draw();
        $('#myTable9').DataTable().search( 'Payment' ).draw();
        $('#myTable10').DataTable().search( 'Sales Tax Item' ).draw();
        $('#myTable11').DataTable().search( 'Sales Tax Group' ).draw();
    } );
</script>


@endpush