@extends('modules.head') @section('contenido')
    <div class="header">
        <h3>Tier Pricings</h3>
    </div>
    <div class="box-body table-responsive ">
        <table id="tier_pricings_table" class="table table-bordered table-hover dataTables_wrapper">
            <thead>
            <tr>
                <th>Name</th>
                <th>Range From</th>
                <th>Range To</th>
                <th>Factor Unit</th>
                <th>Factor Volume</th>
                <th>Assignment</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>

    <script>
        $(function () {
            const tier_pricings_table = $('#tier_pricings_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('tier_pricings.index') }}",
                columns: [
                    {data: 'category_group', name: 'categoryGroup.name', render: function (data, type, row) {
                        const url = "{{ route('tier_pricings.show', ['id' => ':id']) }}".replace(':id', row.id);
                        return `<a href="${url}">${row.name}</a>`;
                    }},
                    {data: 'range_from', name: 'range_from'},
                    {data: 'range_to', name: 'range_to'},
                    {data: 'factor_unit', name: 'factor_unit'},
                    {data: 'factor_volume', name: 'factor_volume'},
                    {data: 'automatic', name: 'automatic', render: function (data) {
                        return data ? 'Automatic' : 'Manual';
                    }}
                ]
            });
        })
    </script>

@endsection