@extends('layouts.app')

@section('title', '3D Virtual Tour Portal | Kevron Suites')
@section('meta_description', 'Take a 3D virtual tour of our 1, 2, 3 and 4 bedroom luxury serviced apartments in Adeniyi Jones, Ikeja, Lagos.')

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
    let scene, camera, renderer, roomGroup;
    let isDragging = false;
    let previousMousePosition = { x: 0, y: 0 };
    let threeInitialized = false;

    function initThreeJS() {
        if (threeInitialized) return;
        
        // Wait a small tick to ensure DOM is fully ready
        setTimeout(() => {
            const container = document.getElementById('three-canvas-holder');
            if (!container) return;

            // Clear any old canvas elements just in case
            container.innerHTML = '';

            const width = container.clientWidth || 800;
            const height = container.clientHeight || 450;

            // 1. Scene setup
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x080d2b); // Midnight Navy

            // 2. Camera setup
            camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
            camera.position.set(0, 4, 8);
            camera.lookAt(0, 0, 0);

            // 3. Renderer setup
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(width, height);
            renderer.setPixelRatio(window.devicePixelRatio);
            container.appendChild(renderer.domElement);

            // 4. Room Group
            roomGroup = new THREE.Group();
            scene.add(roomGroup);

            // Floor
            const floorGeo = new THREE.BoxGeometry(6, 0.2, 6);
            const floorMat = new THREE.MeshStandardMaterial({ color: 0x1f2937, roughness: 0.8 }); // Slate-800
            const floor = new THREE.Mesh(floorGeo, floorMat);
            floor.position.y = -0.1;
            roomGroup.add(floor);

            // Walls (Back & Left)
            const wallMat = new THREE.MeshStandardMaterial({ color: 0x111827, roughness: 0.9 }); // Dark wall
            const backWallGeo = new THREE.BoxGeometry(6, 3, 0.2);
            const backWall = new THREE.Mesh(backWallGeo, wallMat);
            backWall.position.set(0, 1.5, -2.9);
            roomGroup.add(backWall);

            const leftWallGeo = new THREE.BoxGeometry(0.2, 3, 6);
            const leftWall = new THREE.Mesh(leftWallGeo, wallMat);
            leftWall.position.set(-2.9, 1.5, 0);
            roomGroup.add(leftWall);

            // Snooker/Executive Lounge Table (Kevron theme)
            const tableGeo = new THREE.BoxGeometry(2.5, 0.6, 1.4);
            const tableMat = new THREE.MeshStandardMaterial({ color: 0x2b3192, roughness: 0.5 }); // Royal Blue
            const table = new THREE.Mesh(tableGeo, tableMat);
            table.position.set(0, 0.3, 0);
            roomGroup.add(table);

            const surfaceGeo = new THREE.BoxGeometry(2.3, 0.05, 1.2);
            const surfaceMat = new THREE.MeshStandardMaterial({ color: 0xd6a84f, roughness: 0.3 }); // Gold Felt
            const surface = new THREE.Mesh(surfaceGeo, surfaceMat);
            surface.position.set(0, 0.625, 0);
            roomGroup.add(surface);

            // Standby Sofa (Sky Cyan)
            const sofaBaseGeo = new THREE.BoxGeometry(0.6, 0.4, 1.8);
            const sofaMat = new THREE.MeshStandardMaterial({ color: 0x1fadea, roughness: 0.6 }); // Sky Cyan
            const sofa = new THREE.Mesh(sofaBaseGeo, sofaMat);
            sofa.position.set(1.8, 0.2, 0);
            roomGroup.add(sofa);

            // Warm Spotlights
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.45);
            scene.add(ambientLight);

            const pointLight1 = new THREE.PointLight(0xd6a84f, 2.0, 15); // Champagne Gold Spot
            pointLight1.position.set(0, 2.5, 0);
            scene.add(pointLight1);

            const pointLight2 = new THREE.PointLight(0x1fadea, 1.5, 10); // Sky Cyan Spot
            pointLight2.position.set(-2, 2, 2);
            scene.add(pointLight2);

            // Helper light visualizer (warm golden ceiling sphere)
            const sphereGeo = new THREE.SphereGeometry(0.12, 8, 8);
            const lightMat = new THREE.MeshBasicMaterial({ color: 0xd6a84f });
            const lightVisualizer = new THREE.Mesh(sphereGeo, lightMat);
            lightVisualizer.position.set(0, 2.5, 0);
            scene.add(lightVisualizer);

            // 5. Drag Interaction
            const dom = renderer.domElement;
            dom.addEventListener('mousedown', (e) => {
                isDragging = true;
                previousMousePosition = { x: e.offsetX, y: e.offsetY };
            });

            dom.addEventListener('mousemove', (e) => {
                if (!isDragging) return;
                const deltaMove = {
                    x: e.offsetX - previousMousePosition.x,
                    y: e.offsetY - previousMousePosition.y
                };

                roomGroup.rotation.y += deltaMove.x * 0.007;
                roomGroup.rotation.x += deltaMove.y * 0.007;

                // clamp vertical rotation
                roomGroup.rotation.x = Math.max(-0.5, Math.min(0.5, roomGroup.rotation.x));

                previousMousePosition = { x: e.offsetX, y: e.offsetY };
            });

            window.addEventListener('mouseup', () => {
                isDragging = false;
            });

            // Touch support
            dom.addEventListener('touchstart', (e) => {
                if (e.touches.length === 1) {
                    isDragging = true;
                    previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
                }
            });

            dom.addEventListener('touchmove', (e) => {
                if (!isDragging || e.touches.length !== 1) return;
                const deltaMove = {
                    x: e.touches[0].clientX - previousMousePosition.x,
                    y: e.touches[0].clientY - previousMousePosition.y
                };

                roomGroup.rotation.y += deltaMove.x * 0.007;
                roomGroup.rotation.x += deltaMove.y * 0.007;
                roomGroup.rotation.x = Math.max(-0.5, Math.min(0.5, roomGroup.rotation.x));

                previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
            });

            window.addEventListener('touchend', () => {
                isDragging = false;
            });

            // 6. Animation loop
            const animate = function () {
                requestAnimationFrame(animate);

                // Subtle default automatic spin if not interacting
                if (!isDragging) {
                    roomGroup.rotation.y += 0.0025;
                }

                renderer.render(scene, camera);
            };
            animate();

            // 7. Handle resize
            window.addEventListener('resize', () => {
                const newWidth = container.clientWidth || 800;
                const newHeight = container.clientHeight || 450;
                camera.aspect = newWidth / newHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(newWidth, newHeight);
            });

            threeInitialized = true;
        }, 100);
    }
