@extends('layouts.app')
@section('title', __( 'product_commission_rate.commission_breakdown' ))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang( 'product_commission_rate.commission_breakdown' ) {{ __(' for ') }} <span class="text-info">{{ $product->name }}</span>
         
    </h1>
</section>

<!-- Main content -->
<section class="content">

    @component('components.widget', ['class' => 'box-primary', 'title' => __( 'product_commission_rate.manage_commission_breakdown' ) ])
        
        @can('user.view')
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="view_custom_commission_rates_table"  >
                    <thead>
                        <tr>
                            <th>@lang( 'product_commission_rate.sales_commission_agent' )</th>
                            <th>@lang( 'product_commission_rate.default_commission_rate' )</th>
                            <th>@lang( 'product_commission_rate.custom_commission_rate' )</th>
                            <th>@lang( 'product_commission_rate.effective_date' )</th>
                            <th>@lang( 'messages.action' )</th>
                           
                        </tr>
                    </thead>
                </table>
            </div>
        @endcan
    @endcomponent
    
    

</section>
<!-- /.content -->
@endsection

@section('javascript')
    <script type="text/javascript">
        $(document).ready(function() {
            let url = $(this).attr('href');
            var view_custom_commission_rates_table = $('#view_custom_commission_rates_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: url,
                    data: function (d) {

                    }
                },
                columns: [
                    { data: 'user_name', name: 'user_name' },
                    { data: 'default_commission_rate', name: 'product_commission_rates.default_commission_rate' },
                    { data: 'commission_value', name: 'product_commission_rates.commission_value' },
                    { data: 'effective_date', name: 'product_commission_rates.effective_date' },
                    { data: 'action', name: 'action' },
                ],
                columnDefs: [
                    {
                        targets: 1,  
                        orderable: false,
                        searchable: false,
                    },
                ]
            });
        })
    
    </script>
@endsection