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

<div class="px-0 py-3 md:p-2 lg:p-6 min-h-screen">

    <!-- Page Header -->
    <div class="flex items-center justify-between mb-6 mt-5">

        <h1 class="text-3xl font-bold text-gray-900">
            View Product
        </h1>

        <a href="lockora_product.php"
            class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-white text-black border border-gray-200 hover:shadow-md transition-all duration-300">
            <i class="ri-arrow-left-line"></i>
            Back
        </a>

    </div>

    <!-- Main Card -->
    <div class="bg-white rounded-3xl shadow-lg p-8">

        <!-- Product Section -->
        <div class="grid lg:grid-cols-2 gap-10">

            <!-- Left Side Images -->
            <div>

                <h2 class="text-2xl font-bold text-gray-900 mb-5">
                    Product Images
                </h2>

                <!-- Main Image -->
                <div class="bg-gray-50 border border-gray-200 rounded-2xl p-4 mb-4">

                    <img id="mainImage"
                        src="https://lockora.in/Images/l2.webp"
                        class="w-full h-[450px] object-contain">

                </div>

                <!-- Thumbnails -->
                <div class="grid grid-cols-4 gap-3">

                    <img src="https://lockora.in/Images/l2.webp"
                        onclick="changeImage(this)"
                        class="thumb h-24 w-full object-contain bg-gray-50 border-2 border-blue-500 rounded-xl p-2 cursor-pointer hover:shadow-md transition">

                    <img src="https://lockora.in/Images/l1core.webp"
                        onclick="changeImage(this)"
                        class="thumb h-24 w-full object-contain bg-gray-50 border border-gray-200 rounded-xl p-2 cursor-pointer hover:shadow-md transition">

                    <img src="https://lockora.in/Images/l3pro.webp"
                        onclick="changeImage(this)"
                        class="thumb h-24 w-full object-contain bg-gray-50 border border-gray-200 rounded-xl p-2 cursor-pointer hover:shadow-md transition">

                    <img src="https://lockora.in/Images/l4ultra.webp"
                        onclick="changeImage(this)"
                        class="thumb h-24 w-full object-contain bg-gray-50 border border-gray-200 rounded-xl p-2 cursor-pointer hover:shadow-md transition">

                </div>

            </div>

            <!-- Right Side Details -->
            <div>

                <h2 class="text-3xl font-bold text-gray-900 mb-2">
                    Smart Door Lock
                </h2>

                <div class="flex items-center gap-3 mb-8">

                    <span class="px-4 py-1 rounded-full bg-green-100 text-green-700 text-sm font-medium">
                        In Stock
                    </span>

                    <span class="text-gray-500">
                        Available Quantity : 50
                    </span>

                </div>

                <!-- Details -->
                <div class="space-y-5">

                    <div class="flex justify-between items-center border-b border-gray-200 pb-4">
                        <span class="text-gray-500">Product Name</span>
                        <span class="font-semibold text-gray-900">
                            Smart Door Lock
                        </span>
                    </div>

                    <div class="flex justify-between items-center border-b border-gray-200 pb-4">
                        <span class="text-gray-500">MRP</span>
                        <span class="font-semibold text-xl text-gray-900">
                            ₹15,000
                        </span>
                    </div>

                    <div class="flex justify-between items-center border-b border-gray-200 pb-4">
                        <span class="text-gray-500">Selling Price</span>
                        <span class="font-bold text-2xl text-green-600">
                            ₹12,999
                        </span>
                    </div>

                    <div class="flex justify-between items-center border-b border-gray-200 pb-4">
                        <span class="text-gray-500">Stock Quantity</span>
                        <span class="font-semibold text-gray-900">
                            50 Units
                        </span>
                    </div>

                    <div class="flex justify-between items-center border-b border-gray-200 pb-4">
                        <span class="text-gray-500">Product Code</span>
                        <span class="font-semibold text-gray-900">
                            LCK-001
                        </span>
                    </div>

                </div>

            </div>

        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-10"></div>

        <!-- Description -->
        <div>

            <h3 class="text-xl font-bold text-gray-900 mb-4">
                Product Description
            </h3>

            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6">

                <p class="text-gray-700 leading-8">
                    Premium Smart Door Lock with Fingerprint Access,
                    RFID Card Support, Mobile App Connectivity,
                    Password Unlock and Remote Monitoring Features.
                    Designed for modern homes, offices and commercial spaces.
                </p>

            </div>

        </div>

    </div>

</div>

<script>
function changeImage(img) {

    document.getElementById('mainImage').src = img.src;

    document.querySelectorAll('.thumb').forEach(item => {
        item.classList.remove('border-2', 'border-blue-500');
        item.classList.add('border', 'border-gray-200');
    });

    img.classList.remove('border', 'border-gray-200');
    img.classList.add('border-2', 'border-blue-500');
}
</script>

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