@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        .required-mark {
            color: #dc3545 !important;
            opacity: 1 !important;
            display: inline-block !important;
            visibility: visible !important;
            font-weight: bold !important;
            margin-left: 5px !important;
        }

        .form-control.is-valid, .was-validated .form-control:valid {
            border-color: #ced4da !important;
            background-image: none !important;
        }

        /* ── Custom Autocomplete UI (Select2 Look-alike) ── */
        .autocomplete-dropdown {
            border: 1px solid #aaa !important;
            border-top: none !important;
            border-radius: 0 0 4px 4px !important;
            box-shadow: 0 4px 5px rgba(0, 0, 0, .15) !important;
            margin-top: -1px !important;
            background-color: #fff !important;
            padding: 0 !important;
            max-height: 250px;
            overflow-y: auto;
            width: 100%;
        }

        .autocomplete-dropdown .dropdown-item {
            padding: 8px 12px !important;
            font-size: 0.875rem !important;
            color: #333 !important;
            border-bottom: 1px solid #eee !important;
            cursor: pointer;
            white-space: normal !important;
            line-height: 1.2 !important;
        }

        .autocomplete-dropdown .dropdown-item:last-child {
            border-bottom: none !important;
        }

        .autocomplete-dropdown .dropdown-item:hover,
        .autocomplete-dropdown .dropdown-item.active {
            background-color: #008b8b !important; /* Hijau Primary Template */
            color: #fff !important;
        }

        .autocomplete-dropdown .dropdown-item strong {
            color: inherit !important;
            font-weight: 700 !important;
            text-decoration: underline;
        }

        /* Custom Scrollbar for Autocomplete */
        .autocomplete-dropdown::-webkit-scrollbar {
            width: 6px;
        }
        .autocomplete-dropdown::-webkit-scrollbar-track {
            background: transparent;
        }
        .autocomplete-dropdown::-webkit-scrollbar-thumb {
            background: #aaa;
            border-radius: 10px;
        }
        .autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
            background: #888;
        }
    </style>
    
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" id="btn-save-sample" type="button">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="form-input-sample">
                    @csrf
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 font-weight-bold">FORM INPUT ADMIN MKT</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">
                            
                            {{-- alert --}}
                            @include('components.alert')
                            
                            {{-- Form Header --}}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_salesman" class="form-control-label">Sales <b class="required-mark">*</b></label>
                                        <select class="form-control select2 @error('id_salesman') is-invalid @enderror" 
                                                name="id_salesman" id="id_salesman" required>
                                            <option value="">-- Pilih Sales --</option>
                                            @if(isset($list_salesman) && $list_salesman->count() > 0)
                                                @foreach($list_salesman as $sales)
                                                    <option value="{{ $sales->id }}" {{ old('id_salesman') == $sales->id ? 'selected' : '' }}>
                                                        {{ $sales->nama }}
                                                    </option>
                                                @endforeach
                                            @else
                                                <option value="" disabled>-- Data Sales belum tersedia --</option>
                                            @endif
                                        </select>
                                        @error('id_salesman')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_customer" class="form-control-label">Customer <b class="required-mark">*</b></label>
                                        <select class="form-control select2 @error('id_customer') is-invalid @enderror" 
                                                name="id_customer" id="id_customer" required>
                                            <option value="">-- Pilih Customer --</option>
                                            @if(isset($list_customer) && $list_customer->count() > 0)
                                                @foreach($list_customer as $cust)
                                                    <option value="{{ $cust->id }}" 
                                                            data-attn-to="{{ $cust->attn_to }}"
                                                            data-deliver-to="{{ $cust->address ?? '' }}"
                                                            {{ old('id_customer') == $cust->id ? 'selected' : '' }}>
                                                        {{ $cust->nama }}
                                                    </option>
                                                @endforeach
                                            @else
                                                <option value="" disabled>-- Data Customer belum tersedia --</option>
                                            @endif
                                        </select>
                                        @error('id_customer')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="attn_to" class="form-control-label">Attn. To <b class="required-mark">*</b></label>
                                        {{-- Attn. To field (EDIT-ABLE - auto-filled from customer as default, but can be edited) --}}
                                        <input type="text" class="form-control @error('attn_to') is-invalid @enderror" 
                                               name="attn_to" id="attn_to" 
                                               value="{{ old('attn_to') }}" 
                                               required>
                                        @error('attn_to')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <!-- <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ship_to" class="form-control-label">Ship To</label>
                                        <input type="text" class="form-control @error('ship_to') is-invalid @enderror" 
                                               name="ship_to" id="ship_to" 
                                               value="{{ old('ship_to') }}"
                                               placeholder="Masukkan Ship To (jika ada)">
                                        @error('ship_to')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div> -->

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ship_to" class="form-control-label">Ship To </label>
                                        <select class="form-control select2 @error('ship_to') is-invalid @enderror" 
                                                name="ship_to" id="ship_to">
                                            <option value="">-- Pilih Ship To --</option>
                                            @if(isset($list_ship_to) && $list_ship_to->count() > 0)
                                                @foreach($list_ship_to as $cust)
                                                    <option value="{{ $cust->id }}" 
                                                            data-attn-to="{{ $cust->attn_to }}"
                                                            data-deliver-to="{{ $cust->address ?? '' }}"
                                                            {{ old('ship_to') == $cust->id ? 'selected' : '' }}>
                                                        {{ $cust->nama }}
                                                    </option>
                                                @endforeach
                                            @else
                                                <option value="" disabled>-- Data Customer belum tersedia --</option>
                                            @endif
                                        </select>
                                        @error('id_customer')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="project" class="form-control-label">Project</label>
                                        <div class="position-relative">
                                            <input type="text" class="form-control @error('project') is-invalid @enderror" 
                                                   name="project" id="project" value="{{ old('project') }}" autocomplete="off" placeholder="Ketik nama project...">
                                            <div class="dropdown-menu w-100 autocomplete-dropdown" id="ac-project-menu" style="max-height: 250px; overflow-y: auto; z-index: 9999;"></div>
                                        </div>
                                        @error('project')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="end_user" class="form-control-label">End User</label>
                                        <div class="position-relative">
                                            <input type="text" class="form-control @error('end_user') is-invalid @enderror" 
                                                   name="end_user" id="end_user" value="{{ old('end_user') }}" autocomplete="off" placeholder="Ketik nama end user...">
                                            <div class="dropdown-menu w-100 autocomplete-dropdown" id="ac-end-user-menu" style="max-height: 250px; overflow-y: auto; z-index: 9999;"></div>
                                        </div>
                                        @error('end_user')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="deliver_to" class="form-control-label">Deliver To <b class="required-mark">*</b></label>
                                        <input type="text" class="form-control @error('deliver_to') is-invalid @enderror"
                                               name="deliver_to" id="deliver_to"
                                               value="{{ old('deliver_to') }}"
                                               required>
                                        @error('deliver_to')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="deadline" class="form-control-label">Deadline <b class="required-mark">*</b></label>
                                        <input type="date" class="form-control datepicker @error('deadline') is-invalid @enderror"
                                               name="deadline" id="deadline"
                                               value="{{ old('deadline') }}"
                                               placeholder="Pilih tanggal"
                                               required>
                                        @error('deadline')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="classify_sample" class="form-control-label">Klasifikasi Sample <b class="required-mark">*</b></label>
                                        <select class="form-control @error('classify_sample') is-invalid @enderror" 
                                                 name="classify_sample" id="classify_sample" required>
                                             <option value="">-- Pilih Klasifikasi --</option>
                                             @foreach($list_classify as $classify)
                                                 <option value="{{ $classify->value }}" {{ old('classify_sample') == $classify->value ? 'selected' : '' }}>
                                                     {{ $classify->name }}
                                                 </option>
                                             @endforeach
                                         </select>
                                        @error('classify_sample')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="id_approvals" class="form-control-label">Pilih Approval <b class="required-mark">*</b></label>
                                        <select class="form-select select-multiple custom-select @error('id_approvals') is-invalid @enderror" 
                                                name="id_approvals[]" id="id_approvals" multiple required>
                                            @if(isset($list_approval_1) && $list_approval_1->count() > 0)
                                            <optgroup label="Level 1">
                                                @foreach($list_approval_1 as $apv)
                                                    <option value="{{ $apv->id }}" {{ (collect(old('id_approvals'))->contains($apv->id)) ? 'selected' : '' }}>{{ $apv->id }} - {{ $apv->nama }}</option>
                                                @endforeach
                                            </optgroup>
                                            @endif
                                            @if(isset($list_approval_2) && $list_approval_2->count() > 0)
                                            <optgroup label="Level 2">
                                                @foreach($list_approval_2 as $apv)
                                                    <option value="{{ $apv->id }}" {{ (collect(old('id_approvals'))->contains($apv->id)) ? 'selected' : '' }}>{{ $apv->id }} - {{ $apv->nama }}</option>
                                                @endforeach
                                            </optgroup>
                                            @endif
                                            @if(isset($list_approval_3) && $list_approval_3->count() > 0)
                                            <optgroup label="Level 3">
                                                @foreach($list_approval_3 as $apv)
                                                    <option value="{{ $apv->id }}" {{ (collect(old('id_approvals'))->contains($apv->id)) ? 'selected' : '' }}>{{ $apv->id }} - {{ $apv->nama }}</option>
                                                @endforeach
                                            </optgroup>
                                            @endif
                                        </select>
                                        @error('id_approvals')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6" id="gedung-field" style="display:none;">
                                    <div class="form-group">
                                        <label for="gedung_sample" class="form-control-label">Gedung <b class="required-mark">*</b></label>
                                        <select class="form-control @error('gedung_sample') is-invalid @enderror" 
                                                 name="gedung_sample" id="gedung_sample">
                                             <option value="">-- Pilih Gedung --</option>
                                             @foreach($list_gedung as $gedung)
                                                 <option value="{{ $gedung->value }}" {{ old('gedung_sample') == $gedung->value ? 'selected' : '' }}>
                                                     {{ $gedung->name }}
                                                 </option>
                                             @endforeach
                                         </select>
                                        @error('gedung_sample')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal light">
                            
                            {{-- Item Sample Section --}}
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="text-uppercase text-dark font-weight-bold" style="letter-spacing: 1px;">Item Sample</h6>
                                <button type="button" class="btn btn-dark btn-sm" onclick="addItemRow()">
                                    <i class="fas fa-plus me-1"></i> Tambah Item
                                </button>
                            </div>

                            <div id="item-container">
                                {{-- Card Item Template --}}
                                <div class="item-card bg-white border border-2 rounded-3 mb-4 p-3 shadow-none">
                                    <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                                        <span class="badge bg-dark-soft text-dark item-number">Item #1</span>
                                        <button type="button" class="btn btn-link text-danger p-0 m-0" onclick="removeItemRow(this)">
                                            <i class="fas fa-trash-alt me-1"></i> Hapus
                                        </button>
                                    </div>

                                    {{-- Row 1: Primary Info --}}
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <label class="item-label">Aplikasi</label>
                                            <select class="form-select form-select-sm minimalist-input" name="aplikasi[]">
                                                <option value="">- Pilih -</option>
                                                @foreach($list_aplikasi as $apk)
                                                    <option value="{{ $apk->id }}">{{ $apk->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="item-label">Detail</label>
                                            <select class="form-select form-select-sm minimalist-input" name="id_detail[]">
                                                <option value="">- Pilih -</option>
                                                @foreach($list_detail as $det)
                                                    <option value="{{ $det->id }}">{{ $det->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="item-label">Color</label>
                                            <input type="text" class="form-control form-control-sm minimalist-input" name="color[]" placeholder="Warna">
                                        </div>
                                    </div>

                                    {{-- Row 2: Specs & Qty --}}
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-2">
                                            <label class="item-label">GSM</label>
                                            <input type="number" class="form-control form-control-sm minimalist-input" name="size_gsm[]" step="1" min="0" placeholder="0">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="item-label">Length (m)</label>
                                            <input type="number" class="form-control form-control-sm minimalist-input" name="size_length[]" step="any" min="0" placeholder="0">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="item-label">Width (m)</label>
                                            <input type="number" class="form-control form-control-sm minimalist-input" name="size_width[]" step="any" min="0" placeholder="0">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="item-label">Qty</label>
                                            <input type="number" class="form-control form-control-sm minimalist-input" name="qty[]" min="0" placeholder="0">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="item-label">UOM</label>
                                            <select class="form-select form-select-sm minimalist-input" name="uom[]">
                                                @foreach($list_uom as $uom)
                                                    <option value="{{ $uom->value }}" {{ $uom->value == 'roll' ? 'selected' : '' }}>{{ $uom->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Row 3: Full Width Description (UX Optimization for long lists) --}}
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label class="item-label">Deskripsi Item</label>
                                            <textarea class="form-control form-control-sm minimalist-input" 
                                                      name="item[]" 
                                                      rows="3" 
                                                      placeholder="Masukkan deskripsi detail item di sini..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            {{-- Note Field --}}
                            <div class="row mt-2">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="note" class="form-control-label font-weight-bold">Note </label>
                                        <textarea class="form-control @error('note') is-invalid @enderror" 
                                                  name="note" id="note" 
                                                  rows="3" 
                                                  placeholder="Note akan terkirim ke approval yang dipilih..">{{ old('note') }}</textarea>
                                        @error('note')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>
    .item-card {
        border-color: #e9ecef !important;
        transition: transform 0.2s;
    }
    .item-card:hover {
        border-color: #adb5bd !important;
    }
    .bg-dark-soft {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 4px;
        font-size: 0.75rem;
    }
    .item-label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #495057;
        margin-bottom: 5px;
        display: block;
    }
    .minimalist-input {
        border: 1px solid #ced4da;
        border-radius: 4px;
        background-color: #ffffff;
        padding: 0.5rem 0.75rem;
    }
    .minimalist-input:focus {
        border-color: #000;
        box-shadow: none;
        background-color: #fff;
    }
    #btn-save-sample {
        background: #000;
        border: none;
    }


</style>
@endpush

@push('js')
<script>
$(document).ready(function() {
    // FIXED: Initialize Select2 for Sales dropdown
    if ($('#id_salesman').length) {
        $('#id_salesman').select2({
            placeholder: '-- Pilih Sales --',
            allowClear: false,
            width: '100%'
        });
    }
    
    // FIXED: Initialize Select2 for Customer dropdown
    if ($('#id_customer').length) {
        $('#id_customer').select2({
            placeholder: '-- Pilih Customer --',
            allowClear: false,
            width: '100%'
        });
    }

    // FIXED: Initialize Select2 for Ship To dropdown
    if ($('#ship_to').length) {
        $('#ship_to').select2({
            placeholder: '-- Pilih Ship To --',
            allowClear: true,
            width: '100%'
        });
    }

    // ── Custom Autocomplete (Plain Text Input with Argon Dropdown UI) ─────
    var projectSuggestions  = @json($list_project_suggestions ?? []);
    var endUserSuggestions  = @json($list_end_user_suggestions ?? []);

    function initAutocomplete(inputId, menuId, suggestions) {
        var $input = $(inputId);
        var $menu = $(menuId);
        if (!$input.length) return;

        var suggestionsArray = Array.isArray(suggestions) ? suggestions : Object.values(suggestions || {});
        var currentIndex = -1;

        function updateSelection() {
            var $items = $menu.find('.dropdown-item:not(.disabled)');
            $items.removeClass('active');
            if (currentIndex >= 0 && currentIndex < $items.length) {
                var $activeItem = $items.eq(currentIndex);
                $activeItem.addClass('active');
                
                // Ensure the active item is visible in the scrollable menu
                var menuEl = $menu[0];
                var itemEl = $activeItem[0];
                if (itemEl.offsetTop < menuEl.scrollTop) {
                    menuEl.scrollTop = itemEl.offsetTop;
                } else if (itemEl.offsetTop + itemEl.offsetHeight > menuEl.scrollTop + menuEl.offsetHeight) {
                    menuEl.scrollTop = itemEl.offsetTop + itemEl.offsetHeight - menuEl.offsetHeight;
                }
            }
        }

        $input.on('input focus', function() {
            var q = $(this).val().toLowerCase().trim();
            if (q.length < 1) {
                $menu.removeClass('show');
                currentIndex = -1;
                return;
            }

            var matches = suggestionsArray.filter(function(s) {
                if (!s) return false;
                return s.toString().toLowerCase().indexOf(q) !== -1;
            }).slice(0, 30); // Limit for performance

            $menu.empty();
            currentIndex = -1;

            if (matches.length > 0) {
                matches.forEach(function(match) {
                    var regex = new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
                    var highlighted = match.toString().replace(regex, '<strong>$1</strong>');
                    
                    var $item = $('<a class="dropdown-item" href="javascript:void(0)"></a>')
                        .html(highlighted)
                        .data('value', match)
                        .on('mousedown', function(e) {
                            e.preventDefault();
                            $input.val(match);
                            $menu.removeClass('show');
                        });
                    $menu.append($item);
                });
                $menu.addClass('show');
            } else {
                $menu.append('<span class="dropdown-item disabled text-muted">Tidak ditemukan...</span>');
                $menu.addClass('show');
            }
        });

        $input.on('keydown', function(e) {
            var $items = $menu.find('.dropdown-item:not(.disabled)');
            if (!$menu.hasClass('show') || $items.length === 0) return;

            if (e.which === 40) { // Arrow Down
                e.preventDefault();
                currentIndex = (currentIndex + 1) % $items.length;
                updateSelection();
            } else if (e.which === 38) { // Arrow Up
                e.preventDefault();
                currentIndex = (currentIndex - 1 + $items.length) % $items.length;
                updateSelection();
            } else if (e.which === 13) { // Enter
                if (currentIndex >= 0) {
                    e.preventDefault();
                    var selectedValue = $items.eq(currentIndex).data('value');
                    $input.val(selectedValue);
                    $menu.removeClass('show');
                    currentIndex = -1;
                }
            } else if (e.which === 27) { // Escape
                $menu.removeClass('show');
                currentIndex = -1;
            }
        });

        $input.on('blur', function() {
            setTimeout(function() { 
                $menu.removeClass('show'); 
                currentIndex = -1;
            }, 200);
        });
    }

    initAutocomplete('#project', '#ac-project-menu', projectSuggestions);
    initAutocomplete('#end_user', '#ac-end-user-menu', endUserSuggestions);

    $('#id_customer').on('change', function() {
        var selectedOption = $(this).find('option:selected');
        var attnTo = selectedOption.data('attn-to') || '';
        var deliverTo = selectedOption.data('deliver-to') || '';
        if (attnTo) {
            $('#attn_to').val(attnTo);
            console.log('Auto-filled attn_to (default value, can be edited):', attnTo);
        } else {
            $('#attn_to').val('');
            console.log('attn_to cleared (no data)');
        }

        if (deliverTo) {
            $('#deliver_to').val(deliverTo);
            console.log('Auto-filled deliver_to (default value, can be edited):', deliverTo);
        } else {
            $('#deliver_to').val('');
            console.log('deliver_to cleared (no data)');
        }
    });
    
    // Trigger change jika sudah ada value (untuk old value)
    if ($('#id_customer').val()) {
        $('#id_customer').trigger('change');
    }
    
    // Initialize Select2 for multiple select approval
    if ($('#id_approvals').length) {
        $('#id_approvals').select2({
            placeholder: 'Pilih Approval',
            allowClear: true,
            width: '100%'
        });
        
        // Validasi: setiap level hanya boleh dipilih 1 kali
        $('#id_approvals').on('select2:select', function(e) {
            const selected = $(this).val() || [];
            const levelMap = {};
            const duplicateLevels = [];
            const selectElement = this;
            
            // Get level untuk setiap selected approval
            selected.forEach(function(approvalId) {
                const option = $(selectElement).find('option[value="' + approvalId + '"]');
                const optgroup = option.closest('optgroup');
                const levelLabel = optgroup.attr('label');
                
                if (levelLabel) {
                    const level = levelLabel.replace('Level ', '');
                    if (!levelMap[level]) {
                        levelMap[level] = [];
                    }
                    levelMap[level].push(approvalId);
                }
            });
            
            // Check untuk duplicate levels
            Object.keys(levelMap).forEach(function(level) {
                if (levelMap[level].length > 1) {
                    duplicateLevels.push(level);
                }
            });
            
            if (duplicateLevels.length > 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Peringatan',
                    text: 'Pilih Penerima Lain. Setiap Tingkatan Hanya Boleh Pilih 1 Penerima.',
                    confirmButtonColor: '#3085d6'
                });
                
                // Remove last selected option (the one that triggered this event)
                const lastSelected = e.params.data.id;
                const newSelection = selected.filter(function(id) {
                    return id !== lastSelected;
                });
                $(selectElement).val(newSelection).trigger('change');
            }
        });
    }
    
    // Toggle gedung field visibility
    function toggleGedung() {
        var classify = $('#classify_sample').val();
        if (classify === 'Improved') {
            $('#gedung-field').show();
            $('#gedung_sample').prop('required', true);
        } else {
            $('#gedung-field').hide();
            $('#gedung_sample').prop('required', false).val('');
        }
    }
    
    $('#classify_sample').on('change', function() {
        toggleGedung();
    });
    
    toggleGedung();
});

