287 lines
14 KiB
PHP
287 lines
14 KiB
PHP
<?php
|
|
// compare.php
|
|
require_once __DIR__ . '/includes/db.php';
|
|
$allTires = TireStore::getTires();
|
|
|
|
$pageTitle = 'مقایسه آنلاین و تخصصی تایرها | تایر قاسمی';
|
|
$activeNav = 'compare';
|
|
require_once __DIR__ . '/includes/header.php';
|
|
?>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-600/20 text-brand-400 text-xs font-bold mb-2">
|
|
<i data-lucide="git-compare" class="w-4 h-4"></i>
|
|
ابزار مقایسه آنلاین
|
|
</div>
|
|
<h1 class="text-2xl sm:text-3xl font-black text-white">مقایسه تخصصی ویژگیهای تایرها</h1>
|
|
<p class="text-xs text-slate-400 mt-1">تایرهای مورد نظر خود را انتخاب کرده و از نظر قیمت، گارانتی، چسبندگی و رده صدا مقایسه کنید.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button onclick="clearAllCompare()" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-rose-900/30 hover:text-rose-400 text-slate-300 text-xs font-bold transition-all flex items-center gap-1.5 border border-slate-700">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
پاک کردن لیست
|
|
</button>
|
|
<a href="index.php#catalog" class="px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-xs font-bold transition-all flex items-center gap-1.5 shadow">
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
|
افزودن تایر جدید
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Add Tire Selector Bar -->
|
|
<div class="glass-card p-4 rounded-2xl border border-slate-800 mb-8 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div class="flex items-center gap-3 w-full sm:w-auto">
|
|
<i data-lucide="plus-circle" class="w-5 h-5 text-brand-400 shrink-0"></i>
|
|
<span class="text-xs font-bold text-slate-200">افزودن سریع تایر به جدول:</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 w-full sm:w-auto flex-1 max-w-md">
|
|
<select id="quick-add-select" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-brand-500">
|
|
<option value="">یک تایر را انتخاب کنید...</option>
|
|
<?php foreach ($allTires as $t): ?>
|
|
<option value="<?= $t['id'] ?>"><?= htmlspecialchars($t['brand']) ?> - <?= htmlspecialchars($t['name']) ?> (<?= $t['size_str'] ?>)</option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
<button onclick="addSelectedTire()" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-brand-600 text-white text-xs font-bold whitespace-nowrap transition-all">
|
|
افزودن
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comparison Table Container -->
|
|
<div id="compare-table-container" class="glass-card rounded-3xl p-6 border border-slate-800 overflow-x-auto">
|
|
<div id="compare-empty" class="text-center py-16">
|
|
<i data-lucide="git-compare" class="w-12 h-12 text-slate-600 mx-auto mb-3"></i>
|
|
<h3 class="text-base font-bold text-white">هنوز هیچ تایری به لیست مقایسه اضافه نشده است!</h3>
|
|
<p class="text-xs text-slate-400 mt-1 mb-4">از کاتالوگ محصولات تایرها را انتخاب کنید یا از منوی بالای همین صفحه تایر اضافه نمایید.</p>
|
|
<a href="index.php#catalog" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 text-white rounded-xl text-xs font-bold inline-block">مشاهده کاتالوگ</a>
|
|
</div>
|
|
|
|
<div id="compare-content" class="hidden">
|
|
<table class="w-full text-right text-xs min-w-[700px]">
|
|
<thead>
|
|
<tr id="row-header" class="border-b border-slate-800">
|
|
<th class="p-4 w-44 font-bold text-slate-400">مشخصه فنی</th>
|
|
<!-- Injected product headers -->
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-800/80 text-slate-200">
|
|
<tr id="row-image">
|
|
<td class="p-4 font-bold text-slate-400">تصویر محصول</td>
|
|
</tr>
|
|
<tr id="row-brand">
|
|
<td class="p-4 font-bold text-slate-400">برند و کشور سازنده</td>
|
|
</tr>
|
|
<tr id="row-size">
|
|
<td class="p-4 font-bold text-slate-400">سایز تایر (ابعاد)</td>
|
|
</tr>
|
|
<tr id="row-category">
|
|
<td class="p-4 font-bold text-slate-400">دستهبندی و کاربری</td>
|
|
</tr>
|
|
<tr id="row-season">
|
|
<td class="p-4 font-bold text-slate-400">فصل کاربری</td>
|
|
</tr>
|
|
<tr id="row-speed">
|
|
<td class="p-4 font-bold text-slate-400">شاخص حداکثر سرعت</td>
|
|
</tr>
|
|
<tr id="row-load">
|
|
<td class="p-4 font-bold text-slate-400">شاخص تحمل وزن</td>
|
|
</tr>
|
|
<tr id="row-wet">
|
|
<td class="p-4 font-bold text-slate-400">چسبندگی ترمز خیس (EU)</td>
|
|
</tr>
|
|
<tr id="row-fuel">
|
|
<td class="p-4 font-bold text-slate-400">رده مصرف سوخت</td>
|
|
</tr>
|
|
<tr id="row-noise">
|
|
<td class="p-4 font-bold text-slate-400">میزان صدای داخل اتاق</td>
|
|
</tr>
|
|
<tr id="row-warranty">
|
|
<td class="p-4 font-bold text-slate-400">مدت زمان گارانتی</td>
|
|
</tr>
|
|
<tr id="row-price">
|
|
<td class="p-4 font-bold text-slate-400">قیمت مصوب (حلقه)</td>
|
|
</tr>
|
|
<tr id="row-vehicles">
|
|
<td class="p-4 font-bold text-slate-400">خودروهای سازگار</td>
|
|
</tr>
|
|
<tr id="row-action">
|
|
<td class="p-4 font-bold text-slate-400">اقدام خرید و استعلام</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const ALL_TIRES = <?= json_encode($allTires, JSON_UNESCAPED_UNICODE) ?>;
|
|
|
|
function renderCompare() {
|
|
let list = CompareStore.getList();
|
|
|
|
// If empty on first visit, preload 2 popular ones
|
|
if (list.length === 0) {
|
|
list = ['TR-101', 'TR-103'];
|
|
localStorage.setItem(CompareStore.getKey(), JSON.stringify(list));
|
|
CompareStore.updateBadge();
|
|
}
|
|
|
|
const emptyBox = document.getElementById('compare-empty');
|
|
const contentBox = document.getElementById('compare-content');
|
|
|
|
if (list.length === 0) {
|
|
emptyBox.classList.remove('hidden');
|
|
contentBox.classList.add('hidden');
|
|
return;
|
|
}
|
|
|
|
emptyBox.classList.add('hidden');
|
|
contentBox.classList.remove('hidden');
|
|
|
|
const activeTires = list.map(id => ALL_TIRES.find(t => t.id === id)).filter(Boolean);
|
|
|
|
// Reset rows
|
|
document.getElementById('row-header').innerHTML = '<th class="p-4 w-44 font-bold text-slate-400">مشخصه فنی</th>';
|
|
document.getElementById('row-image').innerHTML = '<td class="p-4 font-bold text-slate-400">تصویر محصول</td>';
|
|
document.getElementById('row-brand').innerHTML = '<td class="p-4 font-bold text-slate-400">برند و کشور سازنده</td>';
|
|
document.getElementById('row-size').innerHTML = '<td class="p-4 font-bold text-slate-400">سایز تایر (ابعاد)</td>';
|
|
document.getElementById('row-category').innerHTML = '<td class="p-4 font-bold text-slate-400">دستهبندی و کاربری</td>';
|
|
document.getElementById('row-season').innerHTML = '<td class="p-4 font-bold text-slate-400">فصل کاربری</td>';
|
|
document.getElementById('row-speed').innerHTML = '<td class="p-4 font-bold text-slate-400">شاخص حداکثر سرعت</td>';
|
|
document.getElementById('row-load').innerHTML = '<td class="p-4 font-bold text-slate-400">شاخص تحمل وزن</td>';
|
|
document.getElementById('row-wet').innerHTML = '<td class="p-4 font-bold text-slate-400">چسبندگی ترمز خیس (EU)</td>';
|
|
document.getElementById('row-fuel').innerHTML = '<td class="p-4 font-bold text-slate-400">رده مصرف سوخت</td>';
|
|
document.getElementById('row-noise').innerHTML = '<td class="p-4 font-bold text-slate-400">میزان صدای داخل اتاق</td>';
|
|
document.getElementById('row-warranty').innerHTML = '<td class="p-4 font-bold text-slate-400">مدت زمان گارانتی</td>';
|
|
document.getElementById('row-price').innerHTML = '<td class="p-4 font-bold text-slate-400">قیمت مصوب (حلقه)</td>';
|
|
document.getElementById('row-vehicles').innerHTML = '<td class="p-4 font-bold text-slate-400">خودروهای سازگار</td>';
|
|
document.getElementById('row-action').innerHTML = '<td class="p-4 font-bold text-slate-400">اقدام خرید و استعلام</td>';
|
|
|
|
activeTires.forEach(t => {
|
|
// Header
|
|
document.getElementById('row-header').innerHTML += `
|
|
<th class="p-4 text-right">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<span class="font-bold text-white text-sm">${t.name}</span>
|
|
<button onclick="removeCompareItem('${t.id}')" class="p-1 rounded-lg bg-slate-800 text-slate-400 hover:text-rose-400 transition-colors" title="حذف از مقایسه">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</th>
|
|
`;
|
|
|
|
// Image
|
|
document.getElementById('row-image').innerHTML += `
|
|
<td class="p-4">
|
|
<img src="${t.image}" alt="${t.name}" class="w-28 h-28 object-contain mx-auto">
|
|
</td>
|
|
`;
|
|
|
|
// Brand & Country
|
|
document.getElementById('row-brand').innerHTML += `
|
|
<td class="p-4 font-semibold text-brand-400">
|
|
${t.brand} <span class="text-slate-400 text-[11px]">(${t.country})</span>
|
|
</td>
|
|
`;
|
|
|
|
// Size
|
|
document.getElementById('row-size').innerHTML += `
|
|
<td class="p-4 font-black text-white text-sm">
|
|
<span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700">${t.size_str}</span>
|
|
</td>
|
|
`;
|
|
|
|
// Category
|
|
document.getElementById('row-category').innerHTML += `<td class="p-4">${t.category}</td>`;
|
|
|
|
// Season
|
|
document.getElementById('row-season').innerHTML += `<td class="p-4">${t.season_fa}</td>`;
|
|
|
|
// Speed
|
|
document.getElementById('row-speed').innerHTML += `<td class="p-4 font-bold text-amber-400">${t.speed_index}</td>`;
|
|
|
|
// Load
|
|
document.getElementById('row-load').innerHTML += `<td class="p-4 font-bold text-slate-300">${t.load_index}</td>`;
|
|
|
|
// Wet Grip
|
|
document.getElementById('row-wet').innerHTML += `
|
|
<td class="p-4">
|
|
<span class="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-400 font-bold">گرید ${t.wet_grip}</span>
|
|
</td>
|
|
`;
|
|
|
|
// Fuel
|
|
document.getElementById('row-fuel').innerHTML += `
|
|
<td class="p-4">
|
|
<span class="px-2 py-0.5 rounded bg-amber-500/20 text-amber-400 font-bold">گرید ${t.fuel_efficiency}</span>
|
|
</td>
|
|
`;
|
|
|
|
// Noise
|
|
document.getElementById('row-noise').innerHTML += `<td class="p-4 font-bold text-cyan-400">${t.noise_level}</td>`;
|
|
|
|
// Warranty
|
|
document.getElementById('row-warranty').innerHTML += `<td class="p-4 text-emerald-400 font-bold">${t.warranty_months} ماه</td>`;
|
|
|
|
// Price
|
|
document.getElementById('row-price').innerHTML += `
|
|
<td class="p-4 font-black text-base text-white">
|
|
${Number(t.price).toLocaleString('fa-IR')} <span class="text-xs text-brand-400 font-normal">تومان</span>
|
|
</td>
|
|
`;
|
|
|
|
// Vehicles
|
|
document.getElementById('row-vehicles').innerHTML += `
|
|
<td class="p-4">
|
|
<div class="flex flex-wrap gap-1 max-w-xs">
|
|
${(t.vehicles || []).map(v => `<span class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-300 text-[10px]">${v}</span>`).join('')}
|
|
</div>
|
|
</td>
|
|
`;
|
|
|
|
// Action
|
|
document.getElementById('row-action').innerHTML += `
|
|
<td class="p-4">
|
|
<a href="tel:02188889900" class="px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-xs inline-flex items-center gap-1.5 shadow">
|
|
<i data-lucide="phone" class="w-3.5 h-3.5"></i>
|
|
استعلام و سفارش
|
|
</a>
|
|
</td>
|
|
`;
|
|
});
|
|
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function removeCompareItem(id) {
|
|
CompareStore.remove(id);
|
|
renderCompare();
|
|
}
|
|
|
|
function clearAllCompare() {
|
|
CompareStore.clear();
|
|
renderCompare();
|
|
}
|
|
|
|
function addSelectedTire() {
|
|
const sel = document.getElementById('quick-add-select');
|
|
const id = sel.value;
|
|
if (!id) return;
|
|
if (CompareStore.add(id)) {
|
|
renderCompare();
|
|
}
|
|
sel.value = '';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
renderCompare();
|
|
});
|
|
</script>
|
|
|
|
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|