@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>

    <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">
           {!! Form::open(['url' => action([\App\Http\Controllers\Hr\DailyCommissionController::class, 'service_staff_store']), 'method' => 'post', 'id' => 'add_commission_form'  ]) !!}
           <div class="row">
               <div class="col mb-6 mt-2">
                   <div class="form-floating form-floating-outline">
                       <input type="text" name="name" id="name" class="form-control"
                              placeholder="{{__('hr.commission')}}" required>
                       <label for="name">@lang('hr.commission_name')</label>
                   </div>
               </div>

               <div class="col mb-6 mt-2 ">
                   <div class="form-floating form-floating-outline">
                       <select  name="location_id" id="location_id"  class="select2 w-100 form-select form-select-lg" >
                            @php
                               $locations = \App\BusinessLocation::where('business_id',auth()->user()->business_id)->get()
                           @endphp
                           @foreach($locations as $location)
                               <option  value="{{$location->id}}">{{$location->name}}</option>
                           @endforeach
                       </select>
                       <label for="location_id">{{__('business.location')}}</label>
                   </div>
               </div>
               <div class="col-4 mb-6 mt-2 ">
                   <div class="form-floating form-floating-outline">
                       <select  name="target_type" id="target_type"  class="select2  w-100 form-select form-select-lg" >
                            @php
                               $target_type= ['total_amount', 'total_count'];
                           @endphp
                           @foreach($target_type as $type)
                               <option  value="{{$type}}">{{__('hr.'.$type)}}</option>
                           @endforeach
                       </select>
                       <label for="target_type">{{__('hr.target_type')}}</label>
                   </div>
               </div>


           </div>

           <div class="row">

               <div class="col-4 mb-6 mt-2 ">
                   <div class="form-floating form-floating-outline">
                       <select  name="type" id="type"  class="select2 w-100 form-select form-select-lg" >
                            @php
                               $types= ['percentage','fixed'    ];
                           @endphp
                           @foreach($types as $types)
                               <option  value="{{$types}}">{{__('hr.'.$types)}}</option>
                           @endforeach
                       </select>
                       <label for="type">{{__('hr.commission_type')}}</label>
                   </div>
               </div>
               <div class="col-4 mb-6 mt-2">
                   <div class="form-floating form-floating-outline">
                       <input type="number" max="100" min="0" name="assistant_percent" id="assistant_percent" class="form-control"
                              placeholder="{{__('hr.commission')}}" required value="0">
                       <label for="name">@lang('hr.assistant_percent')</label>
                   </div>
               </div>
               <div class="col mb-2">
                   <div class="col mb-6 mt-2 form-floating form-floating-outline">
                       <select id="active" name="active" class="select2 w-100  form-select form-select-lg" data-style="btn-default">
                           <option value="1" >{{__('lang_v1.active')}}</option>
                           <option value="2"  >{{__('lang_v1.inactive')}}</option>
                       </select>
                       <label for="active">{{__('hr.active_status')}}</label>

                   </div>
               </div>
           </div>
           <div class="row">
               <div class="col-4  ">
                   <div class="form-floating form-floating-outline">
                       <select  name="product_type" id="product_type"  class="select2 w-100 form-select form-select-lg" >
                           <option value="0"> {{__('hr.all_product')}}</option>
                           <option value="1"> {{__('hr.category_select')}}</option>
                           <option value="2"> {{__('hr.brand_select')}}</option>
                           <option value="3"> {{__('hr.products_select')}}</option>

                       </select>
                       <label for="product_type">{{__('hr.product_type')}}</label>
                   </div>
               </div>


               <div class="col-4   related_category"  style="display: none;" >
                   <div class="form-floating form-floating-outline">
                       <select  name="product_category_id" id="product_category_id" required class="select2 w-100 form-select form-select-lg" >
                           <option value=""> {{__('messages.please_select')}}</option>
                           @php
                               $categories= \App\Category::where('business_id',auth()->user()->business_id)->get()
                           @endphp
                           @foreach($categories as $category)
                               <option  value="{{$category->id}}">{{$category->name}}</option>
                           @endforeach
                       </select>
                       <label for="department_id">{{__('product.category')}}</label>
                   </div>
               </div>

               <div class="col-4    related_brand"  style="display: none;"  >
                   <div class="form-floating form-floating-outline">
                       <select  name="product_brand_id" id="product_brand_id" required class="select2 w-100 form-select form-select-lg" >
                           <option value=""> {{__('messages.please_select')}}</option>
                           @php
                               $brands= \App\Brands::where('business_id',auth()->user()->business_id)->get()
                           @endphp
                           @foreach($brands as $brand)
                               <option  value="{{$brand->id}}">{{$brand->name}}</option>
                           @endforeach
                       </select>
                       <label for="product_brand_id">{{__('product.brand')}}</label>
                   </div>
               </div>

               <div class="col-8    related_product" style="display: none;"   >
                   <div class="form-floating form-floating-outline">
                       <select  name="product_id[]" id="product_id[]" required class="select2 w-100 form-select form-select-lg" multiple="multiple" >
                           <option value=""> {{__('messages.please_select')}}</option>
                           @php
                               $products= \App\Product::where('business_id',auth()->user()->business_id)
                               ->where('not_for_selling',0)->get()
                           @endphp
                           @foreach($products as $product)
                               <option  value="{{$product->id}}">{{$product->name}}</option>
                           @endforeach
                       </select>
                       <label for="product_id">{{__('barcode.products')}}</label>
                   </div>
               </div>

           </div>

           <div class="row mt-5">

               <table class="table table-responsive" id="target_table">
                   <thead>
                   <tr >
                       <th style="width: 15%;"> {{__('hr.commission_target_rules')}}</th>
                       <th style="width:25%">
                           @lang( 'hr.total_sales_amount_from')
                       </th>
                       <th style="width:25%">
                           @lang( 'hr.total_sales_amount_to')
                       </th>
                       <th style="width:25%">
                           @lang( 'hr.commission_percent')
                       </th>
                       <th style="width:10%">
                           <button type="button" class="btn  btn-label-primary " id="add_target">
                               <i class="fas fa-plus"></i>
                           </button>
                       </th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr>
                       <th style="width: 15%;" class="text-center">
                           <button type="button" class=" btn-link" data-bs-toggle="tooltip" data-bs-placement="top"
                                   data-bs-custom-class="tooltip-primary" title="{{__('hr.target_rules1') }} ">
                               <i class="fa fa-question">1</i>
                           </button>

                           <button type="button" class=" btn-link" data-bs-toggle="tooltip" data-bs-placement="top"
                                   data-bs-custom-class="tooltip-primary" title="{{__('hr.target_rules2') }} ">
                               <i class="fa fa-question">2</i>
                           </button>
                       </th>
                       <td style="width:25%">
                           {!! Form::text('target_start[]', 0, ['class' => 'form-control fieldone input_number', 'required']); !!}
                       </td>
                       <td style="width:25%">
                           {!! Form::text('target_end[]', 0, ['class' => 'form-control fieldtwo   input_number']); !!}
                       </td>
                       <td style="width:10%">
                           {!! Form::text('amount[]', 0, ['class' => 'form-control   input_number', 'required']); !!}
                       </td>

                   </tr>
                   </tbody>
               </table>
           </div>
          <div class="footer-bottom  mt-5">
              <button type="submit" class="btn btn-primary btn-xl" id="add">{{__('messages.save')}}</button>
          </div>
           {!! Form::close() !!}
       </div>
    </div>

    @stop

