@csrf
<style>
    /* استایل برای انتخاب‌گر بصری آیکون */
    .icon-picker-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 15px;
        background: #f8f9fa;
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #ddd;
    }
    .icon-item {
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 8px;
        padding: 10px;
        transition: all 0.3s ease;
        text-align: center;
        background: white;
    }
    .icon-item:hover {
        background: #e9ecef;
    }
    .icon-item img {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }
    /* استایل آیکون انتخاب شده */
    .icon-item.active {
        border-color: #0d6efd;
        box-shadow: 0 0 10px rgba(13, 110, 253, 0.2);
        background: #f0f7ff;
    }
    .icon-radio {
        display: none; /* مخفی کردن دایره رادیو باتن */
    }
</style>

<div class="container-fluid">
    <div class="card-block row w-100 m-0">
        <div class="col-md-12 col-12 p-2">
            <div class="form-group">
                <input type="hidden" name="service_id" value="{{$service->id}}">
                <label for="title" class="fw-bold mb-2">عنوان ویژگی</label><span style="color: red;">*</span>
                <input type="text" class="form-control bg-light rounded-custom" id="title" name="title"
                       value="{{ old('title', $feature->title ?? '') }}" data-required="true">
            </div>
        </div>

        <div class="col-12 p-2 mt-3">
            <label class="fw-bold mb-2">انتخاب شکل آیکون</label><span style="color: red;">*</span>
            <div class="icon-picker-container">
                @php
                    $availableIcons = [
                        'assets/site/img/service-i-1.svg',
                        'assets/site/img/service-i-2.svg',
                        'assets/site/img/service-i-3.svg',
                        'assets/site/img/service-i-4.svg',
                        // می‌توانید آیکون‌های بیشتری اینجا اضافه کنید
                    ];
                @endphp

                @foreach($availableIcons as $path)
                    <label class="icon-item {{ (old('icon', $feature->icon ?? '') == $path) ? 'active' : '' }}">
                        <input type="radio" name="icon" value="{{ $path }}" class="icon-radio"
                            {{ (old('icon', $feature->icon ?? '') == $path) ? 'checked' : '' }}>
                        <img src="{{ asset($path) }}" alt="icon">
                    </label>
                @endforeach
            </div>
            @error('icon')
            <small class="text-danger mt-1 d-block">{{ $message }}</small>
            @enderror
        </div>

        <div class="col-md-3 col-6 p-2 mt-4">
            <div class="form-check form-switch">
                <input type="hidden" name="is_active" value="0">
                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" {{ (old('is_active', $feature->is_active ?? true)) ? 'checked' : '' }}>
                <label class="form-check-label" for="is_active">فعال</label>
            </div>
        </div>

        <div class="col-md-3 col-6 p-2 mt-4">
            <div class="form-check form-switch">
                <input type="hidden" name="show_in_first_page" value="0">
                <input class="form-check-input" type="checkbox" id="show_in_first_page" name="show_in_first_page" value="1" {{ (old('show_in_first_page', $feature->show_in_first_page ?? true)) ? 'checked' : '' }}>
                <label class="form-check-label" for="show_in_first_page">نمایش در صفحه اصلی</label>
            </div>
        </div>

        <div class="col-12 ms-auto p-2 mt-3">
            <button type="submit" class="btn btn-custom rounded-custom w-fit px-5">ذخیره ویژگی</button>
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.icon-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelectorAll('.icon-item').forEach(i => i.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>