@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</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('requests.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-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>Please select a Purchase Request Type first</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 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>
                                        <option value="Bank Transfer" {{ old('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 selected>Select Transfer Recipient</option>
                                        <option value="Requester" {{ old('transfer_to') == 'Requester' ? 'selected' : '' }}>Requester</option>
                                        <option value="Seller" {{ old('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') }}" 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') }}" 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>
                        <div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addItemRow()">
                                <i class="fas fa-plus"></i> Add Item
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm ms-2" onclick="initializeCalculations()">
                                <i class="fas fa-refresh"></i> Recalculate
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm ms-2" onclick="testJavaScript()">
                                <i class="fas fa-bug"></i> Test JS
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm ms-2" onclick="resetAllFields()">
                                <i class="fas fa-undo"></i> Reset
                            </button>
                        </div>
                    </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 initial approver options based on request type
        updateInitialApproverOptions(type);
    }

    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');
        }
    }

    function updateInitialApproverOptions(requestType) {
        var approverSelect = document.getElementById('current_approver_id');
        var workflowIndicator = document.getElementById('workflow-indicator');
        var workflowDescription = document.getElementById('workflow-description');
        var workflowText = document.getElementById('workflow-text');
        
        // Clear current options
        approverSelect.innerHTML = '<option value="" disabled selected>Loading...</option>';
        
        if (!requestType) {
            approverSelect.innerHTML = '<option value="" disabled selected>Please select a Purchase Request Type first</option>';
            workflowIndicator.style.display = 'none';
            workflowDescription.style.display = 'none';
            return;
        }
        
        // Show workflow indicator and description
        workflowIndicator.style.display = 'inline-block';
        workflowDescription.style.display = 'block';
        
        // Set workflow descriptions and get appropriate users for initial selection
        switch(requestType) {
            case 'Asset':
                workflowIndicator.textContent = 'Asset Workflow';
                workflowIndicator.className = 'badge badge-primary ml-2';
                workflowText.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 start by escalating to IT Department or other regular users (excludes Heads and Approvers initially)</small>';
                loadInitialApproversForAsset();
                break;
            case 'Project':
                workflowIndicator.textContent = 'Project Workflow';
                workflowIndicator.className = 'badge badge-success ml-2';
                workflowText.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 start by escalating to PMO or other regular users (excludes Heads and Approvers initially)</small>';
                loadInitialApproversForProject();
                break;
            case 'Overwrite':
                workflowIndicator.textContent = 'Overwrite Workflow';
                workflowIndicator.className = 'badge badge-warning ml-2';
                workflowText.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>';
                loadInitialApproversForOverwrite();
                break;
            default:
                workflowIndicator.style.display = 'none';
                workflowDescription.style.display = 'none';
                loadAllInitialApprovers();
        }
    }

    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() {
        // Load users with Asset workflow restrictions
        loadUsersWithWorkflowRestrictions('Asset');
    }

    function loadEscalationTargetsForProject() {
        // Load users with Project workflow restrictions  
        loadUsersWithWorkflowRestrictions('Project');
    }

    function loadEscalationTargetsForOverwrite() {
        // Load all users for Overwrite workflow
        loadUsersWithWorkflowRestrictions('Overwrite');
    }

    // === INITIAL APPROVER SELECTION FUNCTIONS ===
    
    function loadInitialApproversForAsset() {
        loadInitialApproversWithWorkflowRestrictions('Asset');
    }

    function loadInitialApproversForProject() {
        loadInitialApproversWithWorkflowRestrictions('Project');
    }

    function loadInitialApproversForOverwrite() {
        loadInitialApproversWithWorkflowRestrictions('Overwrite');
    }

    function loadAllInitialApprovers() {
        loadInitialApproversWithWorkflowRestrictions('All');
    }

    function loadInitialApproversWithWorkflowRestrictions(workflowType) {
        try {
            var approverSelect = document.getElementById('current_approver_id');
            if (!approverSelect) {
                console.warn('current_approver_id element not found');
                return;
            }
            
            approverSelect.innerHTML = '<option value="" disabled selected>Select Initial Approver</option>';
            
            // Use the users passed from the controller
            var users = @json($users ?? []);
            
            users.forEach(function(user) {
                var option = document.createElement('option');
                option.value = user.id;
                option.textContent = user.name + (user.designation ? ' (' + user.designation + ')' : '');
                
                // Apply workflow restrictions for initial approver selection
                var shouldInclude = true;
                
                if (workflowType === 'Asset') {
                    // Asset workflow: Start with IT Department or regular users, exclude Heads and Approvers initially
                    if (user.is_approver || (user.designation && user.designation.includes('Head'))) {
                        shouldInclude = user.unit_id === 7; // Only allow if IT department
                    }
                } else if (workflowType === 'Project') {
                    // Project workflow: Start with PMO or regular users, exclude Heads and Approvers initially  
                    if (user.is_approver || (user.designation && user.designation.includes('Head'))) {
                        shouldInclude = user.is_pmo || (user.designation && user.designation.toLowerCase().includes('pmo'));
                    }
                } else if (workflowType === 'Overwrite') {
                    // Overwrite allows all users
                    shouldInclude = true;
                } else {
                    // Default: Allow all users
                    shouldInclude = true;
                }
                
                if (shouldInclude) {
                    approverSelect.appendChild(option);
                }
            });
            
            // Add message if no valid initial approvers found
            if (approverSelect.children.length === 1) { // Only the default option
                var option = document.createElement('option');
                option.value = '';
                option.disabled = true;
                option.textContent = 'No valid initial approvers for this workflow';
                approverSelect.appendChild(option);
            }
        } catch (error) {
            console.error('Error in loadInitialApproversWithWorkflowRestrictions:', error);
        }
    }

    function loadUsersWithWorkflowRestrictions(workflowType) {
        try {
            var escalationSelect = document.getElementById('current_approver_id');
            if (!escalationSelect) {
                console.warn('current_approver_id element not found');
                return;
            }
            
            escalationSelect.innerHTML = '<option value="" disabled selected>Select User to Escalate To</option>';
            
            // Use the users passed from the controller
            var users = @json($users ?? []);
            
            users.forEach(function(user) {
                var option = document.createElement('option');
                option.value = user.id;
                option.textContent = user.name + (user.designation ? ' (' + user.designation + ')' : '');
                
                // Apply workflow restrictions
                var shouldInclude = true;
                
                if (workflowType === 'Asset') {
                    // Asset workflow: exclude Heads and Approvers (unless IT department)
                    if (user.is_approver || (user.designation && user.designation.includes('Head'))) {
                        shouldInclude = user.unit_id === 7; // Only allow if IT department
                    }
                } else if (workflowType === 'Project') {
                    // Project workflow: exclude Heads and Approvers (unless PMO)
                    if (user.is_approver || (user.designation && user.designation.includes('Head'))) {
                        shouldInclude = user.is_pmo || (user.designation && user.designation.toLowerCase().includes('pmo'));
                    }
                }
                // Overwrite allows all users
                
                if (shouldInclude) {
                    escalationSelect.appendChild(option);
                }
            });
        } catch (error) {
            console.error('Error in loadUsersWithWorkflowRestrictions:', error);
        }
    }

    function loadAllUsers() {
        try {
            // Fallback: Apply workflow restrictions based on selected request type
            var requestTypeElement = document.getElementById('request_type');
            if (!requestTypeElement) {
                console.warn('request_type element not found');
                return;
            }
            
            var requestType = requestTypeElement.value;
            
            if (!requestType) {
                var escalationSelect = document.getElementById('current_approver_id');
                if (escalationSelect) {
                    escalationSelect.innerHTML = '<option value="" disabled selected>Please select a Purchase Request Type first</option>';
                }
                return;
            }
            
            loadUsersWithWorkflowRestrictions(requestType);
        } catch (error) {
            console.error('Error in loadAllUsers:', error);
        }
    }

    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() {
        console.log('addItemRow called');
        
        try {
            var list = document.getElementById('itemized-list');
            if (!list) {
                console.error('itemized-list container not found');
                return;
            }
            
            var idx = list.querySelectorAll('.item-row').length;
            console.log('Adding item row with index:', idx);
            
            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);
            console.log('Item row added');
            
            // Calculate initial total for new row
            var quantityInput = row.querySelector('[name$="[quantity]"]');
            if (quantityInput) {
                updateTotalCost(quantityInput);
            }
            
            updateTotalAmount();
        } catch (error) {
            console.error('Error in addItemRow:', error);
        }
    }
    function removeItemRow(btn) {
        console.log('removeItemRow called');
        
        try {
            var row = btn.closest('.item-row');
            if (row) {
                row.remove();
                console.log('Item row removed');
                updateTotalAmount();
            } else {
                console.error('Could not find row to remove');
            }
        } catch (error) {
            console.error('Error in removeItemRow:', error);
        }
    }
    function updateTotalCost(input) {
        console.log('updateTotalCost called');
        var row = input.closest('.item-row');
        if (!row) {
            console.error('No row found for input');
            return;
        }
        
        try {
            var qtyInput = row.querySelector('[name$="[quantity]"]');
            var unitCostInput = row.querySelector('[name$="[unit_cost]"]');
            var taxRateInput = row.querySelector('[name$="[tax_rate]"]');
            var deliveryChargeInput = row.querySelector('[name$="[delivery_charge]"]');
            
            console.log('Found inputs:', {
                qty: qtyInput?.value,
                unitCost: unitCostInput?.value,
                taxRate: taxRateInput?.value,
                delivery: deliveryChargeInput?.value
            });
            
            var qty = parseFloat(qtyInput?.value) || 0;
            var unitCost = parseFloat(unitCostInput?.value) || 0;
            var taxRate = parseFloat(taxRateInput?.value) || 0;
            var deliveryCharge = parseFloat(deliveryChargeInput?.value) || 0;
            
            console.log('Parsed values:', { qty, unitCost, taxRate, deliveryCharge });
            
            // Calculate: (Qty × Unit Cost) + Tax + Delivery
            var subtotal = qty * unitCost;
            var taxAmount = subtotal * (taxRate / 100);
            var total = subtotal + taxAmount + deliveryCharge;
            
            console.log('Calculation:', { subtotal, taxAmount, total });
            
            var totalInput = row.querySelector('[name$="[total_cost]"]');
            if (totalInput) {
                totalInput.value = total.toFixed(2);
                console.log('Set total input value to:', total.toFixed(2));
            } else {
                console.error('Total input not found');
            }
            
            updateTotalAmount();
        } catch (error) {
            console.error('Error in updateTotalCost:', error);
        }
    }
    function updateTotalAmount() {
        console.log('updateTotalAmount called');
        
        try {
            var grandTotal = 0;
            var subtotalSum = 0;
            var taxSum = 0;
            var deliverySum = 0;
            
            var itemRows = document.querySelectorAll('.item-row');
            console.log('Found', itemRows.length, 'item rows');
            
            itemRows.forEach(function(row, index) {
                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;
                
                console.log('Row', index, ':', { qty, unitCost, taxRate, deliveryCharge, totalCost });
                
                var itemSubtotal = qty * unitCost;
                var itemTax = itemSubtotal * (taxRate / 100);
                
                subtotalSum += itemSubtotal;
                taxSum += itemTax;
                deliverySum += deliveryCharge;
                grandTotal += totalCost;
            });
            
            console.log('Totals:', { subtotalSum, taxSum, deliverySum, grandTotal });
            
            // Update breakdown fields
            var subtotalField = document.getElementById('subtotal_amount');
            var taxField = document.getElementById('tax_amount');
            var deliveryField = document.getElementById('delivery_amount');
            var totalField = document.getElementById('total_amount');
            
            if (subtotalField) subtotalField.value = subtotalSum.toFixed(2);
            if (taxField) taxField.value = taxSum.toFixed(2);
            if (deliveryField) deliveryField.value = deliverySum.toFixed(2);
            if (totalField) totalField.value = grandTotal.toFixed(2);
            
            console.log('Updated breakdown fields');
        } catch (error) {
            console.error('Error in updateTotalAmount:', error);
        }
    }
    // Initialize calculations on page load and when DOM is ready
    function initializeCalculations() {
        console.log('Initializing calculations...');
        
        try {
            // Initialize all existing item rows
            var existingRows = document.querySelectorAll('.item-row');
            console.log('Found', existingRows.length, 'existing rows to initialize');
            
            existingRows.forEach(function(row, index){
                console.log('Initializing item row', index);
                var quantityInput = row.querySelector('[name$="[quantity]"]');
                if (quantityInput) {
                    updateTotalCost(quantityInput);
                }
            });
            
            console.log('Initialization complete');
        } catch (error) {
            console.error('Error during initialization:', error);
        }
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Page loaded, initializing...');
        
        try {
            // Initialize form elements
            var categorySelect = document.getElementById('category');
            var urgencySelect = document.getElementById('urgency');
            var requestTypeSelect = document.getElementById('request_type');
            
            if (categorySelect) toggleOtherCategory(categorySelect);
            if (urgencySelect) setUrgencyColor(urgencySelect);
            
            toggleUnitField();
            toggleProjectName();
            toggleCompanyIdField(); // Initialize the Company/IC field visibility
            
            // Add event listener for request type changes to update approver options
            if (requestTypeSelect) {
                requestTypeSelect.addEventListener('change', function() {
                    toggleProjectName(); // This now also calls updateInitialApproverOptions
                });
            }
            
            // Add event listener for transfer_to field changes
            var transferToSelect = document.getElementById('transfer_to');
            if (transferToSelect) {
                transferToSelect.addEventListener('change', toggleCompanyIdField);
            }
            
            // Initialize calculations with a slight delay to ensure all elements are ready
            setTimeout(initializeCalculations, 100);
            setTimeout(initializeCalculations2, 150);
            
        } catch (error) {
            console.error('Error during initialization:', error);
        }
    });

    // ===== SECOND ITEMIZED LIST FUNCTIONS =====
    
    function updateTotalCost2(input) {
        console.log('updateTotalCost2 called');
        var row = input.closest('.item-row-2');
        if (!row) {
            console.error('No row found for input in list 2');
            return;
        }
        
        try {
            var qty = parseFloat(row.querySelector('[name^="items2"][name$="[quantity]"]').value) || 0;
            var unitCost = parseFloat(row.querySelector('[name^="items2"][name$="[unit_cost]"]').value) || 0;
            var taxRate = parseFloat(row.querySelector('[name^="items2"][name$="[tax_rate]"]').value) || 0;
            var deliveryCharge = parseFloat(row.querySelector('[name^="items2"][name$="[delivery_charge]"]').value) || 0;
            
            console.log('List 2 Values:', { qty, unitCost, taxRate, deliveryCharge });
            
            // Calculate: (Qty × Unit Cost) + Tax + Delivery
            var subtotal = qty * unitCost;
            var taxAmount = subtotal * (taxRate / 100);
            var total = subtotal + taxAmount + deliveryCharge;
            
            console.log('List 2 Calculated total:', total);
            
            var totalInput = row.querySelector('[name^="items2"][name$="[total_cost]"]');
            if (totalInput) {
                totalInput.value = total.toFixed(2);
                console.log('Set list 2 total input value to:', total.toFixed(2));
            } else {
                console.error('List 2 total input not found');
            }
            
        } catch (error) {
            console.error('Error in updateTotalCost2:', error);
        }
    }

    function addItemRow2() {
        console.log('addItemRow2 called');
        
        try {
            var list = document.getElementById('itemized-list-2');
            if (!list) {
                console.error('itemized-list-2 container not found');
                return;
            }
            
            var idx = list.querySelectorAll('.item-row-2').length;
            console.log('Adding item row 2 with index:', idx);
            
            var row = document.createElement('div');
            row.className = 'row py-3 px-3 item-row-2 align-items-center border-bottom';
            row.innerHTML = `
                <div class="col-2">
                    <input type="text" class="form-control form-control-sm" id="item2_name_${idx}" name="items2[${idx}][name]" placeholder="Enter item name..." required>
                </div>
                <div class="col-1">
                    <input type="number" class="form-control form-control-sm text-center" id="item2_quantity_${idx}" name="items2[${idx}][quantity]" min="1" value="1" required oninput="updateTotalCost2(this)">
                </div>
                <div class="col-2">
                    <input type="number" class="form-control form-control-sm" id="unit2_cost_${idx}" name="items2[${idx}][unit_cost]" min="0" step="0.01" value="0.00" placeholder="0.00" required oninput="updateTotalCost2(this)">
                </div>
                <div class="col-2">
                    <div class="input-group input-group-sm">
                        <input type="number" class="form-control text-center" id="tax2_rate_${idx}" name="items2[${idx}][tax_rate]" min="0" max="100" step="0.01" value="6.00" required oninput="updateTotalCost2(this)">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
                <div class="col-1">
                    <input type="number" class="form-control form-control-sm" id="delivery2_charge_${idx}" name="items2[${idx}][delivery_charge]" min="0" step="0.01" value="0.00" placeholder="0.00" oninput="updateTotalCost2(this)">
                </div>
                <div class="col-2">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-info text-white">RM</span>
                        <input type="number" class="form-control fw-bold bg-light" id="total2_cost_${idx}" name="items2[${idx}][total_cost]" placeholder="0.00" readonly>
                    </div>
                </div>
                <div class="col-1">
                    <input type="file" class="form-control form-control-sm" id="item2_attachment_${idx}" name="items2[${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="removeItemRow2(this)">
                        <i class="fas fa-trash"></i> Remove Item
                    </button>
                </div>
            `;
            list.appendChild(row);
            console.log('Item row 2 added');
            
            // Calculate initial total for new row
            var quantityInput = row.querySelector('[name^="items2"][name$="[quantity]"]');
            if (quantityInput) {
                updateTotalCost2(quantityInput);
            }
            
        } catch (error) {
            console.error('Error in addItemRow2:', error);
        }
    }

    function removeItemRow2(btn) {
        console.log('removeItemRow2 called');
        
        try {
            var row = btn.closest('.item-row-2');
            if (row) {
                row.remove();
                console.log('Item row 2 removed');
            } else {
                console.error('Could not find row 2 to remove');
            }
        } catch (error) {
            console.error('Error in removeItemRow2:', error);
        }
    }

    function initializeCalculations2() {
        console.log('Initializing calculations for list 2...');
        
        try {
            // Initialize all existing item rows in list 2
            var existingRows = document.querySelectorAll('.item-row-2');
            console.log('Found', existingRows.length, 'existing rows in list 2 to initialize');
            
            existingRows.forEach(function(row, index){
                console.log('Initializing item row 2', index);
                var quantityInput = row.querySelector('[name^="items2"][name$="[quantity]"]');
                if (quantityInput) {
                    updateTotalCost2(quantityInput);
                }
            });
            
            console.log('List 2 initialization complete');
        } catch (error) {
            console.error('Error during list 2 initialization:', error);
        }
    }

    // Test function to verify JavaScript is working
    function testJavaScript() {
        console.log('JavaScript is working!');
        alert('JavaScript is working! Check console for detailed logs.');
        
        // Test if DOM elements exist
        var list1 = document.getElementById('itemized-list');
        var list2 = document.getElementById('itemized-list-2');
        
        console.log('List 1 found:', !!list1);
        console.log('List 2 found:', !!list2);
        console.log('Item rows in list 1:', list1 ? list1.querySelectorAll('.item-row').length : 0);
        console.log('Item rows in list 2:', list2 ? list2.querySelectorAll('.item-row-2').length : 0);
        
        // Debug first row values
        if (list1) {
            var firstRow = list1.querySelector('.item-row');
            if (firstRow) {
                console.log('=== FIRST ROW DEBUG ===');
                var qtyInput = firstRow.querySelector('[name$="[quantity]"]');
                var unitCostInput = firstRow.querySelector('[name$="[unit_cost]"]');
                var taxRateInput = firstRow.querySelector('[name$="[tax_rate]"]');
                var deliveryInput = firstRow.querySelector('[name$="[delivery_charge]"]');
                var totalInput = firstRow.querySelector('[name$="[total_cost]"]');
                
                console.log('Quantity input:', qtyInput ? qtyInput.value : 'NOT FOUND');
                console.log('Unit cost input:', unitCostInput ? unitCostInput.value : 'NOT FOUND');
                console.log('Tax rate input:', taxRateInput ? taxRateInput.value : 'NOT FOUND');
                console.log('Delivery input:', deliveryInput ? deliveryInput.value : 'NOT FOUND');
                console.log('Total input:', totalInput ? totalInput.value : 'NOT FOUND');
            }
        }
    }

    // Reset all fields to default values
    function resetAllFields() {
        console.log('Resetting all fields...');
        
        try {
            // Reset first itemized list
            var list1 = document.getElementById('itemized-list');
            if (list1) {
                var rows = list1.querySelectorAll('.item-row');
                rows.forEach(function(row, index) {
                    if (index === 0) {
                        // Reset first row to defaults
                        var qtyInput = row.querySelector('[name$="[quantity]"]');
                        var unitCostInput = row.querySelector('[name$="[unit_cost]"]');
                        var taxRateInput = row.querySelector('[name$="[tax_rate]"]');
                        var deliveryInput = row.querySelector('[name$="[delivery_charge]"]');
                        var totalInput = row.querySelector('[name$="[total_cost]"]');
                        
                        if (qtyInput) qtyInput.value = '1';
                        if (unitCostInput) unitCostInput.value = '0.00';
                        if (taxRateInput) taxRateInput.value = '6.00';
                        if (deliveryInput) deliveryInput.value = '0.00';
                        if (totalInput) totalInput.value = '0.00';
                    } else {
                        // Remove additional rows
                        row.remove();
                    }
                });
            }
            
            // Reset cost breakdown
            var subtotalField = document.getElementById('subtotal_amount');
            var taxField = document.getElementById('tax_amount');
            var deliveryField = document.getElementById('delivery_amount');
            var totalField = document.getElementById('total_amount');
            
            if (subtotalField) subtotalField.value = '0.00';
            if (taxField) taxField.value = '0.00';
            if (deliveryField) deliveryField.value = '0.00';
            if (totalField) totalField.value = '0.00';
            
            console.log('Reset complete');
            alert('All fields reset to default values');
        } catch (error) {
            console.error('Error in resetAllFields:', error);
        }
    }
</script>
@endsection