<?php $__env->startSection('content'); ?>
<br><br><br>
<div class="container">
<div class="row justify-content-center">
<?php echo $__env->make('user.sidebar', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<div class="col-lg-10 col-md-10 col-sm-12 col-12">
<div class="account_manuRight">
<div class="form-content profiletab_content">
<!-- Row for heading and button -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<div class="mb-3">
<p class="d-flex align-items-center justify-content-between mb-0">Websites
<button id="openModal" class="btn btn-primary">Create Website</button>
</p>
</div>
</div>
</div>
<div id="formModal" class="modal1">
<div class="modal-content1">
<span class="close1">×</span>
<div class="form-wizard">
<h2 class="text-center mb-3">Create Website</h2>
<div class="steps">
<div class="step active" data-step="1">1 <br><span>Basic Information</span></div>
<div class="line"></div>
<div class="step" data-step="2">2 <br><span>Website Information</span></div>
<div class="line"></div>
<div class="step" data-step="3">3 <br><span>Instructions</span></div>
</div>
<div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
<form id="multiStepForm" enctype="multipart/form-data">
<?php echo csrf_field(); ?>
<!-- Step 1: Basic Information -->
<div class="form-step" data-step="1">
<h2>Basic Information</h2>
<div class="row">
<!-- Input 1 -->
<div class="col-md-6 mb-3">
<label for="adminFirstName" class="form-label">Admin First
Name</label>
<input type="text" class="form-control" id="adminFirstName"
placeholder="enter first name.." name="first_name" required>
</div>
<!-- Input 2 -->
<div class="col-md-6 mb-3">
<label for="adminLastName" class="form-label">Admin Last
Name</label>
<input type="text" class="form-control" id="adminLastName"
placeholder="enter last name.." name="last_name" required>
</div>
</div>
<div class="row">
<!-- Input 3 -->
<div class="col-md-6 mb-3">
<label for="adminEmail" class="form-label">Admin Email</label>
<input type="email" class="form-control" id="adminEmail"
placeholder="enter email.." name="email" required>
</div>
<!-- Input 4 -->
<div class="col-md-6 mb-3">
<label for="businessName" class="form-label">Business Name</label>
<input type="text" class="form-control" id="businessName"
placeholder="enter business name.." name="business_name"
required>
</div>
</div>
<div class="row">
<!-- Input 5 -->
<div class="col-md-6 mb-3">
<label for="businessEmail" class="form-label">Business Email</label>
<input type="email" class="form-control" id="businessEmail"
placeholder="enter business email.." name="business_email"
required>
</div>
<!-- Input 6 -->
<div class="col-md-6 mb-3">
<label for="businessPhone" class="form-label">Business Phone</label>
<input type="text" class="form-control" id="businessPhone"
placeholder="enter phone number.." name="business_phone"
required>
</div>
</div>
<div class="row">
<!-- Input 7 -->
<div class="col-md-6 mb-3">
<label for="businessAddress1" class="form-label">Address Line
1</label>
<input type="text" class="form-control" id="businessAddress1"
placeholder="enter address.." name="business_address_1"
required>
</div>
<!-- Input 8 -->
<div class="col-md-6 mb-3">
<label for="businessAddress2" class="form-label">Address Line
2</label>
<input type="text" class="form-control" id="businessAddress2"
placeholder="enter address.." name="business_address_2">
</div>
</div>
<div class="row">
<!-- Street -->
<div class="col-md-6 mb-3">
<label for="street" class="form-label">Street</label>
<input type="text" class="form-control" id="street"
placeholder="enter street.." name="street">
</div>
<div class="col-md-6 mb-3">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" name="country">
<option selected disabled>Select Country</option>
<?php $__currentLoopData = $countries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $country): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e($country->id); ?>"><?php echo e($country->name); ?>
</option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</select>
</div>
</div>
<div class="row">
<!-- State -->
<div class="col-md-6 mb-3">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" name="state">
<option selected disabled>Select State</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label for="city" class="form-label">City</label>
<select class="form-select" id="city" name="city">
<option selected disabled>Select City</option>
</select>
</div>
</div>
<div class="row">
<!-- Zip Code -->
<div class="col-md-6 mb-3">
<label for="zipCode" class="form-label">Zip Code</label>
<input type="text" class="form-control" id="zipCode"
placeholder="enter zip code.." name="zip_code">
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<button type="button" class="btn btn-primary next-btn mx-2">Next
Step</button>
</div>
</div>
<!-- Step 2: Website Information -->
<div class="form-step" data-step="2">
<h2>Website Information</h2>
<div class="row mb-3">
<div class="col-md-12">
<div class="d-flex align-items-center mb-2">
<input type="checkbox" id="haveDomain" name="haveDomain">
<label for="haveDomain" class="ms-2">I have a domain</label>
</div>
</div>
<div class="col-md-6">
<label for="domainName" class="form-label">Domain</label>
<input type="text" class="form-control" id="domainName"
name="domain_name" placeholder="enter domain name..">
</div>
<div class="col-md-6">
<label for="subdomainPreference" class="form-label">Subdomain Name
Preference</label>
<input type="text" class="form-control"
id="subdomainPreference" name="subdomain_preference"
placeholder="enter subdomain name..">
</div>
<div class="col-md-6">
<label for="socialUrls" class="form-label">Social Media URLs
(Optional)</label>
<input type="text" class="form-control" id="social_urls"
name="social_urls[]" placeholder="enter URL..">
<button type="button" class="btn btn-secondary mt-2 add-more">Add
More</button>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="logo" class="form-label">Logo (Optional)</label>
<input type="file" class="form-control" id="logo"
name="logo">
</div>
<div class="col-md-6">
<label for="media" class="form-label">Media (Optional)</label>
<input type="file" class="form-control" id="media"
name="media[]" multiple>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="pages" class="form-label">What pages do you need on
your website ? (Optional)</label>
<input type="text" class="form-control" id="pages"
name="pages[]" placeholder="enter a page name">
<button type="button" class="btn btn-secondary mt-2 add-more"
id="addPageField">Add More</button>
</div>
<div class="col-md-6">
<label for="businessParagraph" class="form-label">Please write one
small paragraph about your Company (Optional)</label>
<textarea class="form-control" id="businessParagraph" name="business_paragraph" rows="2"
placeholder="enter business detail.."></textarea>
</div>
</div>
<div class="row mb-0 service-field" id="servicesContainer">
<!-- Default Service Input and Textarea -->
<div class="col-md-12">
<label for="services" class="form-label">List the services or
products
your company offers
(Optional)</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control mb-2" id="service_name"
name="services_name[]" placeholder="Service Name">
</div>
<div class="col-md-6">
<textarea class="form-control" id="serviceDescription" name="services_description[]" rows="2"
placeholder="Service Description"></textarea>
</div>
</div>
<button type="button" class="btn btn-secondary mt-2 mb-3"
id="addServiceField">Add More</button>
<div class="row mb-3">
<label for="setColor" class="form-label">What colors would you like on
your site?</label>
<div class="col-md-4">
<label for="primaryColor" class="form-label">Primary Color</label>
<input type="color" class="form-control" id="primaryColor"
name="primary_color">
</div>
<div class="col-md-4">
<label for="secondaryColor" class="form-label">Secondary
Color</label>
<input type="color" class="form-control" id="secondaryColor"
name="secondary_color">
</div>
<div class="col-md-4">
<label for="highlightColor" class="form-label">Highlight
Color</label>
<input type="color" class="form-control" id="highlightColor"
name="highlight_color">
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<button type="button"
class="btn btn-secondary prev-btn mx-2">Previous</button>
<button type="button" class="btn btn-primary next-btn mx-2">Next
Step</button>
</div>
</div>
<!-- Step 3: Instructions -->
<div class="form-step" data-step="3">
<h2>Instructions</h2>
<div class="mb-3">
<label for="instructions" class="form-label">Personal
Message/Instructions</label>
<textarea class="form-control" id="instructions" name="instructions" rows="4"
placeholder="enter instructions detail.."></textarea>
</div>
<div id="message" style="margin-top: 20px; display: none;"></div>
<div class="d-flex align-items-center justify-content-center">
<button type="button"
class="btn btn-secondary prev-btn mx-2">Previous</button>
<button type="submit" class="btn btn-primary mx-2">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Website data -->
<div class="search-about-wrap">
<div class="row" id="website-list">
</div>
</div>
<div class="modal fade" id="raiseTicketModel" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Raise Ticket Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="raiseTicketForm" action="" method="POST">
<?php echo csrf_field(); ?>
<div class="col-md-12">
<label for="email">Email</label>
<input class="form-control" type="email" id="email" name="email"
placeholder="E-mail Address"><br>
<label for="subject">Subject</label>
<input class="form-control" type="text" id="subject" name="subject"
placeholder="Enter subject.."><br>
<label for="message">Message</label>
<textarea class="form-control" id="message1" name="message" placeholder="Enter message.."></textarea>
</div>
<div id="messageTicket" style="margin-top: 20px; display: none;"></div>
<div class="form-button mt-3">
<button type="button" class="btn btn-primary"
id="submitTicket">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="popupOverlay"
style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;">
</div>
<!-- Pagination -->
<div class="pagination">
<ul class="pagination justify-content-center">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<div class="modal pricing_modal fade" id="pricingPopup" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog pricing_modalDialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pricing Plans</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="pricing-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<?php $__currentLoopData = $plans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $plan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php if($plan->interval == 'month'): ?>
<div class="our-plans">
<h2><?php echo e($plan->name); ?></h2>
<p><?php echo e($plan->description); ?></p>
<div class="price">
<p>
<span class="ss">$</span><?php echo e($plan->price); ?>
<span class="mm">/<?php echo e($plan->interval); ?></span>
</p>
</div>
<a href="javascript:void(0);"
class="btn btn-sm w-full w-lg-auto btn3 getStartedBtn"
data-plan-id="<?php echo e($plan->key); ?>" data-website-id="" id="modalButton">
Get Started
</a>
<h5>Everything in Personal, plus:</h5>
<div class="plans-list">
<ul class="features">
<?php if(count($plan->features)): ?>
<?php $__currentLoopData = $plan->features; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $planFeature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php if(isset($planFeature->pricingPlanFeature)): ?>
<li>
<i
class="fas fa-check"></i><?php echo e($planFeature->pricingPlanFeature->description); ?>
</li>
<?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
</ul>
</div>
</div>
<?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<?php $__currentLoopData = $plans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $plan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php if($plan->interval == 'year'): ?>
<div class="our-plans">
<h2><?php echo e($plan->name); ?></h2>
<p><?php echo e($plan->description); ?></p>
<div class="price">
<p>
<span class="ss">$</span>
<?php echo e($plan->price); ?>
<span class="mm">/<?php echo e($plan->interval); ?></span>
</p>
</div>
<a href="javascript:void(0);"
class="btn btn-sm w-full w-lg-auto btn3 getStartedBtn"
data-plan-id="<?php echo e($plan->key); ?>" data-website-id="" id="modalButton">
Get Started
</a>
<h5>Everything in Personal, plus:</h5>
<div class="plans-list">
<ul class="features">
<?php if(count($plan->features)): ?>
<?php $__currentLoopData = $plan->features; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $planFeature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php if(isset($planFeature->pricingPlanFeature)): ?>
<li>
<i
class="fas fa-check"></i><?php echo e($planFeature->pricingPlanFeature->description); ?>
</li>
<?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
</ul>
</div>
</div>
<?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="our-plans1">
<h2>Customize</h2>
<p>For individuals and small teams looking to manage their tasks.</p>
<div class="price invisible">
<p><span class="ss">₹</span>35<span class="mm">/month</span></p>
</div>
<a href="#" class="btn btn-sm w-full w-lg-auto btn4">Contact Us</a>
<h5>Everything in Personal, plus:</h5>
<div class="plans-list">
<ul class="features">
<li><i class="fas fa-check"></i>Custom permissions</li>
<li><i class="fas fa-check"></i> Custom designs & features</li>
<li><i class="fas fa-check"></i>Unlimited updates</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="loader_main" id="payment_loader" style="display: none;">
<span class="loader">Please wait while we check your payment status</span>
</div>
<?php $__env->startSection('script'); ?>
<script>
$(document).ready(function() {
loadWebsites(1);
let currentStep = 1;
// Open Modal
$('#openModal').click(function() {
$('#formModal').css('display', 'flex');
});
// Close Modal
$('.close1').click(function() {
$('#formModal').css('display', 'none');
});
// Close Modal on Outside Click
$(window).click(function(e) {
if ($(e.target).is('#formModal')) {
$('#formModal').css('display', 'none');
}
});
// Update Steps
function updateSteps() {
$('.step').each(function(index) {
if (index < currentStep) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$('.line').each(function(index) {
if (index < currentStep - 1) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
// Show Current Step
function showStep() {
$('.form-step').removeClass('active');
$(`.form-step[data-step="${currentStep}"]`).addClass('active');
}
// Validate Current Step
function validateStep(step) {
let isValid = true;
$(`.form-step[data-step="${step}"] input[required], .form-step[data-step="${step}"] textarea[required]`)
.each(function() {
if (!$(this).val().trim()) {
isValid = false;
$(this).addClass('error');
$(this).next('.error-message').remove();
$(this).after(
'<span class="error-message text-danger">This field is required</span>');
} else {
$(this).removeClass('error');
$(this).next('.error-message').remove();
}
});
return isValid;
}
// Toggle Domain/Subdomain Fields
$('#haveDomain').change(function() {
if ($(this).is(':checked')) {
$('#domainName').closest('.col-md-6').show();
$('#domainName').attr('required', true);
$('#subdomainPreference').closest('.col-md-6').hide();
$('#subdomainPreference').removeAttr('required');
} else {
$('#domainName').closest('.col-md-6').hide();
$('#domainName').removeAttr('required');
$('#subdomainPreference').closest('.col-md-6').show();
$('#subdomainPreference').attr('required', true);
}
}).trigger('change');
// Next Button
$('.next-btn').click(function() {
if (validateStep(currentStep)) {
currentStep++;
updateSteps();
showStep();
}
});
// Previous Button
$('.prev-btn').click(function() {
currentStep--;
updateSteps();
showStep();
});
// Add More Dynamic Fields
$('.add-more').click(function() {
const fieldContainer = $(
'<div class="dynamic-field mt-2"></div>');
const field = $(this).siblings('input, textarea').first().clone();
field.val('');
const deleteBtn = $(
'<button type="button" class="btn btn-danger btn-sm remove-field"><i class="fas fa-times"></i></button>'
); // Delete button
fieldContainer.append(field).append(deleteBtn);
$(this).before(fieldContainer);
});
// Add More Service Fields
$('#addServiceField').click(function() {
const serviceField = `
<div class="col-md-12">
<div class="row dynamic-field">
<div class="col-md-6">
<input type="text" class="form-control mb-2" name="services_name[]" placeholder="Service Name">
</div>
<div class="col-md-6">
<div class="position-relative d-flex">
<textarea class="form-control" name="services_description[]" rows="2" placeholder="Service Description"></textarea>
<button type="button" class="btn btn-danger mt-3 remove-field"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
</div> `;
$('#servicesContainer').append(serviceField);
});
$(document).on('click', '.remove-field', function() {
$(this).closest('.dynamic-field').remove(); // Remove dynamic field
});
$('#multiStepForm').submit(function(e) {
e.preventDefault();
const formData = new FormData(this);
// Manually encode arrays (like social_urls, pages, etc.)
const socialUrls = $('#socialUrlsInput').val();
if (Array.isArray(socialUrls)) {
formData.append('social_urls', JSON.stringify(socialUrls));
}
const pages = $('#pagesInput').val();
if (Array.isArray(pages)) {
formData.append('pages', JSON.stringify(pages));
}
const servicesName = $('#servicesNameInput').val();
if (Array.isArray(servicesName)) {
formData.append('services_name', JSON.stringify(servicesName));
}
const servicesDescription = $('#servicesDescriptionInput').val();
if (Array.isArray(servicesDescription)) {
formData.append('services_description', JSON.stringify(servicesDescription));
}
$.ajax({
url: '<?php echo e(route('create.user.website')); ?>',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#message').text(
'Congratulations! You have submitted your website request to move your business identity to next level. Our team will contact you via email within 24 hours for additional questions to complete the setup of your website.'
).css('color', 'green').show();
loadWebsites(1);
setTimeout(() => {
$('#formModal').hide();
$('#multiStepForm')[0].reset();
currentStep = 1;
updateSteps();
showStep();
}, 3000);
},
error: function(xhr) {
const errors = xhr.responseJSON?.errors || {};
let errorMessages = '';
for (const [key, value] of Object.entries(errors)) {
errorMessages += `${key}: ${value}\n`;
}
$('#message').text(errorMessages ||
'An error occurred while submitting.').css('color', 'red')
.show();
}
});
});
// Initialize the first step
updateSteps();
showStep();
});
function loadWebsites(page = 1) {
// Show loading icon
const websiteList = $('#website-list');
websiteList.html(
'<div class="text-center"><i class="fa fa-spinner fa-spin" style="font-size: 24px;"></i> Loading...</div>'
);
$.ajax({
url: '<?php echo e(route('user.website')); ?>',
method: 'GET',
data: {
current_page: page
},
success: function(response) {
websiteList.empty();
// var pricingUrl = "<?php echo e(route('pricing.website')); ?>";
// console.log(response.userWebsites[0])
if (response.userWebsites.length > 0) {
response.userWebsites.forEach(website => {
const logoUrl = website.logo ? '<?php echo e(asset('storage')); ?>/' + website.logo :
'<?php echo e(asset('storage/logos/default-logo.jpg')); ?>';
const createdAt = website.created_at ? new Date(website.created_at)
.toLocaleDateString('en-GB') : 'N/A';
const subscriptions = website.user_subscription || [];
const subscription = subscriptions.length > 0 ? subscriptions[0] :
null; // Use the first subscription
const statusMap = {
1: {
label: 'Draft',
class: 'status_draft'
},
2: {
label: 'Submitted',
class: 'status_Submitted'
},
3: {
label: 'Unpublished',
class: 'status_Unpublished'
},
4: {
label: 'Published',
class: 'status_Published'
},
};
const websiteStatus = website.status;
// Dynamically retrieve the label and class from the statusMap
const {
label: statusLabel = 'Unknown',
class: statusClass = 'status_unknown'
} = statusMap[websiteStatus] || {};
const renewalDate = subscription && subscription.charge_at ?
new Date(subscription.charge_at * 1000).toLocaleDateString('en-GB') :
'N/A';
// Render
const renewalDateHTML = renewalDate !== 'N/A' ?
`<p>Next Renewal Date: ${renewalDate}</p>` :
'';
const domainHTML = websiteStatus === 4 ?
`<p>
<a href="${website.domain_name ? 'http://' + website.domain_name : 'http://' + website.subdomain_preference}" target="_blank">
<i class="fas fa-globe"></i>
${website.domain_name ? website.domain_name : website.subdomain_preference}
</a>
<i class="far fa-copy ms-2 copy-link" data-url="${website.domain_name ? 'http://' + website.domain_name : 'http://' + website.subdomain_preference}" title="Copy to clipboard"></i>
</p>` : '';
websiteList.append(`
<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>${statusLabel}</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>${website.first_name} ${website.last_name}</h6>
<h6>Email:${website.email} </h6>
${domainHTML}
<p>Last saved: ${createdAt}</p>
${renewalDateHTML}
</div>
</div>
<div class="website-actions">
<button class="btn prev-2" data-bs-toggle="modal" data-bs-target="#raiseTicketModel">Raise Ticket</button>
<button class="btn prev-2">Customize</button>
<!-- Pay Now Button -->
<button class="btn prev-2 payNowBtn" id="payNowBtn" data-bs-toggle="modal" data-bs-target="#pricingPopup"
data-website-id="${website.id}"
style="${website.user_subscription.some(sub => [2, 3, 8].includes(sub.rz_status)) ? 'display: none;' : ''}">
Pay Now
</button>
<!-- Unsubscribe Button -->
<button class="btn prev-2 unsubscribeBtn"
data-website-id="${website.id}"
style="${website.user_subscription.some(sub => [2, 3, 8].includes(sub.rz_status)) ? 'background-color: green; border: 1px solid green' : 'display: none;'}">
Unsubscribe
</button>
</div>
</div>
</div>
`);
});
const paginationContainer = $('.pagination ul');
paginationContainer.empty();
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>
`);
}
for (let i = 1; i <= response.last_page; 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>
`);
}
}
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 clicks
$('.pagination ul').on('click', '.page-link', function(e) {
e.preventDefault();
const page = $(this).data('page');
if (page) {
loadWebsites(page);
}
});
} else {
websiteList.append('<p>No websites found.</p>');
}
},
error: function(xhr) {
console.error('Error:', xhr.responseText);
}
});
}
$(document).ready(function() {
const userEmail = <?php echo json_encode(Auth::user()->email, 15, 512) ?>;
$('#email').val(userEmail);
$('#raiseTicketModel').on('show.bs.modal', function() {
$('#messageTicket').hide();
});
// Form submission
$('#submitTicket').on('click', function(e) {
e.preventDefault();
const formData = $('#raiseTicketForm').serialize();
console.log('formData', formData);
// const email = $('#email').val().trim();
// const subject = $('#subject').val().trim();
// const message = $('#message1').val().trim();
// // Validation
// if (!email || !subject || !message) {
// alert('Please fill all fields.');
// return;
// }
$('#spinner').show();
$.ajax({
url: '<?php echo e(route('user.website.tickets')); ?>',
method: 'POST',
data: formData,
success: function(response) {
$('#spinner').hide();
console.log('Response:', response);
$('#messageTicket')
.text(
'Congratulations! Your ticket has been submitted successfully.')
.css('color', 'green')
.show();
setTimeout(function() {
$('#raiseTicketModel').modal('hide');
$('#raiseTicketForm')[0].reset();
}, 2000);
},
error: function(error) {
console.log('Error:', error);
$('#messageTicket')
.text('An error occurred while submitting the ticket.')
.css('color', 'red')
.show();
}
});
});
});
$(document).ready(function() {
// Handle the Unsubscribe button click
$(document).on('click', '#payNowBtn', function(e) {
e.preventDefault();
const websiteId = $(this).data('website-id');
const modalButton = $('#pricingPopup').find('.getStartedBtn');
modalButton.attr('data-website-id', websiteId);
});
});
// Handle Unsubscribe button click
$(document).on('click', '.unsubscribeBtn', function(e) {
e.preventDefault();
const websiteId = $(this).data('website-id');
// Confirm unsubscribe action
if (!confirm('Are you sure you want to unsubscribe?')) return;
// Send unsubscribe request
$.ajax({
url: '<?php echo e(route('user.subscription.unsubscribe')); ?>',
type: 'GET',
data: {
website_id: websiteId
},
success: function(response) {
if (response.status === 'success') {
alert('Successfully unsubscribed!');
// Toggle button visibility
$(`.payNowBtn[data-website-id="${websiteId}"]`).show();
$(`.unsubscribeBtn[data-website-id="${websiteId}"]`).hide();
location.reload();
} else {
alert('Failed to unsubscribe. Please try again.');
}
},
error: function(xhr, status, error) {
console.error('Error:', error);
alert('An error occurred. Please try again.');
}
});
});
$(document).ready(function() {
$('.getStartedBtn').on('click', function(e) {
e.preventDefault();
var planId = $(this).data('plan-id');
var websiteId = $(this).data('website-id');
// console.log(websiteId);
$.ajax({
url: '<?php echo e(route('buy-subscription-plan')); ?>',
type: 'GET',
data: {
plan_id: planId,
website_id: websiteId,
},
success: function(response) {
if (response && response.subscription_url) {
window.open(response.subscription_url, '_blank');
$('#payment_loader').show();
startSubscriptionCheck(websiteId, planId);
} else {
$('#payment_loader').hide();
alert('Error occurred. Please try again.');
}
},
error: function(xhr, status, error) {
$('#payment_loader').hide();
console.error(error);
alert('An error occurred. Please try again later.');
}
});
});
});
function startSubscriptionCheck(websiteId, planId) {
var interval = setInterval(function() {
checkSubscriptionStatus(websiteId, interval, planId);
}, 10000);
}
function checkSubscriptionStatus(websiteId, interval, planId) {
$.ajax({
url: '/subscription-status-check',
type: 'GET',
data: {
plan_id: planId,
website_id: websiteId,
},
success: function(response) {
if (response && response.status === 'success') {
$(`.payNowBtn[data-website-id="${websiteId}"]`).hide();
$(`.unsubscribeBtn[data-website-id="${websiteId}"]`).show();
$('#payment_loader').hide();
location.reload();
clearInterval(interval);
} else {
console.log('Subscription is not successful. Retrying...');
}
},
error: function(xhr, status, error) {
console.error('Error checking subscription status', error);
}
});
}
$(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);
});
});
$(document).ready(function() {
$('#country').change(function() {
let countryId = $(this).val();
$('#state').html('<option selected disabled>Loading...</option>');
$.ajax({
url: '<?php echo e(route('get.states')); ?>',
type: 'GET',
data: {
country_id: countryId
},
success: function(data) {
let stateOptions = '<option selected disabled>Select State</option>';
data.forEach(state => {
stateOptions +=
`<option value="${state.id}">${state.name}</option>`;
});
$('#state').html(stateOptions);
}
});
});
$('#state').change(function() {
let stateId = $(this).val();
$('#city').html('<option selected disabled>Loading...</option>');
$.ajax({
url: '<?php echo e(route('get.cities')); ?>',
type: 'GET',
data: {
state_id: stateId
},
success: function(data) {
let cityOptions = '<option selected disabled>Select City</option>';
data.forEach(city => {
cityOptions +=
`<option value="${city.id}">${city.name}</option>`;
});
$('#city').html(cityOptions);
}
});
});
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front.main_layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/spion/resources/views/user/website.blade.php ENDPATH**/ ?>