File: /var/www/html/spion/resources/views/admin/user/website.blade.php
@extends('adminlte::page')
@include('admin.includes.datatable-axios-files')
@section('title', 'Website Management')
@section('content_header')
<h1>User Website</h1>
{{-- <small>Manage Website </small> --}}
@stop
@section('content')
<div class="card card-dark">
<div class="card-header">
<h3 class="card-title">Website Details</h3>
<div class="card-tools">
{{-- <a href="#!" class="btn btn-dark invisible">test</a> --}}
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="search">Search</label>
<x-adminlte-input class="form-control" id="search_keyword" name="search_keyword" placeholder="searching..." />
</div>
<div class="form-group">
<label for="status">Status</label>
@php
$options = ['all' => 'All', 1 => 'Draft', 2 => 'Submitted', 3 => 'Unpublished', 4 => 'Published'];
@endphp
<x-adminlte-select name="status_filter" id="status_filter">
<x-adminlte-options :options="$options" selected="all" />
</x-adminlte-select>
</div>
<div class="search-about-wrap">
<div class="row">
<!-- append code -->
</div>
</div>
<!-- Pagination -->
<div class="pagination">
<ul class="pagination justify-content-center">
</ul>
</div>
</div>
</div>
@stop
@section('js')
<script>
$(document).ready(function() {
function loadWebsites(page = 1) {
let searchKeyword = $('#search_keyword').val();
let statusFilter = $('#status_filter').val();
let perPage = 5;
$.ajax({
url: "{{ route('admin.users.website') }}",
type: "GET",
data: {
search_keyword: searchKeyword,
status_filter: statusFilter,
per_page: perPage,
page: page
},
beforeSend: function() {
$('.search-about-wrap .row').html('<p class="text-center">Loading...</p>');
},
success: function(response) {
updateWebsiteList(response.data);
updatePagination(response);
},
error: function() {
$('.search-about-wrap .row').html(
'<p class="text-center text-danger">Error fetching data.</p>');
}
});
}
function updateWebsiteList(data) {
let container = $('.search-about-wrap .row');
container.html(''); // Clear previous data
if (data.length === 0) {
container.append('<p class="text-center">No records found.</p>');
} else {
data.forEach(function(item) {
let statusClass = 'status_' + (item.status_text || 'Unknown');
const logoUrl = item.logo ? '{{ asset('storage') }}/' + item.logo :
'{{ asset('storage/logos/default-logo.jpg') }}';
let lastSaved = item.last_saved || 'N/A';
let renewalDateHTML = item.renewal_date !== 'N/A' ?
`<p>Next Renewal Date: ${item.renewal_date}</p>` : '';
let websiteItem = `
<div class="col-lg-12">
<div class="website-item d-flex justify-content-between align-items-center p-3 mb-3 border">
<div class="website_status ${statusClass}">
<span>${item.status_text || 'Unknown'}</span>
</div>
<div class="website-info d-flex align-items-center">
<img src="${logoUrl}" alt="Website Logo" class="ml-3" style="width: 50px; height: 50px; object-fit: cover;">
<div class="center_text">
<h6>
${item.name}
</h6>
<h6>${item.email}</h6>
<p>
<a href="${item.domain_name ? 'http://' + item.domain_name : 'http://' + item.subdomain_preference}" target="_blank">
<i class="fas fa-globe"></i>
${item.domain_name ? item.domain_name : item.subdomain_preference}
</a>
<i class="far fa-copy ml-2 copy-link" data-url="${item.domain_name ? 'http://' + item.domain_name : 'http://' + item.subdomain_preference}" title="Copy to clipboard"></i>
</p>
<p>Last saved: ${lastSaved}</p>
${renewalDateHTML}
</div>
</div>
<div class="website-actions">
<a class="btn btn-success edit-user" href="{{ route('admin.users.website.edit') }}?website_id=${item.id}" >Edit</a>
<a href="{{ route('admin.transactions.index') }}?website_id=${item.id}" class="btn btn-warning transaction-user" data-id="${item.id}">Transaction</a>
</div>
</div>
</div>
`;
container.append(websiteItem);
});
}
}
function updatePagination(response) {
const paginationContainer = $('.pagination ul');
paginationContainer.empty();
// Previous Button
if (response.current_page > 1) {
paginationContainer.append(`
<li class="page-item">
<a class="page-link" href="#" data-page="${response.current_page - 1}">
<i class="fas fa-angle-left"></i>
</a>
</li>
`);
} else {
paginationContainer.append(`
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-left"></i></a>
</li>
`);
}
// Page Numbers (Show up to 5 pages)
let startPage = Math.max(1, response.current_page - 2);
let endPage = Math.min(response.last_page, response.current_page + 2);
for (let i = startPage; i <= endPage; i++) {
if (i === response.current_page) {
paginationContainer.append(`
<li class="page-item active">
<a class="page-link" href="#">${i}</a>
</li>
`);
} else {
paginationContainer.append(`
<li class="page-item">
<a class="page-link" href="#" data-page="${i}">${i}</a>
</li>
`);
}
}
// Next Button
if (response.current_page < response.last_page) {
paginationContainer.append(`
<li class="page-item">
<a class="page-link" href="#" data-page="${response.current_page + 1}">
<i class="fas fa-angle-right"></i>
</a>
</li>
`);
} else {
paginationContainer.append(`
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-right"></i></a>
</li>
`);
}
// Handle pagination click event
$('.pagination ul').off('click', '.page-link').on('click', '.page-link', function (e) {
e.preventDefault();
const page = $(this).data('page');
if (page) {
loadWebsites(page);
}
});
}
// Search & filter event listener
$('#search_keyword, #status_filter').on('change', function() {
loadWebsites();
});
$(document).on('click', '.pagination .page-link', function(e) {
e.preventDefault();
let page = $(this).data('page');
loadWebsites(page);
});
// Load websites on page load
loadWebsites();
});
$(document).on('click', '.copy-link', function () {
let url = $(this).data('url');
// Copy to clipboard
navigator.clipboard.writeText(url).then(() => {
let icon = $(this);
icon.attr('title', 'Copied!').tooltip('_fixTitle').tooltip('show');
setTimeout(() => {
icon.attr('title', 'Copy to clipboard').tooltip('_fixTitle');
}, 1500);
}).catch(err => {
console.error('Failed to copy:', err);
});
});
</script>
@stop