@foreach($timeSheetExtras as $timeSheetExtra)
    <div class="col-xs-12">
        <div class="form-group">
            <label class="col-xs-6 text-right">
                <a class="btn btn-rounded btn-sm" onclick="updateTimeSheetExtra({{$timeSheetExtra['id']}})"><i class="fa fa-edit"></i></a>
                <a class="btn btn-rounded btn-sm" onclick="deleteTimeSheetExtra({{$timeSheetExtra['id']}})"><i class="fa fa-minus"></i></a>
                {{$timeSheetExtra['name']}} ({{$timeSheetExtra['calculateType']}} &pound;):
            </label>

            <div class="col-xs-3">
                <input type="text" id="updateTimeSheetExtraValue{{$timeSheetExtra['id']}}"
                       value="{{$timeSheetExtra['value']}}" class="form-control"/>
            </div>
            <div class="col-xs-3">
                <input type="text" id="updateTimeSheetExtraUserValue{{$timeSheetExtra['id']}}"
                       value="{{$timeSheetExtra['userValue']}}" class="form-control"/>
            </div>
        </div>
    </div>
    @if($timeSheetExtra['value']!=$timeSheetExtra['userValue'])
        <script type="text/javascript">
            $('#aTimeSheetToggle'+{{$timeSheetExtra['time_sheet_id']}}).addClass('bg-danger');
        </script>
    @endif

    <script type="text/javascript">
        function updateTimeSheetExtra(timeSheetExtraId) {
            var updateTimeSheetExtraUrl = '{{URL::action("TimeSheetController@updateTimeSheetExtra")}}';
            $.post(updateTimeSheetExtraUrl, {
                timeSheetExtraId: timeSheetExtraId,
                value: $('#updateTimeSheetExtraValue' + timeSheetExtraId).val(),
                userValue: $('#updateTimeSheetExtraUserValue' + timeSheetExtraId).val(),
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                $('#updateTotal' + data['id']).val(data['total']);
                new PNotify({
                    title: 'Time sheet extra updated successfully!',
                    text: '',
                    type: 'success',
                    icon: 'fa fa-info-circle'
                });
            }).fail(function (data) {
                new PNotify({
                    title: 'Time sheet extra updated failed.',
                    text: 'Please retry...',
                    type: 'error',
                    icon: 'fa fa-times-circle-o'
                });
            });
        }

        function deleteTimeSheetExtra(timeSheetExtraId) {
            var deleteTimeSheetExtraUrl = '{{URL::action("TimeSheetController@deleteTimeSheetExtra")}}';
            $.post(deleteTimeSheetExtraUrl, {
                timeSheetExtraId: timeSheetExtraId,
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                $('#updateTotal' + data['id']).val(data['total']);
                listTimeSheetExtra(data['id']);
                new PNotify({
                    title: 'Time sheet extra deleted successfully!',
                    text: '',
                    type: 'success',
                    icon: 'fa fa-info-circle'
                });
            }).fail(function (data) {
                new PNotify({
                    title: 'Time sheet extra deleted failed.',
                    text: 'Please retry...',
                    type: 'error',
                    icon: 'fa fa-times-circle-o'
                });
            });
        }
    </script>
@endforeach