Skip to content

P
palaniapp_demo
Commit 617c3fde by Hussain Mohamed
Options

chnages

parent 4c4e5f7c
Showing with 150 additions and 2087 deletions
app/Http/Controllers/FrontendController.php
......@@ -13,6 +13,7 @@
use App\Models\LanguageModel;
use App\Models\ManageRequestModel;
use App\Models\PagesModel;
use App\Models\ProductAttributeModel;
use App\Models\ProductBrandModel;
use App\Models\ProductIndustryModel;
use App\Models\ProductModel;
......@@ -58,8 +59,11 @@ public function getProduct($name='')
$product = ProductModel::Where('product_slug',$name)->first();
$id = isset($product->id) ? $product->id:0;
if($id != '')
{
$record = ProductModel::with('category')->Where('id',$id)->first();
$brands = BrandProduct::from('product_brand as pb')
->leftJoin('brand as b', 'b.id', '=', 'pb.brand_id')
->where('pb.product_id', $id)
......@@ -76,7 +80,9 @@ public function getProduct($name='')
->select('b.size','b.id')
->get();
return view('product_detail',compact('product','size','industrys','brands'));
$productItems = ProductAttributeModel::Where('product_id', $id)->get();
return view('product_detail',compact('record','size','industrys','brands','productItems'));
}
......
public/assets/css/main.css
/**
* Template Name: Constructo
* Template URL: https://bootstrapmade.com/constructo-bootstrap-construction-template/
* Updated: Aug 30 2025 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
@charset "UTF-8";
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
/* --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
......@@ -4416,6 +4405,7 @@ section,
border: none !important;
border-bottom: 2px solid #000 !important;
box-shadow: none;
outline: none !important;
}
.contact .form-container .form-floating .form-control::placeholder {
......@@ -4431,9 +4421,9 @@ section,
background-color: transparent;
}
.contact .form-container .btn-submit {
background-color: #0bb7a7;
border: 2px solid #0bb7a7;
.contact ,.form-container ,.btn-submit {
background-color: #038c7f;
border: 2px solid #038c7f;
padding: 12px 30px;
color: #ffffff;
border-radius: 0;
......@@ -4442,7 +4432,7 @@ section,
}
.contact .form-container .btn-submit:hover {
background: #0bb7a7;
background: #038c7f;
color: #fff;
}
......@@ -5355,4 +5345,45 @@ h2.htwo {
}
.plink:hover{
color:#282828;
}
\ No newline at end of file
}
.enquiry {
background-color: #024959;
color: #fff;
padding: 15px;
border: none;
}
.tag-box-brand , .tag-box-size ,.tag-box-indus {
display: inline-block;
padding: 6px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
background-color: #fff;
font-size: 14px;
color: #282828;
}
.tag-box-brand:hover,
.tag-box-size:hover,
.tag-box-indus:hover {
border-color: #000;
}
.form-bord{
border-top-width: 0 !important;
border-right-width: 0 !important;
border-left-width: 0 !important;
border-radius: 0;
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
.form-control:focus {
border-color: #282828;
outline: 0;
box-shadow:none !important;
}
public/assets/js/main.js
......@@ -16,7 +16,7 @@
const selectBody = document.querySelector('body');
const selectHeader = document.querySelector('#header');
if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return;
window.scrollY > 180 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
window.scrollY > 200 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
}
document.addEventListener('scroll', toggleScrolled);
......
resources/views/base/footer.blade.php
......@@ -87,6 +87,9 @@
},
});
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
......
resources/views/genaralSupport.blade.php deleted 100644 → 0
@include('base.header')
<style>
/* ... (Your existing styles) ... */
/* New styles for centering the main form container */
.request_container {
/* Set a maximum width for the content to center it on wide screens */
max-width: 800px;
/* Adjust this value as needed for your design */
margin-left: auto;
margin-right: auto;
padding-left: 15px;
/* Add padding for mobile view */
padding-right: 15px;
/* Ensure no unwanted spacing from Flex/Grid that might break centering */
display: block;
}
/* Ensure the form itself respects the container */
form {
display: block;
width: 100%;
}
/* Ensure the main form content box respects the container */
.main_form-con {
/* Add shading/border if desired, but centering is handled by .request_container */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: #fff;
}
/* Optional: To ensure the header/footer stays fixed/full-width,
make sure your base.header and base.footer HTML is outside the main form container */
</style>
<div class="request_container">
<div class="home-title">
<h2 class="form-title text-center mb-4 mt-5">Welcome to <strong>Find Flicker</strong><br> Your Convenient
Service Connection</h2>
</div>
<form action="{{ route('sendRequest') }}" method="GET">
@csrf
<div class="row main_form-con px-4 py-4 ">
<input type="hidden" id="full_address">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<label class="form-label">Service*</label>
</div>
</div>
<div class="row">
<div class="col-lg-4 "> </div>
<div class="col-lg-4 mt-3 text-center ">
<button class="submit-btn w-100" id="sendRequestBtn">Send Request</button>
</div>
</div>
</div>
</form>
</div>
@include('base.footer')
resources/views/post_ad.blade.php deleted 100644 → 0
@include('base.header')
<div class="row justify-content-center download-section mt-5">
<!-- IMAGE -->
<div class="col-12 mt-3">
<img src="{{ asset('assets') }}/image/post.webp" class="download-image" alt="Download Illustration">
</div>
<!-- TITLE -->
<div class="col-12">
<h2>
Join Find Flicker today and <br>
elevate your business!
</h2>
</div>
<!-- DESCRIPTION -->
<div class="col-12 col-md-10 col-lg-10">
<p>
For individuals offering premium companionship, massage, or call-based services,
Find Flicker offers a confidential way to reach and engage with discerning clients.
</p>
</div>
<!-- SUB-TEXT -->
<div class="col-12 sub-text">
<p class="mt-3">
Download the app using the button below, install it, and get started.
</p>
</div>
<!-- DOWNLOAD BUTTON -->
<div class="col-12 mt-3">
<a href="#" class="download-btn">
<i class="fa-solid fa-download me-2"></i>
Download Application
</a>
<div class="small-text">Currently available for Android users only</div>
</div>
</div>
<div class="post_ad2-con justify-content-center py-4">
<div class="row align-items-center mb-3">
<div>
<img src="{{ asset('assets') }}/image/post2.webp" alt="APK Icon" class="apk-icon mb-3">
</div>
<div>
<h3 class="apk-title mb-0">How to Install APK File:</h3>
</div>
</div>
<div class="row steps-list">
<div class="col-12">
<p><span class="emoji">📌</span> <strong>Step 1:</strong> Tap the “Download APK” button above.</p>
<p><span class="emoji">📁</span> <strong>Step 2:</strong> Open the downloaded file from your notification bar or file manager.</p>
<p><span class="emoji">🔐</span> <strong>Step 3:</strong> If prompted, enable “Install unknown apps” in your phone’s settings.</p>
<p><span class="emoji">📲</span> <strong>Step 4:</strong> Tap “Install” on the confirmation screen.</p>
<p><span class="emoji">🚀</span> <strong>Step 5:</strong> Once installed, tap “Open” to launch the app and get started.</p>
</div>
</div>
</div>
<!-- ================= FOOTER START ================= -->
@include('base.footer')
</body>
</html>
resources/views/product_detail.blade.php
......@@ -3,24 +3,106 @@
@section('content')
<main class="main">
<div class="page-title ">
<div class="container">
<div class="container mt-2">
<div class="row g-4">
<h1 class="hfive text-center">Products</h1>
<div class="col-lg-6">
<div class="col-lg-7">
<?php
$image = isset($productItems[0]->product_image) ? $productItems[0]->product_image : '';
?>
<div class="service-image-block">
<img src="<?= $image ?>" alt="Construction Services" class="img-fluid">
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-5">
<nav class="breadcrumbs d-flex">
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="index.html"><?= $record->category->category_name ?></a></li>
<li><a href="<?= route('products', [$record->product_slug]) ?>"><?= ucwords($record->product_name) ?></a></li>
</ol>
</nav>
<div class="container py-4">
<div class="row g-4" id="productList">
<div class="row g-4">
<h3 class="htitle "><?= ucwords($record->product_name) ?></h3>
<p>{!! $record->product_description !!}</p>
<div class="d-flex">
<a href="javascript:void(0)" onclick="showForm('enquiryForm','catalogForm')"><span class="enquiry">Enquiry Now</span></a>&nbsp;
<a href="javascript:void(0)" onclick="showForm('catalogForm','enquiryForm')"><span class="enquiry">Download Catalogue</span></a>
</div>
<form action="" method="post" class="enquiryForm">
<label>Fields marked with an * are required</label>
<div class="form-floating mb-3">
<input type="text" class="form-control form-bord" id="nameInput" name="name" placeholder="Name" required="">
<label for="nameInput"> Name *</label>
</div>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control form-bord" id="emailInput" name="email" placeholder="Email Address" required="">
<label for="emailInput">Email *</label>
</div>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control form-bord" id="emailInput" name="phone" placeholder="Phone" required="">
<label for="messageInput">Phone *</label>
</div>
<div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button>
</div>
</form>
<form action="" method="post" class="catalogForm">
<label>Fields marked with an * are required</label>
<div class="form-floating mb-3">
<input type="text" class="form-control form-bord" id="emailInput" name="phone" placeholder="Phone" required="">
<label for="messageInput">Phone *</label>
</div>
<div class="d-grid mt-5">
<button type="submit" class="btn-submit">Submit</button>
</div>
</form>
<div class="mb-1">
<h6 class=" text-muted">Brand</h6>
<?php foreach($brands as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->brand ?>" data-placement="top" class="tag-box-brand"><?= $val->brand ?></span></a>
<?php } ?>
</div>
<hr>
<div class="mb-1">
<h6 class=" text-muted">Size/Range/Capacity</h6>
<div class="d-flex flex-wrap gap-2">
<?php foreach($size as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->size ?>" data-placement="top" class="tag-box-size"><?= $val->size ?></span></a>
<?php } ?>
</div>
</div>
<hr>
<div class="mb-1">
<h6 class=" text-muted">Industry</h6>
<div class="d-flex flex-wrap gap-2">
<?php foreach($industrys as $val){ ?>
<a href=""><span data-toggle="tooltip" title="<?= $val->industry ?>" data-placement="top" class="tag-box-indus"><?= ucwords($val->industry) ?></span></a>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.catalogForm , .enquiryForm').hide();
function showForm(showid,hideid)
{
$('.'+showid).show();
$('.'+hideid).hide();
}
</script>
@endsection
\ No newline at end of file
resources/views/request-waiting.blade.php deleted 100644 → 0
@include('base.header')
<style>
/* ------------------- LOADER ------------------- */
#loaderBox {
position: fixed;
inset: 0;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
flex-direction: column;
gap: 1rem;
transition: opacity .45s ease;
}
#loaderBox.hidden {
opacity: 0;
pointer-events: none;
}
.loader-spinner {
width: 64px;
height: 64px;
border: 6px solid rgba(0, 0, 0, 0.1);
border-top-color: #ef4444;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
#pageContent {
opacity: 0;
transition: opacity .45s ease;
}
#pageContent.visible {
opacity: 1;
}
/* ------------------- MAIN CARD GRID ------------------- */
#vendorCards {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}
/* Medium 2 columns */
@media (min-width: 576px) {
#vendorCards {
grid-template-columns: repeat(2, 1fr);
}
}
/* Large 3 columns */
@media (min-width: 992px) {
#vendorCards {
grid-template-columns: repeat(3, 1fr);
}
}
/* ------------------- CARD STYLE ------------------- */
.vendor-card {
background: #fff;
border-radius: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
transition: 0.25s ease;
position: relative;
}
.vendor-card:hover {
transform: translateY(-4px);
box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.12);
}
/* Purple circle badge */
/* Purple circle badge */
.card-badge {
height: 75px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.card-badge .badge-img {
width: 100%;
height: 100%;
object-fit: contain;
/* keeps aspect ratio */
}
/* Online badge */
.card-status1 {
position: absolute;
top: 10px;
right: 10px;
background: #0a9163;
color: #f6faf9;
padding: 4px 15px;
border-radius: 50px;
font-size: 12px;
font-weight: 500;
}
.card-status1 {
position: absolute;
top: 7px;
right: 4px;
background: #48ab78;
color: #4aff05;
padding: 4px 15px;
border-radius: 50px;
font-size: 7px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
/* space between dot and text */
}
.card-status {
align-items: center;
background-color: #0a9163;
border-radius: 24px;
color: #fff;
display: flex;
font-family: PlusJakartaSans-Medium;
font-size: 12px;
gap: 4px;
padding: 4px 8px;
position: absolute;
right: 10px;
top: 10px;
}
/* BIGGER DOT */
.card-status::before {
content: "";
width: 10px;
/* increase size here */
height: 10px;
/* increase size here */
background: #2cf8b4;
border-radius: 50%;
display: inline-block;
}
/* ✓ Icon */
.card-icon {
width: 50px;
height: 50px;
background: #dc2626;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-weight: bold;
font-size: 20px;
}
/* Card body & footer */
.vendor-card .card-body {
padding: 1rem;
padding-top: 60px;
/* to avoid overlapping badge */
text-align: center;
}
.vendor-card .card-footer {
padding: 1rem;
border-top: 1px solid #eee;
}
/* Back button inside first card */
.card-back-btn {
position: absolute;
top: 10px;
left: 10px;
background: #f3f4f6;
color: #111827;
padding: 6px 12px;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
z-index: 10;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card-back-btn:hover {
background: #e5e7eb;
}
button.no-hover-change:hover {
background: #ef4444 !important;
/* keep original color */
color: white !important;
/* keep original text color */
}
.loader-small {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.service-filter-bar {
width: 100%;
background: #ffffff;
border: 2px solid #ef4444;
padding: 10px 12px;
display: flex;
align-items: flex-end;
gap: 10px;
position: fixed;
top: 70px;
left: 0;
z-index: 1200;
flex-wrap: wrap;
overflow-x: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
/* hide scrollbar (optional) */
.service-filter-bar::-webkit-scrollbar {
height: 4px;
}
.service-filter-bar::-webkit-scrollbar-thumb {
background: #ef4444;
border-radius: 10px;
}
/* filter box */
.service-filter-bar .filter-item {
display: flex;
flex-direction: column;
min-width: 100px;
flex-shrink: 0;
}
/* labels */
.service-filter-bar .filter-item label {
font-size: 11px;
font-weight: 600;
color: #ef4444;
margin-bottom: 4px;
text-align: left;
}
/* inputs & selects */
.service-filter-bar .filter-item input,
.service-filter-bar .filter-item select {
height: 34px;
padding: 4px 8px;
font-size: 13px;
border-radius: 8px;
border: 1px solid #d1d5db;
background: #f9fafb;
color: #111827;
outline: none;
}
/* focus */
.service-filter-bar .filter-item input:focus,
.service-filter-bar .filter-item select:focus {
border-color: #ef4444;
background: #ffffff;
}
/* remove number arrows */
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.no-spinner {
-moz-appearance: textfield;
}
/* mobile */
@media (max-width: 768px) {
.service-filter-bar {
top: 70px;
padding: 8px;
gap: 8px;
}
.service-filter-bar .filter-item {
min-width: 100px;
}
.service-filter-bar .filter-item label {
font-size: 10px;
}
.service-filter-bar .filter-item input,
.service-filter-bar .filter-item select {
height: 32px;
font-size: 12px;
}
}
.select2-container--default .select2-selection--multiple {
min-height: 34px;
border-radius: 8px;
font-size: 12px;
}
.select2-selection__choice {
font-size: 11px;
}
.rate-group {
max-width: 30px !important;
}
.service-filter-bar .search-group {
min-width: 90px;
}
.service-filter-bar .search-group button {
height: 34px;
border-radius: 8px;
border: none;
background: #ef4444;
color: #ffffff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .2s ease;
}
.service-filter-bar .search-group button:hover {
background: #dc2626;
}
/* ================= MOBILE FIX ================= */
@media (max-width: 768px) {
/* Filter bar wraps to next line */
.service-filter-bar {
position: relative;
top: 70px!important;
flex-wrap: wrap;
overflow-x: hidden;
}
/* Each filter takes full row or half */
.service-filter-bar .filter-item {
min-width: 48%;
flex: 1 1 48%;
}
/* Search button full width */
.service-filter-bar .search-group {
flex: 1 1 100%;
}
/* Vendor cards responsive */
#vendorCards {
grid-template-columns: 1fr !important;
}
.vendor-card {
width: 100% !important;
}
}
</style>
@php
$START_SECONDS = $web_time;
@endphp
<input type="hidden" id="distance" value="5">
<!-- LOADER -->
<div id="loaderBox">
<div class="loader-spinner"></div>
<div class="text-center">
<div class="text-success fw-semibold">Kindly hold on for a minute while we search online for the relevant
services.</div>
<div id="loaderTimer" class="fs-2 fw-bold text-danger">{{ $START_SECONDS }}</div>
<div class="text-secondary">
Please wait <span id="loaderUnits">seconds</span>
</div>
<div style="text-align:center; margin-top:20px;">
<button onclick="goHome()"
style="
padding: 12px 30px;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 18px;
font-weight: 500;
color: #111827;
cursor: pointer;
transition: 0.25s ease;
">
Back to Home
</button>
</div>
</div>
</div>
<input type="hidden" id="request_id" value="{{ $request_id }}">
<!-- PAGE CONTENT -->
<div id="pageContent">
<!-- Toggle Button -->
<!-- History toggle button -->
<!-- FULL WIDTH FILTER BAR WITH SMALL INPUTS -->
<!-- FULL WIDTH FILTER BAR WITH LABELS -->
<div class="service-filter-bar">
<!-- Service -->
<div class="filter-item">
<label>Service</label>
<select id="serviceType">
<option value="" disabled>Select Service</option>
@foreach ($serviceTypeModels as $services)
<option value="{{ $services->id }}"
{{ ($requestData->service_type_id ?? '') == $services->id ? 'selected' : '' }}>
{{ $services->service_type }}
</option>
@endforeach
</select>
</div>
<!-- Country -->
<div class="filter-item country-group">
<label>Country</label>
<select>
@foreach ($countryModels as $c)
<option value="{{ $c->id }}" {{ ($requestData->countryId ?? '') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
@endforeach
</select>
</div>
<!-- RATE GROUP -->
<div class="filter-item rate-group">
<label>Hr Min</label>
<input type="test" class="no-spinner" value="{{ $requestData->hour_min }}">
</div>
<!-- RATE GROUP -->
<div class="filter-item rate-group">
<label>Hr Min</label>
<input type="number" class="no-spinner" value="{{ $requestData->hour_min }}">
</div>
<div class="filter-item rate-group">
<label>Hr Max</label>
<input type="number" class="no-spinner" value="{{ $requestData->hour_max }}">
</div>
<div class="filter-item rate-group">
<label>Night Min</label>
<input type="number" class="no-spinner" value="{{ $requestData->night_min }}">
</div>
<div class="filter-item rate-group">
<label>Night Max</label>
<input type="number" class="no-spinner" value="{{ $requestData->night_max }}">
</div>
<!-- Availability -->
<div class="filter-item availability-group">
<label>Availability</label>
<select>
<option value="1" {{ ($requestData->availability ?? '') == 1 ? 'selected' : '' }}>In Call</option>
<option value="2"{{ ($requestData->availability ?? '') == 2 ? 'selected' : '' }}>Out Call</option>
<option value="3" {{ ($requestData->availability ?? '') == 3 ? 'selected' : '' }}>Both</option>
</select>
</div>
<!-- Language (MULTI) -->
<div class="filter-item language-group">
<label>Lang</label>
<select id="languageSelect" multiple>
@foreach ($languageModels as $lang)
<option value="{{ $lang->id }}"
{{ in_array($lang->name, explode(', ', $requestData->languages ?? '')) ? 'selected' : '' }}>
{{ $lang->name }}
</option>
@endforeach
</select>
</div>
<!-- Search Button -->
<div class="filter-item search-group">
<label>&nbsp;</label>
<button type="button" id="filterSearchBtn">
Search
</button>
</div>
</div>
<main class="container py-5" style="padding-top:9rem!important;">
<!-- CARD AREA -->
{{-- <div id="vendorCards" style="width: 1500px"></div> --}}
<div id="vendorCards"></div>
</main>
@if ($service != 4)
<div style="text-align:center; margin:20px; margin-top: 150px;align-items: center!important;">
<button id="increaseDistanceBtn" class="no-hover-change" onclick="increaseDistance()"
style="
padding: 12px 25px;
background: #ef4444;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
">
<span class="btn-text">Increase Distance +5 km</span>
<span class="btn-loader" style="display:none;">
<div class="loader-small"></div>
</span>
</button>
</div>
@endif
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function toggleFilters(serviceId) {
console.log("serviceId");
console.log(serviceId);
// show all by default
$('.rate-group, .availability-group, .language-group,.country-group').hide();
if (serviceId == 4) {
// ONLY language
$('.rate-group, .availability-group').hide();
$('.language-group').show();
}
if (serviceId == 3 || serviceId == 1 || serviceId == 2) {
// hide rate + language + availability
$('.rate-group, .availability-group,.country-group').show();
}
}
// on change
$('#serviceType').on('change', function() {
toggleFilters($(this).val());
});
// on page load (important)
$(document).ready(function() {
toggleFilters($('#serviceType').val());
$('#languageSelect').select2({
placeholder: "Select Lang",
width: '100%',
closeOnSelect: false
});
const infoBox = $('.service-info-box');
const toggleBtn = $('#serviceToggleBtn');
// Toggle info box on icon click
toggleBtn.on('click', function(e) {
e.stopPropagation(); // prevent click from bubbling
infoBox.toggle();
});
// Hide info box when clicking outside
$(document).on('click', function(e) {
if (!infoBox.is(e.target) && infoBox.has(e.target).length === 0 && !toggleBtn.is(e
.target)) {
infoBox.hide();
}
});
// Prevent clicks inside the info box from closing it
infoBox.on('click', function(e) {
e.stopPropagation();
});
});
</script>
<script>
let firstLoad = true; // FIRST VISIT FLAG
let loaderInterval = null;
let service = {{ $service }};
function increaseDistance() {
let btn = $("#increaseDistanceBtn");
let btnText = btn.find(".btn-text");
let btnLoader = btn.find(".btn-loader");
let dist = parseInt($("#distance").val());
let newDist = dist + 5;
let maxLimit = 25;
// 🚫 Limit check
if (newDist > maxLimit) {
showToast('error', 'Distance limit exceeded. Maximum allowed is 25 km.');
return;
}
$("#distance").val(newDist);
// Show loader again
// Disable button and show loader
btn.prop("disabled", true);
btn.css("opacity", 0.8);
btnText.hide();
btnLoader.show();
searchDistanceIncreaseRequest(newDist);
}
function searchDistanceIncreaseRequest(newDist) {
// STOP if service = 4
if (service == 4) {
return; // do nothing
}
let btn = $("#increaseDistanceBtn");
let btnText = btn.find(".btn-text");
let btnLoader = btn.find(".btn-loader");
$.ajax({
url: "/searchDistanceIncreaseRequest",
method: "POST",
data: {
_token: "{{ csrf_token() }}",
distance: newDist,
requestId: $('#request_id').val()
},
success: function(response) {
console.log("First request completed");
startLoader(5);
btn.prop("disabled", false);
btn.css("opacity", 1);
btnText.show();
btnLoader.hide();
}
});
}
$(document).ready(function() {
// CASE 1: Back/Forward cached page → NO LOADER
window.addEventListener("pageshow", function(event) {
if (event.persisted) {
skipLoaderAndLoad();
return;
}
});
// CASE 2: Direct normal first visit → RUN LOADER
startLoader(5);
});
function goHome() {
// Stop loader timer if running
if (window.loaderInterval) {
clearInterval(window.loaderInterval);
}
// Redirect to home page
window.location.href = "/";
}
function loadVendorData() {
let btn = $("#increaseDistanceBtn");
let btnText = btn.find(".btn-text");
let btnLoader = btn.find(".btn-loader");
// $("#vendorCards").html(`<p class="text-center text-secondary">Loading data...</p>`);
var requestId = $('#request_id').val();
$.ajax({
url: "{{ route('getAcceptedrequests') }}",
method: "GET",
data: {
id: requestId
},
dataType: "json",
success: function(res) {
// if (!res.data || res.data.length === 0) {
// window.location.href = "{{ url('/') }}?no_data=1";
// return;
// }
btn.prop("disabled", false);
btn.css("opacity", 1);
btnText.show();
btnLoader.hide();
let html = "";
// <div class="vendor-card" style="width:250px!important; cursor:pointer;"onclick="openVendor('${item.id}', '${item.request_id}')">
res.data.forEach((item, index) => {
html += `
<div class="vendor-card" style="cursor:pointer;"
onclick="openVendor('${item.id}', '${item.request_id}')">
<div class="card-body position-relative" style="background-image: url(${item.serviceImage}); background-size: cover; background-repeat: no-repeat; height: 300px;">
<div class='card-badge'>${item.service_type}</div>
<span class='card-status'>Online</span>
<div class="pt-3 pb-4 mt-5">
<!-- VENDOR IMAGE -->
</div>
</div>
<div class="card-footer">
<h5 class="fw-bold">${item.title}</h5>
<p class="text-muted small">${item.language}</p>
</div>
</div>
`;
});
$("#vendorCards").html(html);
var currentDistance = $("#distance").val();
$('.currentDistance').text(currentDistance)
}
});
}
function skipLoaderAndLoad() {
$("#loaderBox").hide();
$("#pageContent").addClass("visible");
document.body.style.overflow = "";
loadVendorData();
}
function startLoader(distanceValue) {
$("#pageContent").removeClass("visible");
$("#loaderBox").show().removeClass("hidden");
document.body.style.overflow = "hidden";
let timeLeft = {{ $START_SECONDS }};
const timerEl = document.getElementById("loaderTimer");
const unitsEl = document.getElementById("loaderUnits");
function updateUnits(n) {
unitsEl.textContent = n === 1 ? "second" : "seconds";
}
updateUnits(timeLeft);
timerEl.textContent = timeLeft;
if (loaderInterval) clearInterval(loaderInterval);
loaderInterval = setInterval(function() {
timeLeft--;
if (timeLeft <= 0) {
clearInterval(loaderInterval);
$("#loaderBox").addClass("hidden");
setTimeout(() => $("#loaderBox").hide(), 450);
$("#pageContent").addClass("visible");
document.body.style.overflow = "";
// Load vendor data after the timer ends
loadVendorData();
}
updateUnits(timeLeft);
timerEl.textContent = timeLeft;
}, 1000);
}
window.addEventListener("pageshow", function(event) {
const navType = performance.getEntriesByType("navigation")[0]?.type;
// CASE 1: Back button (bfcache)
if (event.persisted || navType === "back_forward") {
console.log("Back navigation detected");
skipLoaderAndLoad();
return;
}
// CASE 2: Page refresh (reload)
if (navType === "reload") {
console.log("Page refresh detected");
skipLoaderAndLoad();
return;
}
// CASE 3: First-time visit → Do nothing (loader will run)
});
function openVendor(vendorId, requestId) {
$.ajax({
url: "{{ route('store-user-vendor-view') }}",
method: "POST",
data: {
_token: "{{ csrf_token() }}",
service_id: vendorId,
request_id: requestId
},
success: function() {
console.log("User view saved.");
}
});
// Redirect with parameters in query string
window.location.href = `/vendor/${vendorId}?request_id=${requestId}`;
}
(function() {
// // Detect Back/Forward cached page
// const navIsBack = performance.getEntriesByType("navigation")[0]?.type === "back_forward";
// // If page restored from BACK → skip loader
// if (navIsBack) {
// document.getElementById("loaderBox").style.display = "none";
// document.getElementById("pageContent").classList.add("visible");
// document.body.style.overflow = "";
// return;
// }
// --- normal loader works ONLY on first load ---
// const START = {{ $START_SECONDS }};
// let timeLeft = START;
// const timerEl = document.getElementById("loaderTimer");
// const loaderBox = document.getElementById("loaderBox");
// const pageContent = document.getElementById("pageContent");
// const unitsEl = document.getElementById("loaderUnits");
// function updateUnits(n) {
// unitsEl.textContent = n === 1 ? "second" : "seconds";
// }
// updateUnits(timeLeft);
// document.body.style.overflow = "hidden";
// const interval = setInterval(() => {
// timeLeft--;
// if (timeLeft < 0) timeLeft = 0;
// timerEl.textContent = timeLeft;
// updateUnits(timeLeft);
// if (timeLeft <= 0) {
// clearInterval(interval);
// loaderBox.classList.add("hidden");
// setTimeout(() => loaderBox.style.display = "none", 450);
// pageContent.classList.add("visible");
// document.body.style.overflow = "";
// loadVendorData();
// }
// }, 1000);
})();
</script>
<script>
// Detect back/forward navigation
window.addEventListener("pageshow", function(event) {
if (event.persisted) {
// Page loaded from cache → NO LOADER
document.getElementById("loaderBox").style.display = "none";
document.getElementById("pageContent").classList.add("visible");
document.body.style.overflow = "";
}
});
</script>
@include('base.footer')
resources/views/request-waiting1.blade.php deleted 100644 → 0
@include('base.header')
<style>
.loader-box {
width: 100%;
text-align: center;
padding: 120px 0;
}
.loader-box img {
width: 120px;
}
.main-content {
display: none;
padding: 40px 0;
}
.container {
display: flex;
gap: 40px;
justify-content: center;
align-items: flex-start;
padding: 30px;
}
.success-box {
background: #f0fff4;
border: 2px solid #38a169;
padding: 30px;
border-radius: 12px;
width: 370px;
text-align: center;
}
.success-icon {
font-size: 55px;
color: #38a169;
font-weight: bold;
}
.details-box {
background: #ffffff;
padding: 30px;
border-radius: 12px;
width: 380px;
border: 1px solid #e5e7eb;
}
.back-btn {
background: #ccc;
padding: 6px 14px;
border-radius: 8px;
border: none;
margin-bottom: 15px;
}
.warning-box {
margin-top: 20px;
padding: 12px;
font-size: 13px;
background: #fff3cd;
border-left: 5px solid #ff9800;
}
</style>
<body>
{{-- ================= LOADER WITH TIMER ================= --}}
<div class="loader-box" id="loaderBox">
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading...">
<h3 style="margin-top:20px;">
Please wait <span id="timer">60</span> seconds...
</h3>
</div>
{{-- ================= MAIN CONTENT ================= --}}
<div class="main-content" id="mainContent">
<div class="container">
{{-- LEFT BOX --}}
<div class="success-box">
<div class="success-icon">✔</div>
<h3>Thank You!</h3>
<p>Your request has been submitted successfully.</p>
</div>
{{-- RIGHT BOX --}}
<div class="details-box">
<button class="back-btn" onclick="window.history.back();">Back</button>
<h2>Request Summary</h2>
<span class="label">Spoken Languages:</span>
<p>{{ $languages_csv ?? 'N/A' }}</p>
<div class="warning-box">
NEVER pay in advance to anyone via Gift / Bing card, Transcash,
Neosurf / PCS coupons, Google Play card, etc.
They are scammers.
</div>
</div>
</div>
</div>
<script>
// ================= countdown timer =================
let timeLeft = 60; // 1 minute
let countdown = setInterval(() => {
timeLeft--;
document.getElementById("timer").innerText = timeLeft;
if (timeLeft <= 0) {
clearInterval(countdown);
// hide loader, show content
document.getElementById('loaderBox').style.display = 'none';
document.getElementById('mainContent').style.display = 'block';
}
}, 1000);
</script>
</body>
@include('base.footer')
</html>
@include('base.header')
<style>
body {
background: #f5f6f8;
font-family: 'Inter', sans-serif;
}
.loader-box {
width: 100%;
text-align: center;
padding: 150px 0;
}
.loader-box img {
width: 120px;
}
.main-content {
display: none;
padding-top: 20px;
}
/* Card grid */
.vendor-card {
background: white;
border-radius: 18px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
margin-bottom: 25px;
position: relative;
}
/* Service badge & online badge row */
.badge-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.service-badge {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #7918f2, #ac32e4);
color: white;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px;
line-height: 1.1;
}
.online-badge {
background: #00c853;
color: white;
font-size: 12px;
padding: 6px 14px;
border-radius: 20px;
font-weight: 600;
}
.hot-icon {
width: 65px;
height: 65px;
background: #ff1744;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 15px auto 0;
}
.hot-img {
width: 34px;
}
.user-name {
margin-top: 12px;
font-size: 17px;
font-weight: 600;
color: #222;
}
.languages {
color: #777;
margin-top: 5px;
font-size: 13px;
}
</style>
{{-- LOADER --}}
<div class="loader-box" id="loaderBox">
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading...">
<h3 style="margin-top:20px;">
Please wait <span id="timer">60</span> seconds...
</h3>
</div>
<div class="main-content" id="mainContent">
<a href="/" class="back-link">← Back to Home</a>
<div class="container">
<div class="row">
{{-- LOOP 10 CARDS --}}
@for ($i = 1; $i <= 10; $i++)
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="vendor-card">
<div class="badge-row">
<div class="service-badge">Audio/Video Calls</div>
<div class="online-badge">● Online</div>
</div>
<div class="tick-icon">
<img src="https://img.icons8.com/emoji/96/fire.png" class="hot-img" alt="Hot">
</div>
<div class="user-name">Test User {{ $i }}</div>
<div class="languages">Tamil, English</div>
</div>
</div>
@endfor
</div>
</div>
</div>
<script>
let timeLeft = 60;
let countdown = setInterval(() => {
timeLeft--;
document.getElementById("timer").innerText = timeLeft;
if (timeLeft <= 0) {
clearInterval(countdown);
document.getElementById('loaderBox').style.display = 'none';
document.getElementById('mainContent').style.display = 'block';
}
}, 1000);
</script>
@include('base.footer')
</html>
\ No newline at end of file
resources/views/support.blade.php deleted 100644 → 0
@include('base.header')
@if (session('mobileExists'))
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3 mt-4 alertpopup" style="">
<div id="errorToast" class="toast show" role="alert"
style="min-width: 250px; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.2);">
<div class="d-flex align-items-center p-3">
<span class="me-3 text-danger fs-3">❗</span>
<span class="flex-grow-1 fs-5">{{ session('mobileExists') }}</span>
<button type="button" class="btn-close ms-2" data-bs-dismiss="toast"></button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
var toastEl = document.getElementById('errorToast');
var toast = new bootstrap.Toast(toastEl, {
delay: 3000
});
toast.show();
</script>
@endif
<section class="support-con py-5 mt-5">
<div class="row justify-content-center">
<div class="col-12 col-md-7 col-lg-5">
<h2 class="form-title text-center mb-4">Support Request Form</h2>
<p class="text-center mb-4 description-text">
Provide your details and issue description. Our support team will
get back to you as soon as possible.
</p>
<!-- FORM START -->
<form action="{{ route('supportRequest') }}" method="POST" enctype="multipart/form-data">
@csrf
<!-- Email -->
<div class="row">
<div class="col-md-1"></div>
{{-- <div class="col-md-10">
<label class="form-label">Enter Your Mail id</label>
<input type="hidden" name="email" class="form-control custom-input" required
placeholder="Your Email">
</div> --}}
</div>
<!-- Phone -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<label class="form-label mt-3">Vendor Phone Number</label>
<input type="text" name="mobile" class="form-control custom-input" required
placeholder="Enter Vendor Phone Number">
</div>
</div>
<!-- Description -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<label class="form-label mt-3">Description of the Issue</label>
<textarea name="issue" class="form-control custom-textarea" rows="4" required
placeholder="Enter Your Details Here"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<!-- Add Proof --> <div class="col-md-10">
<label class="form-label" style="margin-top:15px;">Add proof</label>
{{-- <div class="upload-box" onclick="document.getElementById('proofInput').click()">
<div class="upload-icon"></div>
<span>Add Photos</span>
</div> --}}
<div class=" " onclick="document.getElementById('proofInput').click()">
<img class="upload-box" src="{{ asset('assets') }}/image/support_photo.svg" >
</div>
<input type="file" id="proofInput" name="photo[]" multiple accept="image/*" style="display:none;"
onchange="previewProof()">
<div id="previewContainer" class="preview-container"></div>
</div>
</div>
<!-- Submit -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<button class="btn submit-btn w-100 mt-4" id="submitBtn" type="submit">Submit</button>
</div>
</div>
</form>
<!-- FORM END -->
</div>
</div>
</section>
@include('base.footer')
<script>
//const emailInput = document.getElementById("emailInput");
const phoneInput = document.getElementById("phoneInput");
const descInput = document.getElementById("descInput");
const proofInput = document.getElementById("proofInput");
const emailError = document.getElementById("emailError");
const phoneError = document.getElementById("phoneError");
const descError = document.getElementById("descError");
const proofError = document.getElementById("proofError");
const submitBtn = document.getElementById("submitBtn");
function validateForm() {
let valid = true;
// Email validation
// const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// if (!emailPattern.test(emailInput.value.trim())) {
// emailError.style.display = "block";
// valid = false;
// } else {
// emailError.style.display = "none";
// }
// Phone validation (10 digits only)
phoneInput.value = phoneInput.value.replace(/[^0-9]/g, '');
if (phoneInput.value.length !== 10) {
phoneError.style.display = "block";
valid = false;
} else {
phoneError.style.display = "none";
}
// Description validation
if (descInput.value.trim().length < 5) {
descError.style.display = "block";
valid = false;
} else {
descError.style.display = "none";
}
// Proof validation
if (proofInput.files.length === 0) {
proofError.style.display = "block";
valid = false;
} else {
proofError.style.display = "none";
}
// Enable or disable submit button
submitBtn.disabled = !valid;
}
// Event listeners
//emailInput.addEventListener("input", validateForm);
phoneInput.addEventListener("input", validateForm);
descInput.addEventListener("input", validateForm);
proofInput.addEventListener("change", validateForm);
function previewProof() {
let files = proofInput.files;
let container = document.getElementById("previewContainer");
container.innerHTML = "";
for (let file of files) {
let img = document.createElement("img");
img.src = URL.createObjectURL(file);
container.appendChild(img);
}
validateForm();
}
</script>
resources/views/vendor.blade.php deleted 100644 → 0
@include('base.header')
<style>
.label {
font-weight: bold;
color: rgb(203, 40, 69) !important;
margin-top: 15px;
display: block;
}
.vendor-title{
font-weight: bold;
color: rgb(203, 40, 69) !important;
font-size: 24px;
display: block;
}
.form-textarea {
width: 100%;
height: 110px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f5f7fa;
}
.upload-box {
width: 150px;
height: 150px;
border: 2px dashed #0091ff;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #0091ff;
cursor: pointer;
}
.upload-icon {
font-size: 35px;
}
.preview-container {
display: flex;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.preview-container img {
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
}
.submit-report-btn {
width: 100%;
margin-top: 25px;
background: rgb(203, 40, 69);
color: #fff;
padding: 10px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
}
.close-btn {
position: absolute;
right: 18px;
top: 15px;
font-size: 28px;
border: none;
background: none;
cursor: pointer;
}
.form-label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.form-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f5f7fa;
}
.form-input.error {
border-color: rgb(203, 40, 69);
}
.btn-loader {
width: 18px;
height: 18px;
border: 3px solid #fff;
border-top-color: transparent;
border-radius: 50%;
display: inline-block;
margin-left: 8px;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.btn[disabled] {
opacity: 0.6;
pointer-events: none;
}
#chatRequestBtn {
position: relative;
background: #00d14f;
padding: 10px 18px;
border-radius: 6px;
border: none;
cursor: pointer;
color: white;
margin-right: 5px;
}
#callRequestBtn {
position: relative;
background: #111827;
padding: 10px 18px;
border-radius: 6px;
border: none;
cursor: pointer;
color: white;
margin-right: 5px;
}
.btn-loader {
width: 18px;
height: 18px;
border: 3px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin-left: 5px;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
</style>
<body>
@php
$photos = explode(',', $serviceModel->photo);
$firstPhoto = trim($photos[0]); // get first photo
@endphp
<div class="container ">
<div class="image-container">
<img src="{{ $firstPhoto }}" alt="Main Image" class="full-width-image">
<div class="image-thumbnails">
@foreach ($photos as $photo)
<img src="{{ trim($photo) }}" class="image-thumb" data-full="{{ trim($photo) }}">
@endforeach
</div>
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
<img id="lightbox-img">
</div>
</div>
{{-- <div class="success-box"
style="background-image: url('{{ $firstPhoto }}');
height:550px;
background-size:cover;
background-position:center;
background-repeat:no-repeat;">
<img src="{{ $firstPhoto }}" alt="Main Image" class="full-width-image">
</div> --}}
<div class="details-box">
<button class="back-btn" onclick="goBack()">Back</button>
<div class="details-box1">
<p class="vendor-title">{{ $serviceModel->title }}</p>
<p>{{ $serviceModel->description }}</p>
</div>
@if ($serviceModel->service_type == 3)
<span class="label">Spoken Languages:</span>
<p>Tamil, English</p>
@endif
@if ($serviceModel->service_type == 1)
<span class="label">Location:</span>
<p>{{ $requestModel->location }}</p>
<span class="label">Available For:</span>
<p>{{ $requestModel->availability }}</p>
@endif
<input type="hidden" value="{{ $requestId }}" class="requestId" id="requestId">
<div class="contact-box">
<span class="label">CONTACT ⚠</span>
<label>Social:</label><br>
<input type="text" value="+91" class="countrycode" id="countryCode" disabled>
<input type="text" placeholder="Enter Whatsapp Number" id="whatsappNumber">
<button class="" id="chatRequestBtn">
<span class="btn-text"><i class="fa-brands fa-whatsapp"></i> Chat Request</span>
<span class="btn-loader" style="display:none;"></span>
</button>
<button class="" id="callRequestBtn">
<span class="btn-text"><i class="fa-solid fa-phone"></i> Call Request</span>
<span class="btn-loader" style="display:none;"></span>
</button>
<span id="numberError" style="color:red; font-size:14px; display:none; margin-top:5px;"></span>
<button class="report-btn" onclick="openReportModal()">Report</button>
<div class="warning-box">
NEVER pay in advance to anyone via Gift / Bing card, Transcash,
Neosurf / PCS coupons, Google play card, etc. They are scammers.
Report such profiles! We recommend booking verified escorts.
</div>
</div>
</div>
</div>
<!-- ================= FOOTER START ================= -->
@include('base.footer')
<div id="reportModal" class="modal" style="display:none;">
<div class="modal-content modal-lg p-3">
<div class="modal-title">
Report Ad
<button class="close-modal-btn" onclick="closeReportModal()">×</button>
</div>
<label class="form-label mt-2">Enter your email address</label>
<input type="email" id="reportEmail" class="form-input" placeholder="Enter your email address">
<label class="form-label mt-3" >Enter your report</label>
<textarea id="reportMessage" class="form-textarea" placeholder="Enter report details"></textarea>
<label class="form-label mt-3" >Add proof</label>
<div onclick="document.getElementById('proofInput').click()">
<img class="upload-box-modal" src="{{ asset('assets') }}/image/support_photo.svg" >
</div>
<input type="file" id="proofInput" multiple accept="image/*" style="display:none;"
onchange="previewProof()">
<div id="previewContainer" class="preview-container"></div>
<button class="submit-report-btn" onclick="submitReport()">Submit Report</button>
</div>
</div>
<script>
function showBtnLoader(btn) {
// Stop loaders on BOTH buttons first
hideBtnLoader(document.getElementById("chatRequestBtn"));
hideBtnLoader(document.getElementById("callRequestBtn"));
// Start loader on clicked button
btn.querySelector(".btn-text").style.display = "none";
btn.querySelector(".btn-loader").style.display = "inline-block";
btn.disabled = true;
}
function hideBtnLoader(btn) {
btn.querySelector(".btn-text").style.display = "inline-block";
btn.querySelector(".btn-loader").style.display = "none";
btn.disabled = false;
}
function openReportModal() {
document.getElementById("reportModal").style.display = "flex";
}
function closeReportModal() {
document.getElementById("reportModal").style.display = "none";
}
document.getElementById("whatsappNumber").addEventListener("input", function() {
document.getElementById("numberError").style.display = "none";
});
function previewProof() {
let files = document.getElementById("proofInput").files;
let container = document.getElementById("previewContainer");
container.innerHTML = "";
for (let file of files) {
let img = document.createElement("img");
img.src = URL.createObjectURL(file);
container.appendChild(img);
}
}
function submitReport() {
const email = document.getElementById("reportEmail").value;
const message = document.getElementById("reportMessage").value;
const files = document.getElementById("proofInput").files;
if (email.trim() === "") {
document.getElementById("reportEmail").classList.add("error");
return;
}
if (message.trim() === "") {
showToast('error', 'Please enter a report message.');
return;
}
const serviceId = '{{ $serviceModel->id ?? 'UNKNOWN' }}';
// Create FormData to handle files
const formData = new FormData();
formData.append('serviceId', serviceId);
formData.append('message', message);
formData.append('_token', '{{ csrf_token() }}');
formData.append('email', email);
// Append multiple files
for (let i = 0; i < files.length; i++) {
formData.append('proofs[]', files[i]);
}
$.ajax({
url: "/serviceRequestStore",
method: "POST",
data: formData,
processData: false, // Important for FormData
contentType: false, // Important for FormData
success: function(response) {
showToast('success', 'Report submitted successfully.');
document.getElementById("reportMessage").value = "";
document.getElementById("reportEmail").value = "";
document.getElementById("proofInput").value = "";
document.getElementById("previewContainer").innerHTML = "";
closeReportModal();
showToast('success', 'Report ad submitted successfully We will contact you soon.');
},
error: function() {
showToast('error', 'Failed to submit report.');
}
});
}
function showError(msg) {
const err = document.getElementById("numberError");
err.style.display = "block";
err.textContent = msg;
}
document.querySelectorAll('.image-thumb').forEach(img => {
img.addEventListener('click', function() {
const url = this.getAttribute('data-full'); // GET REAL IMAGE URL
document.getElementById('lightbox-img').src = url;
document.getElementById('lightbox').style.display = 'flex';
});
});
function closeLightbox() {
document.getElementById('lightbox').style.display = 'none';
}
function goBack() {
window.history.back(); // Goes back immediately without loader
}
// Helper function to simulate data submission/request
function sendContactRequest(type, data, btn) {
console.log(`Sending ${type} request...`);
console.log("Data to send:", data);
const requestId = document.getElementById('requestId').value;
// --- Replace this with your actual AJAX call (e.g., Axios or jQuery.ajax) ---
$.ajax({
url: '/service-request/store',
method: 'POST',
data: {
service_request_type_id: type,
service_id: data.serviceId, // Assuming you need the Service ID
number: data.fullNumber,
request_id: requestId,
_token: '{{ csrf_token() }}' // For Laravel POST requests
},
success: function(response) {
document.getElementById('whatsappNumber').value = "";
hideBtnLoader(btn);
showToast('success', `Request sent successfully!`);
},
error: function(error) {
hideBtnLoader(btn);
showToast('error', `Failed to request ${type}.`);
}
});
// For demonstration, we just use alerts:
// alert(`Request Sent! Type: ${type}, Number: ${data.fullNumber}, Service ID: ${data.serviceId}`);
}
// --- 1. Chat Request (WhatsApp) Listener ---
document.getElementById('chatRequestBtn').addEventListener('click', function() {
const btn = this;
showBtnLoader(btn);
const countryCode = document.getElementById('countryCode').value;
const whatsappNumber = document.getElementById('whatsappNumber').value;
if (whatsappNumber.trim() === '') {
showError("Please enter a WhatsApp number.");
hideBtnLoader(btn);
return;
}
const fullNumber = countryCode + whatsappNumber;
// This value is retrieved from the Laravel Blade template
const serviceId = '{{ $serviceModel->id ?? 'UNKNOWN' }}';
const data = {
serviceId: serviceId,
fullNumber: fullNumber
};
sendContactRequest(1, data, btn);
});
// --- 2. Call Request Listener ---
document.getElementById('callRequestBtn').addEventListener('click', function() {
const btn = this;
showBtnLoader(btn);
const countryCode = document.getElementById('countryCode').value;
const whatsappNumber = document.getElementById('whatsappNumber')
.value; // Often, the same number is used for calls
const fullNumber = countryCode + whatsappNumber;
const serviceId = '{{ $serviceModel->id ?? 'UNKNOWN' }}';
// Validation might be different for call request,
// but we'll use the same number field for now.
if (whatsappNumber.trim() === '') {
showError("Please enter a WhatsApp number.");
hideBtnLoader(btn);
return;
}
const data = {
serviceId: serviceId,
fullNumber: fullNumber
};
sendContactRequest(2, data, btn);
});
</script>
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment