File: /home/bdedition/public_html/core/resources/views/admin/advertise/index.blade.php
@extends('admin.layouts.app')
@section('panel')
<div class="row">
<div class="col-lg-12">
<div class="card b-radius--10">
<div class="card-body p-0">
<div class="table-responsive--sm table-responsive">
<table class="table table--light">
<thead>
<tr>
<th>@lang('Type')</th>
<th>@lang('Size')</th>
<th>@lang('Redirect')</th>
<th>@lang('Status')</th>
<th>@lang('Action')</th>
</tr>
</thead>
<tbody>
@forelse($advertisements as $advertisement)
<tr>
<td>
<span class="fw-bold">
@if ($advertisement->type == Status::BANNER_ADVERTISE)
@lang('Image')
@else
@lang('Script')
@endif
</span>
</td>
<td>{{ $advertisement->size }}</td>
<td>
@if ($advertisement->redirect_url != 'N/A')
<a target="_blank" class="text--info"
href="{{ $advertisement->redirect_url }}">
<i class="las la-external-link-alt"></i>
</a>
@else
{{ __($advertisement->redirect_url) }}
@endif
</td>
<td> @php echo $advertisement->statusBadge @endphp </td>
<td>
<div class="button--group">
<button type="button" class="btn btn-sm btn-outline--primary editBtn"
data-action="{{ route('admin.advertise.store', $advertisement->id) }}"
data-image="{{ getImage(getFilePath('advertisement') . '/' . @$advertisement->content) }}"
data-advertisement="{{ $advertisement }}">
<i class="la la-pen"></i>
@lang('Edit')
</button>
@if ($advertisement->status == Status::DISABLE)
<button type="button"
class="btn btn-sm btn-outline--success confirmationBtn"
data-action="{{ route('admin.advertise.status', $advertisement->id) }}"
data-question="@lang('Are you sure to enable this advertisement?')">
<i class="la la-eye"></i> @lang('Enable')
</button>
@else
<button type="button"
class="btn btn-sm btn-outline--danger confirmationBtn"
data-action="{{ route('admin.advertise.status', $advertisement->id) }}"
data-question="@lang('Are you sure to disable this advertisement?')">
<i class="la la-eye-slash"></i> @lang('Disable')
</button>
@endif
</div>
</td>
</tr>
@empty
<tr>
<td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
@if ($advertisements->hasPages())
<div class="card-footer py-4">
@php echo paginateLinks($advertisements) @endphp
</div>
@endif
</div>
</div>
</div>
<x-confirmation-modal />
<div class="modal fade " id="advertizementModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<i class="las la-times"></i>
</button>
</div>
<form class="form-horizontal disableSubmission" method="post" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>@lang('Advertisement Type')</label>
<select class="form-control select2" data-minimum-results-for-search="-1"
id="advertisementType" name="type" required>
<option value="" selected disabled>@lang('Select One')</option>
<option value="{{ Status::BANNER_ADVERTISE }}">@lang('Image')</option>
<option value="{{ Status::SCRIPT_ADVERTISE }}">@lang('Script')</option>
</select>
</div>
</div>
<div class="col-lg-12" id="imageSize">
<div class="form-group">
<div class="image-size">
<label>@lang('Size')</label>
<select class="form-control select2" data-minimum-results-for-search="-1"
name="size">
<option value="" selected>@lang('Select One')</option>
<option value="728x90">@lang('728x90')</option>
<option value="980x90">@lang('980x90')</option>
<option value="980x120">@lang('980x120')</option>
<option value="300x250">@lang('300x250')</option>
<option value="300x600">@lang('300x600')</option>
</select>
</div>
</div>
</div>
<div class="col-lg-12 d-none" id="advertizementImage">
<div class="form-group">
<label> @lang('Image')</label>
<x-image-uploader name="image" :imagePath="siteLogo() . '?' . time()" :size="false" class="w-100"
id="imageUpload" :required="false" :accept="'.png, .jpg, .jpeg, .gif'" />
</div>
<div class="form-group">
<label class="required">@lang('Redirect Url') </label>
<input type="text" class="form-control" name="redirect_url"
placeholder="@lang('Redirect Url')">
</div>
</div>
<div class="col-lg-12 d-none" id="advertisementScript">
<div class="form-group">
<label class="font-weight-bold required">@lang('Script')</label>
<textarea name="script" class="form-control" rows="5"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn--primary w-100 h-45">@lang('Submit')</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@push('breadcrumb-plugins')
<x-search-form />
<button type="button" class="btn btn-sm h-45 btn-outline--primary addAdvertisement"
data-action="{{ route('admin.advertise.store') }}">
<i class="la la-plus"></i>@lang('Add New')
</button>
@endpush
@push('script')
<script>
(function($) {
let backgroundImage = '';
$('.addAdvertisement').on('click', function() {
backgroundImage = '';
let modal = $('#advertizementModal');
let data = $(this).data();
modal.find(".modal-title").text("@lang('Add Advertisement')");
modal.find('form')[0].reset();
modal.find('form').attr('action', data.action);
$('#advertisementType').val(1).change();
$('#imageSize').find('select').val('728x90').change();
$('#advertizementImage').removeClass('d-none').addClass('d-block');
placeholderImage('728x90');
changeImagePreview();
$('#advertisementScript').removeClass('d-block').addClass('d-none');
modal.modal('show');
});
$('#advertisementType').on('change', function() {
let advertizementType = $('#advertisementType').val();
if (advertizementType == 1) {
$('#imageSize').find('select').val('728x90');
$('#advertizementImage').removeClass('d-none').addClass('d-block');
placeholderImage('728x90');
changeImagePreview();
$('#advertisementScript').removeClass('d-block').addClass('d-none');
} else {
$('#advertizementImage').removeClass('d-block').addClass('d-none');
$('#advertisementScript').removeClass('d-none').addClass('d-block');
$('[name="script"]').val('');
}
});
$('#imageSize').on('change', function() {
let imageSize = $(this).find('select');
let type = $("#advertisementType").val();
if (type == null || type.length <= 0) {
alert("@lang('Please first select type')")
$("#advertisementType").focus();
imageSize.val("");
return;
}
if (type == 1) {
placeholderImage(imageSize.val());
changeImagePreview();
$('#advertizementImage').removeClass('d-none');
$('#advertizementImage').addClass('d-block');
}
});
$('.editBtn').on('click', function() {
let modal = $('#advertizementModal');
let data = $(this).data();
modal.find(".modal-title").text("@lang('Edit Advertisement')");
modal.find('form')[0].reset();
modal.find('form').attr('action', data.action);
let advertisementType = modal.find("#advertisementType");
advertisementType.val(data.advertisement.type).change();
$('[name=size]').val(data.advertisement.size).change();
advertisementType.find('option').not(':selected');
if (data.advertisement.type == 1) {
let imageSize = modal.find("#imageSize").find("select");
imageSize.val(data.advertisement.size);
imageSize.find('option').not(':selected');
$('#imageSize').addClass('d-block');
$('#imageSize').removeClass('d-none');
backgroundImage = $(this).data('image');
$(modal).find('.image-upload-preview').css('background-image',
`url(${backgroundImage})`);
$(modal).find('.image-upload').css('display', 'block')
modal.find('input[name="redirect_url"]').val(data.advertisement.redirect_url)
modal.find('textarea[name=script]').val("");
changeImagePreview();
} else {
$('#advertizementImage').removeClass('d-block').addClass('d-none');
$('#advertisementScript').removeClass('d-none').addClass('d-block');
$('textarea[name=script]').val(data.advertisement.content);
$(modal).find('.profilePicPreview').css('background-image', `url("")`);
}
modal.modal('show');
});
function placeholderImage(imageSize) {
let placeholderImageUrl = `{{ route('placeholder.image', ':size') }}`;
$('.image-upload').css('display', 'block')
$('.image-upload-preview').css('background-image',
`url(${backgroundImage != '' ? backgroundImage : placeholderImageUrl.replace(':size',imageSize)})`
);
$('#advertisement__image_size').text(`, Upload Image Size Must Be ${imageSize} px`);
$("#imageUpload").attr('size-validation', imageSize)
}
function changeImagePreview() {
let selectSize = $(document).find("#imageSize").find('select').val();
let size = selectSize.split('x');
$('#advertizementImage').removeClass('d-none').addClass('d-block');
$('#advertisementScript').removeClass('d-block').addClass('d-none');
}
})(jQuery);
</script>
@endpush