| Current File : //home/tradevaly/new.tradevaly.com.bd/resources/views/backend/pages/Banner/add.blade.php |
@extends('backend.ayaan.master')
@section('title') Add Banner @endsection
@section('css')
<!-- select2 css -->
<link href="{{ asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<!-- dropzone css -->
<link href="{{ asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
<style>
.image_preview_container {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(150px, 280px));
justify-content: center;
padding: 25px;
}
.image_preview_container img {
width: 100%;
border: 1px solid #0001;
box-shadow: 0 2px 15px #0001, 0 2px 8px #0001;
border-radius: 4px;
aspect-ratio: 1/1;
object-fit: cover;
}
</style>
@endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Dashboards @endslot
@slot('title') Add Banner @endslot
@endcomponent
<div class="row">
<div class="col-lg-3">
<div class="card all_banner">
<div class="card-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link {{ session()->get('page') == 'home_page' ? 'active':'' }}" href="{{route('admin.component.banner.index')}}">Home Page</a>
</li>
<li class="nav-item">
<a class="nav-link {{ session()->get('page') == 'category_page' ? 'active':'' }}" href="{{route('admin.component.banner.category')}}">Category Page</a>
</li>
<li class="nav-item">
<a class="nav-link {{ session()->get('page') == 'buyers_page' ? 'active':'' }}" href="{{route('admin.component.banner.buyers')}}">Buyers Page</a>
</li>
<li class="nav-item">
<a class="nav-link {{ session()->get('page') == 'product_page' ? 'active':'' }}" href="{{route('admin.component.banner.product')}}">Product Page</a>
</li>
<li class="nav-item">
<a class="nav-link {{ session()->get('page') == 'company_page' ? 'active':'' }}" href="{{route('admin.component.banner.company')}}">Company Page</a>
</li>
<li class="nav-item">
<a class="nav-link {{ session()->get('page') == 'manufacture_page' ? 'active':'' }}" href="{{route('admin.component.banner.manufacture')}}">Manufacture Page</a>
</li>
<li class="nav-item">
<a class="nav-link {{ session()->get('page') == 'contact-banner' ? 'active':'' }}" href="{{route('admin.component.banner.contact')}}">Contact Page</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-body">
<h4 class="card-title">Add Bannner</h4>
<p class="card-title-desc">Fill all information below</p>
<form action="{{url('b2b/component/banner/add')}}" method="POST" enctype="multipart/form-data">@csrf
<div class="row">
<div class="col-sm-12">
<div class="mb-3">
<label for="metadescription">{{translate('Enter Link')}}</label>
<input id="metatitle" name="link" type="text" class="form-control" required>
</div>
</div>
<div class="col-sm-12">
<div class="mb-3">
<label for="metadescription">{{translate('Position')}}</label>
<select name="position" class="form-control">
@if(session()->get('page') == 'home_page')
<option value="slider">Slider</option>
<option value="after-banner-left">After Banner Left</option>
<option value="after-banner-left-center">After Banner Left Center</option>
<option value="after-banner-right-center">After Banner Right Center</option>
<option value="after-banner-right">After Banner Right</option>
<option value="after-category-left">After Category Left</option>
<option value="after-category-right">After Category Right</option>
@elseif(session()->get('page') == 'category_page')
<option value="top_category_banner">Top Category</option>
<option value="bottom_category_banner">Bottom Category</option>
@elseif(session()->get('page') == 'buyers_page')
<option value="top_buyer_banner">Top Buyers</option>
<option value="bottom_buyer_banner">Bottom Buyers</option>
@elseif(session()->get('page') == 'product_page')
<option value="top_product_banner">Top Product</option>
<option value="bottom_product_banner">Bottom Product</option>
@elseif(session()->get('page') == 'company_page')
<option value="top_company_banner">Top Company</option>
<option value="bottom_company_banner">Bottom Company</option>
@elseif(session()->get('page') == 'manufacture_page')
<option value="top_manufacture_banner">Top Manufacture</option>
<option value="bottom_manufacture_banner">Bottom Manufacture</option>
@elseif(session()->get('page') == 'contact-banner')
<option value="contact-banner">Contact Banner</option>
@endif
</select>
</div>
</div>
@if(session()->get('page') == 'category_page')
<div class="col-sm-12">
<div class="mb-3">
<label for="metadescription">{{translate('Category')}}</label>
<select name="category_id" class="form-control">
<option value="">Select a Category</option>
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
</div>
</div>
@endif
<div class="col-md-12">
<div class="mb-3">
<div class="fallback">
<input name="image" type="file" oninput="preview_image(this, '.image_preview_container')" />
</div>
<div class="dz-message needsclick">
<div class="image_preview_container"></div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-wrap gap-2">
<button type="submit" class="btn btn-primary waves-effect waves-light">Save Changes</button>
<button type="submit" class="btn btn-secondary waves-effect waves-light">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
@stop
@section('script')
<script src="{{ asset('/assets/libs/select2/select2.min.js') }}"></script>
<!-- dropzone plugin -->
<script src="{{ asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>
<!-- init js -->
<script src="{{ asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
<script>
function preview_image(F, image_container)
{
let my_container = document.querySelector(image_container);
let new_container = document.createElement('div');
new_container.className = 'image_preview_container';
F = F.files;
F = Array.from(F);
F.forEach(file => {
let my_url = URL.createObjectURL(file);
let my_image = getImage(my_url);
new_container.append(my_image);
});
my_container.replaceWith(new_container);
}
function getImage(url)
{
let img = document.createElement('img');
img.src = url;
img.alt = "Image Not Found";
return img;
}
$(document).on('change', '[name=parent_id]', function() {
var child_id = $(this).val();
get_child(child_id);
});
function get_child(child_id) {
$('[name="sub_id"]').html("");
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: "{{ route('ajax.cat')}}",
type: 'POST',
data: {
sub_id : child_id
},
success: function (response) {
var obj = JSON.parse(response);
if(obj != '') {
$('[name="sub_id"]').html(obj);
}
}
});
}
</script>
@endsection