@extends('layout.app')
@section('title', 'Unassign Part from Truck')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/select2/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        .page-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        }
        .page-header-title {
            color: #0f172a;
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        .page-header-sub {
            color: #64748b;
            font-size: 0.875rem;
        }
        .form-section-title {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #475569;
            margin-bottom: 8px;
        }

        /* Part selector card */
        .part-select-card {
            border: 1.5px solid #e2e8f0;
            background: #f8fafc;
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            display: block;
            position: relative;
        }
        .part-select-card:hover {
            border-color: #cbd5e1;
            background: #ffffff;
        }
        .part-select-card.selected,
        .part-select-card:has(input:checked) {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
        }
        .part-select-card .part-name {
            font-weight: 600;
            color: #0f172a;
            font-size: 0.95rem;
        }
        .part-select-card .part-code {
            color: #2563eb;
            font-weight: 600;
            font-size: 0.85rem;
        }

        /* Next status cards */
        .status-radio-card {
            border: 1.5px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px;
            background: #ffffff;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            display: block;
            height: 100%;
        }
        .status-radio-card:hover {
            border-color: #94a3b8;
        }
        .status-radio-card:has(input:checked) {
            border-color: #0f172a;
            background-color: #f8fafc;
            box-shadow: 0 2px 4px rgba(0,0,0,0.06);
        }

        /* Detail table styling (matches user reference image) */
        .part-detail-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f1f5f9;
            font-size: 0.9rem;
        }
        .detail-row:last-child {
            border-bottom: none;
        }
        .detail-label {
            color: #475569;
            font-weight: 500;
        }
        .detail-value {
            color: #0f172a;
            font-weight: 600;
            text-align: right;
        }

        .btn-submit-action {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #ffffff;
            font-weight: 600;
            border-radius: 8px;
            padding: 12px 20px;
            border: none;
            transition: all 0.2s;
        }
        .btn-submit-action:hover {
            background: #020617;
            color: #ffffff;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
        }
    </style>
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center mb-3">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
            <li class="breadcrumb-item"><a href="{{ route('parts-inventory.unassign-page') }}">Truck Parts & Inventory</a></li>
            <li class="breadcrumb-item active" aria-current="page">Unassign Part</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row g-4">
            <!-- LEFT FORM COLUMN -->
            <div class="col-lg-7">
                <div class="page-card">
                    <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-3">
                        <div>
                            <h4 class="page-header-title">Unassign Part from Truck</h4>
                            <p class="page-header-sub mb-0">Remove currently fitted parts and log performance / disposal state.</p>
                        </div>
                        <a href="{{ route('parts-inventory.unassign-page') }}" class="btn btn-sm btn-outline-secondary">
                            <i class="ri-arrow-left-line me-1"></i> Back
                        </a>
                    </div>

                    <form id="formUnassign">
                        @csrf
                        <!-- 1. Select Truck -->
                        <div class="mb-4">
                            <label class="form-section-title">Step 1: Select Truck</label>
                            <select name="vehicle_id" class="form-select select2" id="vehicle_id" required>
                                <option value="">Select a truck...</option>
                                @foreach($vehicles as $veh)
                                    <option value="{{ $veh->id }}">{{ $veh->vehicle_no }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- 2. Currently Installed Parts -->
                        <div class="mb-4">
                            <label class="form-section-title">Step 2: Currently Installed Parts (Click to Select)</label>
                            <div id="installed_parts_container">
                                <div class="text-center p-4 border rounded text-muted" style="background: #f8fafc; border-style: dashed !important;">
                                    <i class="ri-truck-line fs-3 text-secondary d-block mb-2"></i>
                                    Please select a truck to view its installed parts.
                                </div>
                            </div>
                        </div>

                        <!-- 3. Unassignment Form Fields (Shows when part selected) -->
                        <div id="unassignDetails" style="display: none;">
                            <div class="border-top pt-4 mt-3">
                                <label class="form-section-title mb-3">Step 3: Removal Details</label>
                                
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold">Unassign Date <span class="text-danger">*</span></label>
                                        <input type="text" name="unassign_date" class="form-control datepicker" required value="{{ date('d-m-Y') }}" placeholder="DD-MM-YYYY">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold">Truck KM at Removal <span class="text-danger">*</span></label>
                                        <input type="number" name="km_at_removal" id="km_at_removal" class="form-control" required min="0" placeholder="e.g. 15222">
                                        <div class="form-text small" id="km_hint">Must be equal or greater than fitted KM.</div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label text-muted small fw-bold">Reason for Removal (Optional)</label>
                                    <input type="text" name="reason" class="form-control" placeholder="e.g. Scheduled rotation, puncture, wear and tear, replacement...">
                                </div>

                                <!-- 4. Next Status -->
                                <div class="mb-4">
                                    <label class="form-section-title mb-2">Step 4: Next Part Status <span class="text-danger">*</span></label>
                                    <div class="row g-2">
                                        <div class="col-6 col-md-3">
                                            <label class="status-radio-card">
                                                <input type="radio" name="next_status" value="Reusable" class="d-none" required checked>
                                                <div class="d-flex align-items-center mb-1">
                                                    <i class="ri-refresh-line text-success fs-5 me-2"></i>
                                                    <span class="fw-bold text-dark">Reusable</span>
                                                </div>
                                                <div class="text-muted" style="font-size: 11px;">Good condition, back to stock</div>
                                            </label>
                                        </div>
                                        <div class="col-6 col-md-3">
                                            <label class="status-radio-card">
                                                <input type="radio" name="next_status" value="Claimable" class="d-none" required>
                                                <div class="d-flex align-items-center mb-1">
                                                    <i class="ri-shield-star-line text-warning fs-5 me-2"></i>
                                                    <span class="fw-bold text-dark">Claimable</span>
                                                </div>
                                                <div class="text-muted" style="font-size: 11px;">Warranty / Vendor claim</div>
                                            </label>
                                        </div>
                                        <div class="col-6 col-md-3">
                                            <label class="status-radio-card">
                                                <input type="radio" name="next_status" value="Repairing" class="d-none" required>
                                                <div class="d-flex align-items-center mb-1">
                                                    <i class="ri-tools-line text-primary fs-5 me-2"></i>
                                                    <span class="fw-bold text-dark">Repairing</span>
                                                </div>
                                                <div class="text-muted" style="font-size: 11px;">Sent for workshop repair</div>
                                            </label>
                                        </div>
                                        <div class="col-6 col-md-3">
                                            <label class="status-radio-card">
                                                <input type="radio" name="next_status" value="Scrap" class="d-none" required>
                                                <div class="d-flex align-items-center mb-1">
                                                    <i class="ri-delete-bin-line text-danger fs-5 me-2"></i>
                                                    <span class="fw-bold text-dark">Scrap</span>
                                                </div>
                                                <div class="text-muted" style="font-size: 11px;">Damaged / End of life</div>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Sub fields based on status -->
                                <div id="claimFields" style="display: none;" class="p-3 mb-3 rounded border" style="background-color: #fffbeb;">
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Claim Date</label>
                                            <input type="text" name="claim_date" class="form-control form-control-sm datepicker" value="{{ date('d-m-Y') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Warranty Status</label>
                                            <select name="warranty_status" class="form-select form-select-sm">
                                                <option value="In Warranty">In Warranty</option>
                                                <option value="Out of Warranty">Out of Warranty</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Vendor Name</label>
                                            <input type="text" name="vendor_name" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Claim / Reference No.</label>
                                            <input type="text" name="claim_number" class="form-control form-control-sm">
                                        </div>
                                    </div>
                                </div>

                                <div id="repairFields" style="display: none;" class="p-3 mb-3 rounded border" style="background-color: #f5f3ff;">
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Repair Date</label>
                                            <input type="text" name="repair_date" class="form-control form-control-sm datepicker" value="{{ date('d-m-Y') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Repair Vendor / Workshop</label>
                                            <input type="text" name="repair_vendor" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Estimated Repair Cost (₹)</label>
                                            <input type="number" name="repair_cost" class="form-control form-control-sm" min="0" value="0">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Repair Description</label>
                                            <input type="text" name="repair_description" class="form-control form-control-sm">
                                        </div>
                                    </div>
                                </div>

                                <div id="scrapFields" style="display: none;" class="p-3 mb-3 rounded border" style="background-color: #fff1f2;">
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Scrap Date</label>
                                            <input type="text" name="scrap_date" class="form-control form-control-sm datepicker" value="{{ date('d-m-Y') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Scrap Sale Amount (₹)</label>
                                            <input type="number" name="scrap_amount" class="form-control form-control-sm" min="0" value="0">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Scrap Reason</label>
                                            <input type="text" name="scrap_reason" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="small fw-semibold text-muted">Buyer Details</label>
                                            <input type="text" name="buyer_details" class="form-control form-control-sm">
                                        </div>
                                    </div>
                                </div>

                                <button type="button" class="btn btn-submit-action w-100 mt-2" onclick="submitUnassign()">
                                    <i class="ri-check-line me-1"></i> Complete Unassignment
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- RIGHT DETAILS & ANALYSIS COLUMN (EXACT MATCH TO CLIENT FORMAT) -->
            <div class="col-lg-5">
                <!-- Selected Part Detail Card -->
                <div class="part-detail-card mb-4" id="partDetailCard">
                    <div class="d-flex align-items-center justify-content-between mb-3 border-bottom pb-2">
                        <h6 class="fw-bold mb-0 text-dark"><i class="ri-information-line text-primary me-1"></i> Part Details</h6>
                        <span class="badge bg-light text-primary border" id="part_status_badge">Active On Truck</span>
                    </div>

                    <!-- Placeholder when no part selected -->
                    <div id="detail_placeholder" class="text-center py-5 text-muted">
                        <i class="ri-file-list-3-line fs-1 text-secondary opacity-50 d-block mb-2"></i>
                        <p class="mb-0 small">Select a truck and installed part to view full SKU specs and lifecycle metrics.</p>
                    </div>

                    <!-- Exact Client Requirement Detail Rows -->
                    <div id="detail_content" style="display: none;">
                        <div class="detail-row">
                            <span class="detail-label">Current SKU</span>
                            <span class="detail-value text-primary font-monospace" id="sku_value">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Manufacturer</span>
                            <span class="detail-value" id="mfg_value">—</span>
                        </div>
                        <div class="detail-row" id="row_category">
                            <span class="detail-label">Category</span>
                            <span class="detail-value" id="cat_value">—</span>
                        </div>
                        <div class="detail-row" id="row_position" style="display: none;">
                            <span class="detail-label">Position</span>
                            <span class="detail-value" id="pos_value">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Fitted at (km)</span>
                            <span class="detail-value" id="fitted_km_value">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Km run (until now)</span>
                            <span class="detail-value text-success fw-bold" id="km_run_value">—</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Cost per km</span>
                            <span class="detail-value" id="cost_per_km_value">—</span>
                        </div>

                        <!-- KPI Badge Summary Card -->
                        <div class="p-3 bg-light rounded border mt-3">
                            <div class="row text-center g-2">
                                <div class="col-4 border-end">
                                    <div class="text-muted small" style="font-size: 11px;">KM Run</div>
                                    <div class="fw-bold text-dark fs-6 mt-1" id="stat_km_used">—</div>
                                </div>
                                <div class="col-4 border-end">
                                    <div class="text-muted small" style="font-size: 11px;">Days in Service</div>
                                    <div class="fw-bold text-dark fs-6 mt-1" id="stat_days_used">—</div>
                                </div>
                                <div class="col-4">
                                    <div class="text-muted small" style="font-size: 11px;">Cost / KM</div>
                                    <div class="fw-bold text-dark fs-6 mt-1" id="stat_cost_per_km">—</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Guidelines Card -->
                <div class="p-3 bg-light rounded border">
                    <h6 class="fw-bold text-dark small mb-2"><i class="ri-shield-check-line text-success me-1"></i> Unassignment Rules</h6>
                    <ul class="text-muted small ps-3 mb-0" style="font-size: 12px; line-height: 1.6;">
                        <li>Unassigning moves the part off the truck and returns it to your selected physical stock status.</li>
                        <li><strong>Reusable:</strong> Part is returned to warehouse and can be fitted on another truck later.</li>
                        <li><strong>Scrap / Repair:</strong> Records removal history and logs disposal / workshop repairs.</li>
                        <li>Financial accounts are unaffected by physical removal.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/select2/select2.min.js') }}"></script>
    <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        let activeTruckParts = [];

        $(document).ready(function() {
            $('.select2').select2({ width: '100%' });
            
            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                minDate: moment('{{ $financial_year_start }}', 'DD-MM-YYYY'),
                maxDate: moment('{{ $financial_year_end }}', 'DD-MM-YYYY'),
                locale: { format: 'DD-MM-YYYY' }
            });

            // Recalculate stats when date or KM changes
            $('input[name="unassign_date"], #km_at_removal').on('input change', calculateStats);

            // Fetch truck parts when truck is selected
            $('#vehicle_id').on('change', function() {
                let truckId = $(this).val();
                let container = $('#installed_parts_container');
                $('#unassignDetails').hide();
                resetDetailCard();
                
                if(!truckId) {
                    container.html('<div class="text-center p-4 border rounded text-muted" style="background: #f8fafc; border-style: dashed !important;"><i class="ri-truck-line fs-3 text-secondary d-block mb-2"></i>Please select a truck to view its installed parts.</div>');
                    activeTruckParts = [];
                    return;
                }

                container.html('<div class="text-center p-4 text-muted"><i class="ri-loader-4-line ri-spin fs-4 text-primary d-block mb-2"></i>Loading installed parts...</div>');

                $.ajax({
                    url: '{{ route("parts-inventory.unassign.getTruckParts") }}',
                    data: { truck_id: truckId },
                    success: function(res) {
                        if(res.success) {
                            activeTruckParts = res.data || [];
                            if(activeTruckParts.length === 0) {
                                container.html('<div class="text-center p-4 border rounded text-muted" style="background: #f8fafc; border-style: dashed !important;"><i class="ri-inbox-line fs-3 text-secondary d-block mb-2"></i>No active parts installed on this truck.</div>');
                                return;
                            }
                            
                            let html = '';
                            activeTruckParts.forEach(function(assignment) {
                                let productName = assignment.stock && assignment.stock.product ? assignment.stock.product.product_name : 'Unknown Part';
                                let itemCode = assignment.stock ? assignment.stock.item_code : 'Unknown Serial';
                                let brandName = (assignment.stock && assignment.stock.brand) ? assignment.stock.brand.brand_name : 
                                               (assignment.stock && assignment.stock.product && assignment.stock.product.brand ? assignment.stock.product.brand.brand_name : '');
                                let dateStr = new Date(assignment.assignment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
                                let posBadge = assignment.position ? `<span class="badge bg-secondary-subtle text-secondary me-2">${assignment.position}</span>` : '';
                                
                                html += `
                                    <label class="part-select-card" id="part_card_${assignment.stock_id}">
                                        <input type="radio" name="part_id" value="${assignment.stock_id}" class="d-none" required>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <div class="part-name">${productName} ${brandName ? '<span class="text-muted small fw-normal">(' + brandName + ')</span>' : ''}</div>
                                                <div class="d-flex align-items-center mt-1">
                                                    ${posBadge}
                                                    <span class="part-code me-3"><i class="ri-barcode-line me-1"></i>${itemCode}</span>
                                                    <span class="text-muted small">Fitted: ${assignment.truck_km_at_assignment ? assignment.truck_km_at_assignment.toLocaleString() + ' km' : '0 km'}</span>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <span class="badge bg-light text-muted border">since ${dateStr}</span>
                                            </div>
                                        </div>
                                    </label>
                                `;
                            });
                            container.html(html);
                            
                            // Bind part selection
                            $('input[name="part_id"]').on('change', function() {
                                $('.part-select-card').removeClass('selected');
                                $(this).closest('.part-select-card').addClass('selected');
                                $('#unassignDetails').slideDown(200);
                                populateDetailCard($(this).val());
                            });
                        }
                    },
                    error: function() {
                        container.html('<div class="text-danger p-3 text-center">Failed to load truck parts. Please try again.</div>');
                    }
                });
            });

            // Status Radio Buttons toggle logic
            $('input[name="next_status"]').on('change', function() {
                let val = $(this).val();
                $('#repairFields').slideUp(150);
                $('#scrapFields').slideUp(150);
                $('#claimFields').slideUp(150);
                
                if(val === 'Repairing') $('#repairFields').slideDown(150);
                if(val === 'Scrap')     $('#scrapFields').slideDown(150);
                if(val === 'Claimable') $('#claimFields').slideDown(150);
            });
        });

        function populateDetailCard(partId) {
            let assignment = activeTruckParts.find(p => p.stock_id == partId);
            if(!assignment) return;

            $('#detail_placeholder').hide();
            $('#detail_content').fadeIn(200);

            // SKU
            let sku = assignment.stock ? assignment.stock.item_code : '—';
            $('#sku_value').text(sku);

            // Manufacturer / Brand
            let mfg = '—';
            if (assignment.stock && assignment.stock.product && assignment.stock.product.manufacturer) {
                mfg = assignment.stock.product.manufacturer.name;
            } else if (assignment.stock && assignment.stock.brand) {
                mfg = assignment.stock.brand.brand_name;
            } else if (assignment.stock && assignment.stock.product && assignment.stock.product.brand) {
                mfg = assignment.stock.product.brand.brand_name;
            }
            $('#mfg_value').text(mfg);

            // Category & Position
            let cat = assignment.category ? assignment.category.category_name : '—';
            $('#cat_value').text(cat);
            if(assignment.position) {
                $('#pos_value').text(assignment.position);
                $('#row_position').show();
            } else {
                $('#row_position').hide();
            }

            // Fitted at (km)
            let fittedKm = assignment.truck_km_at_assignment !== null ? parseFloat(assignment.truck_km_at_assignment) : 0;
            $('#fitted_km_value').text(fittedKm.toLocaleString() + ' km');
            $('#km_hint').text('Must be equal or greater than fitted at ' + fittedKm.toLocaleString() + ' km.');
            $('#km_at_removal').attr('min', fittedKm);

            calculateStats();
        }

        function resetDetailCard() {
            $('#detail_placeholder').show();
            $('#detail_content').hide();
            $('#sku_value').text('—');
            $('#mfg_value').text('—');
            $('#cat_value').text('—');
            $('#pos_value').text('—');
            $('#fitted_km_value').text('—');
            $('#km_run_value').text('—');
            $('#cost_per_km_value').text('—');
            $('#stat_km_used').text('—');
            $('#stat_days_used').text('—');
            $('#stat_cost_per_km').text('—');
        }

        function calculateStats() {
            let partId = $('input[name="part_id"]:checked').val();
            if(!partId) return;
            
            let assignment = activeTruckParts.find(p => p.stock_id == partId);
            if(!assignment) return;
            
            let fittedKm = assignment.truck_km_at_assignment !== null ? parseFloat(assignment.truck_km_at_assignment) : 0;
            let removeKm = parseFloat($('#km_at_removal').val());
            let unassignDateStr = $('input[name="unassign_date"]').val();
            
            // Format DD-MM-YYYY to YYYY-MM-DD
            let uDate = new Date();
            if(unassignDateStr && unassignDateStr.indexOf('-') !== -1) {
                let p = unassignDateStr.split('-');
                if(p[0].length === 2) uDate = new Date(p[2] + '-' + p[1] + '-' + p[0]);
            }
            
            let assignDate = new Date(assignment.assignment_date);
            let daysUsed = Math.max(0, Math.floor((uDate - assignDate) / (1000 * 60 * 60 * 24)));
            $('#stat_days_used').text(daysUsed + ' days');
            
            // Calculate KM Run
            let kmRun = null;
            if(!isNaN(removeKm) && removeKm >= fittedKm) {
                kmRun = removeKm - fittedKm;
                let kmRunStr = kmRun.toLocaleString() + ' km';
                $('#km_run_value').text(kmRunStr);
                $('#stat_km_used').text(kmRun.toLocaleString());
            } else {
                $('#km_run_value').text('—');
                $('#stat_km_used').text('—');
            }
            
            // Cost per KM calculation
            let effectiveCost = parseFloat(assignment.effective_cost_snapshot || (assignment.stock ? assignment.stock.purchase_cost : 0));
            if (effectiveCost <= 0) {
                $('#cost_per_km_value').text('Not applicable (included in chassis)');
                $('#stat_cost_per_km').text('N/A');
            } else if (kmRun !== null && kmRun > 0) {
                let cpkm = effectiveCost / kmRun;
                $('#cost_per_km_value').text('₹ ' + cpkm.toFixed(2) + ' / km');
                $('#stat_cost_per_km').text('₹ ' + cpkm.toFixed(2));
            } else {
                $('#cost_per_km_value').text('—');
                $('#stat_cost_per_km').text('—');
            }
        }

        function submitUnassign() {
            let partId = $('input[name="part_id"]:checked').val();
            if(!partId) {
                swal("Missing Selection", "Please select an installed part to unassign.", "warning");
                return;
            }

            let removeKm = parseFloat($('#km_at_removal').val());
            let assignment = activeTruckParts.find(p => p.stock_id == partId);
            let fittedKm = assignment && assignment.truck_km_at_assignment ? parseFloat(assignment.truck_km_at_assignment) : 0;
            
            if(isNaN(removeKm) || removeKm < fittedKm) {
                swal("Invalid KM", "Truck KM at removal must be greater than or equal to fitted KM (" + fittedKm.toLocaleString() + " km).", "warning");
                return;
            }

            // Reformat dates to YYYY-MM-DD
            let unassignDate = $('input[name="unassign_date"]').val();
            let claimDate = $('input[name="claim_date"]').val();
            let repairDate = $('input[name="repair_date"]').val();
            let scrapDate = $('input[name="scrap_date"]').val();
            
            if(unassignDate && unassignDate.indexOf('-') !== -1) {
                let p = unassignDate.split('-');
                if(p[0].length === 2) $('input[name="unassign_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            if(claimDate && claimDate.indexOf('-') !== -1) {
                let p = claimDate.split('-');
                if(p[0].length === 2) $('input[name="claim_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            if(repairDate && repairDate.indexOf('-') !== -1) {
                let p = repairDate.split('-');
                if(p[0].length === 2) $('input[name="repair_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            if(scrapDate && scrapDate.indexOf('-') !== -1) {
                let p = scrapDate.split('-');
                if(p[0].length === 2) $('input[name="scrap_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            
            let formData = new FormData($('#formUnassign')[0]);
            $.ajax({
                url: '{{ route("parts-inventory.unassign") }}',
                type: 'POST',
                data: formData,
                processData: false, contentType: false,
                success: function(res) {
                    if(res.success) {
                        swal({
                            title: "Unassigned!",
                            text: res.message,
                            type: "success"
                        }, function() {
                            window.location.href = '{{ route("parts-inventory.unassign-page") }}';
                        });
                    } else {
                        swal("Error", res.message, "error");
                    }
                },
                error: function(err) {
                    swal("Error", (err.responseJSON && err.responseJSON.message) ? err.responseJSON.message : "Something went wrong.", "error");
                }
            });
        }
    </script>
@endpush