// Add new item card
function addItemRow() {
    var container = $('#item-container');
    var firstCard = container.find('.item-card:first');
    var newCard = firstCard.clone();
    
    // Clear all inputs in cloned card
    newCard.find('input, textarea').val('');
    newCard.find('select').prop('selectedIndex', 0);
    newCard.find('select[name="uom[]"]').val('roll');
    
    container.append(newCard);
    updateItemNumbers();
}

// Remove item card
function removeItemRow(button) {
    var container = $('#item-container');
    if (container.find('.item-card').length > 1) {
        $(button).closest('.item-card').remove();
        updateItemNumbers();
    } else {
        Swal.fire({
            icon: 'warning',
            title: 'Perhatian',
            text: 'Minimal harus ada 1 item sample',
            confirmButtonColor: '#3085d6'
        });
    }
}

// Update numbering (Item #1, #2, etc)
function updateItemNumbers() {
    $('#item-container .item-card').each(function(index) {
        $(this).find('.item-number').text('Item #' + (index + 1));
    });
}


// Form submit dengan loading modal
$(document).ready(function() {
    // Check for flash message and show SweetAlert
    @if (Session::has('message'))
        @php
            $message = Session::get('message');
            $class = Session::get('class', 'info');
            $icon = $class === 'success' ? 'success' : ($class === 'error' || $class === 'danger' ? 'error' : 'info');
        @endphp
        Swal.fire({
            icon: '{{ $icon }}',
            title: '{{ $class === "success" ? "Berhasil!" : ($class === "error" || $class === "danger" ? "Error!" : "Info") }}',
            text: '{{ $message }}',
            confirmButtonColor: '#3085d6',
            timer: 3000,
            timerProgressBar: true
        });
    @endif

    $('#btn-save-sample').on('click', function(e) {
        // ... (existing click logic)
        e.preventDefault();
        const btn = this;
        const form = document.getElementById('form-input-sample');
        
        // Validasi form
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        
        // Start loading
        const originalHtml = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Menyimpan...';
        
        Swal.fire({
            title: 'Menyimpan...',
            html: 'Mohon tunggu sebentar',
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => Swal.showLoading()
        });
        
        // Submit form
        form.submit();
    });
});
</script>
@endpush