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

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang( 'product_commission_rate.product_commission_management' ){{ __(' for ') }} <span class="text-info">{{ $agent->first_name.' '.$agent->last_name }}</span>
        <!-- <small>@lang( 'product_commission_rate.manage_product_commissions' )</small> -->
    </h1>
</section>

<!-- Main content -->
<section class="content">
    @component('components.filters', ['title' => __('report.filters')])
    
    <div class="col-md-3">
        <div class="form-group">
            {!! Form::label('category',  __('product_commission_rate.category') . ':') !!}
                {!! Form::select('category', $categories, null, [
                    'class' => 'form-control select2',
                    'style' => 'width:100%',
                    'placeholder' => __('lang_v1.all_category') 
                ]);     
            !!}

        </div>
    </div>

       
    @endcomponent

    @component('components.widget', ['class' => 'box-primary', 'title' => __( 'product_commission_rate.manage_product_commissions' ). ' for ' . $agent->first_name . ' ' . $agent->last_name ])
        @can('user.create')
            @slot('tool')
            <div class="box-tools">
				<a type="button" class="btn btn-primary btn-flat" data-toggle="modal" 
        data-target="#import_product_commission_modal">@lang('lang_v1.import')</a>
			</div>
                <div class="box-tools">
                    <a class="btn btn-success pull-right margin-left-10" href="{{action([\App\Http\Controllers\ProductCommissionRateController::class, 'exportCommissionExcel'])}}"><i class="fa fa-download"></i> @lang('lang_v1.export_excel')</a>
                </div>
                <div class="box-tools">
                    
                    <button type="button" class="btn btn-block btn-primary btn-modal" 
                            data-href="{{action([\App\Http\Controllers\ProductCommissionRateController::class, 'create'], ['agent_id' => $agent->id])}}" 
                            data-container=".product_commission_rate_create_modal">
                            <i class="fa fa-plus"></i> @lang( 'messages.add' )</button>
                </div>
            @endslot
        @endcan
        @can('user.view')
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="product_commission_rate_table" data-agent-id="{{ $agent_id }}">
                    <thead>
                        <tr>
                            <th>@lang( 'product_commission_rate.product_name' )</th>
                            <th>@lang( 'product_commission_rate.sku' )</th>
                            <th>@lang( 'product_commission_rate.category' )</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( 'product_commission_rate.expiry_date' )</th>
                            <th>@lang( 'messages.action' )</th>
                        </tr>
                    </thead>
                </table>
            </div>
        @endcan
    @endcomponent
    
    <div class="modal fade product_commission_rate_create_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade product_commission_rate_edit_modal" tabindex="-1" role="dialog" 
        aria-labelledby="gridSystemModalLabel">
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="import_product_commission_modal">
	<div class="modal-dialog modal-lg" role="document">
  		<div class="modal-content">
  			<div class="modal-header">
			    <button type="button" class="close no-print" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			    <h4 class="modal-title">@lang('product.import_products')</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-12">
						<strong>@lang( 'product.file_to_import' ):</strong>
					</div>
					<div class="col-md-12">
						<div id="import_product_commission_dz" class="dropzone"></div>
					</div>
					<div class="col-md-12 mt-10">
						<a href="{{ asset('files/import_product_commissions_template.xls') }}" class="btn btn-success" download><i class="fa fa-download"></i> @lang('lang_v1.download_template_file')</a>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h4>{{__('lang_v1.instructions')}}:</h4>
						<strong>@lang('lang_v1.instruction_line1')</strong><br>
		                    @lang('lang_v1.instruction_line2')
		                    <br><br>
						<table class="table table-striped">
		                    <tr>
		                        <th>@lang('lang_v1.col_no')</th>
		                        <th>@lang('lang_v1.col_name')</th>
		                        <th>@lang('lang_v1.instruction')</th>
		                    </tr>
                            <tr>
		                    	<td>1</td>
		                        <td>@lang('product_commission_rate.sku') <small class="text-muted">(@lang('lang_v1.required'))</small></td>
		                        <td></td>
		                    </tr>
		                    <tr>
		                    	<td>2</td>
		                        <td>@lang('product_commission_rate.custom_commission_rate') <small class="text-muted">(@lang('lang_v1.required'))</small></td>
		                        <td></td>
		                    </tr>
		                    <tr>
		                    	<td>3</td>
		                        <td>@lang('product_commission_rate.effective_date') <small class="text-muted">(@lang('lang_v1.optional'))</small></td>
		                        <td>{!! __('lang_v1.date_ins') !!} </td>
		                    </tr>
		                    <tr>
		                    	<td>4</td>
		                        <td>@lang('product_commission_rate.expiry_date') <small class="text-muted">(@lang('lang_v1.optional'))</small></td>
		                        <td>{!! __('lang_v1.date_ins') !!}</td>
		                    </tr>
		                </table>
		            </div>
				</div>
			</div>
			<div class="modal-footer">
      			<button type="button" class="btn btn-primary" id="import_purchase_products"> @lang( 'lang_v1.import' )</button>
      			<button type="button" class="btn btn-default no-print" data-dismiss="modal">@lang( 'messages.close' )</button>
    		</div>
  		</div>
  	</div>
</div>

</section>
<!-- /.content -->
@endsection
@section('javascript')
<script type="text/javascript">
    $(document).ready(function(){
        var agent_id = $('#product_commission_rate_table').data('agent-id');
        $(document).on('click', 'button.remove_product', function(){
            swal({
                title: LANG.sure,
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $(this).closest('tr').remove();
                }
            });
        });

        $(document).on('click', 'button.remove_category', function(){
            swal({
                title: LANG.sure,
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    var $row = $(this).closest('tr');
                    var categoryId = $row.find('input[name="categories[]"]').val();
                    $('.category-product-' + categoryId).remove();
                    $row.remove();
                }
            });
        });
        
   
    
        __page_leave_confirmation('#add_import_commission_form');

        if ($("div#import_product_commission_dz").length) {
            $("div#import_product_commission_dz").dropzone({
                url: base_path + '/import-product-commissions',
                data: {
                    id: 1	
                },
                paramName: 'file',
                autoProcessQueue: false,
                addRemoveLinks: true,
                uploadMultiple: false,
                maxFiles:1,
                init: function() {
                        
                    this.on("maxfilesexceeded", function(file) {
                        this.removeAllFiles();
                        this.addFile(file);
                    });
                    this.on("sending", function(file, xhr, formData){
                        formData.append("agent_id", agent_id);
                        formData.append("row_count", $('#row_count').val());
                    });
                },   
                acceptedFiles: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(file, response) {
                    if(response.success){
                        toastr.success(response.msg);
                        location.reload(); // reload page to see imported data
                    } else {
                        toastr.error(response.msg);
                    }
                },
                error: function(file, response) {
                    toastr.error("Import failed!");
                }

            });
        }

        $(document).on('click', '#import_purchase_products', function(){
            var productDz = Dropzone.forElement("#import_product_commission_dz");
            productDz.processQueue();
        })
            
    });
    
</script>
@endsection