@php
    $project = $project ?? null;
    $selectedBranding = old('branding', $project->branding ?? []);
    if (!is_array($selectedBranding)) {
        $selectedBranding = is_string($selectedBranding) ? json_decode($selectedBranding, true) ?: [$selectedBranding] : [];
    }
@endphp

<style>
.form-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.form-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-card-title svg {
    color: var(--color-brand);
}
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 992px) {
    .form-grid-3, .form-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
}

.form-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
}
.form-label span.req {
    color: var(--color-danger);
    margin-left: 2px;
}
.form-control {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}
select.form-control:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 32px;
}

/* Multiselect branding pills */
.branding-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.branding-pill-item {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.branding-pill-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.branding-pill-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt, #f8fafc);
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--color-text);
    transition: all 0.15s ease;
}
.branding-pill-item input[type="checkbox"]:checked + .branding-pill-box {
    background: var(--color-brand-soft, #e6f4ed);
    border-color: var(--color-brand, #10b981);
    color: var(--color-brand-strong, #047857);
    font-weight: 600;
}
.branding-pill-item:hover .branding-pill-box {
    border-color: var(--color-brand);
}

.form-actions-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
</style>

<div style="max-width: 1200px; margin: 0 auto;">

    {{-- Card 1: Project Information --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></svg>
            Project Information
        </div>
        <div class="form-grid-3">
            <label class="form-label">
                <span>Project Name<span class="req">*</span></span>
                <input class="form-control @error('name') field-invalid @enderror" type="text" name="name" value="{{ old('name', $project->name ?? '') }}" placeholder="e.g. Corporate Festival Gifting 2026" required>
                @error('name')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Project ID</span>
                @if(isset($project))
                    <input class="form-control" type="text" name="code" value="{{ $project->code }}" readonly style="background:var(--color-surface-alt);color:var(--color-muted);cursor:not-allowed;">
                @else
                    <input class="form-control" type="text" value="Auto-generated" disabled style="background:var(--color-surface-alt);color:var(--color-muted);cursor:not-allowed;">
                @endif
            </label>

            <label class="form-label">
                <span>Project Mode</span>
                <select name="project_mode" class="form-control @error('project_mode') field-invalid @enderror">
                    <option value="">Select Mode</option>
                    @foreach(['Corporate Gifting' => 'Corporate Gifting', 'Custom' => 'Custom'] as $val => $lbl)
                        <option value="{{ $val }}" @selected(old('project_mode', $project->project_mode ?? '') === $val)>{{ $lbl }}</option>
                    @endforeach
                </select>
                @error('project_mode')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Status<span class="req">*</span></span>
                <select name="status" class="form-control @error('status') field-invalid @enderror" required>
                    @foreach(['active' => 'Active', 'on_hold' => 'On Hold', 'completed' => 'Completed', 'archived' => 'Archived'] as $val => $lbl)
                        <option value="{{ $val }}" @selected(old('status', $project->status ?? 'active') === $val)>{{ $lbl }}</option>
                    @endforeach
                </select>
                @error('status')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Start Date</span>
                <input class="form-control @error('start_date') field-invalid @enderror" type="date" name="start_date" value="{{ old('start_date', isset($project->start_date) ? \Illuminate\Support\Carbon::parse($project->start_date)->format('Y-m-d') : '') }}">
                @error('start_date')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>End Date</span>
                <input class="form-control @error('end_date') field-invalid @enderror" type="date" name="end_date" value="{{ old('end_date', isset($project->end_date) ? \Illuminate\Support\Carbon::parse($project->end_date)->format('Y-m-d') : '') }}">
                @error('end_date')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
    </div>

    {{-- Card 2: Client Information --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Client Information
        </div>
        <div class="form-grid-4">
            <label class="form-label">
                <span>Client Name<span class="req">*</span></span>
                <input class="form-control @error('client_name') field-invalid @enderror" type="text" name="client_name" value="{{ old('client_name', $project->client_name ?? '') }}" placeholder="e.g. Acme Corp" required>
                @error('client_name')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Email</span>
                <input class="form-control @error('client_email') field-invalid @enderror" type="email" name="client_email" value="{{ old('client_email', $project->client_email ?? '') }}" placeholder="client@example.com">
                @error('client_email')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Phone</span>
                <input class="form-control @error('client_phone') field-invalid @enderror" type="text" name="client_phone" value="{{ old('client_phone', $project->client_phone ?? '') }}" placeholder="+91 9876543210">
                @error('client_phone')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>GST</span>
                <input class="form-control @error('client_gst') field-invalid @enderror" type="text" name="client_gst" value="{{ old('client_gst', $project->client_gst ?? '') }}" placeholder="27AAAAA0000A1Z5">
                @error('client_gst')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
    </div>

    {{-- Card 3: Purchase Order --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            Purchase Order
        </div>
        <div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;">
            <label class="form-label">
                <span>PO Number</span>
                <input class="form-control @error('po_number') field-invalid @enderror" type="text" name="po_number" value="{{ old('po_number', $project->po_number ?? '') }}" placeholder="PO-2026-9901">
                @error('po_number')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>PO Date</span>
                <input class="form-control @error('po_date') field-invalid @enderror" type="date" name="po_date" value="{{ old('po_date', isset($project->po_date) ? \Illuminate\Support\Carbon::parse($project->po_date)->format('Y-m-d') : '') }}">
                @error('po_date')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Project Value (₹)</span>
                <input class="form-control @error('project_value') field-invalid @enderror" type="number" step="0.01" name="project_value" id="po_project_value" value="{{ old('project_value', $project->project_value ?? '') }}" placeholder="e.g. 150000.00" min="0">
                @error('project_value')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Amount Per Order (₹)<span class="req">*</span></span>
                <input class="form-control @error('amount') field-invalid @enderror" type="number" step="0.01" name="amount" id="po_order_amount" value="{{ old('amount', $project->amount ?? '') }}" placeholder="e.g. 1500.00" required min="0" oninput="autoCalcProjectValue()">
                @error('amount')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>

        <div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px;">
            <label class="form-label">
                <span>Total Plants Order</span>
                <input class="form-control @error('order_quantity') field-invalid @enderror" type="number" name="order_quantity" id="po_order_quantity" value="{{ old('order_quantity', $project->order_quantity ?? '') }}" placeholder="e.g. 500" min="0" oninput="autoCalcProjectValue()">
                @error('order_quantity')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Box Pack Size</span>
                <input class="form-control @error('box_pack_size') field-invalid @enderror" type="number" name="box_pack_size" id="po_box_pack_size" value="{{ old('box_pack_size', $project->box_pack_size ?? '') }}" placeholder="e.g. 20" min="1">
                @error('box_pack_size')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <div></div>
            <div></div>
        </div>
    </div>

    {{-- Merged Card: Product, Plant & Packaging Requirements --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
            Product, Plant & Packaging Requirements
        </div>

        <!-- Interactive Add Requirement Bar -->
        <div style="background: var(--color-background-soft, #f8fafc); border: 1.5px solid var(--color-border); border-radius: 10px; padding: 20px; margin-bottom: 20px;">
            <div style="font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 12px;">
                Add Requirement Item
            </div>
            <div style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; width: 100%;">
                <label style="display: flex; flex-direction: column; gap: 4px; width: 180px; flex-shrink: 0;">
                    <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Category</span>
                    <select id="new_req_cat" onchange="onReqCategoryChange(this.value)" class="form-control" style="font-weight: 600; height: 42px;">
                        <option value="plants_name">Plants Name</option>
                        <option value="master_box_type">Master Box</option>
                        <option value="sub_box_type">Sub Box</option>
                        <option value="pot_type">Pots</option>
                        <option value="brandings">Branding</option>
                        <option value="other">Other</option>
                    </select>
                </label>

                <div id="new_req_val_container" style="display: flex; gap: 12px; align-items: flex-end; flex: 1; flex-wrap: wrap; min-width: 250px;">
                    <!-- Dynamically filled by JS -->
                </div>

                <label style="display: flex; flex-direction: column; gap: 4px; width: 120px; flex-shrink: 0;">
                    <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Quantity *</span>
                    <input class="form-control" type="number" id="new_req_qty_input" placeholder="e.g. 500" min="1" value="1" style="height: 42px;">
                </label>

                <button type="button" class="btn btn-primary" onclick="addRequirementFromBar()" style="padding: 0 24px; height: 42px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; white-space: nowrap;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Add Item
                </button>
            </div>
        </div>

        <!-- Added Requirements List Table -->
        <div style="font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 10px;">
            Added Requirements (<span id="req-count-badge">0</span>)
        </div>

        <div style="border: 1.5px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-background);">
            <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem;">
                <thead>
                    <tr style="background: var(--color-background-soft, #f8fafc); border-bottom: 1.5px solid var(--color-border);">
                        <th style="padding: 12px 16px; font-weight: 600; color: var(--color-text-muted); width: 25%;">REQUIREMENT TYPE</th>
                        <th style="padding: 12px 16px; font-weight: 600; color: var(--color-text-muted);">SPECIFICATION / NAME</th>
                        <th style="padding: 12px 16px; font-weight: 600; color: var(--color-text-muted); width: 20%;">QUANTITY</th>
                        <th style="padding: 12px 16px; font-weight: 600; color: var(--color-text-muted); text-align: right; width: 80px;">ACTION</th>
                    </tr>
                </thead>
                <tbody id="requirements-table-body">
                    @php
                        $initialReqs = old('project_requirements', isset($project) ? $project->requirements_list : []);
                    @endphp
                    {{-- Dynamically populated via JS --}}
                </tbody>
            </table>
            <div id="req-empty-msg" style="padding: 24px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; display: none;">
                No requirement items added yet. Choose an option above and click <strong>+ Add</strong>.
            </div>
        </div>
    </div>

    {{-- Card 6: Delivery Information --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
            Delivery Information
        </div>
        <div class="form-grid-3">
            <label class="form-label">
                <span>Delivery Location</span>
                <select name="delivery_location" class="form-control @error('delivery_location') field-invalid @enderror">
                    <option value="">Select Location Strategy</option>
                    @foreach(['Single Destination' => 'Single Destination', 'Multi-Location Bulk' => 'Multi-Location Bulk', 'Pan India Direct-to-Recipient' => 'Pan India Direct-to-Recipient', 'Warehouse' => 'Warehouse', 'Other' => 'Other'] as $val => $lbl)
                        <option value="{{ $val }}" @selected(old('delivery_location', $project->delivery_location ?? '') === $val)>{{ $lbl }}</option>
                    @endforeach
                </select>
                @error('delivery_location')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Delivery Mode</span>
                <select name="delivery_mode" class="form-control @error('delivery_mode') field-invalid @enderror">
                    <option value="">Select Delivery Mode</option>
                    @foreach(['Courier' => 'Courier', 'Direct Transport' => 'Direct Transport', 'Hand Delivery' => 'Hand Delivery', 'Other' => 'Other'] as $val => $lbl)
                        <option value="{{ $val }}" @selected(old('delivery_mode', $project->delivery_mode ?? '') === $val)>{{ $lbl }}</option>
                    @endforeach
                </select>
                @error('delivery_mode')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Occasion</span>
                <select name="occasion" class="form-control @error('occasion') field-invalid @enderror">
                    <option value="">Select Occasion</option>
                    @foreach(['Diwali Gifting' => 'Diwali Gifting', 'Festival' => 'Festival', 'Corporate Event' => 'Corporate Event', 'Social' => 'Social', 'Other' => 'Other'] as $val => $lbl)
                        <option value="{{ $val }}" @selected(old('occasion', $project->occasion ?? '') === $val)>{{ $lbl }}</option>
                    @endforeach
                </select>
                @error('occasion')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
    </div>

    {{-- Card 7: Description & Notes --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5Z"/></svg>
            Description & Notes
        </div>
        <div class="form-grid-2">
            <label class="form-label">
                <span>Description</span>
                <textarea class="form-control @error('description') field-invalid @enderror" name="description" rows="3" placeholder="Provide general project scope, client instructions, or special details...">{{ old('description', $project->description ?? '') }}</textarea>
                @error('description')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Internal Notes</span>
                <textarea class="form-control @error('notes') field-invalid @enderror" name="notes" rows="3" placeholder="Internal operational notes, warehouse instructions...">{{ old('notes', $project->notes ?? '') }}</textarea>
                @error('notes')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
    </div>

    {{-- Bottom Action Buttons --}}
    <div class="form-actions-card">
        <button class="btn btn-primary" type="submit" style="padding: 10px 24px; font-weight: 600;">
            {{ isset($project) ? 'Update Project' : 'Save Project' }}
        </button>
    </div>

</div>

<script>
let reqRowIndex = 0;

const categoryOptions = {
    'plants_name': { label: 'Plants Name', badgeClass: 'badge-success' },
    'master_box_type': { label: 'Master Box', badgeClass: 'badge-info' },
    'sub_box_type': { label: 'Sub Box', badgeClass: 'badge-info' },
    'pot_type': { label: 'Pots', badgeClass: 'badge-secondary' },
    'brandings': { label: 'Branding', badgeClass: 'badge-warning' },
    'other': { label: 'Other', badgeClass: 'badge-primary' }
};

function toggleCustomField(type, val) {
    const lbl = document.getElementById(type + '_custom_lbl');
    if (lbl) {
        lbl.style.display = (val === 'Custom') ? 'flex' : 'none';
    }
}

function onReqCategoryChange(cat) {
    const container = document.getElementById('new_req_val_container');
    if (!container) return;

    if (cat === 'plants_name') {
        container.innerHTML = `
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 2; min-width: 180px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Plant Name *</span>
                <input class="form-control" type="text" id="plant_name_input" placeholder="e.g. Jade Plant" style="height: 42px;">
            </label>
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Size</span>
                <select id="plant_size_select" onchange="toggleCustomField('plant_size', this.value)" class="form-control" style="height: 42px;">
                    <option value="Small">Small</option>
                    <option value="Medium">Medium</option>
                    <option value="Large">Large</option>
                    <option value="Custom">Custom...</option>
                </select>
            </label>
            <label id="plant_size_custom_lbl" style="display: none; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Custom Size</span>
                <input class="form-control" type="text" id="plant_size_custom_input" placeholder="e.g. Extra Small" style="height: 42px;">
            </label>
        `;
    } else if (cat === 'master_box_type' || cat === 'sub_box_type') {
        container.innerHTML = `
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Box Type</span>
                <select id="box_type_select" onchange="toggleCustomField('box_type', this.value)" class="form-control" style="height: 42px;">
                    <option value="Brown">Brown</option>
                    <option value="Printed">Printed</option>
                    <option value="Custom">Custom...</option>
                </select>
            </label>
            <label id="box_type_custom_lbl" style="display: none; flex-direction: column; gap: 4px; flex: 1.5; min-width: 140px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Custom Type</span>
                <input class="form-control" type="text" id="box_type_custom_input" placeholder="e.g. White" style="height: 42px;">
            </label>
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 1.5; min-width: 140px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Size (L x W x H) *</span>
                <input class="form-control" type="text" id="box_size_input" placeholder="e.g. 12x12x12" style="height: 42px;">
            </label>
        `;
    } else if (cat === 'pot_type') {
        container.innerHTML = `
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Pot Type</span>
                <select id="pot_type_select" onchange="toggleCustomField('pot_type', this.value)" class="form-control" style="height: 42px;">
                    <option value="Plastic">Plastic</option>
                    <option value="Ceramic">Ceramic</option>
                    <option value="Custom">Custom...</option>
                </select>
            </label>
            <label id="pot_type_custom_lbl" style="display: none; flex-direction: column; gap: 4px; flex: 1.5; min-width: 140px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Custom Type</span>
                <input class="form-control" type="text" id="pot_type_custom_input" placeholder="e.g. Terracotta" style="height: 42px;">
            </label>
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Size</span>
                <select id="pot_size_select" onchange="toggleCustomField('pot_size', this.value)" class="form-control" style="height: 42px;">
                    <option value="2 inch">2 inch</option>
                    <option value="3 inch">3 inch</option>
                    <option value="5 inch">5 inch</option>
                    <option value="Custom">Custom...</option>
                </select>
            </label>
            <label id="pot_size_custom_lbl" style="display: none; flex-direction: column; gap: 4px; flex: 1; min-width: 120px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Custom Size</span>
                <input class="form-control" type="text" id="pot_size_custom_input" placeholder="e.g. 4 inch" style="height: 42px;">
            </label>
        `;
    } else if (cat === 'brandings') {
        container.innerHTML = `
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 1.5; min-width: 180px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Branding Type</span>
                <select id="branding_type_select" onchange="toggleCustomField('branding_type', this.value)" class="form-control" style="height: 42px;">
                    <option value="Logo Sticker">Logo Sticker</option>
                    <option value="Branded Ribbon">Branded Ribbon</option>
                    <option value="Custom">Custom...</option>
                </select>
            </label>
            <label id="branding_type_custom_lbl" style="display: none; flex-direction: column; gap: 4px; flex: 1.5; min-width: 160px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Custom Branding</span>
                <input class="form-control" type="text" id="branding_type_custom_input" placeholder="e.g. Gift Card" style="height: 42px;">
            </label>
        `;
    } else if (cat === 'other') {
        container.innerHTML = `
            <label style="display: flex; flex-direction: column; gap: 4px; flex: 1.5; min-width: 180px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Other Item Type</span>
                <select id="other_type_select" onchange="toggleCustomField('other_type', this.value)" class="form-control" style="height: 42px;">
                    <option value="Care Tips">Care Tips</option>
                    <option value="Flags">Flags</option>
                    <option value="Labels">Labels</option>
                    <option value="Tape">Tape</option>
                    <option value="Custom">Custom...</option>
                </select>
            </label>
            <label id="other_type_custom_lbl" style="display: none; flex-direction: column; gap: 4px; flex: 1.5; min-width: 160px;">
                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Custom Item Spec</span>
                <input class="form-control" type="text" id="other_type_custom_input" placeholder="e.g. Coloured Stones" style="height: 42px;">
            </label>
        `;
    }
}

function addRequirementFromBar() {
    const catSelect = document.getElementById('new_req_cat');
    const qtyInput = document.getElementById('new_req_qty_input');

    if (!catSelect) return;

    const cat = catSelect.value;
    const qty = parseInt(qtyInput ? qtyInput.value : 0) || 0;
    let name = '';

    if (cat === 'plants_name') {
        const nameInp = document.getElementById('plant_name_input');
        const sizeSel = document.getElementById('plant_size_select');
        const customSizeInp = document.getElementById('plant_size_custom_input');

        if (!nameInp || !nameInp.value.trim()) {
            alert('Please enter a Plant Name.');
            return;
        }

        let size = sizeSel.value;
        if (size === 'Custom') {
            size = customSizeInp ? customSizeInp.value.trim() : '';
            if (!size) {
                alert('Please enter a Custom Plant Size.');
                return;
            }
        }
        name = `${nameInp.value.trim()} (${size})`;
    } else if (cat === 'master_box_type' || cat === 'sub_box_type') {
        const typeSel = document.getElementById('box_type_select');
        const customTypeInp = document.getElementById('box_type_custom_input');
        const sizeInp = document.getElementById('box_size_input');

        let type = typeSel.value;
        if (type === 'Custom') {
            type = customTypeInp ? customTypeInp.value.trim() : '';
            if (!type) {
                alert('Please enter a Custom Box Type.');
                return;
            }
        }

        if (!sizeInp || !sizeInp.value.trim()) {
            alert('Please enter Box Size.');
            return;
        }

        name = `${type} Box (Size: ${sizeInp.value.trim()})`;
    } else if (cat === 'pot_type') {
        const typeSel = document.getElementById('pot_type_select');
        const customTypeInp = document.getElementById('pot_type_custom_input');
        const sizeSel = document.getElementById('pot_size_select');
        const customSizeInp = document.getElementById('pot_size_custom_input');

        let type = typeSel.value;
        if (type === 'Custom') {
            type = customTypeInp ? customTypeInp.value.trim() : '';
            if (!type) {
                alert('Please enter a Custom Pot Type.');
                return;
            }
        }

        let size = sizeSel.value;
        if (size === 'Custom') {
            size = customSizeInp ? customSizeInp.value.trim() : '';
            if (!size) {
                alert('Please enter a Custom Pot Size.');
                return;
            }
        }

        name = `${type} Pot (Size: ${size})`;
    } else if (cat === 'brandings') {
        const typeSel = document.getElementById('branding_type_select');
        const customTypeInp = document.getElementById('branding_type_custom_input');

        let type = typeSel.value;
        if (type === 'Custom') {
            type = customTypeInp ? customTypeInp.value.trim() : '';
            if (!type) {
                alert('Please enter Custom Branding specification.');
                return;
            }
        }
        name = type;
    } else if (cat === 'other') {
        const typeSel = document.getElementById('other_type_select');
        const customTypeInp = document.getElementById('other_type_custom_input');

        let type = typeSel.value;
        if (type === 'Custom') {
            type = customTypeInp ? customTypeInp.value.trim() : '';
            if (!type) {
                alert('Please enter Custom Item specification.');
                return;
            }
        }
        name = type;
    }

    if (!name) {
        alert('Please complete the item specifications.');
        return;
    }

    addRequirementRow(cat, name, qty);
    
    // Reset fields back to empty where appropriate
    if (document.getElementById('plant_name_input')) document.getElementById('plant_name_input').value = '';
    if (document.getElementById('plant_size_custom_input')) document.getElementById('plant_size_custom_input').value = '';
    if (document.getElementById('box_type_custom_input')) document.getElementById('box_type_custom_input').value = '';
    if (document.getElementById('box_size_input')) document.getElementById('box_size_input').value = '';
    if (document.getElementById('pot_type_custom_input')) document.getElementById('pot_type_custom_input').value = '';
    if (document.getElementById('pot_size_custom_input')) document.getElementById('pot_size_custom_input').value = '';
    if (document.getElementById('branding_type_custom_input')) document.getElementById('branding_type_custom_input').value = '';
    if (document.getElementById('other_type_custom_input')) document.getElementById('other_type_custom_input').value = '';
    
    // Also reset selections to first option
    if (document.getElementById('plant_size_select')) {
        document.getElementById('plant_size_select').value = 'Small';
        toggleCustomField('plant_size', 'Small');
    }
    if (document.getElementById('box_type_select')) {
        document.getElementById('box_type_select').value = 'Brown';
        toggleCustomField('box_type', 'Brown');
    }
    if (document.getElementById('pot_type_select')) {
        document.getElementById('pot_type_select').value = 'Plastic';
        toggleCustomField('pot_type', 'Plastic');
    }
    if (document.getElementById('pot_size_select')) {
        document.getElementById('pot_size_select').value = '2 inch';
        toggleCustomField('pot_size', '2 inch');
    }
    if (document.getElementById('branding_type_select')) {
        document.getElementById('branding_type_select').value = 'Logo Sticker';
        toggleCustomField('branding_type', 'Logo Sticker');
    }
    if (document.getElementById('other_type_select')) {
        document.getElementById('other_type_select').value = 'Care Tips';
        toggleCustomField('other_type', 'Care Tips');
    }
}

function addRequirementRow(cat, name, qty) {
    const tbody = document.getElementById('requirements-table-body');
    if (!tbody) return;

    const catMeta = categoryOptions[cat] || { label: cat, badgeClass: 'badge-secondary' };
    const tr = document.createElement('tr');
    tr.style.borderBottom = '1px solid var(--color-border)';

    tr.innerHTML = `
        <td style="padding: 12px 16px;">
            <span class="badge ${catMeta.badgeClass}" style="font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; border: none; font-weight: 600;">
                ${catMeta.label}
            </span>
            <input type="hidden" name="project_requirements[${reqRowIndex}][category]" value="${cat}">
        </td>
        <td style="padding: 12px 16px; font-weight: 600; color: var(--color-text);">
            ${name}
            <input type="hidden" name="project_requirements[${reqRowIndex}][name]" value="${name}">
        </td>
        <td style="padding: 12px 16px; color: var(--color-text-muted);">
            <strong style="color: var(--color-text);">${qty}</strong> ${cat === 'box_pack_size' ? 'per box' : 'units'}
            <input type="hidden" name="project_requirements[${reqRowIndex}][quantity]" value="${qty}">
        </td>
        <td style="padding: 12px 16px; text-align: right;">
            <button type="button" class="btn btn-danger" onclick="removeRequirementRow(this)" style="padding: 4px 8px; font-size: 0.85rem; line-height: 1;">&times;</button>
        </td>
    `;

    tbody.appendChild(tr);
    reqRowIndex++;
    updateRequirementsListState();
}

function removeRequirementRow(btn) {
    const tr = btn.closest('tr');
    if (tr) {
        tr.remove();
        updateRequirementsListState();
    }
}

function updateRequirementsListState() {
    const tbody = document.getElementById('requirements-table-body');
    const emptyMsg = document.getElementById('req-empty-msg');
    const badge = document.getElementById('req-count-badge');
    if (!tbody) return;

    const count = tbody.querySelectorAll('tr').length;
    if (badge) badge.textContent = count;
    if (emptyMsg) {
        emptyMsg.style.display = count === 0 ? 'block' : 'none';
    }
}

function autoCalcProjectValue() {
    const qtyInput = document.getElementById('po_order_quantity');
    const amtInput = document.getElementById('po_order_amount');
    const valInput = document.getElementById('po_project_value');

    if (!qtyInput || !amtInput || !valInput) return;

    const qty = parseFloat(qtyInput.value) || 0;
    const amt = parseFloat(amtInput.value) || 0;

    if (qty > 0 && amt > 0 && (!valInput.value || valInput.dataset.autoCalculated === "true")) {
        valInput.value = (qty * amt).toFixed(2);
        valInput.dataset.autoCalculated = "true";
    }
}

document.addEventListener('DOMContentLoaded', function() {
    onReqCategoryChange('plants_name');
    const initialData = @json($initialReqs);
    if (Array.isArray(initialData) && initialData.length > 0) {
        initialData.forEach(item => {
            if (item.category && item.name) {
                addRequirementRow(item.category, item.name, item.quantity || 0);
            }
        });
    } else {
        updateRequirementsListState();
    }
});
</script>