@extends('garage.layouts.app')

@section('title', 'Edit Job Card')

@push('styles')
@include('shared.garage-purchase-order-ui-styles')
@include('shared.garage-split-form-ui-styles')
@endpush

@push('scripts')
<script>
@php
    // Avoid complex expressions inside @json() (can break Blade view compilation).
    $workOrderItemsForJs = $items->map(function ($item) {
        return [
            'id' => $item->id,
            'item_type' => $item->item_type,
            'part_id' => $item->part_id,
            'labor_id' => $item->labor_id,
            'service_group_id' => $item->service_group_id,
            'garage_service_id' => $item->garage_service_id ?? null,
            'source_service_group_id' => $item->source_service_group_id ?? null,
            'is_deleted' => (bool) ($item->is_deleted ?? false),
            'description' => $item->description,
            'quantity' => $item->quantity,
            'quantity_used' => $item->quantity_used,
            'unit_price' => (float) $item->unit_price,
            'discount_amount' => (float) $item->discount_amount,
            'discount_type' => $item->discount_type,
            'tax_rate' => (float) $item->tax_rate,
            'status' => $item->status,
            'notes' => $item->notes,
        ];
    });
@endphp

var workOrderItems = @json($workOrderItemsForJs);

var parts = @json($parts);
var labors = @json($labors);
var serviceGroups = @json($serviceGroups);
var garageServices = @json($garageServices ?? []);
var serviceGroupItems = @json($serviceGroupItems ?? []);
var apiVehiclesUrl = @json(url('/garage/api/vehicles'));
var fetchSourceUrl = @json(route('garage.work-orders.fetch-source'));
var sourceRepairOrders = @json($repairOrders ?? []);
var sourceEstimates = @json($estimates ?? []);

function addItem() {
    var itemType = document.getElementById('itemType').value;
    var partId = document.getElementById('partId').value;
    var laborId = document.getElementById('laborId').value;
    var serviceGroupId = document.getElementById('serviceGroupId').value;
    var quantity = parseFloat(document.getElementById('quantity').value) || 1;
    var unitPrice = parseFloat(document.getElementById('unitPrice').value) || 0;
    var discountAmount = parseFloat(document.getElementById('discountAmount').value) || 0;
    var discountType = document.getElementById('discountType').value;
    var taxRate = parseFloat(document.getElementById('taxRate').value) || 0;
    var description = document.getElementById('itemDescription').value;

    if (itemType === 'part' && !partId) {
        alert('Please select a part');
        return;
    }
    if (itemType === 'labor' && !laborId) {
        alert('Please select a labor');
        return;
    }
    if (itemType === 'service_group' && !serviceGroupId) {
        alert('Please select a service group');
        return;
    }

    // If service group is added, auto-add its parts/labors as linked items.
    if (itemType === 'service_group') {
        var groupIdNum = Number(serviceGroupId);

        var already = (workOrderItems || []).some(function (it) { return it.item_type === 'service_group' && Number(it.service_group_id) === groupIdNum; });
        if (already) {
            alert('This service group is already added.');
            return;
        }

        workOrderItems.push({
            id: null,
            item_type: 'service_group',
            part_id: null,
            labor_id: null,
            service_group_id: groupIdNum,
            source_service_group_id: null,
            is_deleted: false,
            description: description,
            quantity: quantity,
            quantity_used: 0,
            unit_price: unitPrice,
            discount_amount: discountAmount,
            discount_type: discountType,
            tax_rate: taxRate,
            status: 'pending'
        });

        var bundle = serviceGroupItems[String(groupIdNum)] || serviceGroupItems[groupIdNum] || [];
        (bundle || []).forEach(function (bi) {
            var t = String(bi.item_type || '');
            var childQty = (parseInt(bi.quantity, 10) || 1) * Math.max(1, parseInt(quantity, 10) || 1);
            var childPrice = parseFloat(bi.unit_price) || 0;
            workOrderItems.push({
                id: null,
                item_type: t,
                part_id: t === 'part' ? (bi.part_id || null) : null,
                labor_id: t === 'labor' ? (bi.labor_id || null) : null,
                service_group_id: groupIdNum,
                source_service_group_id: groupIdNum,
                is_deleted: false,
                description: '',
                quantity: childQty,
                quantity_used: 0,
                unit_price: childPrice,
                discount_amount: 0,
                discount_type: 'fixed',
                tax_rate: 0,
                status: 'pending'
            });
        });

        updateItemsTable();
        resetItemForm();
        return;
    }

    var item = {
        id: null,
        item_type: itemType,
        part_id: itemType === 'part' ? partId : null,
        labor_id: itemType === 'labor' ? laborId : null,
        service_group_id: itemType === 'service_group' ? serviceGroupId : null,
        source_service_group_id: null,
        is_deleted: false,
        description: description,
        quantity: quantity,
        quantity_used: 0,
        unit_price: unitPrice,
        discount_amount: discountAmount,
        discount_type: discountType,
        tax_rate: taxRate,
        status: 'pending'
    };

    workOrderItems.push(item);
    updateItemsTable();
    resetItemForm();
}

