@extends('modules.head') @section('contenido')
    <div class="box-header">
        <h3 class="box-title pull-left">Bin Locations</h3>
        <a href="{{ route('bin_locations.create') }}" class="btn btnAdd pull-right">
            <i class="fa fa-plus"></i>New Bin Location
        </a>
    </div>

    <!-- List forms-->
    <div class="box">
        <div class="box-body table-responsive ">
            <table id="example2" class="table table-bordered table-hover dataTable" role="grid">
                <thead>
                    <tr role="row">
                        <th>Bin Code</th>
                        <th data-autocomplete="{{ App\Warehouse::active()->pluck('code') }}">Warehouse</th>
                        <th data-autocomplete="{{ App\BoBinLocationType::pluck('description') }}">Type Restriction</th>
                        <th data-autocomplete="{{ json_encode([1 => 'Yes', 0 => 'No']) }}">Receiving Bin</th>
                        <th>Minimum Qty</th>
                        <th>Maximum Qty</th>
                        <th data-autocomplete="{{ json_encode([1 => 'Active', 0 => 'Inactive']) }}">Status</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example2 thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#example2 thead');

        $('#example2 thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#example2").dataTable().fnDestroy();
        const _table = $('#example2').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            searchBuilder: true,
            searchDelay: 500,
            "order": [],
            ajax: '{{ route('bin_locations.index') }}',
            columns: [{
                    data: 'bin_code',
                    name: 'bin_code',
                    render: function(data, type, row) { 
                        const isPickable = (row.bo_bin_location_type?.restricted_trans_type == 'brtNoRestrictions');
                        const checkMark = isPickable ? ' <i class="fa fa-check-circle"></i>' : '';
                        return `<a href="/bin_locations/${row.id}/edit">${data}${checkMark}</a>`;
                    }
                },
                {
                    data: 'warehouse.code',
                    name: 'warehouse.code', 
                    render: function(data, type, row) {
                        return row.warehouse.code;
                    }
                },
                {
                    data: 'bo_bin_location_type.description',
                    name: 'boBinLocationType.description'
                },
                {
                    data: 'receive_bin',
                    name: 'receive_bin',
                    render: function(data, type, row) {
                        if (data) {
                            return 'Yes';
                        }
                        return 'No';
                    }
                },
                {
                    data: 'minimum_qty',
                    name: 'minimum_qty'
                },
                {
                    data: 'maximum_qty',
                    name: 'maximum_qty'
                },
                {
                    data: 'active',
                    name: 'bo_bin_locations.active',
                    render: function(data, type, row) {
                        let status = data ? 'Active' : 'Inactive';
                        return `<span class="label label-${data ? 'success' : 'default'}">${status}</span>`;
                    }
                }
            ],
            initComplete: addFiltersForDataTable
        })
    });
</script>