{{-- 关联资源区块：待办事项关联 BOM/工艺文件/工具清单/文件/wiki --}}
<div class="form-group">
    <label class="control-label"><i class="fa fa-link"></i> {!! __('label.linked_resources', '关联资源') !!}</label>

    {{-- 已关联资源 chips --}}
    <div id="linkedResourcesList" style="margin-bottom:6px;">
        @forelse (($linkedResources ?? []) as $lr)
            <span class="label label-info" style="margin:2px 4px 2px 0; display:inline-block;">
                {{ $lr['typeName'] ?? '' }}: {{ $lr['title'] ?? '' }}
                <a href="javascript:void(0)" class="btnUnlinkResource" data-type="{{ $lr['type'] }}" data-id="{{ $lr['id'] }}" style="color:#fff;">&times;</a>
            </span>
        @empty
            <em class="text-muted">{{ __('text.no_linked_resources', '暂未关联资源') }}</em>
        @endforelse
    </div>

    {{-- 添加关联 --}}
    <div class="row" style="margin:0;">
        <select id="resourceTypeSelect" class="span5" style="width:40%;">
            <option value="">选择类型</option>
            @foreach (($resourceCandidates ?? []) as $group)
                <option value="{{ $group['type'] }}">{{ $group['typeName'] }}</option>
            @endforeach
        </select>
        <select id="resourceIdSelect" class="span7" style="width:55%; margin-left:5px;" disabled>
            <option value="">先选类型</option>
        </select>
    </div>
    <div style="margin-top:6px;">
        <button type="button" class="btn btn-xs btn-default" id="btnAddResource"><i class="fa fa-plus"></i> 添加关联</button>
    </div>
</div>

<script>
jQuery(document).ready(function () {
    var TICKET_ID = {{ $ticket->id ?? 0 }};
    var RESOURCE_CANDIDATES = {!! json_encode($resourceCandidates ?? [], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) !!};
    var BASE_URL = '{{ BASE_URL }}';
    var csrf = function () { return jQuery('meta[name="csrf-token"]').attr('content') || ''; };

    // 类型切换 -> 填充资源下拉
    jQuery('#resourceTypeSelect').on('change', function () {
        var type = jQuery(this).val();
        var $id = jQuery('#resourceIdSelect');
        $id.empty();
        if (!type) { $id.append('<option value="">先选类型</option>').prop('disabled', true); return; }
        var group = RESOURCE_CANDIDATES.filter(function (g) { return g.type === type; })[0];
        if (!group || !group.items || !group.items.length) {
            $id.append('<option value="">（无可用）</option>').prop('disabled', true);
            return;
        }
        group.items.forEach(function (it) {
            $id.append('<option value="' + it.id + '">' + it.title + '</option>');
        });
        $id.prop('disabled', false);
    });

    // 添加关联
    jQuery('#btnAddResource').on('click', function () {
        var type = jQuery('#resourceTypeSelect').val();
        var resourceId = jQuery('#resourceIdSelect').val();
        if (!type || !resourceId) { alert('请选择类型和资源'); return; }
        jQuery.ajax({
            url: BASE_URL + '/tickets/resource-api/' + TICKET_ID + '/link',
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf() },
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify({ type: type, resourceId: parseInt(resourceId, 10) })
        }).done(function () {
            location.reload();
        }).fail(function (xhr) {
            var m = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : ('HTTP ' + xhr.status);
            alert(m);
        });
    });

    // 解除关联
    jQuery('#linkedResourcesList').on('click', '.btnUnlinkResource', function () {
        if (!confirm('确定解除该资源关联？')) { return; }
        var type = jQuery(this).data('type');
        var id = jQuery(this).data('id');
        jQuery.ajax({
            url: BASE_URL + '/tickets/resource-api/' + TICKET_ID + '/unlink/' + type + '/' + id,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': csrf() },
            dataType: 'json'
        }).done(function () {
            location.reload();
        }).fail(function (xhr) {
            var m = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : ('HTTP ' + xhr.status);
            alert(m);
        });
    });
});
</script>