function removeItem(index) {
    var it = workOrderItems[index];
    if (!it) return;
    if (it.item_type === 'service_group') {
        var gid = Number(it.service_group_id || 0);
        workOrderItems.forEach(function (x) {
            if (x === it) { x.is_deleted = true; return; }
            if (Number(x.source_service_group_id || 0) === gid) x.is_deleted = true;
        });
    } else {
        it.is_deleted = true;
    }
    updateItemsTable();
}

function jcEscapeHtml(str) {
    if (str == null || str === '') return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

function jcFormatType(t) {
    return String(t || '').replace(/_/g, ' ').replace(/\b\w/g, function (l) { return l.toUpperCase(); });
}

function jcItemName(item) {
    if (item.item_type === 'part') {
        var part = (parts || []).find(function (p) { return p.id == item.part_id; });
        return part ? part.name : (item.description || '');
    }
    if (item.item_type === 'labor') {
        var labor = (labors || []).find(function (l) { return l.id == item.labor_id; });
        return labor ? labor.name : (item.description || '');
    }
    if (item.item_type === 'service_group') {
        var sg = (serviceGroups || []).find(function (s) { return s.id == item.service_group_id; });
        return sg ? sg.name : (item.description || '');
    }
    if (item.item_type === 'garage_service') {
        var svc0 = (garageServices || []).find(function (s) { return s.id == item.garage_service_id; });
        return svc0 ? svc0.name : (item.description || '');
    }
    return item.description || '';
}

function jcItemDetail(item) {
    var bits = [jcFormatType(item.item_type)];
    if (item.item_type === 'part') {
        var part = (parts || []).find(function (p) { return p.id == item.part_id; });
        if (part) {
            if (part.code) bits.push(part.code);
            if (part.part_number) bits.push(part.part_number);
        }
    } else if (item.item_type === 'labor') {
        var labor = (labors || []).find(function (l) { return l.id == item.labor_id; });
        if (labor && labor.code) bits.push(labor.code);
    } else if (item.item_type === 'garage_service') {
        var svc = (garageServices || []).find(function (s) { return s.id == item.garage_service_id; });
        if (svc && svc.required_minutes) bits.push(svc.required_minutes + ' min default');
    }
    if (!bits.length && item.description) {
        var name = jcItemName(item);
        if (item.description !== name) bits.push(item.description);
    }
    return bits.join(' · ');
}

function jcItemCellHtml(name, detail) {
    var html = '<td class="jc-col-item"><div class="jc-cell-primary">' + jcEscapeHtml(name || '—') + '</div>';
    if (detail) {
        html += '<div class="jc-cell-detail">' + jcEscapeHtml(detail) + '</div>';
    }
    return html + '</td>';
}

var JC_SCROLL_MIN_ROWS = 4;
function syncJcItemsScroll() {
    var wrap = document.getElementById('jcItemsScroll');
    var body = document.getElementById('itemsTableBody');
    if (!wrap || !body) return;
    var rows = body.querySelectorAll('tr.item-row').length;
    wrap.classList.toggle('is-scrollable', rows >= JC_SCROLL_MIN_ROWS);
}

function updateItemsTable() {
    var tbody = document.getElementById('itemsTableBody');
    tbody.innerHTML = '';
    var subtotal = 0;
    var totalTax = 0;

    var active = (workOrderItems || []).filter(function (it) { return it && !it.is_deleted; });
    var partsRows = active.filter(function (it) { return it.item_type === 'part'; });
    var serviceRows = active.filter(function (it) { return it.item_type !== 'part'; });

    function addSubhead(label) {
        var tr = document.createElement('tr');
        tr.className = 'jc-items-subhead';
        tr.innerHTML = '<td colspan="8">' + jcEscapeHtml(label) + '</td>';
        tbody.appendChild(tr);
    }

    function renderRow(item) {
        var row = document.createElement('tr');
        row.className = 'item-row';

        var itemName = jcItemName(item);
        var itemDetail = jcItemDetail(item);

        var itemTotal = item.quantity * item.unit_price;
        var itemDiscount = item.discount_amount || 0;
        if (item.discount_type === 'percentage') {
            itemDiscount = (itemTotal * itemDiscount / 100);
        }
        var itemSubtotal = itemTotal - itemDiscount;
        var itemTax = (itemSubtotal * (item.tax_rate || 0) / 100);
        var itemTotalPrice = itemSubtotal + itemTax;

        subtotal += itemSubtotal;
        totalTax += itemTax;

        var isIncluded = Number(item.unit_price || 0) === 0 && (item.item_type !== 'part');
        var statusBadge = isIncluded
            ? '<span class="badge bg-secondary-subtle text-dark border">Included</span>'
            : '<span class="badge bg-light text-dark border">Fetched</span>';

        var isService = item.item_type !== 'part';
        var svc = item.item_type === 'garage_service'
            ? (garageServices || []).find(function (s) { return s.id == item.garage_service_id; })
            : null;
        var etaVal = (item.estimated_minutes !== null && item.estimated_minutes !== undefined && String(item.estimated_minutes) !== '')
            ? (parseInt(item.estimated_minutes, 10) || 0)
            : (svc && svc.required_minutes !== null && svc.required_minutes !== undefined
                ? (parseInt(svc.required_minutes, 10) || 0)
                : 0);
        var etaCell = isService
            ? '<input type="number" min="0" step="1" class="form-control form-control-sm jc-eta-input" data-idx="' + String(active.indexOf(item)) + '" value="' + String(etaVal) + '">'
            : '<span class="text-muted">—</span>';

        row.innerHTML =
            jcItemCellHtml(itemName, itemDetail) +
            '<td class="jc-col-num">' + jcEscapeHtml(String(item.quantity)) + '</td>' +
            '<td class="jc-col-eta">' + etaCell + '</td>' +
            '<td class="jc-col-num jc-col-money">PKR ' + Number(item.unit_price || 0).toFixed(2) + '</td>' +
            '<td class="jc-col-num jc-col-money">PKR ' + itemDiscount.toFixed(2) + '</td>' +
            '<td class="jc-col-num jc-col-pct">' + jcEscapeHtml(String(item.tax_rate || 0)) + '%</td>' +
            '<td class="jc-col-num jc-col-money">PKR ' + itemTotalPrice.toFixed(2) + '</td>' +
            '<td class="jc-col-status">' + statusBadge + '</td>';
        tbody.appendChild(row);
    }

    if (partsRows.length) {
        addSubhead('Parts');
        partsRows.forEach(renderRow);
    }
    if (serviceRows.length) {
        addSubhead('Services');
        serviceRows.forEach(renderRow);
    }

    // Update totals
    var overallDiscount = parseFloat(document.getElementById('overallDiscount').value) || 0;
    var overallDiscountType = document.getElementById('overallDiscountType').value;
    var finalDiscount = overallDiscount;
    if (overallDiscountType === 'percentage') {
        finalDiscount = (subtotal * overallDiscount / 100);
    }
    var finalSubtotal = subtotal - finalDiscount;
    var finalTotal = finalSubtotal + totalTax;

    document.getElementById('subtotalDisplay').textContent = 'PKR ' + subtotal.toFixed(2);
    document.getElementById('taxDisplay').textContent = 'PKR ' + totalTax.toFixed(2);
    document.getElementById('discountDisplay').textContent = 'PKR ' + finalDiscount.toFixed(2);
    document.getElementById('totalDisplay').textContent = 'PKR ' + finalTotal.toFixed(2);
    var badge = document.getElementById('jcItemsCount');
    if (badge) badge.textContent = String(active.length);
    var hint = document.getElementById('jcItemsEmptyHint');
    if (hint) hint.classList.toggle('d-none', active.length > 0);
    syncJcItemsScroll();
}

function resetItemForm() {
    document.getElementById('itemType').value = 'part';
    document.getElementById('partId').value = '';
    document.getElementById('laborId').value = '';
    document.getElementById('serviceGroupId').value = '';
    document.getElementById('quantity').value = '1';
    document.getElementById('unitPrice').value = '';
    document.getElementById('discountAmount').value = '';
    document.getElementById('discountType').value = 'fixed';
    document.getElementById('taxRate').value = '0';
    document.getElementById('itemDescription').value = '';
    updateItemTypeFields();
}

function updateItemTypeFields() {
    var itemType = document.getElementById('itemType').value;
    document.getElementById('partField').style.display = itemType === 'part' ? 'block' : 'none';
    document.getElementById('laborField').style.display = itemType === 'labor' ? 'block' : 'none';
    document.getElementById('serviceGroupField').style.display = itemType === 'service_group' ? 'block' : 'none';
}

function updateOverallTotals() {
    updateItemsTable();
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('itemType').addEventListener('change', updateItemTypeFields);
    document.getElementById('overallDiscount').addEventListener('input', updateOverallTotals);
    document.getElementById('overallDiscountType').addEventListener('change', updateOverallTotals);
    updateItemTypeFields();
    updateItemsTable(); // Load existing items

    // Editable ETA minutes for services
    var itemsBody = document.getElementById('itemsTableBody');
    if (itemsBody) {
        itemsBody.addEventListener('input', function (e) {
            var el = e.target;
            if (!el || !el.classList || !el.classList.contains('jc-eta-input')) return;
            var idx = parseInt(el.getAttribute('data-idx') || '0', 10) || 0;
            var it = workOrderItems[idx];
            if (!it) return;
            it.estimated_minutes = Math.max(0, parseInt(el.value || '0', 10) || 0);
        });
    }
    
    // Form submission
    document.getElementById('workOrderForm').addEventListener('submit', function(e) {
        var activeCount = (workOrderItems || []).filter(function (it) { return it && !it.is_deleted; }).length;
        if (activeCount === 0) {
            e.preventDefault();
            alert('Please add at least one item to the job card.');
            return false;
        }
        
        // Add hidden input with items JSON
        var itemsInput = document.createElement('input');
        itemsInput.type = 'hidden';
        itemsInput.name = 'items';
        itemsInput.value = JSON.stringify(workOrderItems);
        this.appendChild(itemsInput);
    });
});
</script>
@endpush

