@extends('adminlte::page')
@section('css')
<style>
    /* .center div div label {
        float: right
    } */
    .details-table thead tr th {
        background-color: #00acd6 !important;
    }

    .center {
        width: 50%;
        margin: 0 auto
    }

    .item-circle {
        border: 2px solid #0f323b;
        background-color: #00acd6;
        border-radius: 10%;
        color: white;
        padding: 3px;
        width: 44px;
        margin: 2px;
        display: inline-block;
        text-align: center;
        font-family: roman;
        line-height: 25px;
    }

    .control-item {
        width: 100%;
        max-height: 150px;
        overflow: auto;
    }

    .ul-angency li {
        list-style-type: circle;
        margin-left: 10px;
        line-height: 30px;
        font-weight: bold
    }
</style>
@stop
@section('content')
<?php Fun::lang() ?>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="pull-left">
                    <h3>Assign Inventory</h3>
                </div>
                @can('Assign-Inventory')
                <a href="{{route('assign-inven-to-agency.create')}}" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Assign Inventory</a>
                @endcan
            </div>
        </div>
    </div>
    <div class="box-body">
        <div class="row col-sm-12">
            <div class="table-responsive">
                <table id="table_inventory" class="table table-striped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Inventory Name</th>
                            <th>Total Agency</th>
                            <th>Total Item</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                    <tfoot></tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script type='text/javascript' src="{{asset('assets/scripts/yajrabox-datatable/handlebars.min.js')}}"></script>
<script type='text/javascript' src="{{asset('assets/controller/inventory-stock-detail.js')}}"></script>
<script id="details-template" type="text/x-handlebars-template">
    @verbatim
	    <div style="border-top:2px solid #000;"></div>
	    <table class="table details-table" id="inventory-{{id}}">
	        <thead>
	        <tr>
	        	<th width="300px">No</th>
	            <th width="450px">Accessible Agency</th>
	            <th>Item</th>
	        </tr>
	        </thead>
	    </table>
	@endverbatim
</script>
<script type='text/javascript'>
    $('.main-spinner').show();
    var template = Handlebars.compile($("#details-template").html());
    var table = $('#table_inventory').DataTable({
        ordering: false,
        serverSide: true,
        "lengthMenu": [
            [20, 50, 100, 500, 1000, 2000],
            [20, 50, 100, 500, 1000, 2000]
        ],
        ajax: "{{ route('assign-list-inventory') }}",
        columns: [
            {
                data: 'DT_RowIndex'
            },
            {
                data: "inven"
            },
            {
                data: "agency"
            },
            {
                data: "item"
            },
            {
                data: "action"
            },
        ],
        "initComplete": function(settings, json) {
            $('.main-spinner').hide();
        }
    });
    $.fn.dataTable.ext.errMode = 'throw';
</script>
@endsection