<?php
/**
 * Public Product Details Page - Dynamic Specifications & Slider
 * Path: products-details.php
 */
include_once 'header.php';

$product = null;
$gallery = [];
$specs = [];

$slug = isset($_GET['slug']) ? trim($_GET['slug']) : '';

// --- ডাটাবেজ থেকে প্রোডাক্ট (ক্যাটাগরি + কোম্পানি সহ) ---
$product = get_product_by_slug($slug);

if ($product && $conn) {
    $prefix = DB_PREFIX;
    $product_id = $product['id'];

    $stmt_gal = $conn->prepare("SELECT * FROM `{$prefix}product_images` WHERE product_id = ?");
    $stmt_gal->bind_param("i", $product_id);
    $stmt_gal->execute();
    $res_gal = $stmt_gal->get_result();
    while ($row = $res_gal->fetch_assoc()) $gallery[] = $row;
    $stmt_gal->close();

    $stmt_sp = $conn->prepare("SELECT * FROM `{$prefix}product_specs` WHERE product_id = ?");
    $stmt_sp->bind_param("i", $product_id);
    $stmt_sp->execute();
    $res_sp = $stmt_sp->get_result();
    while ($row = $res_sp->fetch_assoc()) $specs[] = $row;
    $stmt_sp->close();
}

// --- হাইব্রিড ফলব্যাক ড্যামো মোড (ডাটাবেজে প্রোডাক্ট না থাকলে ক্র্যাশ করবে না) ---
if (!$product) {
    // ফলব্যাক ম্যাচিং
    $fallback_services = get_services();
    foreach ($fallback_services as $fs) {
        if ($fs['slug'] === $slug) {
            $product = $fs;
            // কিছু ডেমো স্পেসিফিকেশন ও ইমেজ জেনারেট করা
            $specs = [
                ['spec_key' => 'Origin', 'spec_value' => 'Premium International Standard'],
                ['spec_key' => 'Warranty', 'spec_value' => '1 Year Official Warranty'],
                ['spec_key' => 'Delivery', 'spec_value' => 'Dhaka & nationwide delivery available']
            ];
            break;
        }
    }
}

// প্রোডাক্টটি ডাটাবেজ বা ফলব্যাক কোথাও না পাওয়া গেলে ৪0৪ রিডিরেকশন
if (!$product) {
    echo "<main class='flex-1 p-16 text-center'><h2 class='text-2xl font-black text-gray-700 uppercase'>Product Not Found!</h2><p class='text-gray-400 mt-2'>The product may have been renamed or deleted.</p><a href='products.php' class='mt-6 inline-block bg-primary text-white py-3 px-6 rounded-lg font-bold'>Back to Products</a></main>";
    include_once 'footer.php';
    exit;
}

$site_name = get_site_setting('site_name');
$site_phone = get_site_setting('site_phone');
$site_email = get_site_setting('site_email');
$site_address = get_site_setting('site_address');
?>

