@php
$name = empty($name) ? "" : $name;
@endphp

<!-- Button trigger modal -->
<a data-toggle="modal" data-target="#EditHour-{{$expense->id}}" id="{{$expense->id}}">
    <span class="glyphicon glyphicon-edit" data-toggle="tooltip" title="Edit" aria-hidden="true"></span>
</a>
<!-- Modal -->
<div class="modal fade get-this-modal" id="EditHour-{{$expense->id}}" tabindex="-1" role="dialog"
     aria-labelledby="resetPassword">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Verander onkosten</h4>
            </div>
            <div class="modal-body">
                @can('lock_expenses')
                    @if(!empty($expense->locked_at))
                        <a href="{{explode('?', $_SERVER['REQUEST_URI'])[0]}}/unlock/{{$expense->id}}"
                           class="btn-default btn">Open dit uur</a>
                    @else
                        <a href="{{explode('?', $_SERVER['REQUEST_URI'])[0]}}/lock/{{$expense->id}}"
                           class="btn-warning btn">Sluit dit uur</a>
                    @endif
                    <hr>
                @endcan
                <form id="editExpenseForm{{$expense->id}}" method="post" action="/expense/{{$expense->id}}">
                    <div class="form-group row">
                        <div class="col-md-12">
                            <input type="text" id="datepicker-{{$expense->id}}" name="date" form="editExpenseForm{{$expense->id}}"
                                   value="{{\Carbon\Carbon::parse($expense->date)->format('d-m-Y')}}"
                                   class="form-control pull-right datepicker">
                        </div>
                    </div>
                    <div class="form-group row" id="hours">
                        <div class="col-md-7">
                            <label class="control-label">Type</label>
                            <select name="expense" id="selectExpense" class="selectpicker form-control" data-live-search="true" form="editExpenseForm{{$expense->id}}">
                                @foreach(\App\Komma\Settings\ExpenseTypes\ExpenseType::all() as $expenseType)
                                    @if($expense->ExpenseType->id == $expenseType->id)
                                        <option value="{{$expenseType->id}}" data-unit-name="{{$expenseType->ExpenseUnit->name}}" selected>{{$expenseType->name}}</option>
                                    @else
                                        <option value="{{$expenseType->id}}" data-unit-name="{{$expenseType->ExpenseUnit->name}}" >{{$expenseType->name}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label id="expenseOrTaskLabel" class="control-label">{{$expense->ExpenseType->ExpenseUnit->name}}</label>
                            <input type="number" name="hours" form="editExpenseForm{{$expense->id}}"
                                   step="0.01" min="0" class="form-control expenseSpinner" data-validation="number"
                                   data-validation-allowing="float"
                                   value="{{$expense->value}}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label class="control-label">Omschrijving</label>
                            <textarea name="description" cols="30" rows="3" form="editExpenseForm{{$expense->id}}"
                                      class="form-control">{{$expense->description ?? old('description')}}</textarea>
                        </div>
                    </div>
                    <input type="hidden" name="_token" value="{{ csrf_token() }}" form="editExpenseForm{{$expense->id}}">
                    <input type="hidden" name="billable" value="1" form="editExpenseForm{{$expense->id}}" form="editExpenseForm{{$expense->id}}">
                    <input type="hidden" name="ref" value="projecten-{{$expense->Subproject->Project->id}}" form="editExpenseForm{{$expense->id}}">
                    <input type="hidden" name="user" value="{{$expense->user_id}}" form="editExpenseForm{{$expense->id}}">
                    <input type="hidden" name="project" value="{{$expense->Subproject->Project->id}}" form="editExpenseForm{{$expense->id}}">
                    <input type="hidden" name="subproject" value="{{$expense->Subproject->id}}" form="editExpenseForm{{$expense->id}}">
                    <input type="hidden" name="_method" value="PUT" form="editExpenseForm{{$expense->id}}">
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Verander onkosten" form="editExpenseForm{{$expense->id}}">
            </div>

        </div>
    </div>
    <script>
        console.log('edit expense');
        $(".expenseSpinner").each(function() {
            $(this).spinner({
                step: 0.01,
                numberFormat: "n",
            });
        });
        $(document).on( "change", "#EditHour-{{$expense->id}} #selectExpense", function () {
            var optionSelected = $("option:selected", this);
            var expenseUnitName = optionSelected.attr('data-unit-name');
            console.log(expenseUnitName);
            $('#EditHour-{{$expense->id}} #expenseOrTaskLabel').text(expenseUnitName);
        });
    </script>
</div>