</script>
@endpush

@section('content')
<section class="section-navy py-16 min-h-[85vh] flex flex-col justify-between relative">
    <div class="absolute inset-0 bg-cover bg-center opacity-10" style="background-image: url('{{ asset('pictures/living-room.jpg') }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-[#080D2B]/90 via-[#080D2B]/75 to-[#080D2B]"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full text-center">
        <!-- Header -->
        <div class="mb-10">
            <span class="text-xs uppercase tracking-[0.25em] text-amber-400 font-bold block mb-2">Immersive Experience</span>
            <h2 class="text-white">3D Virtual Hotspot Tour</h2>
            <p class="text-xs text-slate-400 max-w-md mx-auto pt-2">
                Explore every en-suite master bedroom, spacious living lounge, and gourmet kitchen in high-definition 360° virtual detail.
            </p>
        </div>

        <!-- 3D Tour Portal Container -->
        <div class="max-w-4xl mx-auto bg-slate-900 border border-slate-800 rounded shadow-2xl p-4 mb-10 overflow-hidden relative min-h-[450px]" x-data="{ currentRoom: 'lounge' }">
            
            <!-- Virtual Screen Frame (Simulated HD Tour View) -->
            <div class="relative aspect-video w-full rounded bg-slate-950 overflow-hidden">
                
                <!-- Lounge View -->
                <div x-show="currentRoom === 'lounge'" class="absolute inset-0 transition-opacity duration-500">
                    <img src="{{ asset('pictures/living-room.jpg') }}" alt="Virtual Lounge View" class="w-full h-full object-cover opacity-80">
                    <!-- Hotspots -->
                    <button @click="currentRoom = 'kitchen'" class="absolute top-[40%] left-[60%] w-6 h-6 rounded-full bg-amber-500/90 text-white flex items-center justify-center animate-ping focus:outline-none" aria-label="Go to Kitchen"></button>
                    <button @click="currentRoom = 'kitchen'" class="absolute top-[40%] left-[60%] w-6 h-6 rounded-full bg-amber-500 text-white flex items-center justify-center text-[10px] font-bold shadow-2xl focus:outline-none" aria-hidden="true">+</button>
                    <div class="absolute bottom-4 left-4 bg-slate-950/80 px-3 py-1 rounded text-[10px] font-bold uppercase tracking-wider text-amber-400">
                        Space: Executive Lounge Area
                    </div>
                </div>

                <!-- Kitchen View -->
                <div x-show="currentRoom === 'kitchen'" class="absolute inset-0 transition-opacity duration-500">
                    <img src="{{ asset('pictures/kitchen.jpg') }}" alt="Virtual Kitchen View" class="w-full h-full object-cover opacity-80">
                    <button @click="currentRoom = 'bedroom'" class="absolute top-[35%] left-[30%] w-6 h-6 rounded-full bg-amber-500/90 text-white flex items-center justify-center animate-ping focus:outline-none" aria-label="Go to Bedroom"></button>
                    <button @click="currentRoom = 'bedroom'" class="absolute top-[35%] left-[30%] w-6 h-6 rounded-full bg-amber-500 text-white flex items-center justify-center text-[10px] font-bold shadow-2xl focus:outline-none" aria-hidden="true">+</button>
                    <div class="absolute bottom-4 left-4 bg-slate-950/80 px-3 py-1 rounded text-[10px] font-bold uppercase tracking-wider text-amber-400">
                        Space: Gourmet Fit Kitchen
                    </div>
                </div>

                <!-- Bedroom View -->
                <div x-show="currentRoom === 'bedroom'" class="absolute inset-0 transition-opacity duration-500">
                    <img src="{{ asset('pictures/bedroom.jpg') }}" alt="Virtual Master Bedroom" class="w-full h-full object-cover opacity-80">
                    <button @click="currentRoom = 'lounge'" class="absolute top-[50%] left-[45%] w-6 h-6 rounded-full bg-amber-500/90 text-white flex items-center justify-center animate-ping focus:outline-none" aria-label="Go to Lounge"></button>
                    <button @click="currentRoom = 'lounge'" class="absolute top-[50%] left-[45%] w-6 h-6 rounded-full bg-amber-500 text-white flex items-center justify-center text-[10px] font-bold shadow-2xl focus:outline-none" aria-hidden="true">+</button>
                    <div class="absolute bottom-4 left-4 bg-slate-950/80 px-3 py-1 rounded text-[10px] font-bold uppercase tracking-wider text-amber-400">
                        Space: King En-Suite Bedroom
                    </div>
                </div>

                <!-- Three.js Interactive Render -->
                <div x-show="currentRoom === 'interactive'" id="threejs-container" class="absolute inset-0 transition-opacity duration-500 bg-slate-950">
                    <div id="three-canvas-holder" class="w-full h-full"></div>
                    <div class="absolute bottom-4 left-4 bg-slate-950/80 px-3 py-1 rounded text-[10px] font-bold uppercase tracking-wider text-amber-400 z-20">
                        Interactive 3D Lounge (Drag to Rotate)
                    </div>
                </div>

            </div>

            <!-- Virtual Controls Selector Bar -->
            <div class="mt-4 flex flex-wrap items-center justify-center gap-3">
                <button @click="currentRoom = 'lounge'" :class="{'bg-amber-500 text-white': currentRoom === 'lounge', 'bg-slate-800 text-slate-400': currentRoom !== 'lounge'}" class="px-4 py-1.5 rounded text-[10px] font-bold uppercase tracking-wider transition-colors duration-200">
                    Main Lounge
                </button>
                <button @click="currentRoom = 'kitchen'" :class="{'bg-amber-500 text-white': currentRoom === 'kitchen', 'bg-slate-800 text-slate-400': currentRoom !== 'kitchen'}" class="px-4 py-1.5 rounded text-[10px] font-bold uppercase tracking-wider transition-colors duration-200">
                    Gourmet Kitchen
                </button>
                <button @click="currentRoom = 'bedroom'" :class="{'bg-amber-500 text-white': currentRoom === 'bedroom', 'bg-slate-800 text-slate-400': currentRoom !== 'bedroom'}" class="px-4 py-1.5 rounded text-[10px] font-bold uppercase tracking-wider transition-colors duration-200">
                    Master Suite
                </button>
                <button @click="currentRoom = 'interactive'; initThreeJS()" :class="{'bg-amber-500 text-white': currentRoom === 'interactive', 'bg-slate-800 text-slate-400': currentRoom !== 'interactive'}" class="px-4 py-1.5 rounded text-[10px] font-bold uppercase tracking-wider transition-colors duration-200">
                    Interactive 3D Render
                </button>
            </div>

        </div>

        <!-- Guided mode instructions and call-to-actions -->
        <div class="max-w-md mx-auto text-center">
            <a href="{{ url('/booking') }}" class="btn-pill btn-primary px-8 py-3 uppercase tracking-widest text-xs font-bold shadow-2xl">
                Book This Apartment Stay
            </a>
        </div>

    </div>
</section>
@endsection