{{ Form::model($budget, ['route' => ['budgets.update', $budget->id], 'method' => 'PUT']) }}
<div class="modal-body">
    <div class="row">
        <div class="col-md-6 form-group">
            {{ Form::label('name', __('Budget Name'), ['class' => 'form-label']) }}
            {{ Form::text('name', null, ['class' => 'form-control', 'required' => true]) }}
        </div>

        <div class="col-md-6 form-group">
            {{ Form::label('amount', __('Amount'), ['class' => 'form-label']) }}
            {{ Form::number('amount', null, ['class' => 'form-control', 'step' => '0.01', 'required' => true]) }}
        </div>

        <div class="col-md-6 form-group">
            {{ Form::label('scope', __('Scope'), ['class' => 'form-label']) }}
            {{ Form::select('type', ['organisation' => 'Organisation', 'department' => 'Department'], null, ['class' => 'form-control scope-toggle', 'required' => true]) }}
        </div>

        <div class="col-md-6 form-group department-select {{ $budget->scope === 'department' ? '' : 'd-none' }}">
            {{ Form::label('department_id', __('Department'), ['class' => 'form-label']) }}
            {{ Form::select('department_id', $departments, null, ['class' => 'form-control select2']) }}
        </div>

        <div class="col-md-6 form-group">
            {{ Form::label('start_date', __('Start Date'), ['class' => 'form-label']) }}
            {{ Form::date('start_date', null, ['class' => 'form-control']) }}
        </div>

        <div class="col-md-6 form-group">
            {{ Form::label('end_date', __('End Date'), ['class' => 'form-label']) }}
            {{ Form::date('end_date', null, ['class' => 'form-control']) }}
        </div>

        <div class="col-md-12 form-group">
            {{ Form::label('notes', __('Notes'), ['class' => 'form-label']) }}
            {{ Form::textarea('notes', null, ['class' => 'form-control', 'rows' => 3]) }}
        </div>
    </div>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
    <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
</div>
{{ Form::close() }}

<script>
    document.addEventListener('change', e => {
        if (e.target.classList.contains('scope-toggle')) {
            document.querySelector('.department-select').classList.toggle('d-none', e.target.value !==
                'department');
        }
    });
</scri