@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: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
            padding: 28px 32px;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(102, 126, 234, 0.3);
            min-width: 320px;
        }
        .modal-box h3 {
            margin: 0 0 20px 0;
            color: white;
            font-size: 18px;
            font-weight: 600;
        }
        .modal-box p {
            margin: 0 0 20px 0;
            color: #b0b0b0;
            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);
        }
    </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>

    <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'];

        // Function to add mesh to table
        function addMeshToTable(meshName, meshType) {
            // Check if already in list
            if (clickedMeshes.some(m => m.name === meshName)) {
                return;
            }

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

            const tbody = document.getElementById('mesh-tbody');
            
            // 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>
            `;
        }

          // Populate latest Labour row (Add Labour table) from a clicked mesh
        function populateLabourAndPartFromMesh(meshName) {
            // Labour table (Add Labour -> Labour Name)
            try {
                if (typeof window.add_labour === 'function') {
                    // Add a new labour row
                    window.add_labour();
                    const labourTable = document.getElementById('table_captions2');
                    if (labourTable && labourTable.rows.length > 0) {
                        const lastLabourRow = labourTable.rows[labourTable.rows.length - 1];
                        const labourInput = lastLabourRow.querySelector('input[name="LaborName[]"]');
                        if (labourInput && !labourInput.value) {
                            labourInput.value = meshName;
                        }
                    }
                }
            } catch (e) {
                console.error('Error populating labour name from mesh:', e);
            }
        }
        // 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 {
                        addMeshToTable(name, meshType);
                        populateLabourAndPartFromMesh(name);
                    }


                    // 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;
            addMeshToTable(finalName, pendingSidePart.meshType);
            populateLabourAndPartFromMesh(finalName);
            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');
            }
        });

        // 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">
               <h3 class="card-header text-warning">Add Labour and Parts</h3>
               <div class="card-body">
                  <div class="row">
                     <div class="col-lg-12">
                        <div class="card">
                           <div class="card-body">
                              <h4 class="header-title mb-3">Case Information</h4>
                              <h5 class="font-family-primary fw-semibold">Ref. No. {{$assignData->_ReferenceNo}}</h5>
                              <p class="mb-2"><span class="fw-semibold me-2">Assign Branch </span> {{$assignData->_OurBranch}}</p>
                              <p class="mb-2"><span class="fw-semibold me-2">Policy No. </span> {{$assignData->_PolicyPMDNo}}</p>
                              <p class="mb-2"><span class="fw-semibold me-2">Loss No. </span> {{$assignData->_LossBenefitNo}}</p>
                              <p class="mb-2"><span class="fw-semibold me-2">Insured </span> {{$assignData->_InsuredParticipant}}</p>
                              <p class="mb-2"><span class="fw-semibold me-2">Surveyor </span> {{$assignData->_AssignTeamMember}}</p>
                           </div>
                        </div>
                     </div>
                     <!-- 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')