<!-- ========================================== -->
<!-- BREADCRUMB & BANNER -->
<!-- ========================================== -->
<section class="bg-gradient-to-r from-slate-950 to-blue-900 text-white py-12 md:py-16 overflow-hidden relative">
    <div class="absolute inset-0 opacity-15 bg-cover bg-center mix-blend-overlay" style="background-image: url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?w=1200');"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-4">
        <nav class="text-xs md:text-sm text-sky-400 font-bold uppercase tracking-wider">
            <a href="index.php" class="hover:text-white transition-colors">Home</a> 
            <span class="mx-2 text-slate-500">/</span> 
            <a href="products.php" class="hover:text-white transition-colors">Products</a>
            <span class="mx-2 text-slate-500">/</span> 
            <span class="text-slate-300"><?php echo htmlspecialchars($product['title']); ?></span>
        </nav>
        <h1 class="text-2xl md:text-4xl lg:text-5xl font-black uppercase tracking-tight"><?php echo htmlspecialchars($product['title']); ?></h1>
        <?php if (!empty($product['category_name']) || !empty($product['subcategory_name']) || !empty($product['company_name'])): ?>
        <div class="flex flex-wrap gap-2 pt-2">
            <?php if (!empty($product['category_name'])): ?>
            <span class="text-[10px] font-bold uppercase bg-sky-500/20 text-sky-300 px-3 py-1 rounded-full"><?php echo htmlspecialchars($product['category_name']); ?></span>
            <?php endif; ?>
            <?php if (!empty($product['subcategory_name'])): ?>
            <span class="text-[10px] font-bold uppercase bg-secondary/20 text-sky-200 px-3 py-1 rounded-full"><?php echo htmlspecialchars($product['subcategory_name']); ?></span>
            <?php endif; ?>
            <?php if (!empty($product['company_name'])): ?>
            <span class="text-[10px] font-bold uppercase bg-white/10 text-white px-3 py-1 rounded-full border border-white/20"><?php echo htmlspecialchars($product['company_name']); ?></span>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        <div class="w-12 h-1 bg-secondary"></div>
    </div>
</section>

