@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1>Test Choices.js</h1>
    <select id="test-tags" multiple>
        <option value="1">Tag One</option>
        <option value="2">Tag Two</option>
        <option value="3">Tag Three</option>
    </select>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('test-tags');
    if (el && typeof Choices === 'function') {
        new Choices(el, { removeItemButton: true });
        console.log('Choices initialized!');
    } else {
        console.log('Choices not ready!');
    }
});
</script>
@endsection