@extends('layouts.main_without_top_button')
@section('title')
    Item
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Unit Of Measurements</li>
    </ul>
@stop
@section('contentinner')
    @include('inventory.items.tabs')
    <div class="tab-content">
        <div class="tab-pane active">
            <div class="msghead" style="margin-bottom: 12px;margin-top: -20px">
                <ul class="msghead_menu">
                    <li class="right btn-group">
                        <button class="btn" style="margin-right: 4px" onclick="create('{{ route('unit_of_measurements.create') }}')"><i
                                    class="icon-plus"></i> NEW UNIT
                        </button>
                    </li>
                </ul>
                <span class="clearall"></span>
            </div><!--msghead-->

            <table class="table table-bordered table-condensed" id="unit_of_measurements">
                <thead>
                <tr>
                    <th class="head0 nosort" style="width: 20px">S/N</th>
                    <th class="head0">Name</th>
                    <th class="head0">Abbreviation</th>
                    <th class="head1">Description</th>
                    <th class="head0" style="width: 20px">Actions</th>
                </tr>
                </thead>
            </table>
        </div>
    </div><!--tabcontent-->


    <script type="text/javascript">
        var oTable = jQuery('#unit_of_measurements').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading  Records...",
                "sZeroRecords": "No units  to display.",
                "sProcessing": "Please wait - loading records...",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{route('unit_of_measurements.datatable')}}',
            },
            scrollY: '45vh',
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            bStateSave: true,
            "columnDefs": [{
                "searchable": false,
                "orderable": false,
                "targets": 0
            }],
            "order": [[1, 'asc']],
            "columns": [
                {data: 'id'},
                {data: 'name'},
                {data: 'abbreviation'},
                {data: 'remarks'},
                {data: 'actions'}
            ],
            "fnDrawCallback": function () {
                jQuery('.delete_unit_of_measure').click(function () {
                    var unit_of_measure_id = jQuery(this).parents('tr').find('.unit_of_measure_id').val();
                    destroy("{{route('unit_of_measurements.destroy','id')}}".replace('id',unit_of_measure_id));
                });

                jQuery('.edit_unit_of_measure').click(function () {
                    var unit_of_measure_id = jQuery(this).parents('tr').find('.unit_of_measure_id').val();
                    var url = "{{route('unit_of_measurements.edit','id')}}".replace('id', unit_of_measure_id);
                    edit(url);
                });
            },
        });

        var mainDataTable = oTable;

        oTable.on('order.dt search.dt', function () {
            oTable.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();

        jQuery('#unit_of_measure_form').on('submit', function (e) {
            e.preventDefault();
            storeOrUpdate(jQuery(this), 'POST');
            jQuery('#add_unit').modal('toggle')
        });
    </script>
@stop