@extends('layouts.app')
@section('title', 'C&CC — 3D View')
@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="fw-bold mb-0"><i class="fas fa-cube me-2"></i>3D Situational View</h3>
        <a href="{{ route('prison.command-centre.index') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left"></i> Back</a>
    </div>
    <p class="text-muted">Live block occupancy and device positions. Drop a glTF/GLB facility model at <code>{{ $modelPath ?? 'config: command_centre.three_d.model_path' }}</code> to render the full prison; the scene below builds from live data now.</p>
    <div id="cc3d" style="height:520px;border:1px solid #ddd;border-radius:.5rem;background:#0b1021"></div>

    @php
        $cc3dDevices = $devices->map(function ($d) {
            return [
                'name' => $d->name,
                'type' => $d->type,
                'location' => $d->location,
                'status' => $d->status,
            ];
        })->values();
    @endphp
    {{-- Live data handed to the 3D scene --}}
    <script>
        window.CC3D = {
            occupancy: {!! $occupancy->toJson() !!},
            devices: {!! $cc3dDevices->toJson() !!},
            modelPath: {!! json_encode($modelPath) !!}
        };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
    (function(){
        const el = document.getElementById('cc3d');
        const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0b1021);
        const camera = new THREE.PerspectiveCamera(60, el.clientWidth/el.clientHeight, 0.1, 1000);
        camera.position.set(0, 12, 22);
        const renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(el.clientWidth, el.clientHeight); el.appendChild(renderer.domElement);
        scene.add(new THREE.AmbientLight(0xffffff,0.7));
        const dir = new THREE.DirectionalLight(0xffffff,0.6); dir.position.set(10,20,10); scene.add(dir);
        scene.add(new THREE.GridHelper(40,40,0x33406b,0x1b2444));
        // Render each block as a bar; height = occupancy.
        const blocks = (window.CC3D.occupancy||[]);
        const max = Math.max(1, ...blocks.map(b=>b.count||0));
        blocks.forEach((b,i)=>{
            const h = 1 + 8*((b.count||0)/max);
            const geo = new THREE.BoxGeometry(2, h, 2);
            const mat = new THREE.MeshLambertMaterial({color: new THREE.Color().setHSL(0.6 - 0.6*((b.count||0)/max),0.7,0.5)});
            const m = new THREE.Mesh(geo, mat);
            m.position.set((i%8)*3 - 10, h/2, Math.floor(i/8)*3 - 4);
            scene.add(m);
        });
        function animate(){ requestAnimationFrame(animate); scene.rotation.y += 0.0015; renderer.render(scene,camera); }
        animate();
        window.addEventListener('resize', ()=>{ camera.aspect=el.clientWidth/el.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(el.clientWidth, el.clientHeight); });
    })();
    </script>
</div>
@endsection