@extends('layouts.admin')

@section('content')
    <div class="container">
        <h1>Create Important Link</h1>

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('important_links.store') }}" method="POST">
            @csrf

            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}" required>
            </div>

            <div class="form-group">
                <label for="url">URL</label>
                <input type="text" name="url" id="url" class="form-control" value="{{ old('url', '#') }}" required>
                <small class="form-text text-muted">Enter a valid URL or use "#".</small>
            </div>

            <div class="form-group">
                <label for="icon">Icon</label>
                <select name="icon" id="icon" class="form-control select2-icon" onchange="updateIconExample(this)">
                    <option value="">Select an icon</option>
                    @foreach($icons as $icon)
                        <option value="{{ $icon }}">{{ $icon }}</option>
                    @endforeach
                </select>
                <div id="icon-example" class="mt-2"></div>
            </div>

            <div class="form-group">
                <label for="color">Color</label>
                <input type="color" name="color" id="color" class="form-control" value="{{ old('color', '#000000') }}">
            </div>

            <button type="submit" class="btn btn-primary">Create</button>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#icon').select2({
                width: '100%',
                templateResult: formatIcon
            });

            function formatIcon(icon) {
                if (!icon.id) {
                    return icon.text;
                }
                var $icon = $('<span><i class="' + icon.id + '"></i> ' + icon.text + '</span>');
                return $icon;
            }
        });

        function updateIconExample(select) {
            var selectedIcon = select.value;
            var iconExampleDiv = document.getElementById('icon-example');
            iconExampleDiv.innerHTML = selectedIcon ? `<i class="${selectedIcon}"></i> Selected Icon` : '';
        }
    </script>
@endsection