@extends('layouts.app_commissions')
@section('title',__('hr.commissions'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="#">{{__('home.home')}}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="#">{{__('hr.commissions')}}</a>
            </li>
            <li class="breadcrumb-item active">{{__('hr.service_staff_commissions')}}</li>
        </ol>
    </nav>

</section>

<!-- Main content -->

    <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">

        <div class="card-body">
            <div class="add-new">
                <button  class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create_commission_modal">{{__('messages.add')}}</button>
            </div>
            <div class="table-responsive mt-4 " >
                <table class="table table-responsive " id="commission_table">
                    <thead>
                    <tr>
                        <th>@lang('hr.commission')</th>
                        <th>@lang('hr.commissions_type')</th>
                        <th>@lang('product.category')</th>
                        <th>@lang('hr.assistant_percent')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

    </div>


@stop



<div class="modal  fade modal-xl line_details" id="line_details" ></div>

<div class="modal   fade modal-xl product_details" id="product_details" ></div>


@section('javascript')

    <script>
        $(document).ready(function(){


            var commission_table = $('#commission_table').DataTable({
                processing: true,
                serverSide: true,
                fixedHeader: false,
                ajax: {
                    url: '/hr/commissions/daily-commissions/service-staff',

                },
                columns: [
                    {
                        data:'name',
                        name:'name'
                    },
                    {
                        data:'type',
                        name:'type'
                    },{
                        data:'product_category_id',
                        name:'product_category_id'
                    },{
                        data:'assistant_percent',
                        name:'assistant_percent'
                    },
                    {
                        data:'action',
                        name:'action'
                    },
                ],
            });


            $(document).on('submit', 'form#add_commission_form', function(e) {
                e.preventDefault();
                var form = $(this);
                var data = form.serialize();
                $.ajax({
                    method: 'POST',
                    url: $(this).attr('action'),
                    dataType: 'json',
                    data: data,
                    beforeSend: function(xhr) {
                        __disable_submit_button(form.find('button[type="submit"]'));
                    },
                    success: function(result) {
                        if (result.success == true) {
                            $('.create_commission_modal').modal('hide');
                            toastr.success(result.msg);
                            form[0].reset();
                            form.find('button[type="submit"]').removeAttr('disabled');
                            if (typeof(commission_table) != 'undefined') {
                                commission_table.ajax.reload();
                            }


                        } else {
                            $('.create_commission_modal').modal('hide');
                            form[0].reset();
                            toastr.error(result.msg);
                            form.find('button[type="submit"]').removeAttr('disabled');
                        }
                    },
                });
            });

            $(document).on('click', 'button.edit', function() {
                $('div.edit').load($(this).data('href'), function() {
                    $(this).modal('show');
                    $('form#edit_form').submit(function(e) {
                        e.preventDefault();
                        var form = $(this);
                        var data = form.serialize();

                        $.ajax({
                            method: 'POST',
                            url: $(this).attr('action'),
                            dataType: 'json',
                            data: data,
                            beforeSend: function(xhr) {
                                __disable_submit_button(form.find('button[type="submit"]'));
                            },
                            success: function(result) {
                                if (result.success == true) {
                                    $('div.edit').modal('hide');
                                    toastr.success(result.msg);
                                    form[0].reset();
                                    commission_table.ajax.reload();
                                } else {
                                    $('div.edit').modal('hide');
                                    form[0].reset();
                                    toastr.error(result.msg);
                                    form.find('button[type="submit"]').removeAttr('disabled');
                                }
                            },
                        });
                    });
                })
            });


            $(document).on('click', 'button.line_details', function() {
                $('div.line_details').load($(this).data('href'), function() {
                    $(this).modal('show');
                })
            });

            $(document).on('click', 'button.user_details', function() {
                $('div.user_details').load($(this).data('href'), function() {
                    $(this).modal('show');

                })

            });


            $(document).on('click', 'button.product_details', function() {
                $('div.product_details').load($(this).data('href'), function() {
                    $(this).modal('show');
                })
            });
            $(document).on('click', 'button.delete_button', function() {
                swal({
                    title: LANG.sure,
                    text: LANG.confirm_delete,
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                }).then(willDelete => {
                    if (willDelete) {
                        var href = $(this).data('href');
                        var data = $(this).serialize();

                        $.ajax({
                            method: 'DELETE',
                            url: href,
                            dataType: 'json',
                            data: data,
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    commission_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            },
                        });
                    }
                });
            });

            $(document).on('click', '#add_target', function(e) {
                $('#target_table tbody').append($('#sales_target_row_hidden tbody').html());
            });
            $(document).on('click', '.remove_target', function(e) {
                $(this).closest('tr').remove();
            });


            $(function() {
                $("#add_commission_form").validate({
                    errorPlacement: function(error, element) {
                        $(element).append('<li>' + error.text() + '</li>');
                        error.appendTo($('.toast'));

                    },
                    errorElement: 'div',
                    rules: {

                        name: {
                            required: true,
                        },
                        location_id: {
                            required: true,
                        },
                        product_category_id: {
                            required: true,
                        },
                        type: {
                            required: true,
                        },
                        assistant_percent: {
                            required: true,
                        }
                    },
                    messages: {

                        name: {
                            required: '{{__("hr.commission_name") ." : " .__("messages.required")}}'
                        },
                        location_id: {
                            required: '{{__("business.location") ." : " .__("messages.required")}}'
                        },
                        product_category_id: {
                            required: '{{__("product.category") ." : " .__("messages.required")}}'
                        },
                        type: {
                            required: '{{__("hr.commission_type") ." : " .__("messages.required")}}'
                        },
                        assistant_percent: {
                            required: '{{__("hr.assistant_percent") ." : " .__("messages.required")}}'
                        }
                    }
                })
            });

            $('.fieldone').change(function(){
                checkValue();
            });

            $('.fieldtwo').change(function(){
                checkValue();
            });

            function checkValue(){
                var maxValue = $('.fieldtwo').val();
                if(maxValue > 0 && $('.fieldone').val() > maxValue){
                    $('.fieldone').val(maxValue);
                }
            }


        })


    </script>
@stop