@extends('layout.main')
@section('main-section')
<!-- Content wrapper -->
<div class="content-wrapper">
    <style>
        body {
            margin: 0;
            overflow: auto;
            font-family: Arial, sans-serif;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #container {
            width: 100%;
            max-width: 1000px;
            height: 500px;
            margin: 20px auto;
            position: relative;
        }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            background: rgba(225, 10, 10, 0.7);
            padding: 10px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 100;
        }
        #table-container {
            width: 100%;
            max-width: 1000px;
            padding: 30px;
            box-sizing: border-box;
            background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
            margin: 0 auto 20px;
        }
        #table-container h2 {
            color: white;
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        #mesh-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: white;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            overflow: hidden;
        }
        #mesh-table th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 14px 16px;
            text-align: left;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 13px;
            letter-spacing: 0.5px;
        }
        #mesh-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #e0e0e0;
            color: #333;
            font-size: 14px;
        }
        #mesh-table td:first-child {
            font-weight: bold;
            color: #667eea;
            width: 60px;
            text-align: center;
        }
        #mesh-table tr:hover {
            background: linear-gradient(90deg, #f8f9ff 0%, #f0f2ff 100%);
            transform: scale(1.01);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
            transition: all 0.2s ease;
        }
        #mesh-table tr:last-child td {
            border-bottom: none;
        }
        #mesh-table tbody tr {
            transition: all 0.2s ease;
        }
        .no-data {
            text-align: center;
            color: #999;
            font-style: italic;
            padding: 20px !important;
        }

        /* Side selection modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal-box {
            background: #ffffff;
            padding: 28px 32px;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
            border: 1px solid #e5e7eb;
            min-width: 320px;
        }
        .modal-box h3 {
            margin: 0 0 20px 0;
            color: #111827;
            font-size: 18px;
            font-weight: 600;
        }
        .modal-box p {
            margin: 0 0 20px 0;
            color: #4b5563;
            font-size: 14px;
        }
        .modal-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        .modal-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .modal-btn-left {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .modal-btn-left:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
        }
        .modal-btn-right {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        .modal-btn-right:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(245, 87, 108, 0.5);
        }

        /* Subparts multi-select modal */
        .modal-box.modal-box-lg {
            width: min(760px, calc(100vw - 32px));
            max-height: calc(100vh - 64px);
            overflow: hidden;
        }
        .subparts-toolbar {
            display: flex;
            gap: 12px;
            align-items: center;
            margin: 10px 0 14px 0;
        }
        .subparts-search {
            flex: 1;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid #d1d5db;
            outline: none;
            background: #f9fafb;
            color: #111827;
        }
        .subparts-search::placeholder {
            color: #9ca3af;
        }
        .subparts-actions {
            display: flex;
            gap: 10px;
        }
        .subparts-mini-btn {
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid #d1d5db;
            background: #f9fafb;
            color: #111827;
            cursor: pointer;
            font-weight: 600;
        }
        .subparts-mini-btn:hover {
            background: #e5e7eb;
        }
        .subparts-list {
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            background: #ffffff;
            max-height: 360px;
            overflow: auto;
            padding: 6px 8px;
            margin-bottom: 16px;
        }
        .subparts-item {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 10px 10px;
            border-radius: 10px;
        }
        .subparts-item:hover {
            background: #f9fafb;
        }
        .subparts-item input[type="checkbox"] {
            display: none;
        }
        .subparts-item label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 14px;
            border-radius: 9999px;
            border: 1px solid #d1d5db;
            background: #f9fafb;
            color: #111827;
            cursor: pointer;
            margin: 0;
            font-size: 14px;
        }
        .subparts-item input[type="checkbox"]:checked + label {
            background: #2563eb;
            color: #ffffff;
            border-color: #1d4ed8;
        }
        .modal-btn-cancel {
            background: #f9fafb;
            color: #111827;
            border: 1px solid #d1d5db;
        }
        .modal-btn-cancel:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }
        .modal-btn-confirm {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #ffffff;
        }
        .modal-btn-confirm:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
        }
    </style>
    <!-- Side selection modal (Front Door / Front Bumper) -->
    <div id="side-modal" class="modal-overlay">
        <div class="modal-box">
            <h3 id="side-modal-title">Select side</h3>
            <p id="side-modal-desc">Choose Left or Right for this part.</p>
            <div class="modal-buttons">
                <button type="button" class="modal-btn modal-btn-left" id="side-modal-left">L/s (Left)</button>
                <button type="button" class="modal-btn modal-btn-right" id="side-modal-right">R/s (Right)</button>
            </div>
        </div>
    </div>

    <!-- Subparts multi-select modal (Bonnet / Doors / etc) -->
    <div id="subparts-modal" class="modal-overlay">
        <div class="modal-box modal-box-lg">
            <h3 id="subparts-modal-title">Select subparts</h3>
            <p id="subparts-modal-desc">Select one or more subparts to add into Labour rows.</p>

            <div class="subparts-toolbar">
                <input type="text" id="subparts-search" class="subparts-search" placeholder="Search subparts..." />
                <div class="subparts-actions">
                    <button type="button" class="subparts-mini-btn" id="subparts-select-all">Select all</button>
                    <button type="button" class="subparts-mini-btn" id="subparts-clear">Clear</button>
                </div>
            </div>

            <div id="subparts-list" class="subparts-list"></div>

            <div class="modal-buttons">
                <button type="button" class="modal-btn modal-btn-cancel" id="subparts-cancel">Cancel</button>
                <button type="button" class="modal-btn modal-btn-confirm" id="subparts-add">Add Selected</button>
            </div>
        </div>
    </div>

    <div id="table-container" style="display: none;">
        <h2>Clicked Mesh Parts</h2>
        <table id="mesh-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Part Name</th>
                </tr>
            </thead>
            <tbody id="mesh-tbody">
                <tr>
                    <td colspan="3" class="no-data">Click on a car part to see its name here</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Three.js from CDN -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
            }
        }
    </script>

    <script type="module">
        import * as THREE from 'three';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // Scene setup
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);

        // Camera setup
        const container = document.getElementById('container');
        const camera = new THREE.PerspectiveCamera(
            10, 
            container.clientWidth / container.clientHeight, 
            0.1, 
            1000
        );
        camera.position.set(0, 2, 5);

        // Renderer setup
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;
        renderer.setSize(containerWidth, containerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        renderer.outputColorSpace = THREE.SRGBColorSpace;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1.2;
        container.appendChild(renderer.domElement);

        // Orbit controls
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
        scene.add(ambientLight);

        const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
        directionalLight1.position.set(5, 10, 5);
        directionalLight1.castShadow = true;
        scene.add(directionalLight1);

        const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight2.position.set(-5, 5, -5);
        scene.add(directionalLight2);

        const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x888888, 0.6);
        scene.add(hemisphereLight);

        // Raycaster for click detection
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
        let loadedModel = null;
        let clickedMeshes = [];
        let clickCounter = 0;
        let mouseDownPos = { x: 0, y: 0 };
        let mouseUpPos = { x: 0, y: 0 };
        let isDragging = false;
        let pendingSidePart = null; // { name, meshType } when modal is needed

        // Parts that require Left/Right selection (show modal)
        const SIDE_SELECT_PARTS = ['Front Door', 'Head Light', 'Rear Light', 'Rear View Mirror', 'Rear Door','Fender'];

        // Subparts catalog per (base) part name (expand as needed)
        const SUBPARTS_BY_PART = {
            'Bonnet / Hood': ['Bonnet Panel', 'Hinge', 'Lock / Latch', 'Release Cable', 'Insulation / Liner', 'Rubber / Bump Stop'],
            'Front Door': ['Door Shell', 'Outer Panel', 'Inner Panel', 'Handle', 'Window Glass', 'Window Regulator', 'Weather Strip', 'Speaker / Trim'],
            'Rear Door': ['Door Shell', 'Outer Panel', 'Inner Panel', 'Handle', 'Window Glass', 'Window Regulator', 'Weather Strip', 'Speaker / Trim'],
            'Fender': ['Fender Panel', 'Fender Liner', 'Moulding / Garnish', 'Indicator Repeater', 'Bracket / Clips'],
            'Front Bumper': ['Bumper Cover', 'Upper Grille', 'Lower Grille', 'Fog Lamp Cover', 'Tow Hook Cover', 'Bracket / Clips'],
            'Rear Bumper': ['Bumper Cover', 'Reflector', 'Diffuser', 'Tow Hook Cover', 'Bracket / Clips'],
            'Head Light': ['Lens', 'Bulb / LED', 'Bracket', 'Housing'],
            'Rear Light': ['Lens', 'Bulb / LED', 'Bracket', 'Housing'],
            'Rear View Mirror': ['Mirror Glass', 'Cover', 'Indicator', 'Bracket'],
            'Trunk': ['Boot Lid', 'Hinge', 'Lock', 'Emblem / Monogram', 'Garnish'],
        };

        // Subparts modal state
        let pendingSubpartsPartName = null; // full name (may include L/s / R/s prefix)
        let pendingSubpartsList = []; // list of strings
        let selectedSubparts = new Set(); // values (including __whole__)

        // Function to add mesh to table
        function ensureMeshInTable(meshName, meshType) {
            // Keep the "clicked parts" table unique, but don't block adding more labour rows later.
            if (clickedMeshes.some(m => m.name === meshName)) return;

            clickCounter++;
            clickedMeshes.push({ name: meshName, type: meshType });

            const tbody = document.getElementById('mesh-tbody');
            if (!tbody) return;

            // Remove "no data" row if it exists
            if (tbody.querySelector('.no-data')) {
                tbody.innerHTML = '';
            }

            const row = tbody.insertRow();
            row.innerHTML = `
                <td>${clickCounter}</td>
                <td>${meshName}</td>
            `;
        }

        function addLabourRowWithName(labourName) {
            try {
                if (typeof window.add_labour === 'function') {
                    window.add_labour();
                }
                const labourTable = document.getElementById('table_captions2');
                if (!labourTable || labourTable.rows.length === 0) return;
                const lastLabourRow = labourTable.rows[labourTable.rows.length - 1];
                const labourInput = lastLabourRow.querySelector('input[name="LaborName[]"]');
                if (labourInput) {
                    labourInput.value = labourName;
                }
            } catch (e) {
                console.error('Error adding labour row from mesh:', e);
            }
        }

        function getBasePartName(partName) {
            return String(partName || '').replace(/^(L\/s|R\/s)\s+/i, '').trim();
        }

        function renderSubpartsList(filterText) {
            const listEl = document.getElementById('subparts-list');
            if (!listEl) return;

            const q = (filterText || '').trim().toLowerCase();
            const items = [
                { label: 'Whole Part', value: '__whole__' },
                ...pendingSubpartsList.map(s => ({ label: s, value: s })),
            ].filter(i => !q || i.label.toLowerCase().includes(q));

            listEl.innerHTML = items.map((i, idx) => {
                const id = `subpart_cb_${idx}`;
                const checkedAttr = selectedSubparts.has(String(i.value)) ? 'checked' : '';
                return `
                    <div class="subparts-item">
                        <input type="checkbox" id="${id}" value="${String(i.value).replace(/"/g, '&quot;')}" ${checkedAttr} />
                        <label for="${id}">${i.label}</label>
                    </div>
                `;
            }).join('');
        }

        function openSubpartsModal(fullPartName, subparts) {
            pendingSubpartsPartName = fullPartName;
            pendingSubpartsList = Array.isArray(subparts) ? subparts : [];
            selectedSubparts = new Set();

            const titleEl = document.getElementById('subparts-modal-title');
            const descEl = document.getElementById('subparts-modal-desc');
            const searchEl = document.getElementById('subparts-search');

            if (titleEl) titleEl.textContent = 'Select subparts for ' + fullPartName;
            if (descEl) descEl.textContent = 'Select one or more subparts. Each selection will create a Labour row.';
            if (searchEl) searchEl.value = '';

            renderSubpartsList('');
            const modal = document.getElementById('subparts-modal');
            if (modal) modal.classList.add('active');
        }

        function closeSubpartsModal() {
            pendingSubpartsPartName = null;
            pendingSubpartsList = [];
            selectedSubparts = new Set();
            const modal = document.getElementById('subparts-modal');
            if (modal) modal.classList.remove('active');
        }

        function addSelectedSubpartsToLabourRows() {
            if (!pendingSubpartsPartName) return;

            const checked = Array.from(selectedSubparts);
            const selections = checked.length ? checked : ['__whole__']; // default

            selections.forEach(val => {
                if (val === '__whole__') {
                    addLabourRowWithName(pendingSubpartsPartName);
                } else {
                    addLabourRowWithName(pendingSubpartsPartName + ' - ' + val);
                }
            });
        }

        function handleClickedPart(partName, meshType) {
            ensureMeshInTable(partName, meshType);

            const base = getBasePartName(partName);
            const subparts = SUBPARTS_BY_PART[base];
            if (Array.isArray(subparts) && subparts.length) {
                openSubpartsModal(partName, subparts);
                return;
            }

            // No subparts configured → just add the part as one labour row.
            addLabourRowWithName(partName);
        }
        // Mouse down handler
        function onMouseDown(event) {
            mouseDownPos.x = event.clientX;
            mouseDownPos.y = event.clientY;
            isDragging = false;
        }

        // Mouse move handler
        function onMouseMove(event) {
            if (mouseDownPos.x !== 0 || mouseDownPos.y !== 0) {
                const deltaX = Math.abs(event.clientX - mouseDownPos.x);
                const deltaY = Math.abs(event.clientY - mouseDownPos.y);
                if (deltaX > 5 || deltaY > 5) {
                    isDragging = true;
                }
            }
        }

        // Mouse up handler (actual click detection)
        function onMouseUp(event) {
            if (!loadedModel || isDragging) {
                isDragging = false;
                return;
            }

            mouseUpPos.x = event.clientX;
            mouseUpPos.y = event.clientY;

            // Check if mouse moved significantly between down and up
            const deltaX = Math.abs(mouseUpPos.x - mouseDownPos.x);
            const deltaY = Math.abs(mouseUpPos.y - mouseDownPos.y);
            
            // If moved less than 5 pixels, treat as click
            if (deltaX < 5 && deltaY < 5) {
                // Calculate mouse position in normalized device coordinates
                const rect = renderer.domElement.getBoundingClientRect();
                mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
                mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

                // Update the raycaster
                raycaster.setFromCamera(mouse, camera);

                // Calculate objects intersecting the ray
                const intersects = raycaster.intersectObject(loadedModel, true);

                if (intersects.length > 0) {
                    const clickedObject = intersects[0].object;
                    let name = (clickedObject.name || 'unnamed').toLowerCase();
                    const originalName = clickedObject.name || 'Unnamed';
                    const meshType = clickedObject.type || 'Mesh';
                    
                    // Name mapping
                    if (name.includes('fdoor') || name.includes('handle001')) name = 'Front Door';
                    else if (name.includes('rdoor') || name.includes('handle002')) name = 'Rear Door';
                    else if (name.includes('rlight')) name = 'Rear Light';
                    else if (name.includes('flight')) name = 'Head Light';
                    else if (name.includes('roof')) name = 'Roof';
                    else if (name.includes('hood')) name = 'Bonnet / Hood';
                    else if (name.includes('frontpiece')) name = 'Front Upper Grille';
                    else if (name.includes('backlogo')) name = 'Emblem / Logo';
                    else if (name.includes('fbumper') || name.includes('grille_plastic_dark_0')) name = 'Front Bumper';
                    else if (name.includes('rbumper') || name.includes('rsidl_aluminium_red_anodized0_0')) name = 'Rear Bumper';
                    else if (name.includes('frontplastic_plastic_medium_dark_0') || name.includes('blkflow_material_#86_0')) name = 'Fog Light';
                    else if (name.includes('exhausts_aluminium_clean_0')) name = 'Exhaust Tip';
                    else if (name.includes('diffuser_aluminium_black_anodized_0')) name = 'Rear Diffuser';
                    else if (name.includes('newtire_rubber_0') || name.includes('newtire001_rubber_0')) name = 'Front Tyre';
                    else if (name.includes('newtire002_rubber_0') || name.includes('newtire003_rubber_0')) name = 'Rear Tyre';
                    else if (name.includes('rim_carpaint_simple_onyx_0') || name.includes('rim003_carpaint_simple_onyx_0') ||
                             name.includes('spokes_carpaint_simple_onyx_0') || name.includes('spokes003_carpaint_simple_onyx_0')) name = 'Front Rim';
                    else if (name.includes('rim001_carpaint_simple_onyx_0') || name.includes('rim002_carpaint_simple_onyx_0') ||
                             name.includes('spokes002_carpaint_simple_onyx_0') || name.includes('spokes001_carpaint_simple_onyx_0')) name = 'Rear Rim';
                    else if (name.includes('fwind')) name = 'Front Windscreen';
                    else if (name.includes('rglass')) name = 'Rear Windscreen';
                    else if (name.includes('trunk') || name.includes('licence_plate_material_#133_0')) name = 'Trunk';
                    else if (name.includes('mirrora') || name.includes('mirror_glass_mirror_0')) name = 'Rear View Mirror';
                    else if (name.includes('skirtaccesory_material_')) name = 'Side Skirt';
                    else if (name.includes('body_carpaint_flakes_blue_0')) name = 'Fender';
                    else name = originalName; // Keep original name if no mapping found
                    
                    console.log('Clicked mesh:', originalName, '-> Mapped to:', name, 'Type:', meshType);

                    if (SIDE_SELECT_PARTS.includes(name)) {
                        pendingSidePart = { name, meshType };
                        const modal = document.getElementById('side-modal');
                        document.getElementById('side-modal-title').textContent = 'Select side for ' + name;
                        document.getElementById('side-modal-desc').textContent = 'Choose Left (L/s) or Right (R/s) for this part.';
                        modal.classList.add('active');
                    } else {
                        handleClickedPart(name, meshType);
                    }


                    // Visual feedback - briefly change color
                    const originalColor = clickedObject.material.color?.clone();
                    if (clickedObject.material.color) {
                        clickedObject.material.color.set(0x00ff00);
                        setTimeout(() => {
                            if (originalColor) clickedObject.material.color.copy(originalColor);
                        }, 300);
                    }
                }
            }
        }

        // Side modal: Left / Right selection
        function applySideSelection(side) {
            if (!pendingSidePart) return;
            const prefix = side === 'left' ? 'L/s' : 'R/s';
            const finalName = prefix + ' ' + pendingSidePart.name;
            handleClickedPart(finalName, pendingSidePart.meshType);
            pendingSidePart = null;
            document.getElementById('side-modal').classList.remove('active');
        }
        document.getElementById('side-modal-left').addEventListener('click', () => applySideSelection('left'));
        document.getElementById('side-modal-right').addEventListener('click', () => applySideSelection('right'));
        document.getElementById('side-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                pendingSidePart = null;
                this.classList.remove('active');
            }
        });

        // Subparts modal events
        document.getElementById('subparts-cancel').addEventListener('click', function() {
            closeSubpartsModal();
        });
        document.getElementById('subparts-add').addEventListener('click', function() {
            addSelectedSubpartsToLabourRows();
            closeSubpartsModal();
        });
        document.getElementById('subparts-modal').addEventListener('click', function(e) {
            if (e.target === this) closeSubpartsModal();
        });
        document.getElementById('subparts-search').addEventListener('input', function(e) {
            renderSubpartsList(e.target.value);
        });
        document.getElementById('subparts-list').addEventListener('change', function(e) {
            const t = e.target;
            if (!(t && t.matches && t.matches('input[type="checkbox"]'))) return;
            if (t.checked) selectedSubparts.add(t.value);
            else selectedSubparts.delete(t.value);
        });
        document.getElementById('subparts-select-all').addEventListener('click', function() {
            const listEl = document.getElementById('subparts-list');
            if (!listEl) return;
            listEl.querySelectorAll('input[type="checkbox"]').forEach(cb => {
                cb.checked = true;
                selectedSubparts.add(cb.value);
            });
        });
        document.getElementById('subparts-clear').addEventListener('click', function() {
            const listEl = document.getElementById('subparts-list');
            if (!listEl) return;
            listEl.querySelectorAll('input[type="checkbox"]').forEach(cb => { cb.checked = false; });
            selectedSubparts = new Set();
        });

        // Add event listeners
        renderer.domElement.addEventListener('mousedown', onMouseDown, false);
        renderer.domElement.addEventListener('mousemove', onMouseMove, false);
        renderer.domElement.addEventListener('mouseup', onMouseUp, false);

        // Helper function to count meshes
        function countMeshes(object) {
            let count = 0;
            object.traverse((child) => {
                if (child.isMesh) count++;
            });
            return count;
        }

        // Load GLB model
        const loader = new GLTFLoader();
        
        // Replace 'path/to/your/model.glb' with the actual path to your GLB file
        // const modelPath =  "{{ asset('assets/sedan.glb') }}";
        const modelPath =  "{{ asset('assets/sedan.glb') }}";
        loader.load(
            modelPath,
            function (gltf) {
                const model = gltf.scene;
                loadedModel = model;
                
                // Center the model
                const box = new THREE.Box3().setFromObject(model);
                const center = box.getCenter(new THREE.Vector3());
                model.position.sub(center);
                
                // Scale the model to fit the view
                const size = box.getSize(new THREE.Vector3());
                const maxDim = Math.max(size.x, size.y, size.z);
                const scale = 2 / maxDim;
                model.scale.multiplyScalar(scale);
                
                // Apply custom materials based on part type
                model.traverse((child) => {
                    if (child.isMesh) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                        
                        const mesh = child;
                        const name = mesh.name.toLowerCase();

                        const isGlass = name.includes('window') || name.includes('glass') || name.includes('fwind') || name.includes('rglass');
                        const isDarkPlastic = name.includes('wheel') || name.includes('tire') ||
                            name.includes('frontplastic_plastic_medium_dark_0') || name.includes('grille_plastic_dark_0') ||
                            name.includes('sideplastic_pvc_black_matte0_0') || name.includes('handle') ||
                            name.includes('diffuser_aluminium_black_anodized_0') || name.includes('skirtaccesory_material_') ||
                            name.includes('mirrora') || name.includes('newtire');
                        const isMetalParts = name.includes('rim') || name.includes('spokes') || name.includes('exhausts_aluminium_clean_0');

                        if (!isGlass && !isDarkPlastic && !isMetalParts) {
                            mesh.material = new THREE.MeshStandardMaterial({
                                color: '#ff0000',
                                metalness: 0.8,
                                roughness: 0.5,
                            });
                        } else if (isGlass) {
                            mesh.material = new THREE.MeshStandardMaterial({
                                color: '#000000',
                                transparent: true,
                                opacity: 0.3,
                                metalness: 0.1,
                                roughness: 0.1,
                            });
                        } else if (isDarkPlastic) {
                            mesh.material = new THREE.MeshStandardMaterial({
                                color: '#4e4c4c',
                                metalness: 0.2,
                                roughness: 0.4,
                            });
                        } else if (isMetalParts) {
                            mesh.material = new THREE.MeshStandardMaterial({
                                color: '#808080',
                                metalness: 0.2,
                                roughness: 0.4,
                                opacity: 0.6,
                            });
                        }
                    }
                });
                
                scene.add(model);
                
                console.log('Model loaded successfully');
                console.log('Model contains', countMeshes(model), 'meshes');
            },
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
                console.error('Error loading model:', error);
                alert('Failed to load 3D model. Make sure the file path is correct.');
            }
        );

        // Handle window resize
        window.addEventListener('resize', function() {
            const container = document.getElementById('container');
            const width = container.clientWidth;
            const height = container.clientHeight;
            
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);
        });

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
          </div>
         <div class="col-md-12">
            <div class="card">
               <div class="card-body">
                  <div class="row">
                     <!-- end col -->
              <div id="container"></div>
                  </div>
                  <!-- end row -->
                  <p></p>
                  <form action="{{url('/addLabourPartsPost')}}" method="post">
                     @csrf
                     <div class="row">
                        <div class="col-lg-12">
                           <table class="table table-sm table-striped">
                              <tr style="text-align: center; border: solid;">
                                 <th><u>REPAIRERS' ESTIMATE</u></th>
                                 <th><u>OUR ASSESSMENT</u></th>
                              </tr>
                              @foreach ($attend as $att)
                              <tr style="border:solid;">
                                 <td style="text-align: center;">{{ number_format($att->_RepairerEstimate) }}</td>
                                 <td style="text-align: center;">{{ number_format($att->_AssessedLabour) }}</td>
                              </tr>
                              @endforeach
                           </table>
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-lg-6" hidden>
                           <div class="mb-6">
                              <label for="" class="form-label">Job Id</label>
                              <input type="text" id="_JobId" class="form-control" name="_JobId" placeholder="" value="{{$assignData->_Id}}" readonly>
                              <input type="text" id="_user_email" class="form-control" name="_user_email" placeholder="" value="{{session()->get('user_email')}}" readonly>
                           </div>
                           <p></p>
                        </div>
                        <!-- end col -->
                        <div class="clearfix">
                           <hr />
                        </div>
                        <h5>Add Labour</h5>
                        <div class="col-lg-12" >
                           <div class="mb-12">
                              <button class="btn btn-danger" onclick="add_labour()" type="button">Add More</button>
                           </div>
                           <p></p>
                        </div>
                        <!-- end col -->
                        <div class="col-lg-12" hidden>
                           <input type="text" name="txtinc2" id="txtinc2" value="1" />
                           <p></p>
                        </div>
                        <div class="col-lg-12" >
                           <table class="table" id="table_captions2">
                              <tr hidden>
                                 <td>
                                    <label for="" class="form-label">Labour Name</label>
                                    <input type="text" id="" class="form-control" name="LaborName[]" placeholder="Labor Name">
                                 </td>
                                 <td>
                                    <label for="" class="form-label">Repairers Estimate</label>
                                    <input type="text" id="" class="form-control" name="repairestimate[]" placeholder="Repairers Estimate">
                                 </td>
                                 <td>
                                    <label for="" class="form-label">Our Assessment</label>
                                    <input type="text" id="" class="form-control" name="ourassessment[]" placeholder="Our Assessment">
                                 </td>
                                 <td>
                                    <label for="" class="form-label">Type</label>
                                    <select class="form-control typelabour-select" name="typelabour[]" style="display:none;">
                                       <option value=""></option>
                                       <option value="Denting">Denting</option>
                                       <option value="Repairing">Repairing</option>
                                       <option value="Replacement">Replacement</option>
                                    </select>
                                    <div class="d-flex flex-wrap gap-2 mt-1">
                                       <div class="form-check form-check-inline">
                                          <input class="form-check-input typelabour-radio" type="radio" name="typelabour_radio_template" value="Denting">
                                          <label class="form-check-label">Denting</label>
                                       </div>
                                       <div class="form-check form-check-inline">
                                          <input class="form-check-input typelabour-radio" type="radio" name="typelabour_radio_template" value="Repairing">
                                          <label class="form-check-label">Repairing</label>
                                       </div>
                                       <div class="form-check form-check-inline">
                                          <input class="form-check-input typelabour-radio" type="radio" name="typelabour_radio_template" value="Replacement">
                                          <label class="form-check-label">Replacement</label>
                                       </div>
                                    </div>
                                 </td>
                              </tr>
                           </table>
                        </div>
                        <br />
                        <div id="cardCollpase5" class="collapse show">
                           <div class="table-responsive pt-3">
                              <table class="table table-striped dt-responsive nowrap w-100 table-sm">
                                 <tbody>
                                    @foreach ($addlabour as $al)
                                    <tr>
                                       <td>{{$al->_LabourName}}</td>
                                       <td>{{$al->_Type}}</td>
                                       <td>{{$al->_RepairersEstimate}}</td>
                                       <td>{{$al->_OurAssessment}}</td>
                                       <td>
                                          <a href="{{ url('/addLabourEdit') }}/{{ $assignData->_Id }}/{{ $al->_Id }}" class="btn btn-primary">Edit</a>
                                       </td>
                                       <td>
                                          <a href="{{ url('/deleteLabour') }}/{{ $al->_Id }}" class="btn btn-warning">Delete</a>
                                       </td>
                                    </tr>
                                    @endforeach
                                 </tbody>
                              </table>
                           </div>
                           <!-- end table responsive-->
                        </div>
                        <!-- collapsed end -->
                        <div class="clearfix">
                           <hr />
                        </div>
                        <h5>Add Parts</h5>
                        <div class="col-lg-12" >
                           <div class="mb-12">
                              <button class="btn btn-danger" onclick="add_more()" type="button">Add More</button>
                           </div>
                           <p></p>
                        </div>
                        <!-- end col -->
                        <div class="col-lg-12" hidden>
                           <input type="text" name="txtinc1" id="txtinc1" value="1" />
                           <p></p>
                        </div>
                        <div class="col-lg-12" >
                           <table class="table" id="table_captions">
                              <tr hidden>
                                 <td>
                                    <label for="" class="form-label">Part Name</label>
                                    <input type="text" id="" class="form-control" name="PartName[]" placeholder="Part Name">
                                 </td>
                                 <td>
                                    <label for="" class="form-label">Price in Rs.</label>
                                    <input type="text" id="" class="form-control" name="PriceRs[]" placeholder="Price in Rs.">
                                 </td>
                                 <td>
                                    <label for="" class="form-label">Quantity</label>
                                    <input type="text" id="" class="form-control" name="Quantity[]" placeholder="Quantity">
                                 </td>
                                 <td>
                                    <label for="" class="form-label">Depreciation</label>
                                    <input type="text" id="" class="form-control" name="Depreciation[]" placeholder="Depreciation" >
                                 </td>
                                 <td>
                                    <label for="" class="form-label">Type</label>
                                    <select class="form-control" name="typeparts[]">
                                       <option value=""></option>
                                       <option value="(SD)">(SD)</option>
                                    </select>
                                 </td>
                              </tr>
                           </table>
                        </div>
                        <br />
                        <div id="cardCollpase5" class="collapse show">
                           <div class="table-responsive pt-3">
                              <table class="table table-striped dt-responsive nowrap w-100 table-sm">
                                 <tbody>
                                    @foreach ($addparts as $ap)
                                    <tr>
                                       <td>{{$ap->_PartName}}</td>
                                       <td>{{$ap->_Type}}</td>
                                       <td>{{$ap->_PriceInRs}}</td>
                                       <td>{{$ap->_Quantity}}</td>
                                       <td>
                                          <a href="{{ url('/addPartEdit') }}/{{ $assignData->_Id }}/{{ $ap->_Id }}" class="btn btn-primary">Edit</a>
                                       </td>
                                       <td>
                                          <a href="{{ url('/deletePart') }}/{{ $ap->_Id }}" class="btn btn-warning">Delete</a>
                                       </td>
                                    </tr>
                                    @endforeach
                                 </tbody>
                              </table>
                           </div>
                           <!-- end table responsive-->
                        </div>
                        <!-- collapsed end -->
                        <div class="col-md-12">
                           <button type="submit" class="btn btn-success"  style="text-align: right;">Submit</button>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<script>
   var inc = 2;
                 function add_more()
                 {
                   $('#table_captions').append(
                   '<tr>'+
   '<td><label for="" class="form-label">Part Name</label>'+
   '<input type="text" id="" class="form-control" name="PartName[]" placeholder="Part Name"></td>'+
   
   
   
   '<td>'+
   
   '<label for="" class="form-label">Price in Rs.</label>'+
   '<input type="text" id="" class="form-control" name="PriceRs[]" placeholder="Price in Rs.">'+
   
   '</td>'+
   
   '<td>'+
   
   '<label for="" class="form-label">Quantity</label>'+
   '<input type="text" id="" value="1" class="form-control" name="Quantity[]" placeholder="Quantity">'+
   
   '</td>'+
   
   '<td>'+
   
   '<label for="" class="form-label">Depreciation</label>'+
   '<input type="text" id="" class="form-control" name="Depreciation[]" placeholder="Depreciation">'+
   
   '</td>'+
   
   '<td>'+
   
   '<label for="" class="form-label">Type</label>'+
   '<select class="form-control" name="typeparts[]">'+
       '<option value=""></option>'+
       '<option value="(SD)">(SD)</option>'+
   '</select>'+
   
   '</td>'+
   '<td>'+
   
                       '<button type="button" onclick="add_more_delete()" class="btn btn-danger">Delete</button>'+
                       '</td>'+
   '</tr>'
                   );
                   document.getElementById("txtinc1").value = inc++;
                 }
   
                 function add_more_delete() {
                   document.getElementById("txtinc1").value = --inc;
                   // event.target will be the input element.
                   var td = event.target.parentNode;
                   var tr = td.parentNode; // the row to be removed
                   tr.parentNode.removeChild(tr);
                 }
   
   
   
   
                  var inc2 = 2;
                 function add_labour()
                 {
                   $('#table_captions2').append(
                   '<tr>'+
                       '<td>'+
   
                       '<label for="" class="form-label">Labour Name</label>'+
                       '<input type="text" id="" class="form-control" name="LaborName[]" placeholder="Labour Name">'+
   
                       '</td>'+
                       
                       '<td>'+
'<label class="form-label">Type</label>'+
'<select class="form-control typelabour-select" name="typelabour[]" style="display:none;">'+
'<option value=""></option>'+
'<option value="Denting">Denting</option>'+
'<option value="Repairing">Repairing</option>'+
'<option value="Replacement">Replacement</option>'+
'</select>'+

'<div class="d-flex flex-wrap gap-2 mt-1">'+

// Denting
'<input type="radio" class="btn-check typelabour-radio" name="typelabour_radio_'+inc2+'" id="dent_'+inc2+'" value="Denting" autocomplete="off">'+
'<label class="btn btn-outline-primary" for="dent_'+inc2+'">Denting</label>'+

// Repairing
'<input type="radio" class="btn-check typelabour-radio" name="typelabour_radio_'+inc2+'" id="repair_'+inc2+'" value="Repairing" autocomplete="off">'+
'<label class="btn btn-outline-primary" for="repair_'+inc2+'">Repairing</label>'+

// Replacement
'<input type="radio" class="btn-check typelabour-radio" name="typelabour_radio_'+inc2+'" id="replace_'+inc2+'" value="Replacement" autocomplete="off">'+
'<label class="btn btn-outline-primary" for="replace_'+inc2+'">Replacement</label>'+

'</div>'+
'</td>'+
   
                       '<td>'+
   
   '<label for="" class="form-label">Repairers Estimate</label>'+
   '<input type="text" id="" class="form-control" name="repairestimate[]" value="0" placeholder="Repairers Estimate">'+
   
   '</td>'+
   
   '<td>'+
   
   '<label for="" class="form-label">Our Assessment</label>'+
   '<input type="text" id="" class="form-control" name="ourassessment[]" value="0" placeholder="Our Assessment">'+
   
   '</td>'+
   

   
                   '<td>'+
   
                       '<button type="button" onclick="add_more_delete2()" class="btn btn-danger">Delete</button>'+
                       '</td>'+
               '</tr>'
                   );
                   document.getElementById("txtinc2").value = inc2++;
                 }
   
                 function add_more_delete2() {
                  document.getElementById("txtinc2").value = --inc2;
                   // event.target will be the input element.
                   var td = event.target.parentNode;
                   var tr = td.parentNode; // the row to be removed
                   tr.parentNode.removeChild(tr);
                 }

                 // Handle Labour type as radio buttons and auto-create Parts row for Replacement
                 document.addEventListener('change', function(event) {
                   if (event.target.classList && event.target.classList.contains('typelabour-radio')) {
                     var radio = event.target;
                     var td = radio.closest('td');
                     var select = td ? td.querySelector('select[name="typelabour[]"]') : null;

                     // Sync hidden select value so the backend continues to receive typelabour[]
                     if (select) {
                       select.value = radio.value;
                     }

                     // If this labour is marked as Replacement, create a corresponding Parts row
                     if (radio.value === 'Replacement') {
                       var row = radio.closest('tr');
                       var labourInput = row ? row.querySelector('input[name="LaborName[]"]') : null;
                       var labourName = labourInput ? labourInput.value : '';

                       try {
                         if (typeof add_more === 'function') {
                           add_more();
                           var partTable = document.getElementById('table_captions');
                           if (partTable && partTable.rows.length > 0) {
                             var lastPartRow = partTable.rows[partTable.rows.length - 1];
                             var partInput = lastPartRow.querySelector('input[name="PartName[]"]');
                             if (partInput && !partInput.value && labourName) {
                               partInput.value = labourName;
                             }
                           }
                         }
                       } catch (e) {
                         console.error('Error creating part row for replacement labour:', e);
                       }
                     }
                   }
                 });

</script>
@endsection('main-section')