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

<div class="card card-flush py-4 overflow-x-hidden">
	<div class="card-header border-0">
		<div class="card-title m-0">
			<h3 class="fw-bolder m-0"> {{ request()->banner_id ? tr('edit_banner') : tr('add_banner') }} </h3> </div>
		<div class="card-toolbar">
			<div class="d-flex justify-content-end" data-kt-banner-table-toolbar="base">
				<a href="{{ route('admin.banners.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-images fs-2x"> </i> {{ tr('view_banners')}} </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.banners.save') }}" enctype="multipart/form-data">
				<input type="hidden" name="banner_id" value="{{ $banner->id }}">
				@csrf

				<div class="d-flex flex-column flex-md-row gap-5">
					<label class="required form-label">{{ tr('type') }} </label>
					<div class="row">
						@if(!request()->banner_id || $banner->type == BANNER)
						<div class="form-check col-md-6">
						  <input class="form-check-input" type="radio" value="{{BANNER}}" name="type" id="banner" @if(old('type') == BANNER || $banner->type == BANNER || $banner->type == '') checked @endif />
						  <label class="form-check-label" for="banner"> {{ tr('banner') }} </label>
						</div>
						@endif
						@if(!request()->banner_id || $banner->type == BANNER_PRODUCT)
						<div class="form-check col-md-6">
						  <input class="form-check-input" type="radio" value="{{BANNER_PRODUCT}}" name="type" id="product" @if(old('type') == BANNER_PRODUCT || $banner->type == BANNER_PRODUCT) checked @endif />
						  <label class="form-check-label" for="product"> {{ tr('product') }} </label>
						</div>
						@endif
					</div>
				</div>
				@if(!request()->banner_id || $banner->type == BANNER_PRODUCT)
				<div @class(['d-flex', 'flex-column', 'flex-md-row', 'gap-5', 'pt-10', 'user_products', 'd-none' => $banner->type == BANNER || $banner->type == '']) id="user_products">
					<div class="fv-row flex-row-fluid">
						<label class="form-label required">{{ tr('product') }}</label>
						<select class="form-control @error('product_id') is-invalid @enderror" id="user-products" name="product_id" title="{{ tr('user_products') }}">
							<option value="" selected disabled> {{ tr('select_product') }} </option>
							@foreach($user_products as $user_product)
								<option value="{{ $user_product->id }}" @if(old('product_id') == $user_product->id || $banner->product_id == $user_product->id) selected @endif>{{ $user_product->name ? : tr('na') }}</option>
							@endforeach
						</select>
					</div>
				</div>
				@endif

				@if(!request()->banner_id || $banner->type == BANNER)
					<div class="d-flex flex-column flex-md-row gap-5 pt-10" id="title"> 
						<div class="fv-row flex-row-fluid">
							<label class="required form-label">{{ tr('title') }}</label>
							<label class="form-label text-muted">({{ tr('max_characters', 255) }})</label>
							<input class="form-control @error('title') is-invalid @enderror" type="text" name="title" placeholder="{{ tr('title') }}" value="{{ old('title', $banner->title) }}" title="{{ tr('title') }}" maxlength="255" />
						</div>
					</div>
					<div class="d-flex flex-column flex-md-row gap-5 pt-10" id="link">
						<div class="fv-row flex-row-fluid">
							<label class="required form-label">{{ tr('link') }}</label>
							<input class="form-control @error('link') is-invalid @enderror" type="text" name="link" placeholder="{{ tr('link') }}" value="{{ old('link', $banner->link) }}" title="{{ tr('link') }}" />
						</div>
					</div>
					<div class="d-flex flex-column flex-md-row gap-5 pt-10" id="picture">
						<div class="flex-row-fluid w-310">
							<label class="form-label required">{{ tr('picture') }}</label>
							<input class="form-control @error('picture') is-invalid @enderror" type="file" name="picture" accept=".png, .jpg, .jpeg" {{$banner->picture ? : ''}} id="mainFile"/>
	                        <img class="img img-thumbnail m-b-20 banner-img img-center" src="{{$banner->picture ? : asset('banner.png')}}" alt="{{$banner->title}}" id="imgPreview" /> 
						</div>
					</div>
					<div class="d-flex justify-content-between flex-wrap">
						<div class="flex-row-fluid">
							<div class="d-flex flex-column flex-md-row gap-5">
								<div class="fv-row flex-row-fluid">
									<div class="d-flex flex-column flex-md-row gap-5 pt-10" id="description">
										<div class="flex-row-fluid">
											<label class="form-label required">{{ tr('description') }}</label>
											<textarea id="ckeditor_classic" rows="10" class="form-control @error('description') is-invalid @enderror" name="description" placeholder="{{ tr('description') }}" title="{{ tr('description') }}" /> {{ old('description', $banner->description) }} </textarea>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				@endif

				<div class="d-flex justify-content-end pt-10">
					<a href="{{ route('admin.banners.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>
</div>

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

<script type="text/javascript">

	var banner = document.getElementById('banner');
	var product = document.getElementById('product');

	var title = document.getElementById('title');
	var link = document.getElementById('link');
	var picture = document.getElementById('picture');
	var description = document.getElementById('description');

	banner.onclick = e => {

		$(".user_products").addClass('d-none');
		title.style.setProperty('display', '');
		link.style.setProperty('display', '');
		picture.style.setProperty('display', '');
		description.style.setProperty('display', '');

	};

	product.onclick = e => {

		$(".user_products").removeClass('d-none');
		title.style.setProperty('display', 'none', 'important');
		link.style.setProperty('display', 'none', 'important');
		picture.style.setProperty('display', 'none', 'important');
		description.style.setProperty('display', 'none', 'important');
		
	};

	if(product.checked && product.value == 2) {

		$(".user_products").removeClass('d-none');
		title.style.setProperty('display', 'none', 'important');
		link.style.setProperty('display', 'none', 'important');
		picture.style.setProperty('display', 'none', 'important');
		description.style.setProperty('display', 'none', 'important');

	}

</script>