@section('navbar_lead')
@include('garage.partials.split-form-navbar-lead', [
    'icon' => 'bi-pencil',
    'title' => 'Edit job card',
    'subtitle' => $workOrder->work_order_number.' · Update details, lines, and status.',
])
@endsection

@section('content')
<div class="gpo-page gs-split-form-page gs-vf-page gs-ro-page gs-jc-page container-fluid px-2 px-lg-3 py-2">
    <form method="POST" action="{{ route('garage.work-orders.update', $workOrder->id) }}" id="workOrderForm">
        @csrf
        @method('PUT')
        <input type="hidden" name="repair_order_id" id="repairOrderId" value="{{ old('repair_order_id', $workOrder->repair_order_id) }}">
        <input type="hidden" name="estimate_id" id="estimateId" value="{{ old('estimate_id', $workOrder->estimate_id) }}">

        @include('garage.work-orders.partials.job-card-form-shell', [
            'workOrder' => $workOrder,
            'customers' => $customers,
            'estimates' => $estimates,
            'repairOrders' => $repairOrders,
            'warehouseCtx' => $warehouseCtx,
            'warehouseFieldPrefix' => 'jcWhEdit',
            'headerConfig' => [
                'icon' => 'bi-pencil',
                'title' => 'Job card detail',
                'numberLabel' => 'JC no.',
                'numberValue' => $workOrder->work_order_number,
                'dateName' => 'work_order_date',
                'dateValue' => old('work_order_date', $workOrder->work_order_date),
                'dateReadonly' => false,
                'historyUrl' => route('garage.work-orders.index'),
                'closeUrl' => route('garage.work-orders.show', $workOrder->id),
                'saveLabel' => 'Save changes',
            ],
        ])
    </form>
