@php
    $isEdit = isset($feature) && $feature->exists;
    $featureId = $isEdit ? $feature->id : 'new';
@endphp

<div class="card border-0">
    <div class="card-header py-2 bg-light d-flex justify-content-between align-items-center">
        <h6 class="m-0 fw-bold">
            @if($isEdit)
                <i class="bi bi-pencil me-1"></i> ویرایش ویژگی
            @else
                <i class="bi bi-plus-circle me-1"></i> افزودن ویژگی جدید
            @endif
        </h6>
        @if($isEdit)
            <span class="badge bg-{{ $feature->is_active ? 'success' : 'secondary' }}">
                {{ $feature->is_active ? 'فعال' : 'غیرفعال' }}
            </span>
        @endif
    </div>
    <div class="card-body">
        <form id="featureForm{{ $feature->id }}" method="POST"
              action="{{ $feature ? route('admin.features.update', $feature) : route('admin.features.store') }}"
              class="row g-3">
            @csrf
            @if($feature)
                @method('PUT')
            @endif


            <input type="hidden" name="service_id" value="{{ $feature->id }}">
            <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">
                            <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>
            </div>

            <div class="col-12 text-end mt-2">
                @if($isEdit)
                    <button type="button"
                            class="btn btn-outline-danger btn-sm rounded-custom px-3 me-2 delete-feature-btn"
                            data-feature-id="{{ $feature->id }}"
                            title="حذف">
                        <i class="bi bi-trash me-1"></i> حذف
                    </button>
                @endif
                <div class="col-12 ms-auto p-2 mt-3">

                    <button type="submit" class="btn btn-custom rounded-custom px-4">
                        @if($isEdit)
                            <i class="bi bi-check-lg me-1"></i> به‌روزرسانی
                        @else
                            <i class="bi bi-plus-circle me-1"></i> افزودن
                        @endif
                    </button>
                </div>
            </div>

        </form>
    </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>