@csrf

<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', $technology->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>
            <input type="file" class="form-control bg-light rounded-custom" id="image" name="image">
            @if (isset($technology) && $technology->image)
                <div class="mt-2">
                    <img src="{{ $technology->getImageFile() }}" width="100" class="rounded shadow-sm">
                </div>
            @endif
            @error('image')
                <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', $technology->is_active ?? true) ? 'checked' : '' }}>
                <label class="form-check-label" for="is_active">فعال</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('.image-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelectorAll('.image-item').forEach(i => i.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>