@extends('layouts.app')

@section('content')
<style>
.item-row:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.input-group-text {
    font-weight: 500;
    font-size: 0.85rem;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.item-row .form-control-sm {
    border-radius: 0.25rem;
}

.btn-outline-primary:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.card {
    border: none;
    border-radius: 0.5rem;
}

.card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.table-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
}

.total-highlight {
    background: linear-gradient(135deg, #d1e7dd 0%, #f8f9fa 100%);
}

/* Grayed out placeholder options */
select option[value=""] {
    color: #6c757d !important;
    font-style: italic;
}

select option[value=""]:disabled {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
}

select:invalid {
    color: #6c757d;
}

select:valid {
    color: #212529;
}

/* Workflow indicators */
.workflow-indicator {
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

#escalation-help {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}

#workflow-description {
    display: block;
    margin-top: 0.25rem;
}

/* Escalation select styling */
#current_approver_id option {
    padding: 0.5rem;
}

#current_approver_id option:disabled {
    color: #6c757d;
    font-style: italic;
}
</style>
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10" style="margin-left: 220px;">
            <h2>Edit Request</h2>
            <div class="alert alert-info">
                <strong>Note:</strong> You are editing a request that was rejected for resubmission. After updating the details, the request will be reset to pending status and sent back for approval.
            </div>
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form method="POST" action="{{ route('requests.update', $request->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="mb-3">
                    <label for="category" class="form-label">Category</label>
                    <select class="form-control" id="category" name="category" required onchange="toggleOtherCategory(this)">
                        <option value="" disabled>Select Category</option>
                        <option value="Computer" {{ old('category', $request->category) == 'Computer' ? 'selected' : '' }}>Computer</option>
                        <option value="Machine" {{ old('category', $request->category) == 'Machine' ? 'selected' : '' }}>Machine</option>
                        <option value="Office Equipment" {{ old('category', $request->category) == 'Office Equipment' ? 'selected' : '' }}>Office Equipment</option>
                        <option value="Vehicle" {{ old('category', $request->category) == 'Vehicle' ? 'selected' : '' }}>Vehicle</option>
                        <option value="Renovation" {{ old('category', $request->category) == 'Renovation' ? 'selected' : '' }}>Renovation</option>
                        <option value="Other" {{ old('category', $request->category) == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>
                <div class="mb-3" id="other-category-div" style="display: {{ old('category', $request->category) == 'Other' ? 'block' : 'none' }};">
                    <label for="other_category" class="form-label">Please specify category</label>
                    <input type="text" class="form-control" id="other_category" name="other_category" value="{{ old('other_category', $request->other_category) }}">
                </div>
                <div class="mb-3">
                    <label for="request_type" class="form-label">Purchase Request Type</label>
                    <select class="form-control" id="request_type" name="request_type" required onchange="toggleProjectName()">
                        <option value="" disabled>Select Type</option>
                        <option value="Asset" {{ old('request_type', $request->request_type) == 'Asset' ? 'selected' : '' }}>Asset</option>
                        <option value="Project" {{ old('request_type', $request->request_type) == 'Project' ? 'selected' : '' }}>Project</option>
                        <option value="Overwrite" {{ old('request_type', $request->request_type) == 'Overwrite' ? 'selected' : '' }}>Overwrite</option>
                    </select>
                </div>
                <div class="mb-3" id="project_name_div" style="display:{{ old('request_type', $request->request_type) == 'Project' ? 'block' : 'none' }};">
                    <label for="project_name" class="form-label">Project Name</label>
                    <select class="form-control" id="project_name" name="project_name">
                        <option value="" disabled>Select Project</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->project_name }}" {{ old('project_name', $request->project_name) == $project->project_name ? 'selected' : '' }}>
                                {{ $project->project_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label for="title" class="form-label">Title of Request</label>
                    <input type="text" class="form-control" id="title" name="title" required value="{{ old('title', $request->title) }}">
                </div>
                <div class="mb-3">
                    <label for="urgency" class="form-label">Urgency</label>
                    <select class="form-control" id="urgency" name="urgency" required onchange="setUrgencyColor(this)">
                        <option value="" disabled>Select Urgency</option>
                        <option value="High" {{ old('urgency', $request->urgency) == 'High' ? 'selected' : '' }}>High</option>
                        <option value="Medium" {{ old('urgency', $request->urgency) == 'Medium' ? 'selected' : '' }}>Medium</option>
                        <option value="Low" {{ old('urgency', $request->urgency) == 'Low' ? 'selected' : '' }}>Low</option>
                    </select>
                    <span id="urgency-label" class="badge mt-2" style="display:none;"></span>
                </div>
                <div class="mb-3">
                    <label for="description" class="form-label">Description / Justification</label>
                    <textarea class="form-control" id="description" name="description">{{ old('description', $request->description) }}</textarea>
                </div>
                <div class="mb-3">
                    <label for="branch" class="form-label">Branch</label>
                    <select class="form-control" id="branch" name="branch" required onchange="toggleUnitField()">
                        <option value="" disabled>Select Branch</option>
                        <option value="operations" {{ old('branch', $request->branch) == 'operations' ? 'selected' : '' }}>Operations</option>
                        <option value="corporate" {{ old('branch', $request->branch) == 'corporate' ? 'selected' : '' }}>Corporate</option>
                        <option value="marketing_sales" {{ old('branch', $request->branch) == 'marketing_sales' ? 'selected' : '' }}>Marketing & Sales</option>
                    </select>
                </div>
                <div class="mb-3" id="unit_div" style="display:{{ $request->unit ? 'block' : 'none' }};">
                    <label for="unit" class="form-label">Unit</label>
                    <select class="form-control" id="unit" name="unit">
                        <!-- Options will be populated by JS -->
                    </select>
                </div>
                <div class="mb-3">
                    <label for="attachments" class="form-label">Attachments (optional: invoice, quotation, etc.)</label>
                    @if($request->attachments && is_array($request->attachments) && count($request->attachments) > 0)
                        <div class="mb-2">
                            <small class="text-muted">Current attachments:</small>
                            <ul class="list-unstyled mb-2">
                                @foreach($request->attachments as $attachment)
                                    <li><small class="text-success">{{ $attachment['original'] ?? 'Attachment' }}</small></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <input type="file" class="form-control" id="attachments" name="attachments[]" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.txt">
                    <small class="form-text text-muted">You can upload up to 10 files (total max 50MB). New uploads will replace existing attachments.</small>
                </div>
                <div class="mb-3">
                    <label for="current_approver_id" class="form-label">
                        <i class="fas fa-user-check text-primary"></i> Select Initial Approver
                        <span id="workflow-indicator" class="badge badge-secondary ml-2" style="display: none;"></span>
                    </label>
                    <select class="form-control" id="current_approver_id" name="current_approver_id" required>
                        <option value="" disabled selected>Loading approvers...</option>
                    </select>
                    
                    <!-- Workflow Description -->
                    <div id="workflow-description" class="mt-2" style="display: none;">
                        <div class="alert alert-info py-2 px-3 mb-0">
                            <small class="mb-0" id="workflow-text"></small>
                        </div>
                    </div>
                    
                    <small class="text-muted">
                        <i class="fas fa-info-circle"></i> 
                        The available users depend on your selected Purchase Request Type and follow workflow restrictions.
                    </small>
                </div>

                <!-- Payment Information Section -->
                <div class="card shadow-sm mt-4 mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="fas fa-credit-card"></i> Payment Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="po_issuance" class="form-label">PO Issuance</label>
                                    <select class="form-control" id="po_issuance" name="po_issuance" required>
                                        <option value="" disabled>Select Option</option>
                                        <option value="Yes" {{ old('po_issuance', $request->po_issuance) == 'Yes' ? 'selected' : '' }}>Yes</option>
                                        <option value="No" {{ old('po_issuance', $request->po_issuance) == 'No' ? 'selected' : '' }}>No</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="payment_term" class="form-label">Payment Term</label>
                                    <select class="form-control" id="payment_term" name="payment_term" required>
                                        <option value="" disabled>Select Term</option>
                                        <option value="Cash" {{ old('payment_term', $request->payment_term) == 'Cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="Credit" {{ old('payment_term', $request->payment_term) == 'Credit' ? 'selected' : '' }}>Credit</option>
                                        <option value="Bank Transfer" {{ old('payment_term', $request->payment_term) == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="transfer_to" class="form-label">Transfer to</label>
                                    <select class="form-control" id="transfer_to" name="transfer_to" required>
                                        <option value="" disabled>Select Transfer Recipient</option>
                                        <option value="Requester" {{ old('transfer_to', $request->transfer_to) == 'Requester' ? 'selected' : '' }}>Requester</option>
                                        <option value="Seller" {{ old('transfer_to', $request->transfer_to) == 'Seller' ? 'selected' : '' }}>Seller</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="payment_name" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="payment_name" name="payment_name" value="{{ old('payment_name', $request->payment_name) }}" placeholder="Enter payee name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3" id="company_id_field" style="display: none;">
                                    <label for="company_id" class="form-label">Company ID/ IC number</label>
                                    <input type="text" class="form-control" id="company_id" name="company_id" value="{{ old('company_id', $request->company_id) }}" placeholder="Enter company ID or IC number">
                                </div>
                                <div class="mb-3">
                                    <label for="bank_name_ic" class="form-label">Bank Name</label>
                                    <input type="text" class="form-control" id="bank_name_ic" name="bank_name_ic" value="{{ old('bank_name_ic', $request->bank_name_ic) }}" placeholder="Enter bank name">
                                </div>
                                <div class="mb-3">
                                    <label for="account_number" class="form-label">Account Number</label>
                                    <input type="text" class="form-control" id="account_number" name="account_number" value="{{ old('account_number', $request->account_number) }}" placeholder="Enter account number">
                                </div>
                                <div class="mb-3">
                                    <label for="due_date" class="form-label">Due Date</label>
                                    <input type="date" class="form-control" id="due_date" name="due_date" value="{{ old('due_date', $request->due_date) }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="mb-0"><i class="fas fa-list-alt text-primary"></i> Itemized List</h4>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="addItemRow()">
                            <i class="fas fa-plus"></i> Add Item
                        </button>
                    </div>
                    
                    <div class="card">
                        <div class="card-body p-0">
                            <!-- Header Row -->
                            <div class="row table-header py-2 px-3 m-0 border-bottom">
                                <div class="col-2"><small class="text-muted fw-bold">ITEM NAME</small></div>
                                <div class="col-1"><small class="text-muted fw-bold">QTY</small></div>
                                <div class="col-2"><small class="text-muted fw-bold">UNIT COST (RM)</small></div>
                                <div class="col-2"><small class="text-muted fw-bold">TAX %</small></div>
                                <div class="col-1"><small class="text-muted fw-bold">DELIVERY (RM)</small></div>
                                <div class="col-2"><small class="text-muted fw-bold">TOTAL</small></div>
                                <div class="col-1"><small class="text-muted fw-bold">FILE</small></div>
                                <div class="col-1"><small class="text-muted fw-bold">ACTION</small></div>
                            </div>
                            
                            <div id="itemized-list">
                                @if($request->items && is_array($request->items) && count($request->items) > 0)
                                    @foreach($request->items as $index => $item)
                                        <div class="row py-3 px-3 item-row align-items-center border-bottom">
                                            <div class="col-2">
                                                <input type="text" class="form-control form-control-sm" id="item_name_{{ $index }}" name="items[{{ $index }}][name]" placeholder="Enter item name..." required value="{{ old('items.'.$index.'.name', $item['name']) }}">
                                            </div>
                                            <div class="col-1">
                                                <input type="number" class="form-control form-control-sm text-center" id="item_quantity_{{ $index }}" name="items[{{ $index }}][quantity]" min="1" value="{{ old('items.'.$index.'.quantity', $item['quantity']) }}" required oninput="updateTotalCost(this)">
                                            </div>
                                            <div class="col-2">
                                                <input type="number" class="form-control form-control-sm" id="unit_cost_{{ $index }}" name="items[{{ $index }}][unit_cost]" min="0" step="0.01" value="{{ old('items.'.$index.'.unit_cost', $item['unit_cost']) }}" placeholder="0.00" required oninput="updateTotalCost(this)">
                                            </div>
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <input type="number" class="form-control text-center" id="tax_rate_{{ $index }}" name="items[{{ $index }}][tax_rate]" min="0" max="100" step="0.01" value="{{ old('items.'.$index.'.tax_rate', $item['tax_rate']) }}" required oninput="updateTotalCost(this)">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                            </div>
                                            <div class="col-1">
                                                <input type="number" class="form-control form-control-sm" id="delivery_charge_{{ $index }}" name="items[{{ $index }}][delivery_charge]" min="0" step="0.01" value="{{ old('items.'.$index.'.delivery_charge', $item['delivery_charge'] ?? 0) }}" placeholder="0.00" oninput="updateTotalCost(this)">
                                            </div>
                                            <div class="col-2">
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text bg-success text-white">RM</span>
                                                    <input type="number" class="form-control fw-bold bg-light" id="total_cost_{{ $index }}" name="items[{{ $index }}][total_cost]" placeholder="0.00" readonly value="{{ old('items.'.$index.'.total_cost', $item['total_cost']) }}">
                                                </div>
                                            </div>
                                            <div class="col-1">
                                                @if(isset($item['attachment']))
                                                    <small class="text-success">File exists</small><br>
                                                @endif
                                                <input type="file" class="form-control form-control-sm" id="item_attachment_{{ $index }}" name="items[{{ $index }}][attachment]" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.txt">
                                            </div>
                                            <div class="col-1 text-end">
                                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeItemRow(this)">
                                                    <i class="fas fa-trash"></i> Remove Item
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row py-3 px-3 item-row align-items-center border-bottom">
                                        <div class="col-2">
                                            <input type="text" class="form-control form-control-sm" id="item_name_0" name="items[0][name]" placeholder="Enter item name..." required>
                                        </div>
                                        <div class="col-1">
                                            <input type="number" class="form-control form-control-sm text-center" id="item_quantity_0" name="items[0][quantity]" min="1" value="1" required oninput="updateTotalCost(this)">
                                        </div>
                                        <div class="col-2">
                                            <input type="number" class="form-control form-control-sm" id="unit_cost_0" name="items[0][unit_cost]" min="0" step="0.01" value="0.00" placeholder="0.00" required oninput="updateTotalCost(this)">
                                        </div>
                                        <div class="col-2">
                                            <div class="input-group input-group-sm">
                                                <input type="number" class="form-control text-center" id="tax_rate_0" name="items[0][tax_rate]" min="0" max="100" step="0.01" value="6.00" required oninput="updateTotalCost(this)">
                                                <span class="input-group-text">%</span>
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <input type="number" class="form-control form-control-sm" id="delivery_charge_0" name="items[0][delivery_charge]" min="0" step="0.01" value="0.00" placeholder="0.00" oninput="updateTotalCost(this)">
                                        </div>
                                        <div class="col-2">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text bg-success text-white">RM</span>
                                                <input type="number" class="form-control fw-bold bg-light" id="total_cost_0" name="items[0][total_cost]" placeholder="0.00" readonly>
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <input type="file" class="form-control form-control-sm" id="item_attachment_0" name="items[0][attachment]" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.txt">
                                        </div>
                                        <div class="col-1 text-end">
                                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeItemRow(this)">
                                                <i class="fas fa-trash"></i> Remove Item
                                            </button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0"><i class="fas fa-calculator"></i> Cost Breakdown</h6>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="form-label text-muted small">Subtotal (excl. tax):</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text">RM</span>
                                            <input type="number" class="form-control" id="subtotal_amount" readonly>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label text-muted small">Total Tax Amount:</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text">RM</span>
                                            <input type="number" class="form-control" id="tax_amount" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="form-label text-muted small">Total Delivery:</label>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text">RM</span>
                                            <input type="number" class="form-control" id="delivery_amount" readonly>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label fw-bold">Grand Total:</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-success text-white fw-bold">RM</span>
                                            <input type="number" class="form-control fw-bold fs-5 text-success" id="total_amount" name="total_amount" readonly style="background-color: #f8f9fa;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card shadow-sm">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0"><i class="fas fa-info-circle"></i> Tax & Delivery Guide</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <h6 class="text-primary"><i class="fas fa-percentage"></i> Tax Information</h6>
                                    <small class="text-muted">
                                        • Default: 6% (Malaysian SST)<br>
                                        • Adjustable per item<br>
                                        • Applied to: Qty × Unit Cost
                                    </small>
                                </div>
                                <div class="mb-3">
                                    <h6 class="text-warning"><i class="fas fa-truck"></i> Delivery Charges</h6>
                                    <small class="text-muted">
                                        • Optional field in MYR<br>
                                        • For shipping/handling costs<br>
                                        • Added to final total
                                    </small>
                                </div>
                                <div class="alert alert-light border p-2 mb-0">
                                    <small class="fw-bold text-dark">
                                        <i class="fas fa-calculator text-primary"></i> Formula:<br>
                                        Total = (Qty × Unit Cost) + Tax + Delivery
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">Update & Resubmit Request</button>
                    <a href="{{ route('requests.show', $request->id) }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    function toggleOtherCategory(select) {
        var otherDiv = document.getElementById('other-category-div');
        if (select.value === 'Other') {
            otherDiv.style.display = 'block';
            document.getElementById('other_category').required = true;
        } else {
            otherDiv.style.display = 'none';
            document.getElementById('other_category').required = false;
        }
    }

    function setUrgencyColor(select) {
        var label = document.getElementById('urgency-label');
        if (select.value === 'High') {
            label.textContent = 'High';
            label.style.backgroundColor = '#dc3545';
            label.style.color = '#fff';
            label.style.display = 'inline-block';
        } else if (select.value === 'Medium') {
            label.textContent = 'Medium';
            label.style.backgroundColor = '#fd7e14';
            label.style.color = '#fff';
            label.style.display = 'inline-block';
        } else if (select.value === 'Low') {
            label.textContent = 'Low';
            label.style.backgroundColor = '#28a745';
            label.style.color = '#fff';
            label.style.display = 'inline-block';
        } else {
            label.style.display = 'none';
        }
    }

    function toggleUnitField() {
        var branch = document.getElementById('branch').value;
        var unitDiv = document.getElementById('unit_div');
        var unitSelect = document.getElementById('unit');
        var currentUnit = '{{ old('unit', $request->unit) }}';
        
        unitSelect.innerHTML = '';
        if (branch === 'operations') {
            unitDiv.style.display = 'block';
            ['IRM', 'STD', 'TS', 'SS'].forEach(function(u) {
                var opt = document.createElement('option');
                opt.value = u;
                opt.textContent = u;
                if (u === currentUnit) opt.selected = true;
                unitSelect.appendChild(opt);
            });
        } else if (branch === 'corporate') {
            unitDiv.style.display = 'block';
            ['HR', 'Finance', 'IT Department'].forEach(function(u) {
                var opt = document.createElement('option');
                opt.value = u;
                opt.textContent = u;
                if (u === currentUnit) opt.selected = true;
                unitSelect.appendChild(opt);
            });
        } else {
            unitDiv.style.display = 'none';
        }
    }

    function toggleProjectName() {
        var requestType = document.getElementById('request_type').value;
        var projectNameSection = document.getElementById('project_name_div');

        if (requestType === 'Project') {
            projectNameSection.style.display = 'block';
            document.getElementById('project_name').required = true;
        } else {
            projectNameSection.style.display = 'none';
            document.getElementById('project_name').required = false;
            document.getElementById('project_name').value = '';
        }

        // Load appropriate escalation targets based on request type
        if (requestType) {
            updateEscalationTargets(requestType);
        } else {
            var currentApproverSelect = document.getElementById('current_approver_id');
            currentApproverSelect.innerHTML = '<option value="" disabled selected>Select User to Escalate To</option>';
            var workflowIndicator = document.getElementById('workflow-indicator');
            var workflowDescription = document.getElementById('workflow-description');
            if (workflowIndicator) workflowIndicator.style.display = 'none';
            if (workflowDescription) workflowDescription.style.display = 'none';
        }
    }

    function toggleCompanyIdField() {
        var transferTo = document.getElementById('transfer_to').value;
        var companyIdField = document.getElementById('company_id_field');
        
        if (transferTo === 'Seller') {
            companyIdField.style.display = 'block';
            // Make the field required when shown
            document.getElementById('company_id').setAttribute('required', 'required');
        } else {
            companyIdField.style.display = 'none';
            // Remove required attribute when hidden
            document.getElementById('company_id').removeAttribute('required');
        }
    }

    // Escalation Target Functions (for editing existing requests)
    function updateEscalationTargets(requestType) {
        var escalationSelect = document.getElementById('current_approver_id');
        var workflowIndicator = document.getElementById('workflow-indicator');
        var workflowDescription = document.getElementById('workflow-description');
        
        // Clear current options
        escalationSelect.innerHTML = '<option value="" disabled selected>Loading...</option>';
        
        if (!requestType) {
            escalationSelect.innerHTML = '<option value="" disabled selected>Select User to Escalate To</option>';
            if (workflowIndicator) workflowIndicator.style.display = 'none';
            if (workflowDescription) workflowDescription.style.display = 'none';
            return;
        }
        
        // Show workflow indicator and description
        if (workflowIndicator) workflowIndicator.style.display = 'inline-block';
        if (workflowDescription) workflowDescription.style.display = 'block';
        
        // Set workflow descriptions and get appropriate users
        switch(requestType) {
            case 'Asset':
                if (workflowIndicator) {
                    workflowIndicator.textContent = 'Asset Workflow';
                    workflowIndicator.className = 'badge badge-primary ml-2';
                }
                if (workflowDescription) {
                    workflowDescription.innerHTML = '<i class="fas fa-info-circle text-info"></i> <strong>Asset Workflow:</strong> User → Other Users → IT Department → Head of Corporate → Approver<br><small class="text-muted">You can escalate to IT Department or other regular users (excludes Heads and Approvers to maintain workflow integrity)</small>';
                }
                loadEscalationTargetsForAsset();
                break;
            case 'Project':
                if (workflowIndicator) {
                    workflowIndicator.textContent = 'Project Workflow';
                    workflowIndicator.className = 'badge badge-success ml-2';
                }
                if (workflowDescription) {
                    workflowDescription.innerHTML = '<i class="fas fa-info-circle text-info"></i> <strong>Project Workflow:</strong> User → Other Users → PMO → Head of Operations → Approver<br><small class="text-muted">You can escalate to PMO or other regular users (excludes Heads and Approvers to maintain workflow integrity)</small>';
                }
                loadEscalationTargetsForProject();
                break;
            case 'Overwrite':
                if (workflowIndicator) {
                    workflowIndicator.textContent = 'Overwrite Workflow';
                    workflowIndicator.className = 'badge badge-warning ml-2';
                }
                if (workflowDescription) {
                    workflowDescription.innerHTML = '<i class="fas fa-info-circle text-info"></i> <strong>Overwrite Workflow:</strong> User → Multiple Users → Approver<br><small class="text-muted">You can escalate to any user (workflow bypassing allowed)</small>';
                }
                loadEscalationTargetsForOverwrite();
                break;
            default:
                if (workflowIndicator) workflowIndicator.style.display = 'none';
                if (workflowDescription) workflowDescription.style.display = 'none';
                loadAllUsers();
        }
    }

    function loadEscalationTargetsForAsset() {
        // For Asset workflow: prioritize IT Department users first, then other non-workflow users
        // Exclude workflow members (Heads and Approvers) to maintain workflow integrity
        var escalationSelect = document.getElementById('current_approver_id');
        var currentSelectedValue = '{{ old("current_approver_id", $request->current_approver_id) }}';
        var allUsers = @json($users);
        
        try {
            console.log('Loading Asset escalation targets...');
            
            // Filter out workflow members for Asset workflow
            var validUsers = allUsers.filter(function(user) {
                var designation = user.designation ? user.designation.toLowerCase() : '';
                // Exclude Approvers and Head of Corporate/Operations to maintain workflow
                return !user.is_approver && 
                       !designation.includes('head of corporate') && 
                       !designation.includes('head of operation');
            });
            
            // Sort: IT Department (unit_id 7) first, then others
            validUsers.sort(function(a, b) {
                if (a.unit_id === 7 && b.unit_id !== 7) return -1;
                if (b.unit_id === 7 && a.unit_id !== 7) return 1;
                return a.name.localeCompare(b.name);
            });
            
            populateEscalationSelect(validUsers, currentSelectedValue, 'Asset escalation targets');
            
        } catch (error) {
            console.error('Error loading Asset escalation targets:', error);
            escalationSelect.innerHTML = '<option value="" disabled selected>Error loading escalation targets</option>';
        }
    }

    function loadEscalationTargetsForProject() {
        // For Project workflow: prioritize PMO users first, then other non-workflow users
        // Exclude workflow members (Heads and Approvers) to maintain workflow integrity
        var escalationSelect = document.getElementById('current_approver_id');
        var currentSelectedValue = '{{ old("current_approver_id", $request->current_approver_id) }}';
        var allUsers = @json($users);
        
        try {
            console.log('Loading Project escalation targets...');
            
            // Filter out workflow members for Project workflow
            var validUsers = allUsers.filter(function(user) {
                var designation = user.designation ? user.designation.toLowerCase() : '';
                // Exclude Approvers and Head of Corporate/Operations to maintain workflow
                return !user.is_approver && 
                       !designation.includes('head of corporate') && 
                       !designation.includes('head of operation');
            });
            
            // Sort: PMO first, then others
            validUsers.sort(function(a, b) {
                if (a.is_pmo && !b.is_pmo) return -1;
                if (b.is_pmo && !a.is_pmo) return 1;
                return a.name.localeCompare(b.name);
            });
            
            populateEscalationSelect(validUsers, currentSelectedValue, 'Project escalation targets');
            
        } catch (error) {
            console.error('Error loading Project escalation targets:', error);
            escalationSelect.innerHTML = '<option value="" disabled selected>Error loading escalation targets</option>';
        }
    }

    function loadEscalationTargetsForOverwrite() {
        // For Overwrite workflow: show all users except current user (bypassing allowed)
        var escalationSelect = document.getElementById('current_approver_id');
        var currentSelectedValue = '{{ old("current_approver_id", $request->current_approver_id) }}';
        var allUsers = @json($users);
        
        try {
            console.log('Loading Overwrite escalation targets...');
            
            // For Overwrite, allow all users (workflow bypassing)
            var validUsers = allUsers;
            
            // Sort: Approvers first, then others
            validUsers.sort(function(a, b) {
                if (a.is_approver && !b.is_approver) return -1;
                if (b.is_approver && !a.is_approver) return 1;
                return a.name.localeCompare(b.name);
            });
            
            populateEscalationSelect(validUsers, currentSelectedValue, 'Overwrite escalation targets');
            
        } catch (error) {
            console.error('Error loading Overwrite escalation targets:', error);
            escalationSelect.innerHTML = '<option value="" disabled selected>Error loading escalation targets</option>';
        }
    }

    function loadAllUsers() {
        // Fallback: Apply workflow restrictions based on selected request type
        var requestType = document.getElementById('request_type').value;
        var escalationSelect = document.getElementById('current_approver_id');
        var currentSelectedValue = '{{ old("current_approver_id", $request->current_approver_id) }}';
        
        // If no request type selected, show message
        if (!requestType) {
            escalationSelect.innerHTML = '<option value="" disabled selected>Please select a Purchase Request Type first</option>';
            return;
        }
        
        // Default to asset workflow restrictions
        loadEscalationTargetsForAsset();
    }

    function populateEscalationSelect(users, currentSelectedValue = null, workflowNote = '') {
        var escalationSelect = document.getElementById('current_approver_id');
        
        try {
            // Clear existing options
            escalationSelect.innerHTML = '';
            
            // Add default option
            var defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.disabled = true;
            defaultOption.selected = !currentSelectedValue;
            defaultOption.textContent = 'Select User to Escalate To';
            escalationSelect.appendChild(defaultOption);
            
            if (users.length === 0) {
                var noUsersOption = document.createElement('option');
                noUsersOption.value = '';
                noUsersOption.disabled = true;
                noUsersOption.textContent = 'No valid escalation targets for this workflow';
                escalationSelect.appendChild(noUsersOption);
                return;
            }
            
            // Add user options
            users.forEach(function(user) {
                var option = document.createElement('option');
                option.value = user.id;
                
                // Build display text
                var displayText = user.name;
                if (user.designation) {
                    displayText += ' (' + user.designation + ')';
                }
                
                // Add indicators
                var indicators = [];
                if (user.is_approver) indicators.push('Approver');
                if (user.is_pmo) indicators.push('PMO');
                if (user.unit_id === 7) indicators.push('IT Department');
                
                if (indicators.length > 0) {
                    displayText += ' [' + indicators.join(', ') + ']';
                }
                
                option.textContent = displayText;
                
                // Set selection
                if (currentSelectedValue && user.id.toString() === currentSelectedValue.toString()) {
                    option.selected = true;
                }
                
                escalationSelect.appendChild(option);
            });
            
            console.log(`Loaded ${users.length} escalation targets. ${workflowNote}`);
            
        } catch (error) {
            console.error('Error populating escalation select:', error);
            escalationSelect.innerHTML = '<option value="" disabled selected>Error populating escalation targets</option>';
        }
    }



    function addItemRow() {
        var list = document.getElementById('itemized-list');
        var idx = list.querySelectorAll('.item-row').length;
        var row = document.createElement('div');
        row.className = 'row py-3 px-3 item-row align-items-center border-bottom';
        row.innerHTML = `
            <div class="col-2">
                <input type="text" class="form-control form-control-sm" id="item_name_${idx}" name="items[${idx}][name]" placeholder="Enter item name..." required>
            </div>
            <div class="col-1">
                <input type="number" class="form-control form-control-sm text-center" id="item_quantity_${idx}" name="items[${idx}][quantity]" min="1" value="1" required oninput="updateTotalCost(this)">
            </div>
            <div class="col-2">
                <input type="number" class="form-control form-control-sm" id="unit_cost_${idx}" name="items[${idx}][unit_cost]" min="0" step="0.01" value="0.00" placeholder="0.00" required oninput="updateTotalCost(this)">
            </div>
            <div class="col-2">
                <div class="input-group input-group-sm">
                    <input type="number" class="form-control text-center" id="tax_rate_${idx}" name="items[${idx}][tax_rate]" min="0" max="100" step="0.01" value="6.00" required oninput="updateTotalCost(this)">
                    <span class="input-group-text">%</span>
                </div>
            </div>
            <div class="col-1">
                <input type="number" class="form-control form-control-sm" id="delivery_charge_${idx}" name="items[${idx}][delivery_charge]" min="0" step="0.01" value="0.00" placeholder="0.00" oninput="updateTotalCost(this)">
            </div>
            <div class="col-2">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-success text-white">RM</span>
                    <input type="number" class="form-control fw-bold bg-light" id="total_cost_${idx}" name="items[${idx}][total_cost]" placeholder="0.00" readonly>
                </div>
            </div>
            <div class="col-1">
                <input type="file" class="form-control form-control-sm" id="item_attachment_${idx}" name="items[${idx}][attachment]" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx,.txt">
            </div>
            <div class="col-1 text-end">
                <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeItemRow(this)">
                    <i class="fas fa-trash"></i> Remove Item
                </button>
            </div>
        `;
        list.appendChild(row);
        updateTotalAmount();
    }
    function removeItemRow(btn) {
        btn.closest('.item-row').remove();
        updateTotalAmount();
    }
    function updateTotalCost(input) {
        var row = input.closest('.item-row');
        var qty = parseFloat(row.querySelector('[name$="[quantity]"]').value) || 0;
        var unitCost = parseFloat(row.querySelector('[name$="[unit_cost]"]').value) || 0;
        var taxRate = parseFloat(row.querySelector('[name$="[tax_rate]"]').value) || 0;
        var deliveryCharge = parseFloat(row.querySelector('[name$="[delivery_charge]"]').value) || 0;
        
        // Calculate: (Qty × Unit Cost) + Tax + Delivery
        var subtotal = qty * unitCost;
        var taxAmount = subtotal * (taxRate / 100);
        var total = subtotal + taxAmount + deliveryCharge;
        
        var totalInput = row.querySelector('[name$="[total_cost]"]');
        totalInput.value = total.toFixed(2);
        
        updateTotalAmount();
    }
    function updateTotalAmount() {
        var grandTotal = 0;
        var subtotalSum = 0;
        var taxSum = 0;
        var deliverySum = 0;
        
        document.querySelectorAll('.item-row').forEach(function(row) {
            var qty = parseFloat(row.querySelector('[name$="[quantity]"]').value) || 0;
            var unitCost = parseFloat(row.querySelector('[name$="[unit_cost]"]').value) || 0;
            var taxRate = parseFloat(row.querySelector('[name$="[tax_rate]"]').value) || 0;
            var deliveryCharge = parseFloat(row.querySelector('[name$="[delivery_charge]"]').value) || 0;
            var totalCost = parseFloat(row.querySelector('[name$="[total_cost]"]').value) || 0;
            
            var itemSubtotal = qty * unitCost;
            var itemTax = itemSubtotal * (taxRate / 100);
            
            subtotalSum += itemSubtotal;
            taxSum += itemTax;
            deliverySum += deliveryCharge;
            grandTotal += totalCost;
        });
        
        document.getElementById('subtotal_amount').value = subtotalSum.toFixed(2);
        document.getElementById('tax_amount').value = taxSum.toFixed(2);
        document.getElementById('delivery_amount').value = deliverySum.toFixed(2);
        document.getElementById('total_amount').value = grandTotal.toFixed(2);
    }
    document.addEventListener('DOMContentLoaded', function() {
        toggleOtherCategory(document.getElementById('category'));
        setUrgencyColor(document.getElementById('urgency'));
        toggleUnitField();
        toggleProjectName();
        toggleCompanyIdField(); // Initialize the Company/IC field visibility
        
        // Add event listener for transfer_to field changes
        var transferToSelect = document.getElementById('transfer_to');
        if (transferToSelect) {
            transferToSelect.addEventListener('change', toggleCompanyIdField);
        }
        
        document.querySelectorAll('.item-row').forEach(function(row){
            updateTotalCost(row.querySelector('[name$="[quantity]"]'));
        });
        updateTotalAmount();
        
        // Initialize escalation targets if request type is already selected
        var requestType = document.getElementById('request_type').value;
        if (requestType) {
            updateEscalationTargets(requestType);
        }
    });
</script>
@endsection