@extends('layouts.app-hr')
@section('content')
    <?php Fun::lang()?>
    <div class="top-header">
        <ol class="breadcrumb">
            <li><a href="#">{{__('administrator.Dashboard')}}</a></li>
            <li><a href="{{route('hr-employee-benefit.index')}}">{{__('administrator.employee_benefit')}}</a></li>
        </ol>
    </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>{{__('administrator.employee_benefit')}}</h3>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        {!! Form::open(array('route' => 'hr-employee-benefit.store','method'=>'POST')) !!}
        <div class="row">
            <div class="col-sm-12">
                <div class="master-form ">
                    <div class="title-note">
                        <h3><span class="fa fa-exclamation-triangle"></span> {{__('administrator.employee_benefit')}}
                            <i>({{__('administrator.fields_in_red_are_required')}})</i></h3>
                    </div>
                    <div class="col-sm-offset-3 col-sm-6">
                        <div class="form-group col-sm-12 col-xs-12">
                            <div class="col-sm-3 col-xs-12 ">
                                <label class="required"  for="name">{{__('administrator.employee')}}</label>
                            </div>
                            <div class="col-sm-8">
                                {!! Form::select('employee[]', $emp,null, array('class' => 'form-control select2','required','multiple')) !!}
                            </div>
                        </div>
                        <div class="form-group col-sm-12 col-xs-12">
                            <div class="col-sm-3 col-xs-12 ">
                                <label class="required"  for="name">{{__('administrator.benefit_type')}}</label>
                            </div>
                            <div class="col-sm-8">
                                {!! Form::select('benefit_type', $benefit, null, ['placeholder' => 'Please Select', 'class' => 'form-control select2 benefit_type', 'required']) !!}
                            </div>
                        </div>
                        <div class="form-group col-sm-12 col-xs-12">
                            <table width="100%" class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{__('administrator.name')}}</th>
                                        <th>{{__('administrator.amount')}}</th>
                                        <th style="width: 50px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="tbody-benefit">

                                </tbody>
                            </table>
                        </div>
                        <div class="col-sm-11 col-xs-12">
                            <div class="form-group footer-save">
                                <button type="submit" class=" button_primary pull-right"><span
                                            class="fa fa-save"></span> {{__('administrator.save')}}</button>
                                <button type="button" onClick="history.go(-1)"
                                        class=" button_warning pull-right">
                                    <span class=" fa fa-arrow-circle-left"></span> {{__('administrator.back')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function(){
            $(document).on('change', '.benefit_type', function(){
                var id = $(this).find(':selected').val();
                var check = $(".id" + id).val();

                if(check == null && id != ''){
                    $.ajax({
                        type : "POST",
                        dataType: "JSON",
                        url : "{{route('hr.get-benefit-type')}}",
                        data : {
                            "_token": "{{ csrf_token() }}",
                                "id": id,
                        },
                        success: function(data){
                            var row =  `<tr>
                                            <td class="r-no"></td>
                                            <td>
                                                <input type="hidden" name="benefit_id[]" value="${id}"></input>
                                                <input type="text" name="" value="${data.name}" class="form-control id${id}" readonly></input>
                                            </td>
                                            <td><input type="number" name="amount[]" value="${data.amount}" class="form-control" required></input></td>
                                            <td><button type="button" class="remove_row btn button_danger"><i class="fa fa-trash"></i></button></td>
                                        </tr>`;
                            $('.tbody-benefit').append(row);
                            updateNo();
                        },
                        error: function(){
                            console.log('error');
                        }
                    });
                }
            });
        });
        $(document).ready(function () {
            $(document).on('click', '.remove_row', function () {
                var index_ = $(this).data('index');
                $(this).closest('tr').remove();
            });
        });

        function updateNo()
        {
            $('.r-no').each(function (i,item) {
                $(this).text(i+1);
            });
        }
    </script>
@endsection



