@component('dashboard.components.modal', ['id' => 'editUserModal', 'title' => 'Bewerk gebruiker'])
    <form method="POST" action="" class="user-action mx-lg-4">
        @method('PUT')
        @csrf

        <div class="form-group row">
            <label class="col-4 col-form-label" for="active">Actief</label>
            <div class="col-8">
                <select class="custom-select user-active" name="active">
                    <option value="0">Nee</option>
                    <option value="1">Ja</option>
                </select>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-4 col-form-label" for="newsletter">Nieuwsbrief</label>
            <div class="col-8">
                <select class="custom-select user-newsletter" name="newsletter">
                    <option value="0">Nee</option>
                    <option value="1">Ja</option>
                </select>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-4 col-form-label" for="fee">Fee</label>
            <div class="col-6">
                <input type="tel" class="form-control user-fee" name="fee" value="" />
            </div>
            <div class="col-2 col-form-label">
                %
            </div>
        </div>

        <div class="form-group row">
            <label class="col-4 col-form-label" for="alloweduser">Henkpen toegestane gebruiker</label>
            <div class="col-8">
                <select class="custom-select user-alloweduser" name="alloweduser">
                    <option value="0">Nee</option>
                    <option value="1">Ja</option>
                </select>
            </div>
        </div>

        <button type="submit" class="btn btn-primary float-right mt-3">Opslaan</button>
    </form>
@endcomponent

@section('scripts')
    @parent

    <script>
        $('#editUserModal').on('show.bs.modal', function(e) {
            var userContent = $(e.relatedTarget).data('user');
  
            $(e.currentTarget).find('.user-action').attr('action', "/users/update/" + userContent.id);
            $(e.currentTarget).find('.user-active option[value=' + userContent.active + ']').prop('selected', true);
            $(e.currentTarget).find('.user-newsletter option[value=' + userContent.newsletter + ']').prop('selected', true);
            $(e.currentTarget).find('.user-fee').val(userContent.fee_percentage);
            $(e.currentTarget).find('.user-alloweduser option[value=' + userContent.alloweduser + ']').prop('selected', true);
        });
    </script>
@endsection