@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <style>
        .field-preview {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .options-container {
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
        }

        .option-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .option-item input {
            margin-left: 10px;
        }

        .validation-rules-container {
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إضافة حقل جديد</h4>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="createAttachmentPage">
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mg-b-0">إضافة حقل جديد</h4>
                            <a href="{{ route('admin.game-attachments.index', ['game_id' => $selectedGameId]) }}"
                                class="btn btn-secondary">
                                <x-lucide-arrow-left width="20" height="20" /> العودة
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.game-attachments.store') }}" method="POST" id="attachmentForm">
                            @csrf

                            <div class="row">
                                <!-- Game Selection -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">اللعبة <span class="text-danger">*</span></label>
                                        <select name="game_id" class="form-control select2" required>
                                            <option value="">اختر اللعبة</option>
                                            @foreach ($games as $game)
                                                <option value="{{ $game->id }}"
                                                    {{ $selectedGameId == $game->id ? 'selected' : '' }}>
                                                    {{ $game->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('game_id')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Field Type -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">نوع الحقل <span class="text-danger">*</span></label>
                                        <select name="type" id="fieldType" class="form-control" required>
                                            <option value="">اختر نوع الحقل</option>
                                            @foreach ($inputTypes as $type => $label)
                                                <option value="{{ $type }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                        @error('type')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Field Name (English) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">اسم الحقل (English) <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control"
                                            value="{{ old('name') }}" required>
                                        <small class="text-muted">سيتم استخدامه كـ name attribute</small>
                                        @error('name')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Field Name (Arabic) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">اسم الحقل (العربية) <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="name_ar" class="form-control"
                                            value="{{ old('name_ar') }}" required>
                                        @error('name_ar')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Field Label (English) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">تسمية الحقل (English)</label>
                                        <input type="text" name="label" class="form-control"
                                            value="{{ old('label') }}">
                                        @error('label')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Field Label (Arabic) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">تسمية الحقل (العربية)</label>
                                        <input type="text" name="label_ar" class="form-control"
                                            value="{{ old('label_ar') }}">
                                        @error('label_ar')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Placeholder (English) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">النص التوضيحي (English)</label>
                                        <input type="text" name="placeholder" class="form-control"
                                            value="{{ old('placeholder') }}">
                                        @error('placeholder')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Placeholder (Arabic) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">النص التوضيحي (العربية)</label>
                                        <input type="text" name="placeholder_ar" class="form-control"
                                            value="{{ old('placeholder_ar') }}">
                                        @error('placeholder_ar')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Help Text (English) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">نص المساعدة (English)</label>
                                        <textarea name="help_text" class="form-control" rows="3">{{ old('help_text') }}</textarea>
                                        @error('help_text')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Help Text (Arabic) -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label">نص المساعدة (العربية)</label>
                                        <textarea name="help_text_ar" class="form-control" rows="3">{{ old('help_text_ar') }}</textarea>
                                        @error('help_text_ar')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Default Value -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">القيمة الافتراضية</label>
                                        <input type="text" name="default_value" class="form-control"
                                            value="{{ old('default_value') }}">
                                        @error('default_value')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Sort Order -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">ترتيب الحقل</label>
                                        <input type="number" name="sort_order" class="form-control"
                                            value="{{ old('sort_order') }}" min="1">
                                        @error('sort_order')
                                            <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Settings -->
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label">الإعدادات</label>
                                        <div class="form-check">
                                            <input type="checkbox" name="required" value="1"
                                                class="form-check-input" {{ old('required') ? 'checked' : '' }}>
                                            <label class="form-check-label">حقل مطلوب</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" name="is_active" value="1"
                                                class="form-check-input" {{ old('is_active', true) ? 'checked' : '' }}>
                                            <label class="form-check-label">مفعل</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Options for select, radio, checkbox -->
                            <div id="optionsContainer" style="display: none;">
                                <div class="form-group">
                                    <label class="form-label">الخيارات</label>
                                    <div class="options-container">
                                        <div id="optionsList">
                                            <div class="option-item">
                                                <input type="text" class="form-control option-value"
                                                    placeholder="القيمة">
                                                <input type="text" class="form-control option-label"
                                                    placeholder="التسمية">
                                                <button type="button" class="btn btn-sm btn-danger remove-option">
                                                    <x-lucide-x width="16" height="16" />
                                                </button>
                                            </div>
                                        </div>
                                        <button type="button" id="addOption" class="btn btn-sm btn-primary">
                                            <x-lucide-plus width="16" height="16" /> إضافة خيار
                                        </button>
                                    </div>
                                    <input type="hidden" name="options" id="optionsInput">
                                </div>
                            </div>

                            <!-- Validation Rules -->
                            <div class="form-group">
                                <label class="form-label">قواعد التحقق</label>
                                <div class="validation-rules-container">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input validation-rule"
                                                    value="min" data-rule="min">
                                                <label class="form-check-label">الحد الأدنى</label>
                                                <input type="number" class="form-control mt-2 rule-value"
                                                    placeholder="القيمة" style="display: none;">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input validation-rule"
                                                    value="max" data-rule="max">
                                                <label class="form-check-label">الحد الأقصى</label>
                                                <input type="number" class="form-control mt-2 rule-value"
                                                    placeholder="القيمة" style="display: none;">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input validation-rule"
                                                    value="unique" data-rule="unique">
                                                <label class="form-check-label">قيمة فريدة</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="validation_rules" id="validationRulesInput">
                            </div>

                            <!-- Preview -->
                            <div id="fieldPreview" class="field-preview" style="display: none;">
                                <h6>معاينة الحقل:</h6>
                                <div id="previewContent"></div>
                            </div>

                            <div class="form-group mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <x-lucide-check width="20" height="20" /> حفظ الحقل
                                </button>
                                <a href="{{ route('admin.game-attachments.index', ['game_id' => $selectedGameId]) }}"
                                    class="btn btn-secondary">
                                    إلغاء
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts')
    @include('vue')
    <script>
        $(function() {
            $('.select2').select2();

            // Show/hide options container based on field type
            $('#fieldType').change(function() {
                const type = $(this).val();
                const needsOptions = ['select', 'radio', 'checkbox'].includes(type);

                if (needsOptions) {
                    $('#optionsContainer').show();
                } else {
                    $('#optionsContainer').hide();
                }

                updatePreview();
            });

            // Add option
            $('#addOption').click(function() {
                const optionHtml = `
                    <div class="option-item">
                        <input type="text" class="form-control option-value" placeholder="القيمة">
                        <input type="text" class="form-control option-label" placeholder="التسمية">
                        <button type="button" class="btn btn-sm btn-danger remove-option">
                            {!! svg("lucide-x", ["width" => 16, "height" => 16])->toHtml() !!}
                        </button>
                    </div>
                `;
                $('#optionsList').append(optionHtml);
                updateOptionsInput();
            });

            // Remove option
            $(document).on('click', '.remove-option', function() {
                $(this).closest('.option-item').remove();
                updateOptionsInput();
            });

            // Update options input when values change
            $(document).on('input', '.option-value, .option-label', function() {
                updateOptionsInput();
            });

            // Validation rules
            $('.validation-rule').change(function() {
                const ruleValue = $(this).siblings('.rule-value');
                if ($(this).is(':checked')) {
                    ruleValue.show();
                } else {
                    ruleValue.hide().val('');
                }
                updateValidationRulesInput();
            });

            $(document).on('input', '.rule-value', function() {
                updateValidationRulesInput();
            });

            // Update options input
            function updateOptionsInput() {
                const options = [];
                $('.option-item').each(function() {
                    const value = $(this).find('.option-value').val();
                    const label = $(this).find('.option-label').val();
                    if (value && label) {
                        options.push({
                            value: value,
                            label: label
                        });
                    }
                });
                $('#optionsInput').val(JSON.stringify(options));
                updatePreview();
            }

            // Update validation rules input
            function updateValidationRulesInput() {
                const rules = {};
                $('.validation-rule:checked').each(function() {
                    const rule = $(this).data('rule');
                    const valueInput = $(this).siblings('.rule-value');
                    if (valueInput.length && valueInput.is(':visible')) {
                        rules[rule] = valueInput.val();
                    } else {
                        rules[rule] = true;
                    }
                });
                $('#validationRulesInput').val(JSON.stringify(rules));
            }

            // Update preview
            function updatePreview() {
                const type = $('#fieldType').val();
                const name = $('input[name="name_ar"]').val() || 'مثال';
                const placeholder = $('input[name="placeholder_ar"]').val();
                const required = $('input[name="required"]').is(':checked');

                if (!type) {
                    $('#fieldPreview').hide();
                    return;
                }

                let previewHtml = '';

                switch (type) {
                    case 'text':
                    case 'email':
                    case 'number':
                    case 'tel':
                    case 'password':
                    case 'url':
                    case 'date':
                    case 'time':
                    case 'datetime-local':
                        previewHtml = `
                            <label class="form-label">${name} ${required ? '<span class="text-danger">*</span>' : ''}</label>
                            <input type="${type}" class="form-control" placeholder="${placeholder || ''}" ${required ? 'required' : ''}>
                        `;
                        break;
                    case 'textarea':
                        previewHtml = `
                            <label class="form-label">${name} ${required ? '<span class="text-danger">*</span>' : ''}</label>
                            <textarea class="form-control" placeholder="${placeholder || ''}" ${required ? 'required' : ''}></textarea>
                        `;
                        break;
                    case 'select':
                        let options = '';
                        try {
                            const optionsData = JSON.parse($('#optionsInput').val() || '[]');
                            optionsData.forEach(option => {
                                options += `<option value="${option.value}">${option.label}</option>`;
                            });
                        } catch (e) {}
                        previewHtml = `
                            <label class="form-label">${name} ${required ? '<span class="text-danger">*</span>' : ''}</label>
                            <select class="form-control" ${required ? 'required' : ''}>
                                <option value="">اختر...</option>
                                ${options}
                            </select>
                        `;
                        break;
                    case 'radio':
                    case 'checkbox':
                        let radioOptions = '';
                        try {
                            const optionsData = JSON.parse($('#optionsInput').val() || '[]');
                            optionsData.forEach((option, index) => {
                                radioOptions += `
                                    <div class="form-check">
                                        <input type="${type}" class="form-check-input" value="${option.value}" name="preview_${type}">
                                        <label class="form-check-label">${option.label}</label>
                                    </div>
                                `;
                            });
                        } catch (e) {}
                        previewHtml = `
                            <label class="form-label">${name} ${required ? '<span class="text-danger">*</span>' : ''}</label>
                            ${radioOptions}
                        `;
                        break;
                    case 'file':
                    case 'image':
                        previewHtml = `
                            <label class="form-label">${name} ${required ? '<span class="text-danger">*</span>' : ''}</label>
                            <input type="file" class="form-control" ${type === 'image' ? 'accept="image/*"' : ''} ${required ? 'required' : ''}>
                        `;
                        break;
                }

                $('#previewContent').html(previewHtml);
                $('#fieldPreview').show();
            }

            // Update preview on input change
            $('input[name="name_ar"], input[name="placeholder_ar"], input[name="required"]').on('input change',
                updatePreview);

            // Form submission
            $('#attachmentForm').submit(function() {
                updateOptionsInput();
                updateValidationRulesInput();
            });
        });
    </script>
@endsection