@extends('layouts.app')
@section('title', 'Create Production Schedule')

@section('content')
<style>
    /* ============================================
       CARD & LAYOUT
       ============================================ */
    .schedule-card {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: none;
        margin-top: 20px;
    }
    .schedule-card .card-header {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        padding: 18px 28px;
        border-radius: 10px 10px 0 0;
    }
    .schedule-card .card-body {
        padding: 28px;
    }
    
    .form-group {
        margin-bottom: 22px;
    }
    .form-group label {
        font-weight: 500;
        font-size: 14px;
        color: #495057;
        margin-bottom: 6px;
        display: block;
    }
    .form-group label .text-danger {
        color: #dc3545;
    }
    .form-control {
        border-radius: 8px;
        border: 1px solid #ced4da;
        padding: 12px 16px;
        font-size: 15px;
        transition: all 0.2s ease;
        background: #ffffff;
        color: #495057;
        width: 100%;
        height: 48px;
    }
    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        outline: none;
    }
    .form-control.is-invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
    }
    .form-control.is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
    }
    .form-control[readonly] {
        background: #e9ecef;
        cursor: not-allowed;
    }
    .form-control[disabled] {
        background: #e9ecef;
        cursor: not-allowed;
        opacity: 0.8;
    }
    textarea.form-control {
        height: auto;
        min-height: 80px;
        resize: vertical;
    }
    .invalid-feedback {
        color: #dc3545;
        font-size: 13px;
        margin-top: 5px;
        display: block;
    }
    .text-muted-small {
        font-size: 12px;
        color: #6c757d;
        margin-top: 4px;
        display: block;
    }
    
    /* ============================================
       MULTI-SELECT (machines & assigned users)
       ============================================ */
    .multi-select-wrapper {
        position: relative;
        width: 100%;
    }
    .multi-select-display {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        min-height: 48px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        background: #ffffff;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .multi-select-display:hover {
        border-color: #86b7fe;
    }
    .multi-select-display.is-open {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    }
    .multi-select-display .tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #007bff;
        color: #ffffff;
        padding: 4px 10px 4px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        animation: tagIn 0.2s ease;
    }
    @keyframes tagIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .multi-select-display .tag .remove-tag {
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        opacity: 0.7;
        transition: opacity 0.2s ease;
        background: none;
        border: none;
        color: #fff;
        padding: 0 2px;
    }
    .multi-select-display .tag .remove-tag:hover {
        opacity: 1;
    }
    .multi-select-display .placeholder {
        color: #6c757d;
        font-size: 14px;
    }
    .multi-select-display .arrow {
        margin-left: auto;
        font-size: 12px;
        color: #6c757d;
        transition: transform 0.2s ease;
    }
    .multi-select-display.is-open .arrow {
        transform: rotate(180deg);
    }

    .multi-select-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: #ffffff;
        border: 2px solid #007bff;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        max-height: 280px;
        overflow: hidden;
        animation: dropdownIn 0.2s ease;
    }
    @keyframes dropdownIn {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .multi-select-dropdown.open {
        display: block;
    }
    .multi-select-search {
        padding: 10px 14px;
        border-bottom: 1px solid #e9ecef;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }
    .multi-select-search input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease;
    }
    .multi-select-search input:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    }
    .multi-select-search input::placeholder {
        color: #adb5bd;
    }
    .multi-select-options {
        overflow-y: auto;
        max-height: 200px;
        padding: 6px 0;
    }
    .multi-select-options .option-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        cursor: pointer;
        transition: background 0.15s ease;
        font-size: 14px;
        color: #212529;
    }
    .multi-select-options .option-item:hover {
        background: #f0f4ff;
    }
    .multi-select-options .option-item.selected {
        background: #e7f0ff;
    }
    .multi-select-options .option-item .checkbox {
        width: 18px;
        height: 18px;
        border: 2px solid #ced4da;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }
    .multi-select-options .option-item.selected .checkbox {
        background: #007bff;
        border-color: #007bff;
    }
    .multi-select-options .option-item.selected .checkbox::after {
        content: '✓';
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }
    .multi-select-options .option-item .label-text {
        flex: 1;
    }
    .multi-select-options .option-item .badge {
        font-size: 11px;
        color: #6c757d;
        background: #e9ecef;
        padding: 2px 10px;
        border-radius: 12px;
    }
    .multi-select-options .no-results {
        padding: 20px;
        text-align: center;
        color: #6c757d;
        font-size: 14px;
    }

    .selected-count {
        display: inline-block;
        font-size: 13px;
        color: #6c757d;
        margin-top: 8px;
    }
    .selected-count strong {
        color: #007bff;
    }

    /* ============================================
       ASSIGNMENT OPTIONS
       ============================================ */
    .assignment-options {
        display: flex;
        gap: 30px;
        padding: 15px 0;
        flex-wrap: wrap;
    }
    .assignment-options .form-check {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }
    .assignment-options .form-check-input {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #007bff;
        margin: 0;
    }
    .assignment-options .form-check-label {
        font-weight: 500;
        font-size: 14px;
        color: #495057;
        cursor: pointer;
        margin: 0;
    }
    .assignment-options .help-text {
        font-size: 12px;
        color: #6c757d;
        margin-left: 5px;
    }

    /* ============================================
       BUTTONS
       ============================================ */
    .btn-submit {
        background: #007bff;
        color: #fff;
        border-radius: 8px;
        padding: 12px 40px;
        border: none;
        font-weight: 500;
        font-size: 15px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .btn-submit:hover {
        background: #0069d9;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    }
    .btn-submit svg {
        width: 20px;
        height: 20px;
    }
    .btn-cancel {
        background: #6c757d;
        color: #fff;
        border-radius: 8px;
        padding: 12px 40px;
        border: none;
        font-weight: 500;
        font-size: 15px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .btn-cancel:hover {
        background: #5a6268;
        color: #fff;
        transform: translateY(-1px);
    }
    .btn-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 15px;
    }
    
    .row-gap {
        row-gap: 10px;
    }

    .bom-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 12px 16px;
        margin-top: 5px;
        display: none;
        font-size: 14px;
        border-left: 3px solid #007bff;
    }
    .bom-info.active {
        display: block;
    }
    .bom-info .label {
        font-weight: 600;
        color: #495057;
    }
    .bom-info .value {
        color: #212529;
    }

    /* ============================================
       MACHINE-USERS & LOCATION-USERS ASSIGNMENT
       ============================================ */
    .assignment-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-top: 10px;
        border: 1px solid #e9ecef;
        display: none;
    }
    .assignment-section.active {
        display: block;
    }
    .assignment-section .section-title {
        font-weight: 600;
        font-size: 14px;
        color: #495057;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .assignment-section .section-title .badge {
        font-size: 11px;
        padding: 2px 10px;
    }
    
    .assignment-item {
        background: #ffffff;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 10px;
        border: 1px solid #dee2e6;
    }
    .assignment-item .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    .assignment-item .item-header .item-title {
        font-weight: 600;
        font-size: 14px;
        color: #212529;
    }
    .assignment-item .item-header .item-title .badge {
        font-size: 11px;
        margin-left: 6px;
    }
    .assignment-item .item-users {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 6px;
    }
    .assignment-item .item-users .user-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #e9ecef;
        padding: 2px 10px 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        color: #495057;
    }
    .assignment-item .item-users .user-tag .remove-user {
        cursor: pointer;
        font-weight: 700;
        color: #dc3545;
        margin-left: 4px;
    }
    .assignment-item .add-user-btn {
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 4px 12px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .assignment-item .add-user-btn:hover {
        background: #0069d9;
    }

    .user-select-dropdown {
        display: none;
        margin-top: 6px;
    }
    .user-select-dropdown.show {
        display: block;
    }
    .user-select-dropdown select {
        width: 100%;
        height: 36px;
        border-radius: 4px;
        border: 1px solid #ced4da;
        padding: 4px 10px;
        font-size: 13px;
    }

    @media (max-width: 768px) {
        .schedule-card .card-body { padding: 18px; }
        .btn-actions { flex-direction: column; }
        .btn-actions .btn { width: 100%; text-align: center; justify-content: center; }
        .multi-select-display { min-height: 42px; padding: 6px 10px; }
        .multi-select-display .tag { font-size: 12px; padding: 3px 8px 3px 10px; }
        .multi-select-options .option-item { padding: 6px 12px; font-size: 13px; }
        .assignment-options { gap: 15px; }
        .assignment-options .form-check-label { font-size: 13px; }
        .assignment-item { padding: 10px; }
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 10px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
            <path d="M16 3l0 4" /><path d="M8 3l0 4" />
            <path d="M4 11l16 0" />
            <path d="M12 15l0 6" /><path d="M9 18l6 0" />
        </svg>
        Create Production Schedule
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    <div class="schedule-card">
        <div class="card-header">
            <h5 class="mb-0" style="font-weight: 600; font-size: 18px; color: #212529;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 8px; color: #007bff;">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M12 5l0 14" /><path d="M5 12l14 0" />
                </svg>
                Create New Production Schedule
            </h5>
        </div>
        <div class="card-body">
            <form action="{{ route('manufacturing.production.schedules.store') }}" method="POST" id="scheduleForm">
                @csrf
                
                <!-- Row 1: Schedule Code + BOM -->
                <div class="row row-gap">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Schedule Code <span class="text-danger">*</span></label>
                            <input type="text" name="schedule_code" class="form-control" value="{{ $nextCode ?? 'SCH-' . date('ymd') . '-0001' }}" readonly>
                            <span class="text-muted-small">Auto-generated</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Bill of Materials (BOM) <span class="text-danger">*</span></label>
                            <select name="bom_id" id="bomSelect" class="form-control @error('bom_id') is-invalid @enderror" required>
                                <option value="">Select BOM</option>
                                @foreach($boms ?? [] as $bom)
                                    <option value="{{ $bom->id }}"
                                        data-product-id="{{ $bom->product_id }}"
                                        data-product-name="{{ $bom->product->name ?? 'N/A' }}"
                                        data-product-code="{{ $bom->product->sku ?? $bom->product->product_code ?? 'N/A' }}"
                                        data-product-unit="{{ $bom->product->unit->actual_name ?? 'N/A' }}"
                                        data-product-unit-id="{{ $bom->product->unit_id ?? '' }}"
                                        data-bom-name="{{ $bom->name }}"
                                        data-bom-code="{{ $bom->bom_code }}"
                                        data-quantity="{{ $bom->quantity }}"
                                        data-unit="{{ $bom->unit_of_measure }}"
                                        {{ old('bom_id') == $bom->id ? 'selected' : '' }}>
                                        {{ $bom->bom_code }} - {{ $bom->name }}
                                        @if($bom->product) ({{ $bom->product->name }}) @endif
                                    </option>
                                @endforeach
                            </select>
                            @error('bom_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            <span class="text-muted-small">Select a BOM to auto-fill product details</span>
                        </div>
                    </div>
                </div>

                <!-- Row 2: Product + Quantity + Unit -->
                <div class="row row-gap">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Product <span class="text-danger">*</span></label>
                            <select name="product_id" id="productSelect" class="form-control @error('product_id') is-invalid @enderror" required disabled>
                                <option value="">Select Product (auto-filled from BOM)</option>
                                @foreach($products ?? [] as $product)
                                    <option value="{{ $product->id }}" {{ old('product_id') == $product->id ? 'selected' : '' }}>
                                        {{ $product->sku ?? $product->product_code }} - {{ $product->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('product_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            <span class="text-muted-small">Automatically populated from selected BOM</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Quantity to Produce <span class="text-danger">*</span></label>
                            <input type="number" name="quantity_to_produce" id="quantityToProduce" class="form-control @error('quantity_to_produce') is-invalid @enderror"
                                   value="{{ old('quantity_to_produce') }}" step="0.01" min="0.01" required placeholder="Enter quantity...">
                            @error('quantity_to_produce') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            <span class="text-muted-small" id="bomQuantityHint"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Unit of Measure <span class="text-danger">*</span></label>
                            <select name="unit_of_measure" id="unitOfMeasureSelect" class="form-control @error('unit_of_measure') is-invalid @enderror" required>
                                <option value="">Select Unit</option>
                            </select>
                            @error('unit_of_measure') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            <span class="text-muted-small">Unit for the quantity to produce</span>
                        </div>
                    </div>
                </div>

                <!-- Row 3: Planned Start + End -->
                <div class="row row-gap">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Planned Start Date <span class="text-danger">*</span></label>
                            <input type="datetime-local" name="planned_start_date" class="form-control @error('planned_start_date') is-invalid @enderror"
                                   value="{{ old('planned_start_date') }}" required>
                            @error('planned_start_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Planned End Date <span class="text-danger">*</span></label>
                            <input type="datetime-local" name="planned_end_date" class="form-control @error('planned_end_date') is-invalid @enderror"
                                   value="{{ old('planned_end_date') }}" required>
                            @error('planned_end_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>

                <!-- Row 4: Priority + Shift + Status -->
                <div class="row row-gap">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Priority</label>
                            <select name="priority" class="form-control @error('priority') is-invalid @enderror">
                                <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                                <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                            </select>
                            @error('priority') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Shift</label>
                            <input type="text" name="shift" class="form-control @error('shift') is-invalid @enderror"
                                   value="{{ old('shift') }}" placeholder="e.g., Morning, Evening, Night">
                            @error('shift') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Status</label>
                            <select name="status" class="form-control @error('status') is-invalid @enderror">
                                <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="approved" {{ old('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="in_production" {{ old('status') == 'in_production' ? 'selected' : '' }}>In Production</option>
                                <option value="completed" {{ old('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="on_hold" {{ old('status') == 'on_hold' ? 'selected' : '' }}>On Hold</option>
                                <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                            @error('status') <span class="invalid-feedback">{{ $message }}</span> @enderror
                            <span class="text-muted-small">Set initial status for this schedule</span>
                        </div>
                    </div>
                </div>

                <!-- Row 5: Machines Multi-Select -->
                <div class="row row-gap">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Select Machines</label>
                            <div id="machinesContainer"></div>
                            <div class="multi-select-wrapper" id="machineMultiSelect">
                                <div class="multi-select-display" id="machineDisplay">
                                    <span class="placeholder" id="machinePlaceholder">Select machines...</span>
                                    <span class="arrow">▼</span>
                                </div>
                                <div class="multi-select-dropdown" id="machineDropdown">
                                    <div class="multi-select-search">
                                        <input type="text" id="machineSearch" placeholder="Search machines..." autocomplete="off" />
                                    </div>
                                    <div class="multi-select-options" id="machineOptions"></div>
                                </div>
                            </div>
                            <span class="selected-count" id="machineCount">
                                <strong id="machineCountNumber">0</strong> machine(s) selected
                            </span>
                            <span class="text-muted-small">Select machines for this schedule</span>
                            @error('machines') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>

                <!-- Row 6: Locations Multi-Select -->
                <div class="row row-gap">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Select Areas / Locations</label>
                            <div id="locationsContainer"></div>
                            <div class="multi-select-wrapper" id="locationMultiSelect">
                                <div class="multi-select-display" id="locationDisplay">
                                    <span class="placeholder" id="locationPlaceholder">Select areas...</span>
                                    <span class="arrow">▼</span>
                                </div>
                                <div class="multi-select-dropdown" id="locationDropdown">
                                    <div class="multi-select-search">
                                        <input type="text" id="locationSearch" placeholder="Search areas..." autocomplete="off" />
                                    </div>
                                    <div class="multi-select-options" id="locationOptions"></div>
                                </div>
                            </div>
                            <span class="selected-count" id="locationCount">
                                <strong id="locationCountNumber">0</strong> area(s) selected
                            </span>
                            <span class="text-muted-small">Select areas/locations for this schedule</span>
                            @error('locations') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>

                <!-- Row 7: Machine-User Assignments -->
                <div class="row row-gap">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Assignment Options</label>
                            <div class="assignment-options">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="enableMachineUsers" name="enable_machine_users" value="1" {{ old('enable_machine_users') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="enableMachineUsers">
                                        Assign Users to Machines
                                        <span class="help-text">(Assign specific users to each machine)</span>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="enableLocationUsers" name="enable_location_users" value="1" {{ old('enable_location_users') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="enableLocationUsers">
                                        Assign Users to Areas
                                        <span class="help-text">(Assign specific users to each area)</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Machine Users Assignment Section -->
                <div class="assignment-section" id="machineUsersSection">
                    <div class="section-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M5 5m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
                            <path d="M9 9h6v6h-6z" />
                            <path d="M9 15v-6" />
                            <path d="M15 9v6" />
                        </svg>
                        Machine User Assignments
                        <span class="badge badge-info">Assign users to each selected machine</span>
                    </div>
                    <div id="machineUsersContainer">
                        <!-- Dynamic machine-user assignments will be added here -->
                    </div>
                </div>

                <!-- Location Users Assignment Section -->
                <div class="assignment-section" id="locationUsersSection">
                    <div class="section-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M3 12l2 -2m0 0l7 -7l7 7l2 2" />
                            <path d="M5 10v10a1 1 0 0 0 1 1h3m4 0h3a1 1 0 0 0 1 -1v-10" />
                            <path d="M10 16v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2" />
                        </svg>
                        Location/Area User Assignments
                        <span class="badge badge-info">Assign users to each selected area</span>
                    </div>
                    <div id="locationUsersContainer">
                        <!-- Dynamic location-user assignments will be added here -->
                    </div>
                </div>

                <!-- Row 8: Notes -->
                <div class="row row-gap">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Notes</label>
                            <textarea name="notes" class="form-control @error('notes') is-invalid @enderror"
                                      rows="3" style="resize: vertical; min-height: 80px;"
                                      placeholder="Additional notes about this schedule">{{ old('notes') }}</textarea>
                            @error('notes') <span class="invalid-feedback">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>

                <!-- BOM Info (hidden until BOM selected) -->
                <div id="bomInfo" class="bom-info" style="display:none;">
                    <div><span class="label">BOM Code:</span> <span class="value" id="bomCodeDisplay">-</span></div>
                    <div><span class="label">BOM Name:</span> <span class="value" id="bomNameDisplay">-</span></div>
                    <div><span class="label">Product:</span> <span class="value" id="bomProductDisplay">-</span></div>
                    <div><span class="label">Product Unit:</span> <span class="value" id="bomProductUnitDisplay">-</span></div>
                    <div><span class="label">BOM Quantity:</span> <span class="value" id="bomQuantityDisplay">-</span></div>
                </div>

                <hr style="margin: 25px 0; border-color: #e9ecef;">

                <div class="btn-actions">
                    <button type="submit" class="btn-submit">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
                            <path d="M8 4m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
                            <path d="M8 15m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
                            <path d="M16 4v4" />
                        </svg>
                        Create Schedule
                    </button>
                    <a href="{{ route('manufacturing.production.schedules.index') }}" class="btn-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" />
                        </svg>
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</section>

<script>
    // ============================================
    // GLOBAL VARIABLES
    // ============================================
    let allUsers = [];
    let machineMulti = null;
    let locationMulti = null;
    let enableMachineUsers = null;
    let enableLocationUsers = null;

    document.addEventListener('DOMContentLoaded', function() {
        // ============================================
        // BOM / PRODUCT LOGIC
        // ============================================
        const bomSelect = document.getElementById('bomSelect');
        const productSelect = document.getElementById('productSelect');
        const quantityInput = document.getElementById('quantityToProduce');
        const unitOfMeasureSelect = document.getElementById('unitOfMeasureSelect');
        const bomInfo = document.getElementById('bomInfo');
        const bomCodeDisplay = document.getElementById('bomCodeDisplay');
        const bomNameDisplay = document.getElementById('bomNameDisplay');
        const bomProductDisplay = document.getElementById('bomProductDisplay');
        const bomProductUnitDisplay = document.getElementById('bomProductUnitDisplay');
        const bomQuantityDisplay = document.getElementById('bomQuantityDisplay');
        const bomQuantityHint = document.getElementById('bomQuantityHint');

        const unitGroups = @json($unitGroups ?? []);
        const products = @json($products ?? []);
        allUsers = @json($operators ?? []);

        function getUnitOptionsForProduct(productId, selectedUnitId = null) {
            let html = '<option value="">Select Unit</option>';
            const product = products.find(p => p.id == productId);
            
            if (product && product.unit_id) {
                Object.values(unitGroups).forEach(function(group) {
                    let containsUnit = false;
                    if (group.base_unit && group.base_unit.id == product.unit_id) {
                        containsUnit = true;
                    }
                    group.sub_units.forEach(function(subUnit) {
                        if (subUnit.id == product.unit_id) {
                            containsUnit = true;
                        }
                    });
                    
                    if (containsUnit) {
                        if (group.base_unit) {
                            const selected = selectedUnitId == group.base_unit.id ? 'selected' : '';
                            html += `<option value="${group.base_unit.id}" ${selected}>${group.base_unit.actual_name}</option>`;
                        }
                        group.sub_units.forEach(function(subUnit) {
                            const selected = selectedUnitId == subUnit.id ? 'selected' : '';
                            const multiplier = subUnit.base_unit_multiplier || 1;
                            html += `<option value="${subUnit.id}" ${selected}>&nbsp;&nbsp;&nbsp;↳ ${subUnit.actual_name} (1 = ${multiplier})</option>`;
                        });
                    }
                });
            }
            return html;
        }

        function updateProductFromBOM() {
            const selectedOption = bomSelect.options[bomSelect.selectedIndex];
            if (!selectedOption || !selectedOption.value) {
                productSelect.value = '';
                productSelect.disabled = true;
                unitOfMeasureSelect.innerHTML = '<option value="">Select Unit</option>';
                bomInfo.classList.remove('active');
                bomCodeDisplay.textContent = '-';
                bomNameDisplay.textContent = '-';
                bomProductDisplay.textContent = '-';
                bomProductUnitDisplay.textContent = '-';
                bomQuantityDisplay.textContent = '-';
                bomQuantityHint.textContent = '';
                quantityInput.value = '';
                return;
            }
            
            const productId = selectedOption.dataset.productId || '';
            const productName = selectedOption.dataset.productName || 'N/A';
            const productCode = selectedOption.dataset.productCode || 'N/A';
            const productUnit = selectedOption.dataset.productUnit || 'N/A';
            const bomName = selectedOption.dataset.bomName || 'N/A';
            const bomCode = selectedOption.dataset.bomCode || 'N/A';
            const bomQuantity = selectedOption.dataset.quantity || 'N/A';
            const bomUnit = selectedOption.dataset.unit || '';

            if (productId) {
                productSelect.value = productId;
                productSelect.disabled = false;
                if (bomQuantity !== 'N/A' && bomQuantity > 0) {
                    quantityInput.value = bomQuantity;
                }
                unitOfMeasureSelect.innerHTML = getUnitOptionsForProduct(productId, bomUnit);
            } else {
                productSelect.value = '';
                productSelect.disabled = true;
                unitOfMeasureSelect.innerHTML = '<option value="">Select Unit</option>';
            }

            bomInfo.classList.add('active');
            bomCodeDisplay.textContent = bomCode;
            bomNameDisplay.textContent = bomName;
            bomProductDisplay.textContent = productCode + ' - ' + productName;
            bomProductUnitDisplay.textContent = productUnit || 'N/A';
            bomQuantityDisplay.textContent = bomQuantity + (bomUnit ? ' ' + bomUnit : '');
            bomQuantityHint.textContent = bomQuantity !== 'N/A' ? 'BOM produces ' + bomQuantity + ' units. You can adjust the quantity below.' : '';
            productSelect.dispatchEvent(new Event('change'));
        }

        // Set default datetime values
        const startDateInput = document.querySelector('[name="planned_start_date"]');
        const endDateInput = document.querySelector('[name="planned_end_date"]');
        if (!startDateInput.value) {
            const now = new Date();
            now.setHours(now.getHours() + 1);
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            startDateInput.value = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
        }
        if (!endDateInput.value && startDateInput.value) {
            const end = new Date(startDateInput.value);
            end.setHours(end.getHours() + 8);
            const year = end.getFullYear();
            const month = String(end.getMonth() + 1).padStart(2, '0');
            const day = String(end.getDate()).padStart(2, '0');
            const hours = String(end.getHours()).padStart(2, '0');
            const minutes = String(end.getMinutes()).padStart(2, '0');
            endDateInput.value = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
        }

        bomSelect.addEventListener('change', updateProductFromBOM);
        if (bomSelect.value) {
            updateProductFromBOM();
        } else {
            bomInfo.classList.add('active');
            bomCodeDisplay.textContent = 'Select a BOM above';
            bomNameDisplay.textContent = 'Select a BOM above';
            bomProductDisplay.textContent = 'Select a BOM above';
            bomProductUnitDisplay.textContent = 'Select a BOM above';
            bomQuantityDisplay.textContent = 'Select a BOM above';
        }

        document.getElementById('scheduleForm').addEventListener('submit', function(e) {
            if (bomSelect.value && !productSelect.value) {
                e.preventDefault();
                alert('Please select a valid BOM with a product associated.');
                return false;
            }
            productSelect.disabled = false;
        });

        // ============================================
        // USER ASSIGNMENT FUNCTIONS
        // ============================================
        function getUserDisplayName(user) {
            // Use username as primary display name
            if (user.username) {
                return user.username;
            }
            // Fallback to first_name + last_name
            if (user.first_name || user.last_name) {
                return (user.first_name || '') + ' ' + (user.last_name || '');
            }
            // Final fallback to email
            return user.email || 'User';
        }

        function getUserOptions(selectedId = null) {
            let html = '<option value="">Select User</option>';
            allUsers.forEach(function(user) {
                const selected = selectedId == user.id ? 'selected' : '';
                const displayName = getUserDisplayName(user);
                html += `<option value="${user.id}" ${selected}>${displayName}</option>`;
            });
            return html;
        }

        function getMachineUserHtml(machine, users = []) {
            let html = `
                <div class="assignment-item" data-machine-id="${machine.id}">
                    <div class="item-header">
                        <span class="item-title">
                            ${machine.name}
                            <span class="badge badge-secondary">${users.length} user(s)</span>
                        </span>
                    </div>
                    <div class="item-users" id="machineUsers_${machine.id}">
            `;
            
            users.forEach(function(user) {
                const displayName = getUserDisplayName(user);
                html += `
                    <span class="user-tag">
                        ${displayName}
                        <span class="remove-user" onclick="removeMachineUser(${machine.id}, ${user.id})">×</span>
                        <input type="hidden" name="machine_users[${machine.id}][]" value="${user.id}">
                    </span>
                `;
            });
            
            html += `
                    </div>
                    <div class="user-select-dropdown" id="machineUserDropdown_${machine.id}">
                        <select onchange="addMachineUser(${machine.id}, this)">
                            ${getUserOptions()}
                        </select>
                    </div>
                    <br>
                    <button type="button" class="add-user-btn" onclick="toggleMachineUserDropdown(${machine.id})">+ Add User</button>
                </div>
            `;
            return html;
        }

        function getLocationUserHtml(location, users = []) {
            let html = `
                <div class="assignment-item" data-location-id="${location.id}">
                    <div class="item-header">
                        <span class="item-title">
                            ${location.name}
                            <span class="badge badge-secondary">${users.length} user(s)</span>
                        </span>
                    </div>
                    <div class="item-users" id="locationUsers_${location.id}">
            `;
            
            users.forEach(function(user) {
                const displayName = getUserDisplayName(user);
                html += `
                    <span class="user-tag">
                        ${displayName}
                        <span class="remove-user" onclick="removeLocationUser(${location.id}, ${user.id})">×</span>
                        <input type="hidden" name="location_users[${location.id}][]" value="${user.id}">
                    </span>
                `;
            });
            
            html += `
                    </div>
                    <div class="user-select-dropdown" id="locationUserDropdown_${location.id}">
                        <select onchange="addLocationUser(${location.id}, this)">
                            ${getUserOptions()}
                        </select>
                    </div>
                    <br>
                    <button type="button" class="add-user-btn" onclick="toggleLocationUserDropdown(${location.id})">+ Add User</button>
                </div>
            `;
            return html;
        }

        // ============================================
        // MACHINE USER ASSIGNMENT FUNCTIONS (GLOBAL)
        // ============================================
        window.toggleMachineUserDropdown = function(machineId) {
            const dropdown = document.getElementById(`machineUserDropdown_${machineId}`);
            if (dropdown) {
                dropdown.classList.toggle('show');
            }
        }

        window.addMachineUser = function(machineId, selectElement) {
            const userId = selectElement.value;
            if (!userId) return;
            
            const user = allUsers.find(u => u.id == parseInt(userId));
            if (!user) return;
            
            const container = document.getElementById(`machineUsers_${machineId}`);
            if (!container) return;
            
            // Check if user already assigned
            const existing = container.querySelector(`input[value="${userId}"]`);
            if (existing) {
                alert('This user is already assigned to this machine.');
                selectElement.value = '';
                return;
            }
            
            const displayName = getUserDisplayName(user);
            
            const tag = document.createElement('span');
            tag.className = 'user-tag';
            tag.innerHTML = `
                ${displayName}
                <span class="remove-user" onclick="removeMachineUser(${machineId}, ${user.id})">×</span>
                <input type="hidden" name="machine_users[${machineId}][]" value="${user.id}">
            `;
            container.appendChild(tag);
            
            // Update badge count
            updateMachineBadge(machineId);
            
            selectElement.value = '';
            const dropdown = document.getElementById(`machineUserDropdown_${machineId}`);
            if (dropdown) {
                dropdown.classList.remove('show');
            }
        }

        window.removeMachineUser = function(machineId, userId) {
            const container = document.getElementById(`machineUsers_${machineId}`);
            if (!container) return;
            
            const tags = container.querySelectorAll('.user-tag');
            tags.forEach(function(tag) {
                const input = tag.querySelector(`input[value="${userId}"]`);
                if (input) {
                    tag.remove();
                }
            });
            
            updateMachineBadge(machineId);
        }

        function updateMachineBadge(machineId) {
            const container = document.getElementById(`machineUsers_${machineId}`);
            if (!container) return;
            
            const count = container.querySelectorAll('.user-tag').length;
            const item = container.closest('.assignment-item');
            if (item) {
                const badge = item.querySelector('.badge');
                if (badge) {
                    badge.textContent = count + ' user(s)';
                }
            }
        }

        function renderMachineUsers(selectedMachines) {
            const container = document.getElementById('machineUsersContainer');
            container.innerHTML = '';
            
            if (!selectedMachines || selectedMachines.length === 0) {
                container.innerHTML = '<p class="text-muted">No machines selected. Please select machines first.</p>';
                return;
            }
            
            selectedMachines.forEach(function(machine) {
                const existingUsers = [];
                // Check for existing assignments
                const existingInputs = container.querySelectorAll(`input[name^="machine_users[${machine.id}]"]`);
                existingInputs.forEach(function(input) {
                    const user = allUsers.find(u => u.id == parseInt(input.value));
                    if (user) {
                        existingUsers.push(user);
                    }
                });
                container.insertAdjacentHTML('beforeend', getMachineUserHtml(machine, existingUsers));
            });
        }

        // ============================================
        // LOCATION USER ASSIGNMENT FUNCTIONS (GLOBAL)
        // ============================================
        window.toggleLocationUserDropdown = function(locationId) {
            const dropdown = document.getElementById(`locationUserDropdown_${locationId}`);
            if (dropdown) {
                dropdown.classList.toggle('show');
            }
        }

        window.addLocationUser = function(locationId, selectElement) {
            const userId = selectElement.value;
            if (!userId) return;
            
            const user = allUsers.find(u => u.id == parseInt(userId));
            if (!user) return;
            
            const container = document.getElementById(`locationUsers_${locationId}`);
            if (!container) return;
            
            const existing = container.querySelector(`input[value="${userId}"]`);
            if (existing) {
                alert('This user is already assigned to this location.');
                selectElement.value = '';
                return;
            }
            
            const displayName = getUserDisplayName(user);
            
            const tag = document.createElement('span');
            tag.className = 'user-tag';
            tag.innerHTML = `
                ${displayName}
                <span class="remove-user" onclick="removeLocationUser(${locationId}, ${user.id})">×</span>
                <input type="hidden" name="location_users[${locationId}][]" value="${user.id}">
            `;
            container.appendChild(tag);
            
            updateLocationBadge(locationId);
            
            selectElement.value = '';
            const dropdown = document.getElementById(`locationUserDropdown_${locationId}`);
            if (dropdown) {
                dropdown.classList.remove('show');
            }
        }

        window.removeLocationUser = function(locationId, userId) {
            const container = document.getElementById(`locationUsers_${locationId}`);
            if (!container) return;
            
            const tags = container.querySelectorAll('.user-tag');
            tags.forEach(function(tag) {
                const input = tag.querySelector(`input[value="${userId}"]`);
                if (input) {
                    tag.remove();
                }
            });
            
            updateLocationBadge(locationId);
        }

        function updateLocationBadge(locationId) {
            const container = document.getElementById(`locationUsers_${locationId}`);
            if (!container) return;
            
            const count = container.querySelectorAll('.user-tag').length;
            const item = container.closest('.assignment-item');
            if (item) {
                const badge = item.querySelector('.badge');
                if (badge) {
                    badge.textContent = count + ' user(s)';
                }
            }
        }

        function renderLocationUsers(selectedLocations) {
            const container = document.getElementById('locationUsersContainer');
            container.innerHTML = '';
            
            if (!selectedLocations || selectedLocations.length === 0) {
                container.innerHTML = '<p class="text-muted">No areas selected. Please select areas first.</p>';
                return;
            }
            
            selectedLocations.forEach(function(location) {
                const existingUsers = [];
                const existingInputs = container.querySelectorAll(`input[name^="location_users[${location.id}]"]`);
                existingInputs.forEach(function(input) {
                    const user = allUsers.find(u => u.id == parseInt(input.value));
                    if (user) {
                        existingUsers.push(user);
                    }
                });
                container.insertAdjacentHTML('beforeend', getLocationUserHtml(location, existingUsers));
            });
        }

        // ============================================
        // TOGGLE ASSIGNMENT SECTIONS
        // ============================================
        enableMachineUsers = document.getElementById('enableMachineUsers');
        enableLocationUsers = document.getElementById('enableLocationUsers');
        const machineUsersSection = document.getElementById('machineUsersSection');
        const locationUsersSection = document.getElementById('locationUsersSection');

        function toggleSections() {
            if (enableMachineUsers.checked) {
                machineUsersSection.classList.add('active');
                renderMachineUsers(machineMulti.getSelected());
            } else {
                machineUsersSection.classList.remove('active');
            }
            
            if (enableLocationUsers.checked) {
                locationUsersSection.classList.add('active');
                renderLocationUsers(locationMulti.getSelected());
            } else {
                locationUsersSection.classList.remove('active');
            }
        }

        enableMachineUsers.addEventListener('change', toggleSections);
        enableLocationUsers.addEventListener('change', toggleSections);

        // ============================================
        // MULTI-SELECT HELPER FACTORY
        // ============================================
        function createMultiSelect(config) {
            const {
                wrapperId,
                displayId,
                dropdownId,
                searchId,
                optionsId,
                placeholderId,
                countNumberId,
                inputName,
                containerId,
                items,
                selectedIds = new Set(),
            } = config;

            const display = document.getElementById(displayId);
            const dropdown = document.getElementById(dropdownId);
            const searchInput = document.getElementById(searchId);
            const optionsContainer = document.getElementById(optionsId);
            const placeholder = document.getElementById(placeholderId);
            const countNumber = document.getElementById(countNumberId);
            const container = document.getElementById(containerId);

            let isOpen = false;
            let filteredItems = [...items];

            function updateHiddenFields() {
                container.innerHTML = '';
                selectedIds.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = inputName;
                    input.value = id;
                    container.appendChild(input);
                });
            }

            function renderTags() {
                const tags = display.querySelectorAll('.tag');
                tags.forEach(tag => tag.remove());

                const selected = items.filter(item => selectedIds.has(item.id));
                if (selected.length === 0) {
                    placeholder.style.display = 'inline';
                } else {
                    placeholder.style.display = 'none';
                    selected.forEach(item => {
                        const tag = document.createElement('span');
                        tag.className = 'tag';
                        tag.innerHTML = `
                            ${item.name}
                            <button type="button" class="remove-tag" data-id="${item.id}">×</button>
                        `;
                        display.insertBefore(tag, display.querySelector('.arrow'));
                    });
                }
                countNumber.textContent = selectedIds.size;
                updateHiddenFields();

                document.querySelectorAll(`#${displayId} .remove-tag`).forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const id = parseInt(this.dataset.id);
                        selectedIds.delete(id);
                        renderTags();
                        renderOptions();
                        if (enableMachineUsers && enableMachineUsers.checked) {
                            renderMachineUsers(getSelected());
                        }
                    });
                });
            }

            function renderOptions() {
                const term = searchInput.value.toLowerCase().trim();
                if (term) {
                    filteredItems = items.filter(item =>
                        item.name.toLowerCase().includes(term) ||
                        (item.label && item.label.toLowerCase().includes(term)) ||
                        (item.badge && item.badge.toLowerCase().includes(term))
                    );
                } else {
                    filteredItems = [...items];
                }

                if (filteredItems.length === 0) {
                    optionsContainer.innerHTML = `<div class="no-results">No results found for "${term}"</div>`;
                    return;
                }

                let html = '';
                filteredItems.forEach(item => {
                    const isSelected = selectedIds.has(item.id);
                    html += `
                        <div class="option-item ${isSelected ? 'selected' : ''}" data-id="${item.id}">
                            <span class="checkbox"></span>
                            <span class="label-text">${item.label || item.name}</span>
                            ${item.badge ? `<span class="badge">${item.badge}</span>` : ''}
                        </div>
                    `;
                });
                optionsContainer.innerHTML = html;

                document.querySelectorAll(`#${optionsId} .option-item`).forEach(el => {
                    el.addEventListener('click', function() {
                        const id = parseInt(this.dataset.id);
                        if (selectedIds.has(id)) {
                            selectedIds.delete(id);
                        } else {
                            selectedIds.add(id);
                        }
                        renderTags();
                        renderOptions();
                        if (enableMachineUsers && enableMachineUsers.checked && wrapperId === 'machineMultiSelect') {
                            renderMachineUsers(getSelected());
                        }
                        if (enableLocationUsers && enableLocationUsers.checked && wrapperId === 'locationMultiSelect') {
                            renderLocationUsers(getSelected());
                        }
                    });
                });
            }

            function toggleDropdown(open) {
                isOpen = open !== undefined ? open : !isOpen;
                dropdown.classList.toggle('open', isOpen);
                display.classList.toggle('is-open', isOpen);
                if (isOpen) {
                    searchInput.value = '';
                    searchInput.focus();
                    renderOptions();
                }
            }

            display.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-tag')) return;
                toggleDropdown();
            });

            document.addEventListener('click', function(e) {
                const wrapper = document.getElementById(wrapperId);
                if (wrapper && !wrapper.contains(e.target)) {
                    if (isOpen) toggleDropdown(false);
                }
            });

            searchInput.addEventListener('input', renderOptions);

            searchInput.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') toggleDropdown(false);
                if (e.key === 'Enter' && filteredItems.length > 0) {
                    const first = filteredItems[0];
                    if (selectedIds.has(first.id)) {
                        selectedIds.delete(first.id);
                    } else {
                        selectedIds.add(first.id);
                    }
                    renderTags();
                    renderOptions();
                    if (enableMachineUsers && enableMachineUsers.checked && wrapperId === 'machineMultiSelect') {
                        renderMachineUsers(getSelected());
                    }
                    if (enableLocationUsers && enableLocationUsers.checked && wrapperId === 'locationMultiSelect') {
                        renderLocationUsers(getSelected());
                    }
                    e.preventDefault();
                }
            });

            renderTags();

            return {
                selectedIds,
                renderTags,
                renderOptions,
                toggleDropdown,
                updateHiddenFields,
                getSelected: () => items.filter(item => selectedIds.has(item.id)),
            };
        }

        // ============================================
        // DATA: Machines, Locations & Users
        // ============================================
        const machineItems = @json($machines ?? []).map(m => ({
            id: m.id,
            name: m.name,
            label: (m.asset_code || m.code) + ' - ' + m.name,
            badge: m.model || 'Machine'
        }));

        const locationItems = @json($manufacturingLocations ?? []).map(l => ({
            id: l.id,
            name: l.name,
            label: l.code + ' - ' + l.name,
            badge: l.is_active ? 'Active' : 'Inactive'
        }));

        // ============================================
        // INIT MACHINE MULTI-SELECT
        // ============================================
        machineMulti = createMultiSelect({
            wrapperId: 'machineMultiSelect',
            displayId: 'machineDisplay',
            dropdownId: 'machineDropdown',
            searchId: 'machineSearch',
            optionsId: 'machineOptions',
            placeholderId: 'machinePlaceholder',
            countNumberId: 'machineCountNumber',
            inputName: 'machines[]',
            containerId: 'machinesContainer',
            items: machineItems,
            selectedIds: new Set(@json(old('machines', []))),
        });

        // ============================================
        // INIT LOCATION MULTI-SELECT
        // ============================================
        locationMulti = createMultiSelect({
            wrapperId: 'locationMultiSelect',
            displayId: 'locationDisplay',
            dropdownId: 'locationDropdown',
            searchId: 'locationSearch',
            optionsId: 'locationOptions',
            placeholderId: 'locationPlaceholder',
            countNumberId: 'locationCountNumber',
            inputName: 'locations[]',
            containerId: 'locationsContainer',
            items: locationItems,
            selectedIds: new Set(@json(old('locations', []))),
        });

        // ============================================
        // INITIAL RENDER OF USER ASSIGNMENTS
        // ============================================
        toggleSections();
    });
</script>
@endsection