</div>

{{-- legacy hidden add-item fields for JS --}}
<div class="d-none">
    <select id="itemType"><option value="part">Part</option></select>
    <select id="partId">@foreach($parts as $part)<option value="{{ $part->id }}" data-price="{{ $part->selling_price }}"></option>@endforeach</select>
    <select id="laborId">@foreach($labors as $labor)<option value="{{ $labor->id }}" data-price="{{ $labor->rate }}"></option>@endforeach</select>
    <select id="serviceGroupId">@foreach($serviceGroups as $sg)<option value="{{ $sg->id }}" data-price="{{ $sg->total_price }}"></option>@endforeach</select>
    <input id="quantity" value="1"><input id="unitPrice"><input id="discountAmount" value="0"><select id="discountType"><option value="fixed"></option></select>
    <input id="taxRate" value="0"><input id="itemDescription">
    <div id="partField"></div><div id="laborField"></div><div id="serviceGroupField"></div>
</div>

@push('scripts')
<script>
function refreshSourceNumberList() {
    var type = document.getElementById('sourceType').value;
    var list = document.getElementById('sourceNumberList');
    if (!list) return;
    var rows = type === 'estimate' ? sourceEstimates : sourceRepairOrders;
    var values = (rows || []).map(function (r) {
        return type === 'estimate' ? r.estimate_number : r.repair_order_number;
    }).filter(Boolean);
    list.innerHTML = values.map(function (v) {
        return '<option value="' + String(v).replace(/"/g, '&quot;') + '"></option>';
    }).join('');
}
var sourceTypeEl = document.getElementById('sourceType');
if (sourceTypeEl) {
    sourceTypeEl.addEventListener('change', refreshSourceNumberList);
    refreshSourceNumberList();
}
var fetchBtn = document.getElementById('fetchSourceBtn');
if (fetchBtn) {
    fetchBtn.addEventListener('click', function () {
        var sourceType = (document.getElementById('sourceType').value || '').trim();
        var sourceNumber = (document.getElementById('sourceNumber').value || '').trim();
        if (!sourceType || !sourceNumber) {
            alert('Select source type and enter source number.');
            return;
        }
        var info = document.getElementById('sourceInfoText');
        info.textContent = 'Fetching…';
        fetch(fetchSourceUrl + '?source_type=' + encodeURIComponent(sourceType) + '&source_number=' + encodeURIComponent(sourceNumber))
            .then(function (resp) {
                return resp.json().then(function (json) {
                    if (!resp.ok) throw new Error((json && json.message) ? json.message : 'Failed to fetch.');
                    return json;
                });
            })
            .then(function (data) {
                document.getElementById('repairOrderId').value = data.repair_order_id || '';
                document.getElementById('estimateId').value = data.estimate_id || '';
                document.getElementById('reference_number').value = data.reference_number || '';
                document.querySelector('textarea[name="work_description"]').value = data.work_description || '';
                document.querySelector('textarea[name="customer_notes"]').value = data.customer_notes || '';
                document.querySelector('textarea[name="internal_notes"]').value = data.internal_notes || '';
                document.getElementById('overallDiscount').value = Number(data.discount_amount || 0).toFixed(2);
                document.getElementById('overallDiscountType').value = data.discount_type || 'fixed';
                var customerSelect = document.getElementById('customerSelect');
                customerSelect.value = data.customer_ledger_id ? String(data.customer_ledger_id) : '';
                onCustomerChange.call(customerSelect);
                if (data.vehicle_id) {
                    document.getElementById('vehicleSelect').value = String(data.vehicle_id);
                }
                if (window.jQuery && jQuery.fn.chosen) {
                    jQuery('#vehicleSelect').trigger('chosen:updated');
                    jQuery('#customerSelect').trigger('chosen:updated');
                }
                workOrderItems = Array.isArray(data.items) ? data.items : [];
                updateItemsTable();
                info.textContent = 'Source loaded.';
            })
            .catch(function (err) {
                info.textContent = err.message || 'Failed.';
                alert(info.textContent);
            });
    });
}

function onCustomerChange() {
    var customerId = this.value;
    var vehicleSelect = document.getElementById('vehicleSelect');
    if (!customerId) {
        vehicleSelect.innerHTML = '<option value="">— Select vehicle —</option>';
        if (window.jQuery && jQuery.fn.chosen) jQuery('#vehicleSelect').trigger('chosen:updated');
        return;
    }
    fetch(apiVehiclesUrl + '?customer_id=' + encodeURIComponent(String(customerId)))
        .then(function (response) { return response.json(); })
        .then(function (data) {
            vehicleSelect.innerHTML = '<option value="">— Select vehicle —</option>';
            (data || []).forEach(function (vehicle) {
                var option = document.createElement('option');
                option.value = vehicle.id;
                var text = vehicle.registration_number;
                if (vehicle.make && vehicle.model) text += ' - ' + vehicle.make + ' ' + vehicle.model;
                option.textContent = text;
                @if($workOrder->vehicle_id)
                if (String(vehicle.id) === String({{ $workOrder->vehicle_id }})) option.selected = true;
                @endif
                vehicleSelect.appendChild(option);
            });
            if (window.jQuery && jQuery.fn.chosen) jQuery('#vehicleSelect').trigger('chosen:updated');
        });
}

document.addEventListener('DOMContentLoaded', function() {
    var customerSelect = document.getElementById('customerSelect');
    if (customerSelect && customerSelect.value) {
        onCustomerChange.call(customerSelect);
    }
    updateItemsTable();
});

// Auto-fill price when item is selected
document.getElementById('partId').addEventListener('change', function() {
    if (this.value) {
        var option = this.options[this.selectedIndex];
        var price = option.getAttribute('data-price');
        if (price) {
            document.getElementById('unitPrice').value = price;
        }
    }
});

document.getElementById('laborId').addEventListener('change', function() {
    if (this.value) {
        var option = this.options[this.selectedIndex];
        var price = option.getAttribute('data-price');
        if (price) {
            document.getElementById('unitPrice').value = price;
        }
    }
});

document.getElementById('serviceGroupId').addEventListener('change', function() {
    if (this.value) {
        var option = this.options[this.selectedIndex];
        var price = option.getAttribute('data-price');
        if (price) {
            document.getElementById('unitPrice').value = price;
        }
    }
});

if (window.jQuery && jQuery.fn.chosen) {
    jQuery('.js-chosen-compact').not('#customerSelect').chosen({ width: '100%', search_contains: true, allow_single_deselect: true });
    jQuery('#customerSelect').chosen({
        width: '100%',
        search_contains: true,
        allow_single_deselect: true,
        placeholder_text_single: 'Select or search customer…'
    }).on('change', onCustomerChange);
    jQuery('#vehicleSelect').chosen({ width: '100%', search_contains: true, allow_single_deselect: true });
    jQuery('#sourceType').chosen({ width: '100%', search_contains: true, disable_search_threshold: 10 });
} else {
    document.getElementById('customerSelect').addEventListener('change', onCustomerChange);
}
</script>
@endpush
@endsection