@extends('layouts.admin')
@section('title')
    ویرایش فرم
@endsection
@section('content')
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div class="container-fluid">
            <!-- ============================================================== -->
            <!-- Start Page Content -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">ویرایش فرم</h4>
                            @include('admin.index.messages')

                            <form class="m-t-30" action="/admin/form/{{$form->id}}update" method="post">
                                @method('patch')
                                @csrf


                                <div class="form-group">
                                    <label for="title">عنوان</label>
                                    <input type="text" class="form-control" required name="title" value="{{ old('title',$form->title) }}" id="title" aria-describedby="title" placeholder="عنوان">
                                    @if($errors->has('title'))
                                        <span>{{ $errors->first('title') }}</span>
                                    @endif
                                </div>

                                <h4>عناصر فرم</h4>
                                <div id="fields-container">
                                    @foreach($form->fields as $i => $field)
                                        <div class="border p-3 mb-3 position-relative field-wrapper">
                                            <input type="hidden" name="fields[{{ $i }}][id]" value="{{ $field->id }}">
                                            <div class="d-flex justify-content-end">
                                                <button type="button" class="btn btn-danger btn-sm end-0 m-2" onclick="removeField(this)">حذف</button>
                                            </div>

                                            <label>برچسب:</label>
                                            <input name="fields[{{ $i }}][label]" value="{{ $field->label }}" class="form-control mb-2" required>

                                            <label>نام:</label>
                                            <input name="fields[{{ $i }}][name]" value="{{ $field->name }}" class="form-control mb-2" required>

                                            <label>نوع:</label>
                                            <select name="fields[{{ $i }}][type]" class="form-control mb-2" onchange="toggleOptions(this, {{ $i }})">
                                                <option value="text" @if($field->type == 'text') selected @endif>متن</option>
                                                <option value="number" @if($field->type == 'number') selected @endif>عدد</option>
                                                <option value="textarea" @if($field->type == 'textarea') selected @endif>متن بلند</option>
                                                <option value="select" @if($field->type == 'select') selected @endif>انتخابی</option>
                                                <option value="checkbox" @if($field->type == 'checkbox') selected @endif>تیک</option>
                                                <option value="radio" @if($field->type == 'radio') selected @endif>چند گزینه‌ای</option>
                                            </select>

                                            <label>اجباری:</label>
                                            <select name="fields[{{ $i }}][required]" class="form-control mb-2" required>
                                                <option value="1" @if($field->required) selected @endif>هست</option>
                                                <option value="0" @if(!$field->required) selected @endif>نیست</option>
                                            </select>

                                            <label>اندازه (1–12):</label>
                                            <input name="fields[{{ $i }}][size]" type="number" value="{{ $field->size }}" class="form-control mb-2" min="1" max="12">

                                            <div id="options-{{ $i }}" @if(in_array($field->type,['text','number','textarea'])) style="display: none;" @endif >
                                                <label>گزینه‌ها (با , جدا کنید):</label>
                                                <input name="fields[{{ $i }}][options]" value="{{ $field->options }}" class="form-control mb-2">
                                            </div>
                                        </div>
                                    @endforeach

                                </div>

                                <button type="button" class="btn btn-secondary" onclick="addField()">+ اضافه کردن</button>
                                <button type="submit" class="btn btn-primary">ذخیره</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        let fieldIndex = {{ count($form->fields) }};

        function addField() {
            const container = document.getElementById('fields-container');

            const wrapper = document.createElement('div');
            wrapper.className = 'border p-3 mb-3 position-relative field-wrapper';
            wrapper.setAttribute('data-index', fieldIndex);

            wrapper.innerHTML = `<div class="d-flex justify-content-end">
            <button type="button" class="btn btn-danger btn-sm end-0 m-2" onclick="removeField(this)">حذف</button></div>

            <label>برچسب:</label>
            <input name="fields[${fieldIndex}][label]" class="form-control mb-2" required>

            <label>نام:</label>
            <input name="fields[${fieldIndex}][name]" class="form-control mb-2" required>

            <label>نوع:</label>
            <select name="fields[${fieldIndex}][type]" class="form-control mb-2" onchange="toggleOptions(this, ${fieldIndex})">
                <option value="text">متن</option>
                <option value="number">عدد</option>
                <option value="textarea">متن بلند</option>
                <option value="select">انتخابی</option>
                <option value="checkbox">تیک</option>
                <option value="radio">چند گزینه‌ای</option>
            </select>


            <label>اجباری:</label>
            <select name="fields[${fieldIndex}][required]" class="form-control mb-2" required>
                <option value="1" selected>هست</option>
                <option value="0">نیست</option>
            </select>

            <label>اندازه (1–12):</label>
            <input name="fields[${fieldIndex}][size]" type="number" class="form-control mb-2" value="12" min="1" max="12">

            <div id="options-${fieldIndex}" style="display: none;">
                <label>گزینه‌ها (با , جدا کنید):</label>
                <input name="fields[${fieldIndex}][options]" class="form-control mb-2">
            </div>
        `;

            container.appendChild(wrapper);
            fieldIndex++;
        }

        function toggleOptions(select, index) {
            const value = select.value;
            const optionsDiv = document.getElementById(`options-${index}`);
            if (['select', 'radio'].includes(value)) {
                optionsDiv.style.display = 'block';
            } else {
                optionsDiv.style.display = 'none';
            }
        }


        function removeField(button) {
            button.closest('.field-wrapper').remove();
        }
    </script>
@endsection