@extends('layouts.admin')

@section('content')
    <div class="container">
        <h1>Edit 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.update', $importantLink) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" name="title" id="title" class="form-control" value="{{ old('title', $importantLink->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', $importantLink->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 }}" {{ $importantLink->icon == $icon ? 'selected' : '' }}>{{ $icon }}</option>
                    @endforeach
                </select>
                <div id="icon-example" class="mt-2">
                    @if($importantLink->icon)
                        <i class="{{ $importantLink->icon }}"></i> Selected Icon
                    @endif
                </div>
            </div>

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

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

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

    <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