@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>Submit a Request-2</h2>
            @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('request2s.store') }}" enctype="multipart/form-data">
                @csrf
                <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 selected>Select Category</option>
                        <option value="Computer" {{ old('category') == 'Computer' ? 'selected' : '' }}>Computer</option>
                        <option value="Machine" {{ old('category') == 'Machine' ? 'selected' : '' }}>Machine</option>
                        <option value="Office Equipment" {{ old('category') == 'Office Equipment' ? 'selected' : '' }}>Office Equipment</option>
                        <option value="Vehicle" {{ old('category') == 'Vehicle' ? 'selected' : '' }}>Vehicle</option>
                        <option value="Renovation" {{ old('category') == 'Renovation' ? 'selected' : '' }}>Renovation</option>
                        <option value="Other" {{ old('category') == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>
                <div class="mb-3" id="other-category-div" style="display: 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') }}">
                </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 selected>Select Type</option>
                        <option value="Asset" {{ old('request_type') == 'Asset' ? 'selected' : '' }}>Asset</option>
                        <option value="Project" {{ old('request_type') == 'Project' ? 'selected' : '' }}>Project</option>
                        <option value="Overwrite" {{ old('request_type') == 'Overwrite' ? 'selected' : '' }}>Overwrite</option>
                    </select>
                </div>
                <div class="mb-3" id="project_name_div" style="display:none;">
                    <label for="project_name" class="form-label">Project Name</label>
                    <select class="form-control" id="project_name" name="project_name">
                        <option value="" disabled selected>Select Project</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->project_name }}" {{ old('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') }}">
                </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 selected>Select Urgency</option>
                        <option value="High" {{ old('urgency') == 'High' ? 'selected' : '' }}>High</option>
                        <option value="Medium" {{ old('urgency') == 'Medium' ? 'selected' : '' }}>Medium</option>
                        <option value="Low" {{ old('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') }}</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 selected>Select Branch</option>
                        <option value="operations" {{ old('branch') == 'operations' ? 'selected' : '' }}>Operations</option>
                        <option value="corporate" {{ old('branch') == 'corporate' ? 'selected' : '' }}>Corporate</option>
                        <option value="marketing_sales" {{ old('branch') == 'marketing_sales' ? 'selected' : '' }}>Marketing & Sales</option>
                    </select>
                </div>
                <div class="mb-3" id="unit_div" style="display: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>
                    <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).</small>
                </div>
                <div class="mb-3">
                    <label for="current_approver_id" class="form-label">
                        <i class="fas fa-level-up-alt text-primary"></i> Escalate to
                        <span class="badge badge-info" id="workflow-indicator" style="display: none;"></span>
                    </label>
                    <select class="form-control" id="current_approver_id" name="current_approver_id" required>
                        <option value="" disabled selected>Select User to Escalate To</option>
                        <!-- Options will be populated dynamically based on request type -->
                    </select>
                    <small class="text-muted" id="escalation-help">
                        <i class="fas fa-info-circle"></i> 
                        <span id="workflow-description">Please select a Purchase Request Type to see available escalation targets.</span>
                    </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 selected>Select Option</option>
                                        <option value="Yes" {{ old('po_issuance') == 'Yes' ? 'selected' : '' }}>Yes</option>
                                        <option value="No" {{ old('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 selected>Select Term</option>
                                        <option value="Cash" {{ old('payment_term') == 'Cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="Credit" {{ old('payment_term') == 'Credit' ? 'selected' : '' }}>Credit</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') }}" placeholder="Enter payee name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <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') }}" 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') }}" placeholder="Enter bank name or IC number">
                                </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') }}" 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') }}">
                                </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">
                                <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>
                            </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>
                
                <button type="submit" class="btn btn-primary">Submit</button>
            </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');
        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;
                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;
                unitSelect.appendChild(opt);
            });
        } else {
            unitDiv.style.display = 'none';
        }
    }

    function toggleProjectName() {
        var type = document.getElementById('request_type').value;
        // Only show project name field for "Project" type
        document.getElementById('project_name_div').style.display = (type === 'Project') ? 'block' : 'none';
        
        // Update escalation targets based on request type
        updateEscalationTargets(type);
    }

    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>';
            workflowIndicator.style.display = 'none';
            workflowDescription.textContent = 'Please select a Purchase Request Type to see available escalation targets.';
            return;
        }
        
        // Show workflow indicator and description
        workflowIndicator.style.display = 'inline-block';
        
        // Set workflow descriptions and get appropriate users
        switch(requestType) {
            case 'Asset':
                workflowIndicator.textContent = 'Asset Workflow';
                workflowIndicator.className = 'badge badge-primary';
                workflowDescription.innerHTML = '<i class="fas fa-info-circle"></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':
                workflowIndicator.textContent = 'Project Workflow';
                workflowIndicator.className = 'badge badge-success';
                workflowDescription.innerHTML = '<i class="fas fa-info-circle"></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':
                workflowIndicator.textContent = 'Overwrite Workflow';
                workflowIndicator.className = 'badge badge-warning';
                workflowDescription.innerHTML = '<i class="fas fa-info-circle"></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:
                workflowIndicator.style.display = 'none';
                workflowDescription.textContent = 'Unknown request type selected.';
                loadAllUsers();
        }
    }

    function loadEscalationTargetsForAsset() {
        // For Asset workflow: prioritize IT Department users first, then other non-workflow users
        fetch('/api/users/escalation-targets/asset')
            .then(response => response.json())
            .then(data => populateEscalationSelect(data.users))
            .catch(() => loadAllUsers());
    }

    function loadEscalationTargetsForProject() {
        // For Project workflow: prioritize PMO users first, then other non-workflow users
        fetch('/api/users/escalation-targets/project')
            .then(response => response.json())
            .then(data => populateEscalationSelect(data.users))
            .catch(() => loadAllUsers());
    }

    function loadEscalationTargetsForOverwrite() {
        // For Overwrite workflow: show all users except current user
        fetch('/api/users/escalation-targets/overwrite')
            .then(response => response.json())
            .then(data => populateEscalationSelect(data.users))
            .catch(() => loadAllUsers());
    }

    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');
        escalationSelect.innerHTML = '<option value="" disabled selected>Select User to Escalate To</option>';
        
        // If no request type selected, show message
        if (!requestType) {
            var option = document.createElement('option');
            option.value = '';
            option.disabled = true;
            option.textContent = 'Please select a Purchase Request Type first';
            escalationSelect.appendChild(option);
            return;
        }
        
        // Build user list with workflow restrictions applied
        var validUsers = [];
        
        @foreach(\App\Models\User::all() as $user)
            @if($user->id != auth()->id())
                validUsers.push({
                    id: '{{ $user->id }}',
                    name: '{{ $user->name }}',
                    designation: '{{ $user->designation ?? $user->role ?? '' }}',
                    is_approver: {{ $user->is_approver ? 'true' : 'false' }},
                    is_pmo: {{ $user->is_pmo ? 'true' : 'false' }},
                    unit_id: {{ $user->unit_id ?? 'null' }}
                });
            @endif
        @endforeach
        
        // Filter users based on workflow restrictions
        var filteredUsers = validUsers.filter(function(user) {
            if (requestType === 'Asset') {
                // Asset: Exclude Approvers and Head of Corporate/Operations
                return !user.is_approver && 
                       user.designation !== 'Head of Corporate Division' && 
                       user.designation !== 'Head of Operation Division';
            } else if (requestType === 'Project') {
                // Project: Exclude Approvers and Head of Corporate/Operations
                return !user.is_approver && 
                       user.designation !== 'Head of Corporate Division' && 
                       user.designation !== 'Head of Operation Division';
            } else if (requestType === 'Overwrite') {
                // Overwrite: Allow all users
                return true;
            }
            return false;
        });
        
        // Sort: IT Department first for Asset, PMO first for Project, Approvers first for Overwrite
        filteredUsers.sort(function(a, b) {
            if (requestType === 'Asset') {
                // IT Department (unit_id 7) first
                if (a.unit_id === 7 && b.unit_id !== 7) return -1;
                if (b.unit_id === 7 && a.unit_id !== 7) return 1;
            } else if (requestType === 'Project') {
                // PMO first
                if (a.is_pmo && !b.is_pmo) return -1;
                if (b.is_pmo && !a.is_pmo) return 1;
            } else if (requestType === 'Overwrite') {
                // Approvers first
                if (a.is_approver && !b.is_approver) return -1;
                if (b.is_approver && !a.is_approver) return 1;
            }
            // Then sort by name
            return a.name.localeCompare(b.name);
        });
        
        // Populate dropdown
        filteredUsers.forEach(function(user) {
            var option = document.createElement('option');
            option.value = user.id;
            
            var displayText = user.name + ' (' + 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;
            escalationSelect.appendChild(option);
        });
        
        // Add message if no valid targets found
        if (filteredUsers.length === 0) {
            var option = document.createElement('option');
            option.value = '';
            option.disabled = true;
            option.textContent = 'No valid escalation targets for this workflow';
            escalationSelect.appendChild(option);
        }
    }

    function populateEscalationSelect(users) {
        var escalationSelect = document.getElementById('current_approver_id');
        escalationSelect.innerHTML = '<option value="" disabled selected>Select User to Escalate To</option>';
        
        users.forEach(function(user) {
            var option = document.createElement('option');
            option.value = user.id;
            
            // Build display text with role information
            var roleInfo = '';
            if (user.designation) {
                roleInfo = user.designation;
            } else if (user.role) {
                roleInfo = user.role;
            }
            
            // Add special indicators
            var indicators = [];
            if (user.is_approver) indicators.push('Approver');
            if (user.is_pmo) indicators.push('PMO');
            if (user.unit_name) indicators.push(user.unit_name);
            
            var displayText = user.name;
            if (roleInfo) displayText += ' (' + roleInfo + ')';
            if (indicators.length > 0) displayText += ' [' + indicators.join(', ') + ']';
            
            option.textContent = displayText;
            escalationSelect.appendChild(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();
        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