995 lines
53 KiB
PHP
995 lines
53 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('title')
|
|
{{ __('Advertisements') }}
|
|
@endsection
|
|
|
|
@section('page-title')
|
|
<div class="page-title">
|
|
<div class="row">
|
|
<div class="col-12 col-md-6">
|
|
<h4>@yield('title')</h4>
|
|
</div>
|
|
<div class="col-12 col-md-6 d-flex justify-content-end">
|
|
<a class="btn btn-primary me-2"
|
|
href="{{ route('advertisement.create') }}">{{ __('Create Advertisement') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<section class="section">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-12 col-md-auto">
|
|
<button type="button" class="btn btn-success w-100" id="btn-active-ads">
|
|
{{ __('Active Advertisements') }}
|
|
</button>
|
|
</div>
|
|
<div class="col-12 col-md-auto">
|
|
<button type="button" class="btn btn-primary w-100" id="btn-requested-ads">
|
|
{{ __('Requested Advertisements') }}
|
|
</button>
|
|
</div>
|
|
<div class="col-12 col-md-auto">
|
|
<button type="button" class="btn btn-secondary active w-100" id="btn-all-ads">
|
|
{{ __('All Advertisements') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div class="d-flex gap-2 mb-3">
|
|
<button type="button" class="btn btn-success" id="btn-active-ads">
|
|
{{ __('Active Advertisements') }}
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="btn-requested-ads">
|
|
{{ __('Requested Advertisements') }}
|
|
</button>
|
|
<button type="button" class="btn btn-secondary active" id="btn-all-ads">
|
|
{{ __('All Advertisements') }}
|
|
</button>
|
|
</div> --}}
|
|
|
|
<div id="filters" class="d-flex flex-wrap align-items-end gap-2 mb-3">
|
|
<div class="col-md-2">
|
|
<label for="filter">{{ __('Status') }}</label>
|
|
<select class="form-control" id="filter" data-field="status">
|
|
<option value="">{{ __('All') }}</option>
|
|
<option value="approved">{{ __('Approved') }}</option>
|
|
<option value="review">{{ __('Under Review') }}</option>
|
|
<option value="sold out">{{ __('Sold Out') }}</option>
|
|
<option value="expired">{{ __('Expired') }}</option>
|
|
<option value="inactive">{{ __('Inactive') }}</option>
|
|
<option value="soft rejected">{{ __('Soft Rejected') }}</option>
|
|
<option value="permanent rejected">{{ __('Permanent Rejected') }}</option>
|
|
<option value="resubmitted">{{ __('Resubmitted') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="filter-featured-premium">{{ __('Featured') }}</label>
|
|
<select class="form-control bootstrap-table-filter-control-featured_status"
|
|
id="filter_featured_premium">
|
|
<option value="">{{ __('All') }}</option>
|
|
<option value="featured">{{ __('Featured') }}</option>
|
|
{{-- <option value="premium">{{ __('Premium') }}</option> --}}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="p_category">{{ __('Category') }}</label>
|
|
<select name="category_id" id="p_category"
|
|
class="form-control bootstrap-table-filter-control-category" aria-label="category"
|
|
data-placeholder="{{ __('All') }}">
|
|
<option value="">{{ __('All') }}</option>
|
|
@include('category.dropdowntree', ['categories' => $categories])
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="filter_country">{{ __('Country') }}</label>
|
|
<select class="form-control bootstrap-table-filter-control-country"
|
|
id="filter_country_item_test">
|
|
<option value="">{{ __('All') }}</option>
|
|
@foreach ($countries as $country)
|
|
<option value="{{ $country->name }}">{{ $country->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="filter_state">{{ __('State') }}</label>
|
|
<select name="state_id" class="form-control bootstrap-table-filter-control-state"
|
|
id="filter_state_item">
|
|
<option value="">{{ __('All') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="filter_city">{{ __('City') }}</label>
|
|
<select name="city_id" class="form-control bootstrap-table-filter-control-city"
|
|
id="filter_city_item">
|
|
<option value="">{{ __('All') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
|
|
<table class="table-borderless table-striped" aria-describedby="mydesc" id="table_list"
|
|
data-toggle="table" data-url="{{ route('advertisement.show', 'approved') }}"
|
|
data-click-to-select="true" data-side-pagination="server" data-pagination="true"
|
|
data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-show-columns="true"
|
|
data-show-refresh="true" data-fixed-columns="true" data-fixed-number="1"
|
|
data-fixed-right-number="1" data-trim-on-search="false" data-escape="true"
|
|
data-responsive="true" data-sort-name="id" data-sort-order="desc"
|
|
data-pagination-successively-size="3" data-table="items" data-status-column="deleted_at"
|
|
data-show-export="true"
|
|
data-export-options='{"fileName": "item-list","ignoreColumn": ["operate"]}'
|
|
data-export-types="['pdf','json', 'xml', 'csv', 'txt', 'sql', 'doc', 'excel']"
|
|
data-mobile-responsive="false" data-responsive="true"
|
|
data-card-view="false"{{-- data-filter-control="true" --}} {{-- data-filter-control-container="#filters" --}} data-toolbar="#filters"
|
|
data-query-params="itemListQueryParams">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th scope="col" data-field="id" data-sortable="true">{{ __('ID') }}</th>
|
|
<th scope="col" data-field="name" data-sortable="true">{{ __('Name') }}
|
|
</th>
|
|
<th scope="col" data-field="description" data-align="center"
|
|
data-sortable="true" data-formatter="descriptionFormatter">
|
|
{{ __('Description') }}</th>
|
|
<th scope="col" data-field="user.profile" data-formatter="imageFormatter">
|
|
{{ __('Profile') }}</th>
|
|
<th scope="col" data-field="user.name" data-sort-name="user_name"
|
|
data-sortable="true">{{ __('User') }}</th>
|
|
<th scope="col" data-field="price" data-sortable="true">{{ __('Price') }}
|
|
</th>
|
|
<th scope="col" data-field="min_salary" data-sortable="true"
|
|
data-visible="false">{{ __('Min Salary') }}
|
|
</th>
|
|
<th scope="col" data-field="max_salary" data-sortable="true"
|
|
data-visible="false">{{ __('Max Salary') }}
|
|
</th>
|
|
<th scope="col" data-field="category.name" data-sortable="true">
|
|
{{ __('Category') }}
|
|
</th>
|
|
<th scope="col" data-field="image" data-sortable="false" data-escape="false"
|
|
data-formatter="imageFormatter">{{ __('Image') }}</th>
|
|
<th scope="col" data-field="gallery_images" data-sortable="false"
|
|
data-formatter="galleryImageFormatter" data-escape="false">
|
|
{{ __('Other Images') }}</th>
|
|
<th scope="col" data-field="latitude" data-sortable="true"
|
|
data-visible="false" data-switchable="false">{{ __('Latitude') }}</th>
|
|
<th scope="col" data-field="longitude" data-sortable="true"
|
|
data-visible="false" data-switchable="false">{{ __('Longitude') }}</th>
|
|
<th scope="col" data-field="address" data-sortable="true"
|
|
data-visible="false" data-switchable="false">{{ __('Address') }}</th>
|
|
<th scope="col" data-field="contact" data-sortable="true"
|
|
data-visible="false" data-switchable="false">{{ __('Contact') }}</th>
|
|
<th scope="col" data-field="country" data-sortable="true"
|
|
data-filter-control="select" data-filter-data="" data-visible="true">
|
|
{{ __('Country') }}</th>
|
|
<th scope="col" data-field="state" data-sortable="true" data-visible="true">
|
|
{{ __('State') }}</th>
|
|
<th scope="col" data-field="city" data-sortable="true"
|
|
data-filter-control="select" data-filter-data="" data-visible="true">
|
|
{{ __('City') }}</th>
|
|
<th scope="col" data-field="featured_status" data-sortable="false"
|
|
data-filter-control="select" data-filter-data=""
|
|
data-formatter="featuredItemStatusFormatter">{{ __('Featured/Not-Featured') }}
|
|
</th>
|
|
<th scope="col" data-field="status" data-sortable="false" data-escape="false"
|
|
data-formatter="itemStatusFormatter">{{ __('Status') }}</th>
|
|
@can('advertisement-update')
|
|
<th scope="col" data-field="active_status" data-sortable="true"
|
|
data-sort-name="deleted_at" data-visible="true" data-escape="false"
|
|
data-formatter="statusSwitchFormatter">{{ __('Active') }}</th>
|
|
@endcan
|
|
<th scope="col" data-field="rejected_reason" data-sortable="true"
|
|
data-visible="false" data-switchable="false">{{ __('Rejected Reason') }}</th>
|
|
<th scope="col" data-field="expiry_date" data-sortable="true"
|
|
data-visible="true">{{ __('Expiry Date') }}</th>
|
|
<th scope="col" data-field="created_at" data-sortable="false"
|
|
data-visible="true" data-switchable="false" data-formatter="dateFormatter">
|
|
{{ __('Created At') }}
|
|
</th>
|
|
<th scope="col" data-field="updated_at" data-sortable="false"
|
|
data-visible="false" data-switchable="false">{{ __('Updated At') }}</th>
|
|
<th scope="col" data-field="user_id" data-sortable="false"
|
|
data-visible="false" data-switchable="false">{{ __('User ID') }}</th>
|
|
<th scope="col" data-field="category_id" data-sortable="true"
|
|
data-visible="false" data-switchable="false">{{ __('Category ID') }}</th>
|
|
<th scope="col" data-field="likes" data-sortable="true" data-visible="false"
|
|
data-switchable="false">{{ __('Likes') }}</th>
|
|
<th scope="col" data-field="clicks" data-sortable="true" data-visible="false"
|
|
data-switchable="false">{{ __('Clicks') }}</th>
|
|
@canany(['advertisement-update', 'advertisement-delete'])
|
|
<th scope="col" data-field="operate" data-align="center"
|
|
data-sortable="false" data-events="itemEvents" data-escape="false">
|
|
{{ __('Action') }}</th>
|
|
@endcanany
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="myModalLabel1">{{ __('Advertisement Details') }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="center" id="custom_fields"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<div id="editStatusModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="myModalLabel1">{{ __('Status') }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="edit-form" action="" method="POST"
|
|
data-success-function="updateApprovalSuccess">
|
|
@csrf
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<select name="status" class="form-select" id="status" aria-label="status">
|
|
<option value="review">{{ __('Under Review') }}</option>
|
|
<option value="approved">{{ __('Approve') }}</option>
|
|
<option value="soft rejected">{{ __('Soft Rejected') }}</option>
|
|
<option value="permanent rejected">{{ __('Permanent Rejected') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="rejected_reason_container" class="col-md-12" style="display: none;">
|
|
<label for="rejected_reason" class="mandatory form-label">{{ __('Reason') }}</label>
|
|
<textarea name="rejected_reason" id="rejected_reason" class="form-control" placeholder={{ __('Reason') }}></textarea>
|
|
{{-- <input type="text" name="rejected_reason" id="rejected_reason" class="form-control"> --}}
|
|
</div>
|
|
<input type="submit" value="{{ __('Save') }}" class="btn btn-primary mt-3">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
@section('script')
|
|
<script>
|
|
function updateApprovalSuccess() {
|
|
$('#editStatusModal').modal('hide');
|
|
}
|
|
|
|
// Custom queryParams function for items table to preserve filters during pagination
|
|
function itemListQueryParams(params) {
|
|
// Get current filter values from filter controls
|
|
const currentFilters = {};
|
|
|
|
// Get status filter based on button mode and dropdown selection
|
|
const statusFilterValue = $('#filter').val();
|
|
|
|
if (window.itemStatusFilterMode === 'active') {
|
|
// Active mode: always show approved (ignore dropdown)
|
|
currentFilters.status = 'approved';
|
|
} else if (window.itemStatusFilterMode === 'requested') {
|
|
// Requested mode: if dropdown has a value, use it (it's already not approved)
|
|
// Otherwise, use status_not: 'approved'
|
|
if (statusFilterValue) {
|
|
currentFilters.status = statusFilterValue;
|
|
} else {
|
|
currentFilters.status_not = 'approved';
|
|
}
|
|
} else {
|
|
// All mode: use dropdown value if selected
|
|
if (statusFilterValue) {
|
|
currentFilters.status = statusFilterValue;
|
|
}
|
|
}
|
|
|
|
// FIRST: Get all non-status filters (country, state, city, featured_status)
|
|
// These should ALWAYS be preserved regardless of button mode
|
|
|
|
// Get featured/premium filter - try multiple selectors
|
|
let featuredStatus = $('#filter_featured_premium').val() ||
|
|
$('.bootstrap-table-filter-control-featured_status').val() ||
|
|
$('select[data-field="featured_status"]').val() ||
|
|
$('select.bootstrap-table-filter-control-featured_status').val() || '';
|
|
|
|
// Get category filter
|
|
let category = $('#p_category').val() ||
|
|
$('.bootstrap-table-filter-control-category').val() ||
|
|
$('select[data-field="category"]').val() || '';
|
|
|
|
if (category && category.trim() !== '') {
|
|
currentFilters.category_id = category.trim();
|
|
}
|
|
|
|
|
|
// Get country filter - try multiple selectors
|
|
let country = $('#filter_country_item_test').val() ||
|
|
$('.bootstrap-table-filter-control-country').val() ||
|
|
$('select[data-field="country"]').val() ||
|
|
$('select.bootstrap-table-filter-control-country').val() || '';
|
|
|
|
// Get state filter - try multiple selectors
|
|
let state = $('#filter_state_item').val() ||
|
|
$('.bootstrap-table-filter-control-state').val() ||
|
|
$('select[data-field="state"]').val() ||
|
|
$('select.bootstrap-table-filter-control-state').val() || '';
|
|
|
|
// Get city filter - try multiple selectors
|
|
let city = $('#filter_city_item').val() ||
|
|
$('.bootstrap-table-filter-control-city').val() ||
|
|
$('select[data-field="city"]').val() ||
|
|
$('select.bootstrap-table-filter-control-city').val() || '';
|
|
|
|
// Add non-status filters if they have values (always preserve these)
|
|
if (featuredStatus && featuredStatus.trim() !== '') {
|
|
currentFilters.featured_status = featuredStatus.trim();
|
|
}
|
|
if (country && country.trim() !== '') {
|
|
currentFilters.country = country.trim();
|
|
}
|
|
if (state && state.trim() !== '') {
|
|
currentFilters.state = state.trim();
|
|
}
|
|
if (city && city.trim() !== '') {
|
|
currentFilters.city = city.trim();
|
|
}
|
|
|
|
// Build query params
|
|
const queryParams = {
|
|
limit: params.limit,
|
|
offset: params.offset,
|
|
order: params.order,
|
|
search: params.search,
|
|
sort: params.sort
|
|
};
|
|
|
|
// Add filter if we have any filters
|
|
if (Object.keys(currentFilters).length > 0) {
|
|
queryParams.filter = JSON.stringify(currentFilters);
|
|
}
|
|
|
|
return queryParams;
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Global variable to track status filter mode
|
|
window.itemStatusFilterMode = 'all'; // 'all', 'active', 'requested' - default to 'all'
|
|
|
|
// Global object to track intended filter values (to prevent Bootstrap Table from resetting them)
|
|
window.intendedFilters = {
|
|
country: '',
|
|
state: '',
|
|
city: '',
|
|
featuredStatus: '',
|
|
status: '',
|
|
category: ''
|
|
};
|
|
|
|
// Function to get current filters from filter controls and merge with status filter
|
|
function getMergedFilters() {
|
|
// Get current filter values from filter controls
|
|
const currentFilters = {};
|
|
|
|
// FIRST: Get all non-status filters (country, state, city, featured_status)
|
|
// These should ALWAYS be preserved regardless of button mode
|
|
|
|
// Get featured/premium filter - try multiple selectors, fallback to intended filter
|
|
let featuredStatus = $('#filter_featured_premium').val() ||
|
|
$('.bootstrap-table-filter-control-featured_status').val() ||
|
|
$('select[data-field="featured_status"]').val() ||
|
|
$('select.bootstrap-table-filter-control-featured_status').val() ||
|
|
(window.intendedFilters ? window.intendedFilters.featuredStatus : '') || '';
|
|
|
|
// Get category filter
|
|
let category = $('#p_category').val() ||
|
|
$('.bootstrap-table-filter-control-category').val() ||
|
|
(window.intendedFilters ? window.intendedFilters.category : '') || '';
|
|
|
|
if (category && category.trim() !== '') {
|
|
currentFilters.category_id = category.trim();
|
|
}
|
|
|
|
// Get country filter - try multiple selectors, fallback to intended filter
|
|
let country = $('#filter_country_item_test').val() ||
|
|
$('.bootstrap-table-filter-control-country').val() ||
|
|
$('select[data-field="country"]').val() ||
|
|
$('select.bootstrap-table-filter-control-country').val() ||
|
|
(window.intendedFilters ? window.intendedFilters.country : '') || '';
|
|
|
|
// Get state filter - try multiple selectors, fallback to intended filter
|
|
let state = $('#filter_state_item').val() ||
|
|
$('.bootstrap-table-filter-control-state').val() ||
|
|
$('select[data-field="state"]').val() ||
|
|
$('select.bootstrap-table-filter-control-state').val() ||
|
|
(window.intendedFilters ? window.intendedFilters.state : '') || '';
|
|
|
|
// Get city filter - try multiple selectors, fallback to intended filter
|
|
let city = $('#filter_city_item').val() ||
|
|
$('.bootstrap-table-filter-control-city').val() ||
|
|
$('select[data-field="city"]').val() ||
|
|
$('select.bootstrap-table-filter-control-city').val() ||
|
|
(window.intendedFilters ? window.intendedFilters.city : '') || '';
|
|
|
|
// Add non-status filters if they have values (always preserve these)
|
|
if (featuredStatus && featuredStatus.trim() !== '') {
|
|
currentFilters.featured_status = featuredStatus.trim();
|
|
}
|
|
if (country && country.trim() !== '') {
|
|
currentFilters.country = country.trim();
|
|
}
|
|
if (state && state.trim() !== '') {
|
|
currentFilters.state = state.trim();
|
|
}
|
|
if (city && city.trim() !== '') {
|
|
currentFilters.city = city.trim();
|
|
}
|
|
|
|
// SECOND: Build status filter based on button mode and dropdown
|
|
const statusFilterValue = $('#filter').val() || '';
|
|
|
|
if (window.itemStatusFilterMode === 'active') {
|
|
// Active mode: always show approved (ignore dropdown)
|
|
currentFilters.status = 'approved';
|
|
} else if (window.itemStatusFilterMode === 'requested') {
|
|
// Requested mode: if dropdown has a value, use it (it's already not approved)
|
|
// Otherwise, use status_not: 'approved'
|
|
if (statusFilterValue && statusFilterValue.trim() !== '') {
|
|
currentFilters.status = statusFilterValue.trim();
|
|
} else {
|
|
currentFilters.status_not = 'approved';
|
|
}
|
|
} else {
|
|
// All mode: use dropdown value if selected
|
|
if (statusFilterValue && statusFilterValue.trim() !== '') {
|
|
currentFilters.status = statusFilterValue.trim();
|
|
}
|
|
}
|
|
|
|
return Object.keys(currentFilters).length > 0 ? currentFilters : null;
|
|
}
|
|
|
|
// Function to update button active states
|
|
function updateButtonStates(activeButton) {
|
|
$('#btn-active-ads, #btn-requested-ads, #btn-all-ads').removeClass('active');
|
|
$(activeButton).addClass('active');
|
|
}
|
|
|
|
// Function to store current filter values
|
|
function storeFilterValues() {
|
|
// Try to get values from multiple sources (direct IDs and Bootstrap Table controls)
|
|
// Also check global intendedFilters as fallback
|
|
const stored = {
|
|
featuredStatus: $('#filter_featured_premium').val() ||
|
|
$('.bootstrap-table-filter-control-featured_status').val() ||
|
|
window.intendedFilters.featuredStatus || '',
|
|
country: $('#filter_country_item_test').val() ||
|
|
$('.bootstrap-table-filter-control-country').val() ||
|
|
window.intendedFilters.country || '',
|
|
state: $('#filter_state_item').val() ||
|
|
$('.bootstrap-table-filter-control-state').val() ||
|
|
window.intendedFilters.state || '',
|
|
city: $('#filter_city_item').val() ||
|
|
$('.bootstrap-table-filter-control-city').val() ||
|
|
window.intendedFilters.city || '',
|
|
status: $('#filter').val() || window.intendedFilters.status || ''
|
|
};
|
|
|
|
// Update global intended filters
|
|
window.intendedFilters = {
|
|
country: stored.country,
|
|
state: stored.state,
|
|
city: stored.city,
|
|
featuredStatus: stored.featuredStatus,
|
|
status: stored.status
|
|
};
|
|
|
|
return stored;
|
|
}
|
|
|
|
// Function to restore filter values (without triggering change events to prevent loops)
|
|
function restoreFilterValues(storedValues, skipChangeEvent) {
|
|
if (storedValues) {
|
|
// Only restore if value exists and is not empty
|
|
if (storedValues.featuredStatus && storedValues.featuredStatus.trim() !== '') {
|
|
const currentVal = $('#filter_featured_premium').val();
|
|
if (currentVal !== storedValues.featuredStatus) {
|
|
$('#filter_featured_premium').val(storedValues.featuredStatus);
|
|
}
|
|
$('.bootstrap-table-filter-control-featured_status').val(storedValues.featuredStatus);
|
|
$('select[data-field="featured_status"]').val(storedValues.featuredStatus);
|
|
}
|
|
if (storedValues.country && storedValues.country.trim() !== '') {
|
|
// Restore to all possible selectors (only if value is different to prevent loops)
|
|
const currentCountry = $('#filter_country_item_test').val();
|
|
if (currentCountry !== storedValues.country) {
|
|
$('#filter_country_item_test').val(storedValues.country).prop('selected', true);
|
|
}
|
|
$('.bootstrap-table-filter-control-country').val(storedValues.country).prop('selected',
|
|
true);
|
|
$('select[data-field="country"]').val(storedValues.country).prop('selected', true);
|
|
// Also try to find Bootstrap Table's generated filter control
|
|
$('th[data-field="country"]').find('select').val(storedValues.country).prop('selected',
|
|
true);
|
|
}
|
|
if (storedValues.state && storedValues.state.trim() !== '') {
|
|
const currentState = $('#filter_state_item').val();
|
|
if (currentState !== storedValues.state) {
|
|
$('#filter_state_item').val(storedValues.state).prop('selected', true);
|
|
}
|
|
$('.bootstrap-table-filter-control-state').val(storedValues.state).prop('selected', true);
|
|
$('select[data-field="state"]').val(storedValues.state).prop('selected', true);
|
|
$('th[data-field="state"]').find('select').val(storedValues.state).prop('selected', true);
|
|
}
|
|
if (storedValues.city && storedValues.city.trim() !== '') {
|
|
const currentCity = $('#filter_city_item').val();
|
|
if (currentCity !== storedValues.city) {
|
|
$('#filter_city_item').val(storedValues.city).prop('selected', true);
|
|
}
|
|
$('.bootstrap-table-filter-control-city').val(storedValues.city).prop('selected', true);
|
|
$('select[data-field="city"]').val(storedValues.city).prop('selected', true);
|
|
$('th[data-field="city"]').find('select').val(storedValues.city).prop('selected', true);
|
|
}
|
|
// Status is handled separately by updateStatusDropdown
|
|
}
|
|
}
|
|
|
|
// Function to update status dropdown based on button mode
|
|
function updateStatusDropdown() {
|
|
if (typeof window.itemStatusFilterMode === 'undefined') {
|
|
window.itemStatusFilterMode = 'all';
|
|
}
|
|
const $statusDropdown = $('#filter');
|
|
const currentValue = $statusDropdown.val();
|
|
|
|
// Store all options
|
|
const allOptions = [{
|
|
value: '',
|
|
text: '{{ __('All') }}'
|
|
},
|
|
{
|
|
value: 'approved',
|
|
text: '{{ __('Approved') }}'
|
|
},
|
|
{
|
|
value: 'review',
|
|
text: '{{ __('Under Review') }}'
|
|
},
|
|
{
|
|
value: 'sold out',
|
|
text: '{{ __('Sold Out') }}'
|
|
},
|
|
{
|
|
value: 'expired',
|
|
text: '{{ __('Expired') }}'
|
|
},
|
|
{
|
|
value: 'inactive',
|
|
text: '{{ __('Inactive') }}'
|
|
},
|
|
{
|
|
value: 'soft rejected',
|
|
text: '{{ __('Soft Rejected') }}'
|
|
},
|
|
{
|
|
value: 'permanent rejected',
|
|
text: '{{ __('Permanent Rejected') }}'
|
|
},
|
|
{
|
|
value: 'resubmitted',
|
|
text: '{{ __('Resubmitted') }}'
|
|
}
|
|
];
|
|
|
|
if (window.itemStatusFilterMode === 'active') {
|
|
// Active mode: Disable dropdown and show only approved (but it's handled by button)
|
|
$statusDropdown.prop('disabled', true);
|
|
$statusDropdown.html('<option value="">{{ __('All') }}</option>');
|
|
} else if (window.itemStatusFilterMode === 'requested') {
|
|
// Requested mode: Remove approved option, enable dropdown
|
|
$statusDropdown.prop('disabled', false);
|
|
let html = '<option value="">{{ __('All') }}</option>';
|
|
allOptions.forEach(option => {
|
|
if (option.value !== 'approved' && option.value !== '') {
|
|
html += `<option value="${option.value}">${option.text}</option>`;
|
|
}
|
|
});
|
|
$statusDropdown.html(html);
|
|
// Restore previous value if it wasn't 'approved'
|
|
if (currentValue && currentValue !== 'approved') {
|
|
$statusDropdown.val(currentValue);
|
|
}
|
|
} else {
|
|
// All mode: Show all options, enable dropdown
|
|
$statusDropdown.prop('disabled', false);
|
|
let html = '';
|
|
allOptions.forEach(option => {
|
|
html += `<option value="${option.value}">${option.text}</option>`;
|
|
});
|
|
$statusDropdown.html(html);
|
|
// Restore previous value
|
|
if (currentValue) {
|
|
$statusDropdown.val(currentValue);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Active Ads - only show approved, remove status filter from dropdown
|
|
$('#btn-active-ads').on('click', function() {
|
|
// Store current filter values BEFORE changing mode
|
|
const storedFilters = storeFilterValues();
|
|
|
|
window.itemStatusFilterMode = 'active';
|
|
updateButtonStates(this);
|
|
updateStatusDropdown();
|
|
// Clear status dropdown filter since we're using button filter
|
|
$('#filter').val('');
|
|
|
|
// Restore non-status filter values
|
|
restoreFilterValues(storedFilters);
|
|
|
|
// Get filters - read them fresh from DOM (after restoring)
|
|
const mergedFilters = getMergedFilters();
|
|
const filterString = mergedFilters ? JSON.stringify(mergedFilters) : JSON.stringify({
|
|
status: 'approved'
|
|
});
|
|
|
|
$('#table_list').bootstrapTable('refresh', {
|
|
query: {
|
|
filter: filterString
|
|
}
|
|
});
|
|
|
|
// Restore filter values after refresh (Bootstrap Table might reset them)
|
|
// Use multiple timeouts to ensure values are restored even if Bootstrap Table resets them
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 100);
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 500);
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 1000);
|
|
});
|
|
|
|
// Requested Ads - exclude approved, allow status filter from dropdown
|
|
$('#btn-requested-ads').on('click', function() {
|
|
// Store current filter values BEFORE changing mode
|
|
const storedFilters = storeFilterValues();
|
|
|
|
window.itemStatusFilterMode = 'requested';
|
|
updateButtonStates(this);
|
|
updateStatusDropdown();
|
|
// Don't clear status dropdown - user can still filter by specific status
|
|
|
|
// Restore non-status filter values
|
|
restoreFilterValues(storedFilters);
|
|
|
|
// Get filters - read them fresh from DOM (after restoring)
|
|
const mergedFilters = getMergedFilters();
|
|
const filterString = mergedFilters ? JSON.stringify(mergedFilters) : JSON.stringify({
|
|
status_not: 'approved'
|
|
});
|
|
|
|
$('#table_list').bootstrapTable('refresh', {
|
|
query: {
|
|
filter: filterString
|
|
}
|
|
});
|
|
|
|
// Restore filter values after refresh (Bootstrap Table might reset them)
|
|
// Use multiple timeouts to ensure values are restored even if Bootstrap Table resets them
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 100);
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 500);
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 1000);
|
|
});
|
|
|
|
// Show All - show all statuses, allow status filter from dropdown
|
|
$('#btn-all-ads').on('click', function() {
|
|
// Store current filter values BEFORE changing mode
|
|
const storedFilters = storeFilterValues();
|
|
|
|
window.itemStatusFilterMode = 'all';
|
|
updateButtonStates(this);
|
|
updateStatusDropdown();
|
|
// Don't clear status dropdown - user can filter by status
|
|
|
|
// Restore non-status filter values
|
|
restoreFilterValues(storedFilters);
|
|
|
|
// Get filters - read them fresh from DOM (after restoring)
|
|
const mergedFilters = getMergedFilters();
|
|
const filterString = mergedFilters ? JSON.stringify(mergedFilters) : '';
|
|
|
|
$('#table_list').bootstrapTable('refresh', {
|
|
query: {
|
|
filter: filterString
|
|
}
|
|
});
|
|
|
|
// Restore filter values after refresh (Bootstrap Table might reset them)
|
|
// Use multiple timeouts to ensure values are restored even if Bootstrap Table resets them
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 100);
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 500);
|
|
setTimeout(function() {
|
|
restoreFilterValues(storedFilters);
|
|
}, 1000);
|
|
});
|
|
|
|
// Helper function to refresh table with current filters
|
|
let filterChangeTimeout = null;
|
|
let isRefreshing = false;
|
|
|
|
function refreshTableWithFilters() {
|
|
// Prevent multiple simultaneous refreshes
|
|
if (isRefreshing) {
|
|
return;
|
|
}
|
|
|
|
// Clear any pending timeout
|
|
if (filterChangeTimeout) {
|
|
clearTimeout(filterChangeTimeout);
|
|
}
|
|
|
|
// Store current filter values before refresh
|
|
const currentFilters = storeFilterValues();
|
|
|
|
// Debounce the refresh to prevent duplicate calls
|
|
filterChangeTimeout = setTimeout(function() {
|
|
isRefreshing = true;
|
|
|
|
const mergedFilters = getMergedFilters();
|
|
const filterString = mergedFilters ? JSON.stringify(mergedFilters) : '';
|
|
|
|
$('#table_list').bootstrapTable('refresh', {
|
|
query: {
|
|
filter: filterString
|
|
}
|
|
});
|
|
|
|
// Mark as not refreshing after a delay
|
|
setTimeout(function() {
|
|
isRefreshing = false;
|
|
}, 1000);
|
|
|
|
// Restore filter values after refresh (without triggering change events)
|
|
setTimeout(function() {
|
|
if (currentFilters) {
|
|
restoreFilterValues(currentFilters, true);
|
|
}
|
|
}, 100);
|
|
setTimeout(function() {
|
|
if (currentFilters) {
|
|
restoreFilterValues(currentFilters, true);
|
|
}
|
|
}, 300);
|
|
setTimeout(function() {
|
|
if (currentFilters) {
|
|
restoreFilterValues(currentFilters, true);
|
|
}
|
|
}, 600);
|
|
}, 150);
|
|
}
|
|
|
|
// When status filter dropdown changes, update based on current mode
|
|
$('#filter').on('change', function() {
|
|
refreshTableWithFilters();
|
|
});
|
|
|
|
// When country filter changes, refresh table and preserve status filter mode
|
|
// Note: custom.js will handle loading states, we just need to refresh the table
|
|
$(document).on('change',
|
|
'#filter_country_item_test, .bootstrap-table-filter-control-country, select[data-field="country"], th[data-field="country"] select',
|
|
function(e) {
|
|
// Get the selected country value from the element that triggered the event
|
|
const selectedCountry = $(this).val() || '';
|
|
|
|
// Skip if empty (user selected "All")
|
|
if (!selectedCountry) {
|
|
window.intendedFilters.country = '';
|
|
refreshTableWithFilters();
|
|
return;
|
|
}
|
|
|
|
// Update global intended filter IMMEDIATELY
|
|
window.intendedFilters.country = selectedCountry;
|
|
|
|
// Clear city when country changes (states will be reloaded by custom.js)
|
|
$('#filter_city_item').val('');
|
|
$('.bootstrap-table-filter-control-city').val('');
|
|
$('select[data-field="city"]').val('');
|
|
window.intendedFilters.city = '';
|
|
|
|
// Sync country value to ALL possible selectors IMMEDIATELY
|
|
const syncCountryValue = function() {
|
|
if (selectedCountry) {
|
|
$('#filter_country_item_test').val(selectedCountry).prop('selected', true);
|
|
$('.bootstrap-table-filter-control-country').val(selectedCountry).prop(
|
|
'selected', true);
|
|
$('select[data-field="country"]').val(selectedCountry).prop('selected', true);
|
|
$('th[data-field="country"]').find('select').val(selectedCountry).prop(
|
|
'selected', true);
|
|
}
|
|
};
|
|
|
|
// Sync immediately
|
|
syncCountryValue();
|
|
|
|
// Refresh table after a short delay to allow states to load
|
|
setTimeout(function() {
|
|
// Re-sync before refresh
|
|
syncCountryValue();
|
|
refreshTableWithFilters();
|
|
|
|
// Aggressively restore country value after refresh
|
|
setTimeout(syncCountryValue, 50);
|
|
setTimeout(syncCountryValue, 150);
|
|
setTimeout(syncCountryValue, 300);
|
|
setTimeout(syncCountryValue, 500);
|
|
setTimeout(syncCountryValue, 1000);
|
|
setTimeout(syncCountryValue, 2000);
|
|
}, 300);
|
|
});
|
|
|
|
// When state filter changes, refresh table and preserve status filter mode
|
|
// Note: custom.js will handle loading cities, we just need to refresh the table
|
|
$('#filter_state_item, .bootstrap-table-filter-control-state').on('change', function() {
|
|
// Store the selected state value immediately to prevent loss
|
|
const selectedState = $(this).val() || '';
|
|
|
|
// Update global intended filter
|
|
window.intendedFilters.state = selectedState;
|
|
|
|
// Ensure state value is set in both selectors
|
|
if (selectedState) {
|
|
$('#filter_state_item').val(selectedState);
|
|
$('.bootstrap-table-filter-control-state').val(selectedState);
|
|
}
|
|
|
|
// Refresh table after a short delay to allow cities to load
|
|
setTimeout(function() {
|
|
// Re-ensure state value is still set before refresh
|
|
if (selectedState) {
|
|
$('#filter_state_item').val(selectedState);
|
|
$('.bootstrap-table-filter-control-state').val(selectedState);
|
|
}
|
|
refreshTableWithFilters();
|
|
|
|
// Restore state value after refresh in case Bootstrap Table reset it
|
|
setTimeout(function() {
|
|
if (selectedState) {
|
|
$('#filter_state_item').val(selectedState);
|
|
$('.bootstrap-table-filter-control-state').val(selectedState);
|
|
}
|
|
}, 100);
|
|
}, 300);
|
|
});
|
|
|
|
// When city filter changes, refresh table and preserve status filter mode
|
|
$('#filter_city_item, .bootstrap-table-filter-control-city').on('change', function() {
|
|
// Store the selected city value immediately to prevent loss
|
|
const selectedCity = $(this).val() || '';
|
|
|
|
// Update global intended filter
|
|
window.intendedFilters.city = selectedCity;
|
|
|
|
// Ensure city value is set in both selectors
|
|
if (selectedCity) {
|
|
$('#filter_city_item').val(selectedCity);
|
|
$('.bootstrap-table-filter-control-city').val(selectedCity);
|
|
}
|
|
|
|
refreshTableWithFilters();
|
|
|
|
// Restore city value after refresh in case Bootstrap Table reset it
|
|
setTimeout(function() {
|
|
if (selectedCity) {
|
|
$('#filter_city_item').val(selectedCity);
|
|
$('.bootstrap-table-filter-control-city').val(selectedCity);
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
$('#filter_category, .bootstrap-table-filter-control-category').on('change', function() {
|
|
const selectedCategory = $(this).val() || '';
|
|
|
|
window.intendedFilters.category = selectedCategory;
|
|
|
|
refreshTableWithFilters();
|
|
});
|
|
|
|
|
|
// When featured/premium filter changes, refresh table and preserve status filter mode
|
|
let featuredFilterChanging = false;
|
|
$('#filter_featured_premium, .bootstrap-table-filter-control-featured_status, select[data-field="featured_status"]')
|
|
.on('change', function(e) {
|
|
// Prevent infinite loops - if we're already processing a change, skip
|
|
if (featuredFilterChanging) {
|
|
return;
|
|
}
|
|
|
|
// Get the selected featured status value
|
|
const selectedFeatured = $(this).val() || '';
|
|
|
|
// Check if value actually changed
|
|
const currentIntended = window.intendedFilters.featuredStatus || '';
|
|
if (selectedFeatured === currentIntended && selectedFeatured !== '') {
|
|
// Value hasn't changed, don't refresh
|
|
return;
|
|
}
|
|
|
|
// Set flag to prevent loops
|
|
featuredFilterChanging = true;
|
|
|
|
// Update global intended filter
|
|
window.intendedFilters.featuredStatus = selectedFeatured;
|
|
|
|
// Ensure featured status value is set in all selectors (without triggering change)
|
|
if (selectedFeatured) {
|
|
$('#filter_featured_premium').val(selectedFeatured);
|
|
$('.bootstrap-table-filter-control-featured_status').val(selectedFeatured);
|
|
$('select[data-field="featured_status"]').val(selectedFeatured);
|
|
}
|
|
|
|
// Refresh table
|
|
refreshTableWithFilters();
|
|
|
|
// Clear flag after a delay
|
|
setTimeout(function() {
|
|
featuredFilterChanging = false;
|
|
}, 500);
|
|
});
|
|
|
|
// Initialize status dropdown on page load
|
|
updateStatusDropdown();
|
|
|
|
// Listen to Bootstrap Table refresh events to restore filter values
|
|
$('#table_list').on('refresh.bs.table', function() {
|
|
// Restore all intended filter values after Bootstrap Table refreshes (without triggering change events)
|
|
if (window.intendedFilters) {
|
|
setTimeout(function() {
|
|
restoreFilterValues(window.intendedFilters, true);
|
|
}, 50);
|
|
setTimeout(function() {
|
|
restoreFilterValues(window.intendedFilters, true);
|
|
}, 200);
|
|
setTimeout(function() {
|
|
restoreFilterValues(window.intendedFilters, true);
|
|
}, 500);
|
|
}
|
|
});
|
|
|
|
// Also listen to post-body event (after table body is updated)
|
|
$('#table_list').on('post-body.bs.table', function() {
|
|
if (window.intendedFilters) {
|
|
restoreFilterValues(window.intendedFilters, true);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|