<table class="hidden" id="sales_target_row_hidden">
            <tr>
                <th style="width: 10%;"></th>
                <td style="width:25%">
                    {!! Form::text('target_start[]', 0, ['class' => 'form-control  fieldone input_number', 'required']); !!}
                </td>
                <td style="width:25%">
                    {!! Form::text('target_end[]', 0, ['class' => 'form-control  fieldtwo input_number']); !!}
                </td>
                <td style="width:25%">
                    {!! Form::text('amount[]', 0, ['class' => 'form-control   input_number', 'required']); !!}
                </td>

                <td style="width:15%">
                    <button type="button" class="btn btn-sm btn-label-danger remove_target"><i class="fas fa-minus"></i></button>

                </td>
            </tr>
        </table>

@section('javascript')

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


            $(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({
                    
                    messages: {

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

            $(document).on('change','#product_type',function(e){
                var product_type=$(this).val();
                if(product_type==1){
                    $(".related_category").show();
                    $(".related_brand").hide();
                    $(".related_product").hide();
                }else if(product_type==2){
                    $(".related_category").hide();
                    $(".related_brand").show();
                    $(".related_product").hide();
                }
                else if(product_type==3){
                    $(".related_category").hide();
                    $(".related_brand").hide();
                    $(".related_product").show();
                }else{
                    $(".related_product").hide();
                    $(".related_brand").hide();
                    $(".related_category").hide();

                }
            });



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

            function checkValue(){

                var maxValueelements = document.getElementsByClassName("fieldtow");
                for (let i = 0; i < maxValueelements.length ; i++) {
                    if(maxValueelements[i].val()  == "" || maxValueelements[i].val()  == null){
                        $("#add_target").prop("disabled", true)
                    }else {
                        $("#add_target").prop("disabled", false)
                    }
                }
            }
        })


    </script>
@stop