<!-- ========================================== -->
<!-- DETAILED VIEW CONTAINER -->
<!-- ========================================== -->
<section class="py-16 md:py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
            
            <!-- LEFT COLUMN (7 Columns): Image slider & details -->
            <div class="lg:col-span-7 space-y-8">
                
                <!-- Main Feature Preview Card -->
                <div class="bg-white p-4 rounded-3xl border border-gray-100 shadow-sm flex flex-col items-center">
                    <div class="relative w-full h-[320px] md:h-[450px] overflow-hidden rounded-2xl bg-gray-100 border border-gray-100/50">
                        <img id="main-preview-img" 
                             class="w-full h-full object-cover transition-all duration-300" 
                             src="<?php echo htmlspecialchars($product['image_url']); ?>" 
                             alt="Main Preview">
                    </div>

                    <!-- Gallery Thumbnails (যদি গ্যালারিতে ছবি থাকে) -->
                    <?php if(!empty($gallery)): ?>
                        <div class="w-full pt-4 mt-4 border-t border-gray-100 flex flex-wrap gap-3 justify-start">
                            <!-- মেইন প্রোডাক্ট ইমেজ থাম্বনেইল হিসেবে প্রথম রোতে থাকবে -->
                            <div onclick="switchMainImage('<?php echo htmlspecialchars($product['image_url']); ?>')" 
                                 class="w-16 h-16 rounded-xl overflow-hidden cursor-pointer border-2 border-primary hover:scale-105 active:scale-95 transition-all shadow-sm flex-shrink-0">
                                <img class="w-full h-full object-cover" src="<?php echo htmlspecialchars($product['image_url']); ?>" alt="Main Image Thumb">
                            </div>
                            <!-- বাকি গ্যালারি থাম্বনেইলগুলো -->
                            <?php foreach($gallery as $img): ?>
                                <div onclick="switchMainImage('<?php echo htmlspecialchars($img['image_url']); ?>')" 
                                     class="w-16 h-16 rounded-xl overflow-hidden cursor-pointer border border-gray-200 hover:border-secondary hover:scale-105 active:scale-95 transition-all shadow-sm flex-shrink-0">
                                    <img class="w-full h-full object-cover" src="<?php echo htmlspecialchars($img['image_url']); ?>" alt="Gallery Image Thumb">
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Product Description Box -->
                <div class="bg-white p-6 md:p-8 rounded-3xl border border-gray-100 shadow-sm space-y-4">
                    <h2 class="text-xl font-black text-primary uppercase pb-3 border-b border-gray-100">Equipment Description</h2>
                    <p class="text-sm md:text-base text-gray-600 leading-relaxed whitespace-pre-line">
                        <?php echo htmlspecialchars($product['description']); ?>
                    </p>
                </div>

            </div>

            <!-- RIGHT COLUMN (5 Columns): Dynamic Specifications Table & Support contact widgets -->
            <div class="lg:col-span-5 space-y-8">
                
                <!-- Dynamic Specification table widget -->
                <?php if(!empty($specs)): ?>
                    <div class="bg-white border border-gray-100 rounded-3xl shadow-sm overflow-hidden">
                        <div class="px-6 py-5 bg-gradient-to-r from-primary to-blue-900 text-white">
                            <h3 class="font-extrabold text-sm uppercase tracking-wider flex items-center"><i class="fa-solid fa-list-check mr-2"></i> Technical Specifications</h3>
                        </div>
                        <div class="divide-y divide-gray-100">
                            <?php foreach($specs as $spec): ?>
                                <div class="grid grid-cols-12 p-4 text-xs md:text-sm hover:bg-slate-50/60 transition-colors">
                                    <span class="col-span-5 font-black text-gray-700 tracking-wide uppercase"><?php echo htmlspecialchars($spec['spec_key']); ?></span>
                                    <span class="col-span-7 text-gray-600 font-medium"><?php echo htmlspecialchars($spec['spec_value']); ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Support hotline calling widget -->
                <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 md:p-8 text-white relative overflow-hidden shadow-xl">
                    <div class="absolute -top-12 -right-12 w-24 h-24 bg-sky-500/10 rounded-full blur-2xl"></div>
                    
                    <div class="space-y-4 relative z-10">
                        <span class="text-[10px] font-black uppercase text-sky-400 tracking-widest"><i class="fa-solid fa-phone-volume mr-1.5 animate-pulse"></i> Instant Quote Inquiry</span>
                        <h3 class="text-xl font-black uppercase tracking-tight leading-tight">Need Custom Configuration or Price Details?</h3>
                        <p class="text-xs text-gray-400 leading-relaxed">
                            Contact our lead technical estimator directly to discuss specs, installation timeline, or customized service contracts.
                        </p>
                        
                        <div class="pt-4 border-t border-slate-800/80 space-y-3">
                            <a href="tel:<?php echo htmlspecialchars($site_phone); ?>" class="flex items-center p-3 rounded-xl bg-slate-950 border border-slate-800 hover:border-sky-500/30 transition-colors group">
                                <span class="w-10 h-10 rounded-lg bg-sky-950 text-sky-400 flex items-center justify-center mr-3 font-bold group-hover:bg-sky-500 group-hover:text-slate-950 transition-colors"><i class="fa-solid fa-phone"></i></span>
                                <div>
                                    <span class="block text-[10px] text-gray-500 uppercase font-black">Call Hotlines</span>
                                    <strong class="text-sm font-black text-white"><?php echo htmlspecialchars($site_phone); ?></strong>
                                </div>
                            </a>
                            <a href="mailto:<?php echo htmlspecialchars($site_email); ?>" class="flex items-center p-3 rounded-xl bg-slate-950 border border-slate-800 hover:border-sky-500/30 transition-colors group">
                                <span class="w-10 h-10 rounded-lg bg-sky-950 text-sky-400 flex items-center justify-center mr-3 font-bold group-hover:bg-sky-500 group-hover:text-slate-950 transition-colors"><i class="fa-solid fa-envelope"></i></span>
                                <div>
                                    <span class="block text-[10px] text-gray-500 uppercase font-black">Email Proposal</span>
                                    <strong class="text-sm font-black text-white"><?php echo htmlspecialchars($site_email); ?></strong>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
</section>

<!-- Click event handling function for Image switcher -->
<script>
    function switchMainImage(url) {
        const previewImg = document.getElementById('main-preview-img');
        
        // ফেইড এফেক্ট ট্রানজিশন অ্যানিমেশন
        previewImg.style.opacity = '0.3';
        setTimeout(() => {
            previewImg.src = url;
            previewImg.style.opacity = '1';
        }, 150);
    }
</script>

<?php
include_once 'footer.php';
?>