<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Price Lookup</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        :root {
            --bg-color: #ffffff;
            --text-color: #333333;
            --input-bg: #f8f9fa;
            --border-color: #e9ecef;
            --card-bg: #ffffff;
            --shadow-color: rgba(0,0,0,0.1);
            --credit-color: rgba(0,0,0,0.2);
        }

        [data-theme="dark"] {
            --bg-color: #1a1a1a;
            --text-color: #ffffff;
            --input-bg: #2d2d2d;
            --border-color: #404040;
            --card-bg: #2d2d2d;
            --shadow-color: rgba(0,0,0,0.3);
            --credit-color: rgba(255,255,255,0.2);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: all 0.3s ease;
            padding: 15px;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-size: 0.9rem;
        }

        .container {
            background-color: var(--card-bg);
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 6px 18px var(--shadow-color);
            max-width: 600px;
            margin: 0 auto;
            width: 100%;
            flex-grow: 1;
            box-sizing: border-box;
        }

        @media screen and (max-width: 640px) {
            body {
                padding: 10px;
            }

            .container {
                padding: 1rem;
                width: calc(100% - 20px);
                margin: 0 10px;
            }

            .controls {
                flex-direction: column;
                gap: 6px;
            }

            .toggle-btn {
                width: 100%;
                padding: 10px;
            }

            .price-row {
                flex-direction: column;
                align-items: flex-start;
                padding: 8px 0;
            }

            .price-row span:last-child {
                font-weight: bold;
                margin-top: 4px;
            }
        }

        @media screen and (max-width: 480px) {
            body {
                font-size: 0.85rem;
            }

            .container {
                padding: 0.8rem;
            }

            input[type="text"], input[type="file"] {
                padding: 6px;
            }

            .price-details {
                padding: 12px;
            }
        }

        @media screen and (max-width: 320px) {
            body {
                font-size: 0.8rem;
            }

            .container {
                padding: 0.6rem;
            }
        }

        .controls {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            justify-content: flex-end;
        }

        .toggle-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            font-weight: 500;
            transition: transform 0.2s, background-color 0.2s;
            font-size: 0.9rem;
        }

        .toggle-btn:hover {
            transform: translateY(-2px);
            background-color: #45a049;
        }

        input[type="text"], input[type="file"] {
            padding: 8px;
            margin: 6px 0;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--input-bg);
            color: var(--text-color);
            width: 100%;
            box-sizing: border-box;
            transition: border-color 0.3s;
            font-size: 0.9rem;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #4CAF50;
        }

        .price-details {
            margin-top: 16px;
            border: 2px solid var(--border-color);
            padding: 16px;
            border-radius: 8px;
            background-color: var(--input-bg);
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            margin: 6px 0;
            padding: 6px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .price-row:last-child {
            border-bottom: none;
        }

        .ui-autocomplete {
            background-color: var(--card-bg);
            color: var(--text-color);
            border: 2px solid var(--border-color);
            border-radius: 6px;
            max-height: 180px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 6px 0;
            font-size: 0.9rem;
        }

        .ui-menu-item {
            padding: 6px 12px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .ui-menu-item:hover {
            background-color: var(--input-bg);
        }

        .ui-state-active {
            background-color: #4CAF50 !important;
            color: white !important;
            border: none !important;
            margin: 0 !important;
        }

        .credit {
            text-align: center;
            padding: 16px;
            color: var(--credit-color);
            font-size: 12px;
            user-select: none;
            pointer-events: none;
            margin-top: 16px;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--input-bg);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: #4CAF50;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="controls">
            <button id="langToggle" class="toggle-btn">🌐 English</button>
            <button id="themeToggle" class="toggle-btn">🌓 Theme</button>
        </div>

        <input type="file" id="fileInput" accept=".xlsx" />
        <input type="text" id="carSearch" placeholder="Search for a car..." />

        <div class="price-details" id="priceDetails"></div>
    </div>
    <div class="credit">Abdulaziz 103215</div>

    <script>
        const translations = {
            en: {
                search: "Search for a car...",
                file: "Choose Excel file",
                theme: "🌓 Theme",
                lang: "🌐 English",
                model: "Model",
                actualPrice: "Actual Price",
                cdwPrice: "CDW Price",
                cdwPlusPrice: "CDW+ Price",
                kmOpenPrice: "KM Open Price",
                discount25: "25% Discount",
                discount25Cdw: "25% + CDW"
            },
            ar: {
                search: "ابحث عن سيارة...",
                file: "اختر ملف Excel",
                theme: "🌓 السمة",
                lang: "🌐 عربي",
                model: "الموديل",
                actualPrice: "السعر الفعلي",
                cdwPrice: "CDW سعر",
                cdwPlusPrice: "CDW+ سعر",
                kmOpenPrice: "سعر الكيلومترات المفتوحة",
                discount25: "خصم 25%",
                discount25Cdw: "CDW + 25%"
            }
        };

        let currentLang = 'en';
        let carData = [];
        let lastSelectedCar = null;

        function updateLanguage() {
            document.getElementById('carSearch').placeholder = translations[currentLang].search;
            document.getElementById('fileInput').title = translations[currentLang].file;
            document.getElementById('langToggle').textContent = translations[currentLang].lang;
            if (document.getElementById('priceDetails').innerHTML !== '') {
                updatePriceDetails(lastSelectedCar);
            }
        }

        document.getElementById('langToggle').addEventListener('click', () => {
            currentLang = currentLang === 'en' ? 'ar' : 'en';
            document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
            updateLanguage();
        });

        document.getElementById('themeToggle').addEventListener('click', () => {
            document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
        });

        document.getElementById('fileInput').addEventListener('change', (e) => {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, {type: 'array'});
                const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                const jsonData = XLSX.utils.sheet_to_json(firstSheet, {header: 1});

                const dataRows = jsonData.slice(1);

                carData = dataRows.filter(row => row.length > 0).map(row => ({
                    label: `${row[0]} - ${row[1]}`,
                    value: row[0],
                    model: row[1],
                    actualPrice: row[2],
                    cdwPrice: row[3],
                    cdwPlusPrice: row[4],
                    kmOpenPrice: row[5],
                    discount25: row[7],
                    discount25Cdw: row[9]
                }));

                setupAutocomplete();
            };

            reader.readAsArrayBuffer(file);
        });

        function setupAutocomplete() {
            $("#carSearch").autocomplete({
                source: carData,
                select: function(event, ui) {
                    lastSelectedCar = ui.item;
                    updatePriceDetails(ui.item);
                    this.value = ui.item.label;
                    return false;
                }
            }).autocomplete("instance")._renderItem = function(ul, item) {
                return $("<li>")
                    .append(`<div>${item.label}</div>`)
                    .appendTo(ul);
            };
        }

        function updatePriceDetails(car) {
            if (!car) return;

            // Helper function to format numbers
            const formatPrice = (price) => {
                if (price === null || price === undefined) return '-';
                return Number(price).toFixed(2);  // This will show exactly 2 decimal places
            };

            const details = [
                { key: 'model', value: car.model },
                { key: 'actualPrice', value: formatPrice(car.actualPrice) },
                { key: 'cdwPrice', value: formatPrice(car.cdwPrice) },
                { key: 'cdwPlusPrice', value: formatPrice(car.cdwPlusPrice) },
                { key: 'kmOpenPrice', value: formatPrice(car.kmOpenPrice) },
                { key: 'discount25', value: formatPrice(car.discount25) },
                { key: 'discount25Cdw', value: formatPrice(car.discount25Cdw) }
            ];

            const html = details.map(detail => `
                <div class="price-row">
                    <span>${translations[currentLang][detail.key]}</span>
                    <span>${detail.value}</span>
                </div>
            `).join('');

            document.getElementById('priceDetails').innerHTML = html;
        }

        updateLanguage();
    </script>
</body>
</html>