@extends('admin.layouts.admin')
@section('style')
<style>
.form-group .custom-radio .custom-control-label {
    height: 41px !important;
}
.form-group .custom-radio .custom-control-label:before {
    top: 10px !important;
}
</style>
@endsection
@section('content')
<!-- Page Content-->
<div class="page-content-tab">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">  
                    <div class="float-right">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="javascript:void(0);">Salary</a>
                                </li>
                                <li class="breadcrumb-item active">Incentive Rule</li>
                            </ol>
                        </div>
                    <h4 class="page-title">Create Incentive Rule</h4>
                </div>
                <!--end page-title-box-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <!-- end page title end breadcrumb -->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{{ route('admin.incentive_rules.store') }}" class="row" >
                        @csrf                        
                            <div class="col-md-12">                               
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Products<span class="text-danger">*</span> </label>
                                    <select class="form-control" name="product_id"  id="product_id"  required>
                                        <option value="">Select product</option>
                                        @foreach($products as $product)
                                        <option value="{{ $product->id ?? ''}}"> {{ $product->name ?? '' }}</option> 
                                        @endforeach                                                                            
                                    </select>
                                </div>
                            </div> 
                            <div class="col-md-12">                               
                                    <div class="form-group">
                                        <label for="" class="mb-2 text-bold-600 text-uppercase">Designation<span class="text-danger">*</span> </label>
                                        <select class="form-control" name="designation" id="designation" required >
                                        <option value="">Select Designation</option>                                           
                                            <option value="RM">RM</option>                                                                          
                                            <option value="TL">TL</option>                                                                          
                                        </select>
                                    </div>
                                </div>                           
                            
                            <div class="col-md-12">                               
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Rules Type<span class="text-danger">*</span> </label>
                                    <select class="form-control  " name="rule_type"  id="rule_type"  required>
                                        <option value="">Select Rules Type</option>
                                        <option value="qty">Quantity</option>
                                        <option value="cash">Cash</option>                                                                             
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12" id="qty_type">                               
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Quantity Type<span class="text-danger">*</span> </label>
                                    <div class="form-control" style="border:none;">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="quantity_type" id="inlineRadio1" value="limit">
                                            <label class="form-check-label" for="inlineRadio1">Limit</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="quantity_type" id="inlineRadio2" value="unit">
                                            <label class="form-check-label" for="inlineRadio2">Unit</label>
                                        </div>    
                                    </div>                                
                                </div>
                            </div>
                            <div class="col-md-12" id="unit_price"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Incentive Amount<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control" name="price"  id="price">
                                        
                                </div>
                            </div> 
                            <div id="range_area" style="width: 100%;">
                                <div class="col-md-12">                               
                                    <div class="form-group">
                                        <label for="" class="mb-2 text-bold-600 text-uppercase">Based On<span class="text-danger">*</span> </label>
                                        <select class="form-control" name="based_on"  id="based_on">
                                            <option value="">Select Based On</option>
                                            <option value="percent">Percentage</option>
                                            <option value="amount">Amount</option>                                                                       
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12"> 
                                    <div class="form-group">
                                        <label for="" class="mb-2 text-bold-600 text-uppercase">Range<span class="text-danger">*</span> </label>
                                        <table class="table table-bordered" id="load_education_table">
                                            <thead>
                                            <tr>
                                                <th>Low Limit</th>
                                                <th>High Limit</th>
                                                <th>Amount / Percent</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>  
                                                <tr> 
                                                    <td><input type="text"  name="low_limit[]" class="form-control"></td>
                                                    <td><input type="text"  name="high_limit[]" class="form-control"></td>
                                                    <td><input type="text"  name="range_price[]" class="form-control"></td>
                                                    <td></td>
                                                </tr>
                                            </tbody>
                                        </table>  
                                    </div>
                                    <div class="form-group">
                                        <a id="more_education_btn">
                                        <button type="button" class="btn btn-success float-right"><i class="fa fa-plus"></i></button></a>
                                    </div>
                                    <br>
                                </div>                                                                           
                                
                            </div>
                            <!-- <div class="col-md-12" id="percent_amount">                                
                                <div class="form-group">
                                    <label for="amount" class="mb-2 text-bold-600 text-uppercase">Percentage Value<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control" name="percentage_value" id="percentage_value">                                    
                                </div>
                            </div>
                            <div class="col-md-12"  id="amount_value">                                
                                <div class="form-group">
                                    <label for="amount" class="mb-2 text-bold-600 text-uppercase">Amount<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control " name="amount"  id="amount" >                                    
                                </div>
                            </div> -->

                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">Save</button>
                            </div>
                        </form>

                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end row-->
    </div>
    <!-- container -->
    <footer class="footer text-center text-sm-left">
        &copy; 2023 SSL Wireless <span class="text-muted d-none d-sm-inline-block float-right">Design and Developed by <a href="#">SSL Wireless</a></span>
    </footer>
    <!--end footer-->
