@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <style>
        .condition-group { margin-bottom: 1.5rem; }
        .condition-group-title { 
            font-weight: bold; 
            margin-bottom: 0.5rem; 
            padding: 0.5rem;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .condition-item { 
            display: flex; 
            align-items: center; 
            padding: 0.5rem;
            border-bottom: 1px solid #eee;
        }
        .condition-item:last-child { border-bottom: none; }
        .condition-checkbox { margin-left: 0.5rem; }
        .condition-value { 
            margin-right: auto; 
            max-width: 200px;
            display: none;
        }
        .condition-item.selected .condition-value { display: block; }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'إضافة ميزة جديدة'])

@section('content')
    <div id='pageid'>
        <div>
            <div class="row">
                <div class="col-md-12 col-xl-12">
                    <form id='feature-flag-form' enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">معلومات الميزة</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6 col-12 mt-3">
                                        <label class="form-label">اسم الميزة (slug) <span class="text-danger">*</span></label>
                                        <input class="form-control" name="name" type="text" 
                                               placeholder="مثال: new-checkout-flow" required
                                               pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$">
                                        <small class="text-muted">أحرف صغيرة وأرقام وشرطات فقط</small>
                                    </div>
                                    <div class="col-lg-6 col-12 mt-3">
                                        <label class="form-label">الحالة</label>
                                        <select name="is_active" class="form-control">
                                            <option value="1">مفعل</option>
                                            <option value="0">معطل</option>
                                        </select>
                                    </div>
                                    <div class="col-12 mt-3">
                                        <label class="form-label">الوصف <span class="text-danger">*</span></label>
                                        <textarea class="form-control" name="description" rows="3" required
                                                  placeholder="وصف الميزة والغرض منها"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mt-3">
                            <div class="card-header">
                                <h4 class="card-title">إعدادات التفعيل</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6 col-12 mt-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   name="activate_for_everyone" id="activate_for_everyone" value="1">
                                            <label class="form-check-label" for="activate_for_everyone">
                                                تفعيل للجميع
                                            </label>
                                        </div>
                                        <small class="text-muted">عند التفعيل، ستكون الميزة متاحة لجميع المستخدمين</small>
                                    </div>
                                    <div class="col-lg-6 col-12 mt-3">
                                        <label class="form-label">نسبة التفعيل التدريجي (%)</label>
                                        <input class="form-control" name="rollout_percentage" type="number" 
                                               min="0" max="100" placeholder="اتركه فارغاً لتعطيل التفعيل التدريجي">
                                        <small class="text-muted">نسبة المستخدمين الذين سيتم تفعيل الميزة لهم عشوائياً</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card mt-3">
                            <div class="card-header">
                                <h4 class="card-title">شروط التفعيل</h4>
                                <small class="text-muted">يجب تحقق جميع الشروط المحددة (AND)</small>
                            </div>
                            <div class="card-body">
                                @foreach($conditionTypes as $groupKey => $group)
                                    <div class="condition-group">
                                        <div class="condition-group-title">{{ $group['label'] }}</div>
                                        @foreach($group['conditions'] as $index => $condition)
                                            <div class="condition-item" data-type="{{ $condition['type'] }}">
                                                <input type="checkbox" class="condition-checkbox" 
                                                       id="condition_{{ $condition['type'] }}"
                                                       onchange="toggleConditionValue(this)">
                                                <label for="condition_{{ $condition['type'] }}" class="mb-0 mx-2">
                                                    {{ $condition['label'] }}
                                                </label>
                                                <input type="hidden" name="conditions[{{ $loop->parent->index * 10 + $index }}][type]" 
                                                       value="{{ $condition['type'] }}" disabled>
                                                <input type="hidden" name="conditions[{{ $loop->parent->index * 10 + $index }}][selected]" 
                                                       value="false" class="condition-selected">
                                                @if($condition['value_type'] === 'boolean')
                                                    <select name="conditions[{{ $loop->parent->index * 10 + $index }}][value]" 
                                                            class="form-control condition-value" disabled>
                                                        <option value="true">نعم</option>
                                                        <option value="false">لا</option>
                                                    </select>
                                                @elseif($condition['value_type'] === 'select' && isset($condition['options']))
                                                    <select name="conditions[{{ $loop->parent->index * 10 + $index }}][value]" 
                                                            class="form-control condition-value" disabled>
                                                        @foreach($condition['options'] as $optionValue => $optionLabel)
                                                            <option value="{{ $optionValue }}">{{ $optionLabel }}</option>
                                                        @endforeach
                                                    </select>
                                                @elseif($condition['value_type'] === 'number')
                                                    <input type="number" name="conditions[{{ $loop->parent->index * 10 + $index }}][value]" 
                                                           class="form-control condition-value" placeholder="القيمة" disabled>
                                                @elseif($condition['value_type'] === 'date')
                                                    <input type="date" name="conditions[{{ $loop->parent->index * 10 + $index }}][value]" 
                                                           class="form-control condition-value" disabled>
                                                @else
                                                    <input type="text" name="conditions[{{ $loop->parent->index * 10 + $index }}][value]" 
                                                           class="form-control condition-value" placeholder="القيمة" disabled>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="text-center mt-3 mb-4">
                            <button type="submit" class="col-5 btn btn-primary">
                                <x-lucide-save width="20" height="20" /> حفظ
                            </button>
                            <a href="{{ route('admin.feature-flags.index') }}" class="col-5 btn btn-secondary">
                                <x-lucide-arrow-right width="20" height="20" /> رجوع
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts')
    @include('vue')
    <script>
        function toggleConditionValue(checkbox) {
            const item = checkbox.closest('.condition-item');
            const inputs = item.querySelectorAll('input[name*="[type]"], input[name*="[value]"], select[name*="[value]"]');
            const selectedInput = item.querySelector('.condition-selected');
            
            if (checkbox.checked) {
                item.classList.add('selected');
                inputs.forEach(input => input.disabled = false);
                selectedInput.value = 'true';
            } else {
                item.classList.remove('selected');
                inputs.forEach(input => input.disabled = true);
                selectedInput.value = 'false';
            }
        }

        $(function() {
            $('#feature-flag-form').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(this);
                adawe('{{ route('admin.feature-flags.store') }}', formData);
            });
        });
    </script>
@endsection