File manager - Edit - /var/www/payraty/inventory_main/resources/views/admin/coupons/index.blade.php
Back
@extends('admin.layouts.master') @section('content') <div class="page-title-box"> <div class="row align-items-center"> <div class="col-sm-6"> <ol class="d-flex align-items-center p-0 m-0" style="list-style: none;"> <li class="me-2"> <a href="#" class="text-decoration-none ic-javascriptVoid">{{ __('custom.coupon') }}</a> <span class="mx-1">/</span> </li> <li class="text-primary">{{ __('custom.coupon_list') }}</li> </ol> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <div class="d-sm-flex justify-content-end align-items-center gap-3 mt-3 mt-lg-0"> <a href="{{ route('admin.coupons.create') }}" class="btn btn-outline-dark d-flex align-items-center me-3" style="margin-right:1rem;"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M12 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span class="ms-2">Create New Coupon</span> </a> <button id="export-btn" class="btn btn-outline-dark d-flex align-items-center"> <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M6.5325 5.78267L8.25 4.05767V11.2502C8.25 11.4491 8.32902 11.6398 8.46967 11.7805C8.61032 11.9211 8.80109 12.0002 9 12.0002C9.19891 12.0002 9.38968 11.9211 9.53033 11.7805C9.67098 11.6398 9.75 11.4491 9.75 11.2502V4.05767L11.4675 5.78267C11.5372 5.85296 11.6202 5.90876 11.7116 5.94684C11.803 5.98491 11.901 6.00452 12 6.00452C12.099 6.00452 12.197 5.98491 12.2884 5.94684C12.3798 5.90876 12.4628 5.85296 12.5325 5.78267C12.6028 5.71294 12.6586 5.62999 12.6967 5.5386C12.7347 5.4472 12.7543 5.34918 12.7543 5.25017C12.7543 5.15116 12.7347 5.05313 12.6967 4.96173C12.6586 4.87034 12.6028 4.78739 12.5325 4.71767L9.5325 1.71767C9.46117 1.64939 9.37706 1.59586 9.285 1.56017C9.1024 1.48515 8.8976 1.48515 8.715 1.56017C8.62294 1.59586 8.53883 1.64939 8.4675 1.71767L5.4675 4.71767C5.39757 4.7876 5.3421 4.87061 5.30426 4.96198C5.26641 5.05335 5.24693 5.15127 5.24693 5.25017C5.24693 5.34906 5.26641 5.44699 5.30426 5.53835C5.3421 5.62972 5.39757 5.71274 5.4675 5.78267C5.53743 5.8526 5.62045 5.90807 5.71181 5.94591C5.80318 5.98376 5.90111 6.00323 6 6.00323C6.09889 6.00323 6.19682 5.98376 6.28819 5.94591C6.37955 5.90807 6.46257 5.8526 6.5325 5.78267ZM15.75 10.5002C15.5511 10.5002 15.3603 10.5792 15.2197 10.7198C15.079 10.8605 15 11.0513 15 11.2502V14.2502C15 14.4491 14.921 14.6398 14.7803 14.7805C14.6397 14.9212 14.4489 15.0002 14.25 15.0002H3.75C3.55109 15.0002 3.36032 14.9212 3.21967 14.7805C3.07902 14.6398 3 14.4491 3 14.2502V11.2502C3 11.0513 2.92098 10.8605 2.78033 10.7198C2.63968 10.5792 2.44891 10.5002 2.25 10.5002C2.05109 10.5002 1.86032 10.5792 1.71967 10.7198C1.57902 10.8605 1.5 11.0513 1.5 11.2502V14.2502C1.5 14.8469 1.73705 15.4192 2.15901 15.8412C2.58097 16.2631 3.15326 16.5002 3.75 16.5002H14.25C14.8467 16.5002 15.419 16.2631 15.841 15.8412C16.2629 15.4192 16.5 14.8469 16.5 14.2502V11.2502C16.5 11.0513 16.421 10.8605 16.2803 10.7198C16.1397 10.5792 15.9489 10.5002 15.75 10.5002Z" fill="currentColor" /> </svg> <span class="ms-2">Export</span> </button> </div> <div id="export-dropdown" class="text-right hidden"> <hr> <button type="button" data-div-name="section-to-print-items" class="btn btn-warning btn-sm section-print-btn"> <i class="fa fa-print"></i> {{ __('custom.print') }}</button> <a href="{{ route('admin.coupons.export.index', ['type' => 'pdf']) }}" class="btn btn-pdf btn-sm"> <i class="fa fa-file-pdf"></i> {{ __('custom.pdf') }}</a> <a href="{{ route('admin.coupons.export.index', ['type' => 'csv']) }}" class="btn btn-success btn-sm"> <i class="fa fa-file-csv"></i> {{ __('custom.csv') }}</a> <a href="{{ route('admin.coupons.export.index', ['type' => 'excel']) }}" class="btn btn-excel btn-sm"> <i class="fa fa-file-csv"></i> {{ __('custom.excel') }}</a> </div> <div class="header-container_b"> <!-- All Employees Header --> <div class="header-title"> <h5>List Of Coupons</h5> </div> <!-- Search Input with Icon --> <div class="search-container"> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-search"></i> </span> <input type="search" class="form-control" placeholder="Search..." /> </div> </div> <!-- Filters Dropdowns --> <div class="filters-container"> <!-- Pay Group Dropdown --> <div class="custom-dropdown"> <button class="dropdown-btn"> <i class="fas fa-filter"></i> Filter </button> <div class="dropdown-content"> <a href="#" data-value="all">All</a> <a href="#" data-value="monthly">Monthly</a> <a href="#" data-value="yearly">Yearly</a> </div> </div> </div> </div> <div id="section-to-print-items" class="table-responsive"> <table class="table" style="border-collapse: collapse;"> <thead style="background: #F8F9FD;"> <tr class="table-row"> <th>{{ __('S/N') }}</th> <th>{{ __('Banner') }}</th> <th>{{ __('Title') }}</th> <th>{{ __('Coupon Code') }}</th> <th>{{ __('Discount') }}</th> <th>{{ __('Validity') }}</th> <th>{{ __('Minimum Quantity') }}</th> <th>{{ __('Status') }}</th> <th>{{ __('Action') }}</th> </tr> </thead> <tbody> @if ($coupons->isEmpty()) <tr> <td colspan="10" class="text-center"> <img src="{{ asset('/images/no-data.png') }}" alt="No Data" style="max-width: 350px; margin-bottom: 50px; margin-top: 150px;"> <p>{{ __('Oops, no data yet.') }}</p> </td> </tr> @else @foreach ($coupons as $coupon) <tr> <td>{{ $loop->iteration }}</td> <td> <img src="{{ Storage::url('coupons/' . $coupon->banner) }}" alt="" class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;" onerror="this.onerror=null;this.src='{{ asset('images/default.png') }}';"> </td> <td>{{ $coupon->title }}</td> <td>{{ $coupon->code }}</td> <td> <p> @if ($coupon->discount !== null) @if ($coupon->discount_type == 'percent') {{ $coupon->discount }}% @elseif($coupon->discount_type == 'fixed') {{ currencySymbol() . $coupon->discount }} @else {{ $coupon->discount }} @endif @else @endif </p> </td> <td>{{ date('Y-m-d', strtotime($coupon->start_date)) }} - {{ $coupon->end_date ? date('Y-m-d', strtotime($coupon->end_date)) : date('Y-m-d', strtotime($coupon->start_date)) }} </td> <td>{{ $coupon->minimum_shopping }}</td> <td> <p class="{{ $coupon->status == 'active' ? 'verified' : 'unverified' }}"> {{ $coupon->status == 'active' ? 'Active' : 'Inactive' }} </p> </td> <td> <div class="custom-dropdown-b"> <i class="fa-solid fa-ellipsis" onclick="toggleDropdown(event)"></i> <div class="dropdown-menu-b"> <div class="dropdown-item-column-b"> <a class="dropdown-item-b" href="{{ route('admin.coupons.edit', $coupon->id) }}"> <i class="fa fa-edit"></i> Edit </a> </div> <div class="dropdown-item-column-b"> <form class="form-delete-button" action="{{ route('admin.coupons.destroy', $coupon->id) }}" id="delete-form-{{ $coupon->id }}" method="post"> @csrf @method('DELETE') <a class="dropdown-item-b button-delete" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('delete-form-{{ $coupon->id }}').submit();"> <i class="mdi mdi-trash-can-outline"></i> Delete </a> </form> </div> <div class="dropdown-item-column-b"> <a class="dropdown-item-b" href="{{ route('admin.coupon.products', $coupon->id) }}"> <i class="flaticon-new-product"></i> Products </a> </div> </div> </div> </td> </tr> @endforeach @endif </tbody> </table> <!-- Pagination Links --> <div class="d-flex justify-content-end mt-3"> {{ $coupons->links('pagination::bootstrap-4') }} </div> </div> </div> </div> </div> </div> @endsection @push('script') <script> document.addEventListener("DOMContentLoaded", function() { document.getElementById("export-btn").addEventListener("click", function() { let dropdown = document.getElementById("export-dropdown"); dropdown.classList.toggle("hidden"); }); }); function getCurrencySymbol(currencyCode) { switch (currencyCode) { case 'USD': return '$'; case 'EUR': return '€'; case 'GBP': return '£'; case 'NGN': return '₦'; // Add more currencies as needed default: return ''; // Default to no symbol } } const csrfToken = "{{ csrf_token() }}"; //Filter Functionality const filterDropdown = document.querySelector('.custom-dropdown .dropdown-content'); const filterItems = filterDropdown.querySelectorAll('a'); const productRows = document.querySelectorAll('tbody tr'); filterItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); const filterValue = this.getAttribute('data-value'); // Update button text to show selected filter const filterBtn = document.querySelector('.dropdown-btn'); filterBtn.innerHTML = `<i class="fas fa-filter"></i> ${this.textContent}`; // Make AJAX request to get filtered data fetch(`/admin/coupons-filter?period=${filterValue}`, { method: 'GET', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', } }) .then(response => response.json()) .then(data => { const tbody = document.querySelector('tbody'); tbody.innerHTML = ''; // Clear existing rows console.log(data); if (data.coupons.data.length === 0) { tbody.innerHTML = ` <tr> <td colspan="10" class="text-center"> <img src="/images/no-data.png" alt="No Data" style="max-width: 350px; margin-bottom: 50px; margin-top: 150px;"> <p>Oops, no products found for this period.</p> </td> </tr> `; return; } // Populate table with filtered data data.coupons.data.forEach((coupon, index) => { const currencySymbol = getCurrencySymbol('NGN'); const row = ` <tr> <td>${index + 1}</td> <td> <img src="${coupon.banner ? `/storage/coupons/${coupon.banner}` : '/images/default.png'}" alt="" class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;" onerror="this.onerror=null;this.src='/images/default.png';"> </td> <td>${coupon.title}</td> <td>${coupon.code}</td> <td> <p> ${coupon.discount !== null ? (coupon.discount_type === 'percent' ? `${coupon.discount}%` : coupon.discount_type === 'fixed' ? `${currencySymbol}${makeCurrencyFormat(coupon.discount)}` : coupon.discount) : '' } </p> </td> <td>${new Date(coupon.start_date).toISOString().split('T')[0]} - ${coupon.end_date ? new Date(coupon.end_date).toISOString().split('T')[0] : new Date(coupon.start_date).toISOString().split('T')[0]} </td> <td>${coupon.minimum_shopping}</td> <td> <p class="${coupon.status === 'active' ? 'verified' : 'unverified'}"> ${coupon.status === 'active' ? 'Active' : 'Inactive'} </p> </td> <td> <div class="custom-dropdown-b"> <i class="fa-solid fa-ellipsis" onclick="toggleDropdown(event)"></i> <div class="dropdown-menu-b"> <div class="dropdown-item-column-b"> <a class="dropdown-item-b" href="/admin/coupons/edit/${coupon.id}"> <i class="fa fa-edit"></i> Edit </a> </div> <div class="dropdown-item-column-b"> <form class="form-delete-button" action="/admin/coupons/destroy/${coupon.id}" id="delete-form-${coupon.id}" method="post"> <input type="hidden" name="_token" value="${csrfToken}"> <input type="hidden" name="_method" value="DELETE"> <a class="dropdown-item-b button-delete" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('delete-form-${coupon.id}').submit();"> <i class="mdi mdi-trash-can-outline"></i> Delete </a> </form> </div> <div class="dropdown-item-column-b"> <a class="dropdown-item-b" href="/admin/coupon/products/${coupon.id}"> <i class="flaticon-new-product"></i> Products </a> </div> </div> </div> </td> </tr> `; tbody.insertAdjacentHTML('beforeend', row); }); }) .catch(error => { console.error('Error:', error); }); }); }); //Search Functionality document.addEventListener("DOMContentLoaded", function() { const searchInput = document.querySelector('.search-container input[type="search"]'); const tbody = document.querySelector('tbody'); let debounceTimer; searchInput.addEventListener('input', function() { // Clear previous debounce timer clearTimeout(debounceTimer); const searchTerm = this.value.trim(); // Debounce to prevent too many requests debounceTimer = setTimeout(() => { // Only search if term is not empty if (searchTerm.length > 0) { fetch(`/admin/coupons-search?q=${encodeURIComponent(searchTerm)}`, { method: 'GET', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', } }) .then(response => response.json()) .then(data => { // Clear existing rows tbody.innerHTML = ''; if (data.coupons.data.length === 0) { // No products found tbody.innerHTML = ` <tr> <td colspan="10" class="text-center"> <img src="/images/no-data.png" alt="No Data" style="max-width: 350px; margin-bottom: 50px; margin-top: 150px;"> <p>No products found matching your search.</p> </td> </tr> `; return; } // Populate table with search results data.coupons.data.forEach((coupon, index) => { const currencySymbol = getCurrencySymbol('NGN'); const row = ` <tr> <td>${index + 1}</td> <td> <img src="${coupon.banner ? `/storage/coupons/${coupon.banner}` : '/images/default.png'}" alt="" class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;" onerror="this.onerror=null;this.src='/images/default.png';"> </td> <td>${coupon.title}</td> <td>${coupon.code}</td> <td> <p> ${coupon.discount !== null ? (coupon.discount_type === 'percent' ? `${coupon.discount}%` : coupon.discount_type === 'fixed' ? `${currencySymbol}${coupon.discount}` : coupon.discount) : '' } </p> </td> <td>${new Date(coupon.start_date).toISOString().split('T')[0]} - ${coupon.end_date ? new Date(coupon.end_date).toISOString().split('T')[0] : new Date(coupon.start_date).toISOString().split('T')[0]} </td> <td>${coupon.minimum_shopping}</td> <td> <p class="${coupon.status === 'active' ? 'verified' : 'unverified'}"> ${coupon.status === 'active' ? 'Active' : 'Inactive'} </p> </td> <td> <div class="custom-dropdown-b"> <i class="fa-solid fa-ellipsis" onclick="toggleDropdown(event)"></i> <div class="dropdown-menu-b"> <div class="dropdown-item-column-b"> <a class="dropdown-item-b" href="/admin/coupons/edit/${coupon.id}"> <i class="fa fa-edit"></i> Edit </a> </div> <div class="dropdown-item-column-b"> <form class="form-delete-button" action="/admin/coupons/destroy/${coupon.id}" id="delete-form-${coupon.id}" method="post"> <input type="hidden" name="_token" value="${csrfToken}"> <input type="hidden" name="_method" value="DELETE"> <a class="dropdown-item-b button-delete" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('delete-form-${coupon.id}').submit();"> <i class="mdi mdi-trash-can-outline"></i> Delete </a> </form> </div> <div class="dropdown-item-column-b"> <a class="dropdown-item-b" href="/admin/coupon/products/${coupon.id}"> <i class="flaticon-new-product"></i> Products </a> </div> </div> </div> </td> </tr> `; tbody.insertAdjacentHTML('beforeend', row); }); }) .catch(error => { console.error('Search error:', error); tbody.innerHTML = ` <tr> <td colspan="10" class="text-center"> <p>An error occurred while searching. Please try again.</p> </td> </tr> `; }); } else { // If search is empty, reload full product list location.reload(); } }, 300); // 300ms debounce }); }); </script> @endpush <style> .hidden { display: none; } </style>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0.71 |
proxy
|
phpinfo
|
Settings