</div>
<!-- end page content -->
@endsection
@section('script')

<script type="text/javascript">
  $( document ).ready(function() {
//,    
    $('#qty_type').hide();
    $('#unit_price').hide();
    $('#range_area').hide();

    // $('#percent_amount').hide(); 
    // $('#amount_value').hide();
    $('select#rule_type').on('change', function() {
        if (this.value == 'qty') {
            $('#qty_type').show();
            $('#unit_price').hide();
            $('#range_area').hide();
            $('#load_education_table').empty();
            
                 
        }
        else if (this.value == 'cash') {
            $('#qty_type').hide();
            $('#unit_price').hide();
            $('#range_area').show(); 
            $('#load_education_table').append('<tr>' +
            '<td><input type="text" name="low_limit[]" class="form-control"></td>' +
            '<td><input type="text" name="high_limit[]" class="form-control"></td>' +
            '<td><input type="text" name="range_price[]" class="form-control"></td>' +
            '<td></td>' +
            '</tr>');
            
        }
    });

    $('select#based_on').on('change', function(e) {
        e.preventDefault();
        $('#range_area').show();
        $('#load_education_table').empty();
        $('#load_education_table').append('<tr>' +
            '<td><input   type="text"  name="low_limit[]" class="form-control"></td>' +
            '<td><input   type="text"  name="high_limit[]" class="form-control"></td>' +
            '<td><input   type="text"  name="range_price[]" class="form-control"></td>' +
            '<td></td>' +
            '</tr>');               
        
    });

    $('input:radio[name="quantity_type"]').change(function() {
        if ($(this).val() == 'unit') {
            $('#unit_price').show();
            $('#range_area').hide();
            $('#load_education_table').empty();
            

        } else {
            $('#range_area').show();
            $('#unit_price').hide();
            $('#price').val('');
            $('#load_education_table').append('<tr>' +
            '<td><input   type="text"  name="low_limit[]" class="form-control"></td>' +
            '<td><input   type="text"  name="high_limit[]" class="form-control"></td>' +
            '<td><input   type="text"  name="range_price[]" class="form-control"></td>' +
            '<td></td>' +
            '</tr>');  
        }
    });
   
    
    setTimeout(function() {
        $('#mydiv').fadeOut('fast');
    }, 3000);
  });


  //education
  var count_2 = 1;
    $(document).on('click', "#more_education_btn", function (e) {
        e.preventDefault();
        var html = '';
        html = html +
            '<tr id="loaded_edu_tr_' + count_2 + '">' +
            '<td><input   type="text"  name="low_limit[]" class="form-control"></td>' +
            '<td><input   type="text"  name="high_limit[]" class="form-control"></td>' +
            '<td><input   type="text"  name="range_price[]" class="form-control"></td>' +
            '<td><button  onclick="remove_education(' + count_2 + ')" class="btn btn-danger pull-right"><i class="fa fa-trash"></i></button></td>' +
            '</tr>';
        count_2++;
        $('#load_education_table').append(html);
    });
    
    function remove_education(id) {
        event.preventDefault();
        id = '#loaded_edu_tr_' + id;
        $(id).remove();
    }
  </script>
@endsection