Viewing File: /home/ubuntu/misabloom-backend-base/resources/views/admin/categories/_form.blade.php

<div class="card card-flush py-4">
	<div class="card-header">
		<div class="card-title m-0">
			<h3 class="fw-bolder m-0"> {{ request()->category_id ? tr('edit_category') : tr('add_category') }} </h3> </div>
		<div class="card-toolbar">
			<div class="d-flex justify-content-end" data-kt-category-table-toolbar="base">
				<a href="{{ route('admin.categories.index') }}" class="btn btn-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"> <span class="svg-icon svg-icon-2"> <i class="las la-list fs-2x"> </i> {{ tr('view_categories')}} </span> </a>
			</div>
		</div>
	</div>
	<hr class="text-gray-500">
	<div class="card-body pt-10">
		<div class="d-flex flex-column gap-5 gap-md-7">
			<form class="form" method="POST" action="{{ route('admin.categories.save') }}" enctype="multipart/form-data">
				<input type="hidden" name="category_id" value="{{ $category->id }}"> 
				@csrf
				<div class="d-flex flex-column flex-md-row gap-5">
					<div class="flex-row-fluid">
						<label class="required form-label">{{ tr('name') }}</label>
						<input class="form-control" type="text" name="name" placeholder="{{ tr('name') }}" value="{{ old('name', $category->name) }}" required title="{{ tr('name') }}" />
					</div>
				</div>

				<div class="d-flex flex-column flex-md-row gap-5 pt-10">
					<div class="flex-row-fluid w-310">
						<label class="form-label">{{ tr('picture') }}</label>
						<label class="text-muted">{{ tr('default_image_note') }}</label>
						<input class="form-control" type="file" name="picture" accept=".png, .jpg, .jpeg" id="mainFile"/>
                        @if($category->picture)
                        	<img class="category-picture" src="{{$category->picture}}" alt="{{$category->name}}" id="imgPreview" />
                        @else
                        	<img class="category-picture" src="" id="imgPreview" /> 
                        @endif
					</div>
				</div>

				<div class="d-flex flex-column flex-md-row gap-5">
					<div class="flex-row-fluid">
						<label class="form-label required">{{ tr('description') }}</label>
						<textarea id="ckeditor_classic" rows="10" class="form-control" name="description" placeholder="{{ tr('description') }}" required title="{{ tr('description') }}" /> {{ old('description', $category->description) }} </textarea>
					</div>
				</div>

				<div class="d-flex justify-content-end mt-10">
					<a href="{{ route('admin.categories.index') }}" class="btn btn-warning btn-active-light-primary me-2 fs-4"><i class="las la-times-circle fs-2x"></i>{{ tr('cancel') }}</a>
					<button type="submit" class="btn btn-primary fs-4"  {{ Setting::get( 'is_demo_control_enabled') ? 'disabled' : ''}}><i class="las la-check-circle fs-2x"></i>{{ tr('submit') }}</button>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
</div>
</div>

<script type="text/javascript">
    mainFile.onchange = e => {
        const [file] = mainFile.files;
        if(file) {
            imgPreview.src = URL.createObjectURL(file)
        }
    }
</script>