@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" method="post">
                                @csrf


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

                                <h4>عناصر فرم</h4>
                                <div id="fields-container"></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 = 0;


        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