<?php
session_start();
require_once __DIR__ . '/config/db.php';

// Get service ID from URL
$service_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

if ($service_id <= 0) {
    header('Location: service.php');
    exit;
}

// Create tables if they don't exist
$connection->query("CREATE TABLE IF NOT EXISTS services (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    image VARCHAR(500),
    link VARCHAR(500) DEFAULT '#',
    description TEXT NOT NULL,
    area_sqft INT,
    price DECIMAL(10, 2),
    duration VARCHAR(100),
    status VARCHAR(50) DEFAULT 'ACTIVE',
    sort_order INT NOT NULL DEFAULT 0,
    is_active TINYINT(1) NOT NULL DEFAULT 1,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

$connection->query("CREATE TABLE IF NOT EXISTS service_products (
    id INT AUTO_INCREMENT PRIMARY KEY,
    service_id INT NOT NULL,
    product_name VARCHAR(255) NOT NULL,
    cost DECIMAL(10, 2),
    quantity VARCHAR(100),
    spot_x DECIMAL(5,2) NULL,
    spot_y DECIMAL(5,2) NULL,
    sort_order INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (service_id) REFERENCES services(id) ON DELETE CASCADE,
    INDEX idx_service_id (service_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
$connection->query("ALTER TABLE service_products ADD COLUMN IF NOT EXISTS spot_x DECIMAL(5,2) NULL");
$connection->query("ALTER TABLE service_products ADD COLUMN IF NOT EXISTS spot_y DECIMAL(5,2) NULL");

$connection->query("CREATE TABLE IF NOT EXISTS service_tools (
    id INT AUTO_INCREMENT PRIMARY KEY,
    service_id INT NOT NULL,
    tool_name VARCHAR(255) NOT NULL,
    tool_description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (service_id) REFERENCES services(id) ON DELETE CASCADE,
    INDEX idx_service_id (service_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

// Fetch service from database
$service = null;
$products = [];
$tools = [];

$stmt = $connection->prepare("SELECT id, title, image, description, area_sqft, price, duration, status FROM services WHERE id = ? AND is_active = 1");
if ($stmt) {
    $stmt->bind_param('i', $service_id);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if ($result && $result->num_rows > 0) {
        $service = $result->fetch_assoc();
    }
    $stmt->close();
}

// If service not found, redirect to services page
if (!$service) {
    header('Location: service.php');
    exit;
}

// Fetch products for this service
$productStmt = $connection->prepare("SELECT id, product_name, cost, quantity, spot_x, spot_y FROM service_products WHERE service_id = ? ORDER BY sort_order ASC, id ASC");
if ($productStmt) {
    $productStmt->bind_param('i', $service_id);
    $productStmt->execute();
    $productResult = $productStmt->get_result();
    
    while ($row = $productResult->fetch_assoc()) {
        $products[] = [
            'id' => (int)$row['id'],
            'product_name' => $row['product_name'],
            'cost' => floatval($row['cost']),
            'quantity' => $row['quantity'],
            'spot_x' => isset($row['spot_x']) && $row['spot_x'] !== null ? (float)$row['spot_x'] : null,
            'spot_y' => isset($row['spot_y']) && $row['spot_y'] !== null ? (float)$row['spot_y'] : null
        ];
    }
    $productStmt->close();
}

// Fetch tools for this service
$toolStmt = $connection->prepare("SELECT id, tool_name, tool_description FROM service_tools WHERE service_id = ? ORDER BY id ASC");
if ($toolStmt) {
    $toolStmt->bind_param('i', $service_id);
    $toolStmt->execute();
    $toolResult = $toolStmt->get_result();
    
    while ($row = $toolResult->fetch_assoc()) {
        $tools[] = [
            'id' => (int)$row['id'],
            'tool_name' => $row['tool_name'],
            'tool_description' => $row['tool_description']
        ];
    }
    $toolStmt->close();
}

// Prepare display data
$title = htmlspecialchars($service['title'] ?? '');
$description = htmlspecialchars($service['description'] ?? '');
$image = htmlspecialchars($service['image'] ?? 'assets/img/service/service_2_1.jpg');
$price = floatval($service['price'] ?? 5000);
$duration = htmlspecialchars($service['duration'] ?? '8-12 weeks');
$area = intval($service['area_sqft'] ?? 5000);
$status = htmlspecialchars($service['status'] ?? 'ACTIVE');

// Calculate total product cost
$totalProductCost = 0;
foreach ($products as $product) {
    $totalProductCost += $product['cost'];
}

$page_title = $title . ' - Faren Interior Design';
?>
<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><?php echo $page_title; ?></title>
    <meta name="author" content="Faren Interior Design">
    <meta name="description" content="<?php echo $description; ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon.png">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive-chat.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: #f9f8f6;
            line-height: 1.6;
        }

        .breadcrumb-section {
            background: linear-gradient(135deg, #1b8a67 0%, #2a5f4a 100%);
            color: white;
            padding: 20px 20px;
            text-align: center;
        }

        .breadcrumb-section h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .breadcrumb-section .breadcrumb {
            justify-content: center;
            background: transparent;
            padding: 0;
            margin: 0;
        }

        .breadcrumb-section .breadcrumb-item a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }

        .breadcrumb-section .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Service Details Main Section */
        .service-details-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 10px 20px;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #1b8a67;
            text-decoration: none;
            font-weight: 600;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

        .back-link:hover {
            gap: 12px;
            color: #2a5f4a;
        }

        .details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            margin-bottom: 60px;
            align-items: start;
        }

        .service-image {
            position: sticky;
            top: 100px;
        }

        .image-shell {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
        }

        .service-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        }

        .hotspots {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        /* === HOTSPOT: large hit area with small visible dot === */
        .hotspot {
            position: absolute;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            border-radius: 999px;
            background: transparent;
            border: none;
            cursor: pointer;
            pointer-events: auto;
            outline: none;
        }

        /* Visible small dot indicator */
        .hotspot::before {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ff8f4c;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            transition: background 0.25s ease, transform 0.25s ease;
        }

        /* Pulse ring around the dot */
        .hotspot::after {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(1);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1.5px solid rgba(255,143,76,0.6);
            animation: hs-pulse 2s infinite ease-out;
            pointer-events: none;
        }

        @keyframes hs-pulse {
            0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
        }

        /* Hover / active: dot turns green */
        .hotspot:hover::before,
        .hotspot:focus::before,
        .hotspot.active::before {
            background: #1b8a67;
            transform: translate(-50%, -50%) scale(1.3);
        }
        .hotspot.active::after {
            border-color: rgba(27,138,103,0.6);
        }

        /* Floating product label */
        .hs-label {
            position: absolute;
            left: 50%;
            /* default: above the hotspot */
            bottom: calc(100% + 8px);
            transform: translateX(-50%) translateY(6px) scale(0.94);
            background: linear-gradient(135deg, rgba(10,22,16,0.93) 0%, rgba(27,138,103,0.93) 100%);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #fff;
            padding: 10px 16px;
            border-radius: 10px;
            font-size: clamp(11px, 1.4vw, 13px);
            font-weight: 600;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
            z-index: 30;
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,0.14);
            min-width: 120px;
            max-width: 180px;
            text-align: center;
        }

        /* Arrow pointing down (label above hotspot) */
        .hs-label::after {
            content: '';
            position: absolute;
            top: 100%; left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: rgba(27,138,103,0.93);
        }

        /* When label is flipped below the hotspot */
        .hs-label.below {
            bottom: auto;
            top: calc(100% + 8px);
            transform: translateX(-50%) translateY(-6px) scale(0.94);
        }
        .hs-label.below::after {
            top: auto;
            bottom: 100%;
            border-top-color: transparent;
            border-bottom-color: rgba(27,138,103,0.93);
        }

        /* Show state */
        .hotspot:hover .hs-label,
        .hotspot:focus .hs-label,
        .hs-label.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }
        .hs-label.below.show,
        .hotspot:hover .hs-label.below,
        .hotspot:focus .hs-label.below {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }

        .hs-label .hs-name {
            display: block;
            color: #c8f5e4;
            font-size: clamp(10px, 1.2vw, 12px);
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 700;
        }
        .hs-label .hs-price {
            display: block;
            font-size: clamp(14px, 2vw, 18px);
            font-weight: 800;
            color: #f5d98b;
            letter-spacing: -0.3px;
        }

        .tap-hint {
            position: absolute;
            left: 14px;
            bottom: 14px;
            background: rgba(16, 26, 36, 0.72);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            padding: 7px 10px;
            border-radius: 999px;
        }

        .service-info-section h1 {
            font-size: 42px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .status-badge {
            display: inline-block;
            padding: 8px 16px;
            background: #1b8a67;
            color: white;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 20px;
            letter-spacing: 0.5px;
        }

        .meta-info {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 30px 0;
            padding: 20px 0;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .meta-item {
            text-align: center;
        }

        .meta-label {
            font-size: 12px;
            color: #999;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .meta-value {
            font-size: 22px;
            font-weight: 700;
            color: #1b8a67;
        }

        .description-text {
            font-size: 16px;
            line-height: 1.8;
            color: #555;
            margin: 30px 0;
        }

        .live-price-panel {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 14px;
            align-items: center;
            padding: 14px;
            border: 1px solid #d9eadf;
            background: #eff9f4;
            border-radius: 10px;
            margin-top: 12px;
        }

        .live-price-label {
            font-size: 12px;
            font-weight: 700;
            color: #1b8a67;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            margin-bottom: 4px;
        }

        .live-price-name {
            font-size: 16px;
            font-weight: 700;
            color: #253241;
        }

        .live-price-amount {
            font-size: 26px;
            font-weight: 800;
            color: #1b8a67;
        }

        .book-service-panel {
            margin-top: 18px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .book-service-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            border: none;
            border-radius: 8px;
            padding: 12px 18px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .book-service-btn.primary {
            background: linear-gradient(135deg, #1b8a67 0%, #2a5f4a 100%);
            color: #fff;
            box-shadow: 0 8px 20px rgba(27, 138, 103, 0.3);
        }

        .book-service-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(27, 138, 103, 0.36);
        }

        .book-service-btn.secondary {
            background: #fff;
            color: #1b8a67;
            border: 1px solid #1b8a67;
        }

        .book-service-btn.secondary:hover {
            background: #f1fbf7;
        }

        .book-service-btn.get-quote {
            background: linear-gradient(135deg, #d4a030 0%, #a87520 100%);
            color: #fff;
            box-shadow: 0 8px 20px rgba(180, 130, 30, 0.35);
            border: none;
        }

        .book-service-btn.get-quote:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(180, 130, 30, 0.45);
            color: #fff;
        }

        /* Section Styles */
        .content-section {
            margin-bottom: 60px;
            padding: 40px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .section-title {
            font-size: 32px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 3px solid #d4a574;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .section-title i {
            font-size: 36px;
            color: #1b8a67;
        }

        /* Products Grid */
        .products-grid,
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        .product-card,
        .tool-card {
            padding: 24px;
            background: #f9f8f6;
            border-radius: 10px;
            border: 2px solid #eee;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .product-card:hover,
        .tool-card:hover,
        .product-card.active {
            border-color: #1b8a67;
            box-shadow: 0 8px 24px rgba(27, 138, 103, 0.15);
            transform: translateY(-5px);
        }

        /* Hover Overlay on Product Card */
        .product-card .card-hover-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, rgba(27,138,103,0.92) 0%, rgba(42,95,74,0.97) 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 20px;
            opacity: 0;
            transform: translateY(100%);
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
            border-radius: 10px;
            text-align: center;
            pointer-events: none;
            z-index: 5;
        }

        .product-card:hover .card-hover-overlay,
        .product-card.active .card-hover-overlay {
            opacity: 1;
            transform: translateY(0);
        }

        .card-hover-overlay .overlay-icon {
            width: 44px;
            height: 44px;
            background: rgba(255,255,255,0.18);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            margin-bottom: 4px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }

        .card-hover-overlay .overlay-name {
            font-size: clamp(13px, 2vw, 16px);
            font-weight: 700;
            color: #fff;
            line-height: 1.3;
            word-break: break-word;
            text-shadow: 0 1px 4px rgba(0,0,0,0.3);
        }

        .card-hover-overlay .overlay-price {
            font-size: clamp(20px, 3.5vw, 28px);
            font-weight: 800;
            color: #f5d98b;
            text-shadow: 0 2px 8px rgba(0,0,0,0.25);
            letter-spacing: -0.5px;
        }

        .card-hover-overlay .overlay-qty {
            font-size: 12px;
            color: rgba(255,255,255,0.78);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .product-header {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 15px;
        }

        .product-icon {
            color: #1b8a67;
            font-size: 20px;
            flex-shrink: 0;
        }

        .product-name {
            font-size: 18px;
            font-weight: 700;
            color: #1b8a67;
            word-break: break-word;
        }

        .product-meta {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .product-meta-item {
            display: flex;
            flex-direction: column;
        }

        .product-meta-label {
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }

        .product-meta-value {
            font-size: 16px;
            font-weight: 700;
            color: #1a1a1a;
        }

        .product-cost {
            color: #d4a574;
            font-size: 18px;
        }

        /* legacy class kept for safety, unused now */
        .hotspot-tooltip { display: none; }

        .tool-name {
            font-size: 18px;
            font-weight: 700;
            color: #1b8a67;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .tool-description {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #999;
        }

        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 40px;
        }

        .summary-card {
            padding: 24px;
            background: linear-gradient(135deg, #1b8a67 0%, #2a5f4a 100%);
            color: white;
            border-radius: 10px;
            text-align: center;
        }

        .summary-value {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .summary-label {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0.9;
            font-weight: 600;
        }

        .summary-card.accent {
            background: linear-gradient(135deg, #d4a574 0%, #b8885a 100%);
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .details-grid {
                gap: 40px;
            }

            .service-image img {
                height: 400px;
            }

            .breadcrumb-section h1 {
                font-size: 36px;
            }

            .service-info-section h1 {
                font-size: 32px;
            }
        }

        @media (max-width: 1024px) {
            .service-details-container {
                padding: 40px 20px;
            }

            .details-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .service-image {
                position: relative;
                top: auto;
            }

            .service-image img {
                height: 350px;
            }

            .section-title {
                font-size: 28px;
            }

            .meta-info {
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
            }

            .products-grid,
            .tools-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .breadcrumb-section {
                padding: 40px 16px;
                margin-top: 60px;
            }

            .breadcrumb-section h1 {
                font-size: 28px;
            }

            .service-details-container {
                padding: 30px 16px;
            }

            .service-image img {
                height: 280px;
            }

            .hotspot {
                width: 22px;
                height: 22px;
            }

            .service-info-section h1 {
                font-size: 26px;
            }

            .description-text {
                font-size: 15px;
            }

            .meta-info {
                grid-template-columns: 1fr;
                gap: 20px;
                margin: 20px 0;
                padding: 15px 0;
            }

            .meta-label,
            .product-meta-label {
                font-size: 10px;
            }

            .meta-value {
                font-size: 18px;
            }

            .content-section {
                padding: 24px 16px;
                margin-bottom: 40px;
            }

            .section-title {
                font-size: 24px;
                margin-bottom: 20px;
                gap: 8px;
            }

            .section-title i {
                font-size: 28px;
            }

            .products-grid,
            .tools-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .product-card,
            .tool-card {
                padding: 18px;
            }

            .card-hover-overlay .overlay-price {
                font-size: 22px;
            }

            .hotspot-tooltip {
                font-size: 12px;
                padding: 6px 10px;
            }

            .product-name,
            .tool-name {
                font-size: 16px;
            }

            .summary-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .summary-card {
                padding: 16px 12px;
            }

            .summary-value {
                font-size: 24px;
            }

            .summary-label {
                font-size: 11px;
            }

            .live-price-panel {
                grid-template-columns: 1fr;
                text-align: left;
            }

            .book-service-panel {
                flex-direction: column;
            }

            .book-service-btn {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .breadcrumb-section {
                padding: 30px 12px;
            }

            .breadcrumb-section h1 {
                font-size: 22px;
            }

            .service-details-container {
                padding: 20px 12px;
            }

            .service-image img {
                height: 220px;
            }

            .service-info-section h1 {
                font-size: 22px;
            }

            .description-text {
                font-size: 14px;
                margin: 20px 0;
            }

            .meta-info {
                grid-template-columns: 1fr;
                gap: 15px;
                margin: 15px 0;
                padding: 12px 0;
                border-top: none;
                border-bottom: none;
            }

            .meta-item {
                text-align: left;
                padding: 12px;
                background: #f9f8f6;
                border-radius: 6px;
            }

            .back-link {
                font-size: 14px;
                margin-bottom: 20px;
            }

            .content-section {
                padding: 16px 12px;
                margin-bottom: 30px;
                border-radius: 8px;
            }

            .section-title {
                font-size: 20px;
                margin-bottom: 15px;
                gap: 8px;
            }

            .section-title i {
                font-size: 24px;
            }

            .products-grid,
            .tools-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .product-card,
            .tool-card {
                padding: 14px;
            }

            .product-name,
            .tool-name {
                font-size: 14px;
            }

            .summary-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .summary-card {
                padding: 14px;
            }

            .summary-value {
                font-size: 20px;
            }

            .summary-label {
                font-size: 10px;
            }

            .tap-hint {
                font-size: 11px;
                padding: 6px 9px;
            }
        }

        /* ===================== QUOTE MODAL ===================== */
        .quote-overlay {
            position: fixed;
            inset: 0;
            z-index: 30000;
            background: rgba(18, 14, 10, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: 16px;
        }
        .quote-overlay.active { opacity: 1; visibility: visible; }
        .quote-modal {
            position: relative;
            width: 100%;
            max-width: 820px;
            max-height: 90vh;
            background: #fff;
            border-radius: 22px;
            box-shadow: 0 32px 80px rgba(20, 12, 5, 0.28);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(30px) scale(0.96);
            transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
        }
        .quote-overlay.active .quote-modal { transform: translateY(0) scale(1); }
        .quote-header {
            display: flex; align-items: center; gap: 16px;
            padding: 22px 28px;
            background: linear-gradient(135deg, #2c1e10 0%, #4a3322 100%);
            color: #fff; flex-shrink: 0;
        }
        .quote-header-img { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255,255,255,0.18); flex-shrink: 0; }
        .quote-header-info { flex: 1; min-width: 0; }
        .quote-header-title { font-size: clamp(18px, 3vw, 24px); font-weight: 800; margin: 0 0 4px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .quote-header-sub { font-size: 13px; color: rgba(255,255,255,0.65); margin: 0; }
        .quote-close-btn {
            width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.08); color: #fff; font-size: 18px;
            display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
            transition: background 0.2s, transform 0.2s;
        }
        .quote-close-btn:hover { background: rgba(255,255,255,0.18); transform: rotate(90deg); }
        .quote-body { flex: 1; overflow-y: auto; padding: 24px 28px; overscroll-behavior: contain; }
        .quote-body::-webkit-scrollbar { width: 5px; }
        .quote-body::-webkit-scrollbar-thumb { background: #d4c4b0; border-radius: 99px; }
        .quote-meta-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
        .quote-meta-chip { display: inline-flex; align-items: center; gap: 6px; background: #f9f2e9; border: 1px solid #eadccf; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: #8a643f; }
        .quote-meta-chip i { font-size: 11px; opacity: 0.7; }
        .quote-desc { color: #666; font-size: 14px; line-height: 1.7; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
        .quote-section-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
        .quote-section-label i { color: #b58a5a; font-size: 16px; }
        .quote-products-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 20px; }
        .quote-products-table thead th { background: #faf6f0; color: #6f665d; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 10px 14px; text-align: left; border-bottom: 2px solid #ecdfd0; }
        .quote-products-table thead th:first-child { border-radius: 10px 0 0 0; }
        .quote-products-table thead th:last-child { border-radius: 0 10px 0 0; text-align: right; }
        .quote-products-table tbody td { padding: 12px 14px; font-size: 14px; color: #1a1a1a; border-bottom: 1px solid #f2ebe2; vertical-align: middle; }
        .quote-products-table tbody tr:last-child td { border-bottom: none; }
        .quote-products-table tbody tr { transition: background 0.15s; }
        .quote-products-table tbody tr:hover { background: #fdfaf6; }
        .quote-products-table .prod-index { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #b58a5a, #8a643f); color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
        .quote-products-table .prod-name { font-weight: 700; }
        .quote-products-table .prod-qty { text-align: center; color: #6f665d; font-weight: 600; }
        .quote-products-table .prod-cost { text-align: right; font-weight: 800; color: #8a643f; white-space: nowrap; }
        .quote-empty { text-align: center; padding: 32px 16px; color: #999; }
        .quote-empty i { font-size: 40px; opacity: 0.25; margin-bottom: 12px; display: block; }
        .quote-empty p { font-size: 14px; margin: 0; }
        .quote-tools-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
        .quote-tools-list li { display: inline-flex; align-items: center; gap: 6px; background: #f0f9f5; border: 1px solid #d0e8da; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #2a5f4a; }
        .quote-tools-list li i { font-size: 10px; color: #1b8a67; }
        .quote-footer { flex-shrink: 0; padding: 20px 28px; background: linear-gradient(to top, #faf6f0, #fff); border-top: 1px solid #ece0d2; }
        .quote-totals { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
        .quote-total-card { flex: 1; min-width: 130px; background: #fff; border: 1px solid #ece0d2; border-radius: 14px; padding: 14px 16px; text-align: center; }
        .quote-total-card.highlight { background: linear-gradient(135deg, #2c1e10 0%, #4a3322 100%); border-color: transparent; color: #fff; }
        .quote-total-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.65; margin-bottom: 4px; }
        .quote-total-value { font-size: clamp(18px, 3vw, 24px); font-weight: 800; line-height: 1.1; }
        .quote-total-card.highlight .quote-total-value { color: #f5d98b; }
        .quote-actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .quote-action-btn { flex: 1; min-width: 120px; padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; border: none; transition: transform 0.2s, box-shadow 0.2s; }
        .quote-action-btn:hover { transform: translateY(-2px); }
        .quote-action-btn.primary { background: linear-gradient(135deg, #b58a5a, #8a643f); color: #fff; box-shadow: 0 8px 20px rgba(138,100,63,0.3); }
        .quote-action-btn.primary:hover { box-shadow: 0 12px 28px rgba(138,100,63,0.4); color: #fff; }
        .quote-action-btn.secondary { background: #fff; color: #8a643f; border: 1px solid #e7dbce; }
        .quote-action-btn.secondary:hover { background: #fdf8f2; color: #8a643f; }
        .quote-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 16px; }
        .quote-spinner { width: 40px; height: 40px; border: 3px solid #ecdfd0; border-top-color: #b58a5a; border-radius: 50%; animation: q-spin 0.7s linear infinite; }
        @keyframes q-spin { to { transform: rotate(360deg); } }
        .quote-loading p { color: #999; font-size: 14px; margin: 0; }
        @media (max-width: 767.98px) {
            .quote-overlay { padding: 0; align-items: flex-end; }
            .quote-modal { max-width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; transform: translateY(100%); }
            .quote-overlay.active .quote-modal { transform: translateY(0); }
            .quote-header { padding: 18px 20px; }
            .quote-header-img { width: 48px; height: 48px; border-radius: 10px; }
            .quote-body { padding: 18px; }
            .quote-footer { padding: 16px 18px; }
            .quote-products-table thead { display: none; }
            .quote-products-table, .quote-products-table tbody, .quote-products-table tr, .quote-products-table td { display: block; width: 100%; }
            .quote-products-table tbody tr { background: #fdfaf6; border: 1px solid #f0e8dc; border-radius: 12px; padding: 14px; margin-bottom: 10px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; }
            .quote-products-table tbody td { padding: 0; border: none; }
            .quote-products-table tbody td:nth-child(1) { grid-row: 1 / 3; }
            .quote-products-table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; }
            .quote-products-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; text-align: left; }
            .quote-products-table tbody td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
            .quote-products-table .prod-qty::before { content: 'Qty: '; color: #999; font-weight: 600; }
        }
        @media (max-width: 480px) {
            .quote-header-title { font-size: 16px; }
            .quote-totals { flex-direction: column; }
            .quote-total-card { min-width: 100%; }
            .quote-actions { flex-direction: column; }
            .quote-action-btn { width: 100%; min-width: 0; }
        }
    </style>
</head>

<body>
    <?php include 'header-php.php'; ?>

    <!-- Breadcrumb -->
    <section class="breadcrumb-section">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.php">Home</a></li>
            <li class="breadcrumb-item"><a href="service.php">Services</a></li>
            <li class="breadcrumb-item active"><?php echo $title; ?></li>
        </ol>
        <h1><?php echo $title; ?></h1>
    </section>

    <!-- Main Content -->
    <div class="service-details-container">
        <a href="service.php" class="back-link">
            <i class="fas fa-arrow-left"></i> Back to Services
        </a>

        <!-- Service Details Grid -->
        <div class="details-grid">
            <!-- Image -->
            <div class="service-image">
                <div class="image-shell">
                    <img src="<?php echo $image; ?>" alt="<?php echo $title; ?>" loading="lazy">
                    <div class="hotspots" id="imageHotspots"></div>
                    <div class="tap-hint">Hover / tap image for product details</div>
                </div>
            </div>

            <!-- Info -->
            <div class="service-info-section">
                <div class="status-badge"><?php echo $status; ?></div>
                <h1><?php echo $title; ?></h1>

                <div class="meta-info">
                    <div class="meta-item">
                        <div class="meta-label">Area</div>
                        <div class="meta-value"><?php echo number_format($area); ?> sqft</div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">Price</div>
                        <div class="meta-value" id="metaPriceValue">$<?php echo number_format($price, 0); ?></div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">Duration</div>
                        <div class="meta-value"><?php echo $duration; ?></div>
                    </div>
                </div>

                <p class="description-text"><?php echo nl2br($description); ?></p>
                <div class="live-price-panel" id="livePricePanel">
                    <div>
                        <div class="live-price-label">Selected Product</div>
                        <div class="live-price-name" id="selectedProductName">Tap any item in image or product list</div>
                    </div>
                    <div class="live-price-amount" id="selectedProductPrice">$<?php echo number_format($price, 0); ?></div>
                </div>
                <div class="book-service-panel">
                    <button class="book-service-btn get-quote" type="button" id="detailGetQuoteBtn">
                        <i class="fas fa-file-invoice-dollar"></i>
                        Get Quote
                    </button>
                    <a class="book-service-btn primary" href="service-booking.php?service_id=<?php echo (int)$service_id; ?>&service=<?php echo urlencode($service['title']); ?>">
                        <i class="fas fa-calendar-check"></i>
                        Book Service
                    </a>
                    <a class="book-service-btn secondary" href="service.php">
                        <i class="fas fa-layer-group"></i>
                        Browse More Services
                    </a>
                </div>
            </div>
        </div>

        <!-- Products Section -->
        <section class="content-section">
            <h2 class="section-title">
                <i class="fas fa-box"></i> Product Breakdown
            </h2>

            <div class="products-grid" id="productsGrid">
                <?php if (!empty($products)): foreach ($products as $idx => $product): ?>
                    <div class="product-card<?php echo $idx === 0 ? ' active' : ''; ?>" data-product-id="<?php echo (int)$product['id']; ?>">
                        <div class="card-hover-overlay">
                            <div class="overlay-icon"><i class="fas fa-tag"></i></div>
                            <span class="overlay-name"><?php echo htmlspecialchars($product['product_name']); ?></span>
                            <span class="overlay-price">$<?php echo number_format($product['cost'], 2); ?></span>
                            <span class="overlay-qty">Qty: <?php echo htmlspecialchars($product['quantity'] ?: '1'); ?></span>
                        </div>
                        <div class="product-header">
                            <i class="fas fa-check-circle product-icon"></i>
                            <div class="product-name"><?php echo htmlspecialchars($product['product_name']); ?></div>
                        </div>
                        <div class="product-meta">
                            <div class="product-meta-item">
                                <span class="product-meta-label">Cost</span>
                                <span class="product-meta-value product-cost">$<?php echo number_format($product['cost'], 2); ?></span>
                            </div>
                            <div class="product-meta-item">
                                <span class="product-meta-label">Quantity</span>
                                <span class="product-meta-value"><?php echo htmlspecialchars($product['quantity']); ?></span>
                            </div>
                        </div>
                    </div>
                <?php endforeach; else: ?>
                    <div class="empty-state">
                        <div class="empty-state-icon"><i class="fas fa-box-open"></i></div>
                        <div>No products added yet.</div>
                    </div>
                <?php endif; ?>
            </div>
        </section>

        <!-- Tools Section -->
        <?php if (!empty($tools)): ?>
            <section class="content-section">
                <h2 class="section-title">
                    <i class="fas fa-tools"></i> Tools & Software Used
                </h2>

                <div class="tools-grid">
                    <?php foreach ($tools as $tool): ?>
                        <div class="tool-card">
                            <div class="tool-name">
                                <i class="fas fa-wrench"></i>
                                <?php echo htmlspecialchars($tool['tool_name']); ?>
                            </div>
                            <div class="tool-description">
                                <?php echo htmlspecialchars($tool['tool_description']); ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </section>
        <?php endif; ?>

        <!-- Summary Section -->
        <?php if (!empty($products) || !empty($tools)): ?>
            <section class="content-section">
                <h2 class="section-title">
                    <i class="fas fa-chart-pie"></i> Service Summary
                </h2>

                <div class="summary-grid">
                    <div class="summary-card">
                        <div class="summary-value"><?php echo count($products); ?></div>
                        <div class="summary-label">Products Included</div>
                    </div>
                    <div class="summary-card">
                        <div class="summary-value"><?php echo count($tools); ?></div>
                        <div class="summary-label">Tools & Software</div>
                    </div>
                    <?php if ($totalProductCost > 0): ?>
                        <div class="summary-card accent">
                            <div class="summary-value">$<?php echo number_format($totalProductCost, 0); ?></div>
                            <div class="summary-label">Product Cost</div>
                        </div>
                    <?php endif; ?>
                    <div class="summary-card">
                        <div class="summary-value">$<?php echo number_format($price, 0); ?></div>
                        <div class="summary-label">Base Price</div>
                    </div>
                </div>
            </section>
        <?php endif; ?>
    </div>

    <!-- ===================== QUOTE MODAL ===================== -->
    <div class="quote-overlay" id="quoteOverlay" role="dialog" aria-modal="true" aria-label="Service Quote">
        <div class="quote-modal">
            <div class="quote-header">
                <img class="quote-header-img" id="quoteImg" src="<?php echo $image; ?>" alt="<?php echo $title; ?>">
                <div class="quote-header-info">
                    <h2 class="quote-header-title" id="quoteTitle"><?php echo $title; ?></h2>
                    <p class="quote-header-sub">Detailed service quotation</p>
                </div>
                <button class="quote-close-btn" id="quoteCloseBtn" type="button" aria-label="Close quote">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="quote-body" id="quoteBody">
                <div class="quote-loading" id="quoteLoading">
                    <div class="quote-spinner"></div>
                    <p>Loading service quote&hellip;</p>
                </div>
                <div id="quoteContent" style="display:none"></div>
            </div>
            <div class="quote-footer" id="quoteFooter" style="display:none">
                <div class="quote-totals" id="quoteTotals"></div>
                <div class="quote-actions" id="quoteActions"></div>
            </div>
        </div>
    </div>

    <?php include 'footer-section.html'; ?>

    <div class="scroll-top">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewbox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 307.919;"></path>
        </svg>
    </div>

    <script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/circle-progress.js"></script>
    <script src="assets/js/jquery-ui.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/nice-select.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/gsap.min.js"></script>
    <script src="assets/js/ScrollTrigger.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script>
        (function () {
            var serviceId = <?php echo (int)$service_id; ?>;
            var basePrice = <?php echo json_encode((float)$price); ?>;
            var products = <?php echo json_encode($products, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?> || [];
            var selectedId = products.length ? Number(products[0].id) : 0;

            var anchorMap = [
                { keys: ['sofa', 'couch', 'settee'], x: 30, y: 69 },
                { keys: ['chair', 'armchair', 'stool'], x: 66, y: 60 },
                { keys: ['table', 'center table', 'coffee'], x: 47, y: 74 },
                { keys: ['cabinet', 'shelf', 'rack'], x: 70, y: 45 },
                { keys: ['wardrobe', 'closet'], x: 82, y: 58 },
                { keys: ['bed'], x: 41, y: 65 },
                { keys: ['lamp', 'light'], x: 57, y: 28 }
            ];
            var fallbackAnchors = [
                { x: 20, y: 55 }, { x: 35, y: 48 }, { x: 50, y: 62 }, { x: 64, y: 50 }, { x: 78, y: 64 }
            ];

            function esc(v) {
                return String(v == null ? '' : v).replace(/[&<>"]/g, function (c) {
                    return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
                });
            }
            function fmtPrice(v) {
                var n = Number(v || 0);
                return '\u20b9' + n.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
            }
            function normalize(s) {
                return String(s || '').toLowerCase();
            }
            function pickAnchor(name, used) {
                var n = normalize(name);
                for (var i = 0; i < anchorMap.length; i++) {
                    var a = anchorMap[i];
                    for (var k = 0; k < a.keys.length; k++) {
                        if (n.indexOf(a.keys[k]) !== -1) {
                            var key = a.x + ':' + a.y;
                            if (!used[key]) {
                                used[key] = true;
                                return { x: a.x, y: a.y };
                            }
                        }
                    }
                }
                for (var j = 0; j < fallbackAnchors.length; j++) {
                    var f = fallbackAnchors[j];
                    var fk = f.x + ':' + f.y;
                    if (!used[fk]) {
                        used[fk] = true;
                        return f;
                    }
                }
                return { x: 50, y: 50 };
            }
            function assignAnchors(items) {
                var used = {};
                return items.map(function (item) {
                    var px = parseFloat(item.spot_x);
                    var py = parseFloat(item.spot_y);
                    if (Number.isFinite(px) && Number.isFinite(py)) {
                        return Object.assign({}, item, { x: px, y: py });
                    }
                    var pos = pickAnchor(item.product_name, used);
                    return Object.assign({}, item, { x: pos.x, y: pos.y });
                });
            }

            function setSelected(productId) {
                selectedId = Number(productId || 0);
                var selected = products.find(function (p) { return Number(p.id) === selectedId; });
                document.querySelectorAll('.product-card').forEach(function (el) {
                    el.classList.toggle('active', Number(el.getAttribute('data-product-id')) === selectedId);
                });
                document.querySelectorAll('.hotspot').forEach(function (el) {
                    el.classList.toggle('active', Number(el.getAttribute('data-product-id')) === selectedId);
                });

                var nameEl = document.getElementById('selectedProductName');
                var priceEl = document.getElementById('selectedProductPrice');
                var metaPriceEl = document.getElementById('metaPriceValue');
                if (!selected) {
                    nameEl.textContent = 'Tap any item in image or product list';
                    priceEl.textContent = fmtPrice(basePrice);
                    metaPriceEl.textContent = fmtPrice(basePrice);
                    return;
                }
                nameEl.textContent = selected.product_name + ' (Qty: ' + (selected.quantity || '1') + ')';
                priceEl.textContent = fmtPrice(selected.cost);
                metaPriceEl.textContent = fmtPrice(selected.cost);
            }

            function renderProducts() {
                var grid = document.getElementById('productsGrid');
                if (!grid) return;
                if (!products.length) {
                    grid.innerHTML = '<div class="empty-state"><div class="empty-state-icon"><i class="fas fa-box-open"></i></div><div>No products added yet.</div></div>';
                    setSelected(0);
                    return;
                }
                var html = '';
                products.forEach(function (p) {
                    html += '<div class="product-card' + (Number(p.id) === selectedId ? ' active' : '') + '" data-product-id="' + Number(p.id) + '">' +
                        '<div class="card-hover-overlay">' +
                            '<div class="overlay-icon"><i class="fas fa-tag"></i></div>' +
                            '<span class="overlay-name">' + esc(p.product_name) + '</span>' +
                            '<span class="overlay-price">' + fmtPrice(p.cost) + '</span>' +
                            '<span class="overlay-qty">Qty: ' + esc(p.quantity || '1') + '</span>' +
                        '</div>' +
                        '<div class="product-header"><i class="fas fa-check-circle product-icon"></i><div class="product-name">' + esc(p.product_name) + '</div></div>' +
                        '<div class="product-meta"><div class="product-meta-item"><span class="product-meta-label">Cost</span><span class="product-meta-value product-cost">' + fmtPrice(p.cost) + '</span></div>' +
                        '<div class="product-meta-item"><span class="product-meta-label">Quantity</span><span class="product-meta-value">' + esc(p.quantity || '1') + '</span></div></div></div>';
                });
                grid.innerHTML = html;
                grid.querySelectorAll('.product-card').forEach(function (card) {
                    card.addEventListener('click', function () { setSelected(Number(card.getAttribute('data-product-id'))); });
                });
            }

            function positionLabel(label, btn, wrap) {
                var topPct = parseFloat(btn.style.top) || 50;
                if (topPct < 35) {
                    label.classList.add('below');
                } else {
                    label.classList.remove('below');
                }
            }

            function renderHotspots() {
                var wrap = document.getElementById('imageHotspots');
                if (!wrap) return;
                wrap.innerHTML = '';
                products.forEach(function (p) {
                    var btn = document.createElement('button');
                    btn.type = 'button';
                    btn.className = 'hotspot' + (Number(p.id) === selectedId ? ' active' : '');
                    btn.setAttribute('data-product-id', Number(p.id));
                    btn.style.left = p.x + '%';
                    btn.style.top = p.y + '%';

                    var label = document.createElement('span');
                    label.className = 'hs-label';
                    label.innerHTML = '<span class="hs-name">' + esc(p.product_name) + '</span><span class="hs-price">' + fmtPrice(p.cost) + '</span>';
                    positionLabel(label, btn, wrap);
                    btn.appendChild(label);

                    var touchTimer = null;
                    btn.addEventListener('touchstart', function (e) {
                        e.preventDefault();
                        setSelected(Number(p.id));
                        label.classList.add('show');
                        clearTimeout(touchTimer);
                        touchTimer = setTimeout(function () { label.classList.remove('show'); }, 2500);
                    }, { passive: false });

                    btn.addEventListener('click', function () {
                        setSelected(Number(p.id));
                    });

                    wrap.appendChild(btn);
                });
            }

            function syncDetails() {
                fetch('api/get-service-details.php?service_id=' + encodeURIComponent(serviceId))
                    .then(function (r) { return r.json(); })
                    .then(function (data) {
                        if (!data || !data.success || !Array.isArray(data.products)) return;
                        products = assignAnchors(data.products);
                        if (!products.some(function (p) { return Number(p.id) === selectedId; })) {
                            selectedId = products.length ? Number(products[0].id) : 0;
                        }
                        renderProducts();
                        renderHotspots();
                        setSelected(selectedId);
                    })
                    .catch(function () {});
            }

            products = assignAnchors(products);
            renderProducts();
            renderHotspots();
            setSelected(selectedId);
            setInterval(syncDetails, 10000);
        })();
    </script>

    <!-- ===================== QUOTE MODAL JS ===================== -->
    <script>
    (function() {
        var overlay  = document.getElementById('quoteOverlay');
        var closeBtn = document.getElementById('quoteCloseBtn');
        var loading  = document.getElementById('quoteLoading');
        var content  = document.getElementById('quoteContent');
        var footer   = document.getElementById('quoteFooter');
        var titleEl  = document.getElementById('quoteTitle');
        var imgEl    = document.getElementById('quoteImg');
        var totalsEl = document.getElementById('quoteTotals');
        var actionsEl= document.getElementById('quoteActions');
        var currentServiceId = <?php echo (int)$service_id; ?>;

        function formatCurrency(n) {
            return '\u20b9' + Number(n).toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
        }

        function openQuote(serviceId) {
            loading.style.display = 'flex';
            content.style.display = 'none';
            footer.style.display  = 'none';
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';

            fetch('api/service-quote-api.php?service_id=' + serviceId)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (!data.success) {
                        content.innerHTML = '<div class="quote-empty"><i class="fa-solid fa-circle-exclamation"></i><p>' + (data.message || 'Unable to load quote') + '</p></div>';
                        loading.style.display = 'none';
                        content.style.display = 'block';
                        return;
                    }

                    var svc = data.service;
                    var prods = data.products || [];
                    var tools = data.tools || [];

                    titleEl.textContent = svc.title;
                    imgEl.src = svc.image || 'assets/img/service/service_2_1.jpg';
                    imgEl.alt = svc.title;

                    var html = '';
                    html += '<div class="quote-meta-strip">';
                    if (svc.price > 0) html += '<span class="quote-meta-chip"><i class="fa-solid fa-tag"></i> Base: ' + formatCurrency(svc.price) + '</span>';
                    if (svc.area_sqft > 0) html += '<span class="quote-meta-chip"><i class="fa-solid fa-ruler-combined"></i> ' + svc.area_sqft.toLocaleString() + ' sqft</span>';
                    if (svc.duration) html += '<span class="quote-meta-chip"><i class="fa-solid fa-clock"></i> ' + svc.duration + '</span>';
                    if (svc.status) html += '<span class="quote-meta-chip"><i class="fa-solid fa-circle-check"></i> ' + svc.status + '</span>';
                    html += '</div>';

                    if (svc.description) html += '<p class="quote-desc">' + svc.description + '</p>';

                    if (prods.length > 0) {
                        html += '<div class="quote-section-label"><i class="fa-solid fa-boxes-stacked"></i> Products &amp; Items Included (' + prods.length + ')</div>';
                        html += '<table class="quote-products-table"><thead><tr><th>#</th><th>Product</th><th style="text-align:center">Qty</th><th style="text-align:right">Price</th></tr></thead><tbody>';
                        prods.forEach(function(p, i) {
                            var qty = isNaN(Number(p.quantity)) ? p.quantity : Number(p.quantity);
                            var lineTotal = p.cost * (typeof qty === 'number' ? qty : 1);
                            html += '<tr><td><span class="prod-index">' + (i+1) + '</span></td><td class="prod-name">' + p.product_name + '</td><td class="prod-qty">' + p.quantity + '</td><td class="prod-cost">' + formatCurrency(lineTotal) + '</td></tr>';
                        });
                        html += '</tbody></table>';
                    } else {
                        html += '<div class="quote-empty"><i class="fa-solid fa-cube"></i><p>No specific products listed for this service yet.</p></div>';
                    }

                    if (tools.length > 0) {
                        html += '<div class="quote-section-label" style="margin-top:8px"><i class="fa-solid fa-screwdriver-wrench"></i> Tools &amp; Equipment</div>';
                        html += '<ul class="quote-tools-list">';
                        tools.forEach(function(t) { html += '<li><i class="fa-solid fa-check"></i> ' + t.tool_name + '</li>'; });
                        html += '</ul>';
                    }

                    content.innerHTML = html;
                    loading.style.display = 'none';
                    content.style.display = 'block';

                    var totalProd = data.total_product_cost || 0;
                    var basePrice = svc.price || 0;
                    var grandTotal = basePrice > 0 ? basePrice : totalProd;

                    var totalsHtml = '';
                    if (prods.length > 0) totalsHtml += '<div class="quote-total-card"><div class="quote-total-label">Products Total</div><div class="quote-total-value">' + formatCurrency(totalProd) + '</div></div>';
                    if (basePrice > 0) totalsHtml += '<div class="quote-total-card"><div class="quote-total-label">Service Price</div><div class="quote-total-value">' + formatCurrency(basePrice) + '</div></div>';
                    totalsHtml += '<div class="quote-total-card highlight"><div class="quote-total-label">Estimated Total</div><div class="quote-total-value">' + formatCurrency(grandTotal > 0 ? grandTotal : totalProd) + '</div></div>';
                    totalsEl.innerHTML = totalsHtml;

                    actionsEl.innerHTML = '<a class="quote-action-btn primary" href="service-booking.php?service_id=' + svc.id + '&service=' + encodeURIComponent(svc.title) + '"><i class="fa-solid fa-calendar-check"></i>&nbsp; Book Service</a>'
                        + '<button class="quote-action-btn secondary" type="button" onclick="downloadQuote()"><i class="fa-solid fa-download"></i>&nbsp; Download Quote</button>';

                    footer.style.display = 'block';
                })
                .catch(function() {
                    content.innerHTML = '<div class="quote-empty"><i class="fa-solid fa-circle-exclamation"></i><p>Network error. Please try again.</p></div>';
                    loading.style.display = 'none';
                    content.style.display = 'block';
                });
        }

        function closeQuote() {
            overlay.classList.remove('active');
            document.body.style.overflow = '';
        }

        closeBtn.addEventListener('click', closeQuote);
        overlay.addEventListener('click', function(e) { if (e.target === overlay) closeQuote(); });
        document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('active')) closeQuote(); });

        // Get Quote button on detail page
        var detailBtn = document.getElementById('detailGetQuoteBtn');
        if (detailBtn) {
            detailBtn.addEventListener('click', function(e) {
                e.preventDefault();
                openQuote(currentServiceId);
            });
        }
    })();

    /* ---- Download Quote as printable document ---- */
    function downloadQuote() {
        var title = document.getElementById('quoteTitle').textContent || 'Service Quote';
        var body = document.getElementById('quoteContent').innerHTML || '';
        var totals = document.getElementById('quoteTotals').innerHTML || '';
        var date = new Date().toLocaleDateString('en-IN', { year:'numeric', month:'long', day:'numeric' });

        var html = '<!DOCTYPE html><html><head><meta charset="utf-8"><title>Quote - ' + title + '</title>'
            + '<style>'
            + '*{margin:0;padding:0;box-sizing:border-box}'
            + 'body{font-family:Segoe UI,Tahoma,sans-serif;color:#1f1b17;padding:40px;max-width:800px;margin:0 auto}'
            + '.q-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #b58a5a;padding-bottom:20px;margin-bottom:28px}'
            + '.q-brand{font-size:24px;font-weight:800;color:#2c1e10}.q-brand span{color:#b58a5a}'
            + '.q-info{text-align:right;font-size:12px;color:#6f665d;line-height:1.7}'
            + '.q-title{font-size:22px;font-weight:800;color:#2c1e10;margin-bottom:16px}'
            + 'table{width:100%;border-collapse:collapse;margin-bottom:20px}'
            + 'th{background:#faf6f0;color:#6f665d;font-size:11px;font-weight:700;text-transform:uppercase;padding:10px 12px;text-align:left;border-bottom:2px solid #ecdfd0}'
            + 'th:last-child{text-align:right}td{padding:10px 12px;font-size:13px;border-bottom:1px solid #f2ebe2}'
            + 'td:last-child{text-align:right;font-weight:700;color:#8a643f}'
            + '.q-totals{display:flex;gap:12px;margin-top:24px}'
            + '.q-total-card{flex:1;border:1px solid #ece0d2;border-radius:12px;padding:14px;text-align:center}'
            + '.q-total-card.hl{background:#2c1e10;border-color:transparent;color:#fff}'
            + '.q-total-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.6;margin-bottom:4px}'
            + '.q-total-val{font-size:20px;font-weight:800}.q-total-card.hl .q-total-val{color:#f5d98b}'
            + '.q-footer{margin-top:40px;text-align:center;font-size:11px;color:#999;border-top:1px solid #eee;padding-top:16px}'
            + '@media print{body{padding:20px}}'
            + '</style></head><body>'
            + '<div class="q-header"><div><div class="q-brand">FAREN <span>ARCHITECTS</span></div><div style="font-size:12px;color:#6f665d;margin-top:4px">Interior Design & Architecture</div></div>'
            + '<div class="q-info">QUOTATION<br>Date: ' + date + '<br>Ref: SQ-' + Date.now().toString(36).toUpperCase() + '</div></div>'
            + '<div class="q-title">' + title + '</div>' + body
            + '<div class="q-totals">' + totals.replace(/quote-total-card highlight/g,'q-total-card hl').replace(/quote-total-card/g,'q-total-card').replace(/quote-total-label/g,'q-total-lbl').replace(/quote-total-value/g,'q-total-val') + '</div>'
            + '<div class="q-footer">This is a computer-generated quotation. Prices are estimates and subject to change.<br>&copy; ' + new Date().getFullYear() + ' Faren Architects. All rights reserved.</div>'
            + '<script>window.onload=function(){window.print()}<\/script></body></html>';

        var w = window.open('', '_blank');
        if (w) { w.document.write(html); w.document.close(); }
    }
    </script>

    <!-- Chat Widget -->
    <?php include 'includes/chat-widget.html'; ?>
    <!-- Responsive Chat Script -->
    <script src="assets/js/responsive-chat-ai.js"></script>
</body>

</html>
