@extends('adminlte::page')

@section('content')
@include('administrator.agency-level.form-add-agency-level')
@include('administrator.agency-level.form-edit-agency-level')
<?php Fun::lang()?>
<div class="title-add">
    <div class="page-bar"> 
        <ul class="page-breadcrumb"> 
            <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
            <li><a href="#">Manage Agency Level</a></li>
        </ul> 
    </div>
</div>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-add">
                    <div class="pull-left">
                      <h3>Agency Level</h3>
                    </div>
                    @can('Agency-Level-Create')
                    <span class="button_success btn-circle pull-right btn-add-agency-level" style="cursor: pointer;"><i class="fa fa-plus"></i> Create New</span>
                    @endcan
                </div>
                @can('Agency-Level-Edit')
                <div class="title-add">
                    <span class="button_warning btn-circle pull-right btn-edit-agency-level" style="cursor: pointer;"><i class="fa fa-edit"></i> Update Agency Level</span>
                </div>
                @endcan
            </div>
        </div>
    </div>
    <div class="box-body table-responsive">
        <table id="datatable" class="table  table-bordered table-hover nowrap">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Agency Level</th>
                    <th>Commission Level</th>
                    {{-- <th>Action</th> --}}
                </tr>
            </thead>
            <tbody>
            @foreach($data as $key => $value)
                <tr>
                    <td>{{$key+1}}</td>
                    <td>{{$value->agency_level}}</td>
                    <td>{{$value->commission_level}} %</td>
                    {{-- <td>@can('Agency-Level-Edit')<a href="{{route("agency-level.edit", $value->id)}}"><span class="button_success fa fa-edit"></span></a>@endcan</td> --}}
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection
@section('js')
    <script type="text/javascript">
        $(document).on('click', '.btn-add-agency-level', function() {
            $('#add-agency-level').modal('show');
        });
        $(document).on('click','.btn-edit-agency-level',function(){
            $("#edit-agency-level").modal("show");
        });
        $(document).on('change', '#condition_com_option', function() {
            var id = $(this).find(':selected').val();
            $(".conditions").empty();
            $.ajax({
                type: 'post',
                url: "{{route('get_commission_network_condition')}}",
                dataType: 'json',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "id": id,
                },
                success: function(data) {
                    $(".conditions").empty();
                    var opt = '<option>please select</option>';

                    $.each(data, function(index, value) {
                        opt = '<option value="' + value.commission + '">' + value.commission + '</option>';
                        $('.agent_condition').val(value.condition);
                    });
                    $('.conditions').append(opt);

                }
            });

        });

        var index=2;
        $(document).on("click","#add-more-comm-condition",function(){
            var opt=`<div id="commiss-level${index}" class="row">
                        <div class="col-sm-5">
                            <div class="form-group">
                                <label class="col-sm-4 required control-label">Agency Level</label>
                                <div class="col-sm-8">
                                    <input type="text" name="agency_level[]" class="form-control" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-5 required control-label">Commission Percent</label>
                                <div class="col-sm-7">
                                    <input type="text" name="commission_level[]" class="form-control commission-percentage" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-1">
                            <button type="button" class="btn btn-md btn-danger" index="${index}" title="add more" onclick="remove_row(this)"><i class="glyphicon glyphicon-remove-sign"></i></button>
                        </div>
                    </div>`;
            $(".commission-add-area").append(opt);
            index++;
        });
        function remove_row(obj){
            var index_num=$(obj).attr("index");
            $("#commiss-level"+index_num).remove();
            index--;
            caculate_percentage();
        }
        var index_edit=2;
        $(document).on("click","#add-more-comm-condition-edit",function(){
            var opt=`<div id="commiss-level-edit${index_edit}" class="row">
                        <div class="col-sm-5">
                            <div class="form-group">
                                <label class="col-sm-4 required control-label">Agency Level</label>
                                <div class="col-sm-8">
                                    <input type="text" name="agency_level[]" class="form-control" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-5 required control-label">Commission Percent</label>
                                <div class="col-sm-7">
                                    <input type="text" name="commission_level[]" class="form-control commission-percentage-edit" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-1">
                            <button type="button" class="btn btn-md btn-danger" index="${index_edit}" title="add more" onclick="remove_row_edit(this)"><i class="glyphicon glyphicon-remove-sign"></i></button>
                        </div>
                    </div>`;
            $(".commission-add-area-edit").append(opt);
            index_edit++;
        });
        
        function remove_row_edit(obj){
            var index_num=$(obj).attr("index");
            $("#commiss-level-edit"+index_num).remove();
            index_edit--;
            caculate_percentage_edit();
        }
        caculate_percentage();
        $(document).on("keyup",".commission-percentage",function(){
            caculate_percentage();
        });
        function caculate_percentage(){
            var commission_percentage=0;
            $('.commission-percentage').each(function(){
                commission_percentage+=Number($(this).val());
            });
            $(".commission-percentage-remain").val(100-commission_percentage);
            if(commission_percentage>100||commission_percentage<100){
                $("#btn-submit").attr("disabled","true");
            }else{
                $("#btn-submit").removeAttr("disabled");
            }
        }
        caculate_percentage_edit();
        $(document).on("keyup",".commission-percentage-edit",function(){
            caculate_percentage_edit();
        });
        function caculate_percentage_edit(){
            var index=0;
            var commission_percentage=0;
            $('.commission-percentage-edit').each(function(){
                commission_percentage+=Number($(this).val());
                index++;
            });
            index_edit=index;
            $(".commission-percentage-remain-edit").val(100-commission_percentage);
            if(commission_percentage>100||commission_percentage<100){
                $("#btn-submit-edit").attr("disabled","true");
            }else{
                $("#btn-submit-edit").removeAttr("disabled");
            }
        }
    </script>
@endsection


