@extends('backend.dashboard.layout.master')
@section('content')


    <!--begin::Image input-->


    <style>
        .image-input-placeholder {
            background-image: url('svg/avatars/blank.svg');
        }

        [data-bs-theme="dark"] .image-input-placeholder {
            background-image: url('svg/avatars/blank-dark.svg');
        }
    </style>


    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->


        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="d-flex flex-column flex-column-fluid">
            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                    <!--begin::Page title-->
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                            @if (isset($method) && $method == 'PUT')
                                {{ translate('Edit Product') }}
                            @else
                                {{ translate('Create Product') }}
                            @endif


                        </h1>
                        <!--end::Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-n2">
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                    <!--end::Page title-->
                    <!--begin::Actions-->
                    <!--end::Actions-->
                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->
            <!--begin::Content-->

            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">
                    <!--begin::Form-->
                    <form class="form d-flex flex-column flex-lg-row" id="formPreview" action="{{ $action }}"
                        method="POST" enctype="multipart/form-data" novalidate>
                        @csrf
                        @if (isset($method) && $method == 'PUT')
                            @method('PUT')
                        @else
                            @method('POST')
                        @endif
                        <!--begin::Aside column-->
                        <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">
                            <!--begin::Thumbnail settings-->
                            <div class="card card-flush py-4">
                                <!--begin::Card header-->
                                <div class="card-header">
                                    <!--begin::Card title-->
                                    <div class="card-title">
                                        <h2>Thumbnail</h2>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body text-center pt-0">
                                    <!--end::Image input placeholder-->

                                    <!--begin::Image input-->
                                    <div class="image-input" data-kt-image-input="true"
                                        style="background-image: url('{{ asset('assets/media/avatars/blank.png') }}')">
                                        <!--begin::Image preview wrapper-->
                                        <div class="image-input-wrapper w-125px h-125px"
                                            style="background-image: url('{{ !empty($product->image) ? asset($product->image) : asset('assets/media/avatars/blank.png') }}')">
                                        </div>
                                        <!--end::Image preview wrapper-->

                                        <!--begin::Edit button-->
                                        <label
                                            class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                            data-bs-dismiss="click" title="Change avatar">
                                            <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span
                                                    class="path2"></span></i>

                                            <!--begin::Inputs-->
                                            <input type="file" name="image" accept=".png, .jpg, .jpeg" />
                                            <input type="hidden" name="avatar_remove" />
                                            <!--end::Inputs-->
                                        </label>
                                        <!--end::Edit button-->

                                        <!--begin::Cancel button-->
                                        <span
                                            class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                            data-bs-dismiss="click" title="Cancel avatar">
                                            <i class="ki-outline ki-cross fs-3"></i>
                                        </span>
                                        <!--end::Cancel button-->

                                        <!--begin::Remove button-->
                                        <span
                                            class="btn btn-icon btn-circle btn-color-muted btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                            data-bs-dismiss="click" title="Remove avatar">
                                            <i class="ki-outline ki-cross fs-3"></i>
                                        </span>
                                        <!--end::Remove button-->
                                    </div>

                                    <!--end::Image input-->
                                    <!--end::Image input-->

                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Thumbnail settings-->

                            <!--begin::General options-->
                            <div class="card card-flush py-4">
                                <!--begin::Card header-->
                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>{{ translate('Category') }}</h2>
                                    </div>
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body pt-0">
                                    <!--begin::Input group-->
                                    <div class="mb-5 fv-row">
                                        <!--begin::Label-->
                                        <label class="required form-label">{{ translate('Product category') }}</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select class="form-select" name="category_id" required>
                                            <option disabled value="">{{ translate('Select Category') }}
                                            </option>
                                            @foreach ($category as $cat)
                                                @foreach ($cat->category_translates as $trans)
                                                    @if ($trans->lang == app()->getLocale())
                                                        <option value="{{ $cat->id }}"
                                                            {{ old('category_id', $product->category_id ?? '') == $cat->id ? 'selected' : '' }}>
                                                            {{ $trans->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            @endforeach
                                        </select>
                                        <!--end::Input-->
                                        <!--begin::Description-->
                                        <div class="text-muted fs-7">
                                            {{ translate('Select product category.') }}</div>
                                        <!--end::Description-->
                                    </div>
                                    <!--end::Input group-->

                                </div>
                                <!--end::Card header-->
                            </div>
                            <!--end::General options-->

                            <!--begin::Status-->
                            <div class="card card-flush py-4">
                                <!--begin::Card header-->
                                <div class="card-header">
                                    <!--begin::Card title-->
                                    <div class="card-title required">
                                        <h2>{{ translate('Status') }}</h2>
                                    </div>
                                    <!--end::Card title-->
                                    <!--begin::Card toolbar-->
                                    <div class="card-toolbar">
                                        @if (isset($method) && $method == 'PUT')
                                            <div class="rounded-circle w-15px h-15px {{ $product->status == 1 ? 'bg-success' : 'bg-danger' }}"
                                                id="productStatusID">
                                            </div>

                                            @else
                                            <div class="rounded-circle w-15px h-15px {{ $product->status == 1 ? 'bg-success' : 'bg-danger' }}"
                                            id="productStatusID">
                                            </div>

                                        @endif
                                    </div>

                                    <!--begin::Card toolbar-->
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body pt-0">
                                    <!--begin::Select2-->
                                    <select
                                        class="form-select mb-2" id="inputIDField" name="status" onchange="SwitchStatus()">
                                        <option value="1" {{ old('status', $product->status ?? '') == 1 ? 'selected' : '' }}>{{ translate('Active') }}</option>
                                        <option value="0" {{ old('status', $product->status ?? '') == 0 ? 'selected' : '' }}>{{ translate('Inactive') }}</option>
                                    </select>
                                    <!--end::Select2-->
                                    <!--begin::Description-->
                                    <div class="text-muted fs-7">{{ translate('Set the status of the product') }}.</div>
                                    <!--end::Description-->
                                    <!--begin::Datepicker-->
                                    <div class="d-none mt-10">
                                        <label for="kt_ecommerce_add_product_status_datepicker" class="form-label">Select
                                            publishing date and time</label>
                                        <input class="form-control" id="kt_ecommerce_add_product_status_datepicker"
                                            placeholder="Pick date & time" />
                                    </div>
                                    <!--end::Datepicker-->
                                </div>
                                <!--end::Card body-->
                            </div>
                            <!--end::Status-->


                            <div class="card card-flush py-4">
                                <div class="card-header">
                                    <h4 class="me-5 mb-0">{{ translate('Product message') }}</h4>
                                </div>
                                <div class="card-body pt-0">
                                    <select name="message_id" class="form-select">
                                        <option value="" disabled
                                            {{ old('message_id', $product->message_id ?? '') == '' ? 'selected' : '' }}>
                                            {{ translate('Select an option for message') }}</option>
                                        @foreach ($productMessage as $item)
                                            <option value="{{ $item->id }}"
                                                {{ old('message_id', $product->message_id ?? '') == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!--end::Aside column-->
                        <!--begin::Main column-->
                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                            <!--begin:::Tabs-->
                            <!-- Tabs Navigation -->
                            <ul
                                class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-n2">
                                <!-- Language Tabs -->
                                @foreach ($language as $index => $item)
                                    <li class="nav-item">
                                        <a class="nav-link text-active-primary pb-4 {{ $index === 0 ? 'active' : '' }}"
                                            data-bs-toggle="tab"
                                            href="#lang_tab_{{ $index }}">{{ $item->name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                            <!--end:::Tabs-->
                            <!--begin::Tab content-->
                            <div class="tab-content">
                                <!--begin::Tab pane-->

                                <!--end::Tab pane-->
                                @foreach ($language as $index => $lang)
                                    <input type="hidden" name="lang[]" value="{{ $lang->name }}">
                                    <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}"
                                        id="lang_tab_{{ $index }}" role="tabpanel">
                                        <div class="d-flex flex-column gap-7 gap-lg-10">
                                            <!--begin::Inventory-->
                                            <div class="card card-flush py-4">
                                                <div class="card-header">
                                                    <div class="card-title">
                                                        <h2>{{ translate('Product details') }} ({{ $lang->name }})</h2>
                                                    </div>
                                                </div>
                                                <div class="card-body pt-0">
                                                    <div class="mb-5 fv-row">
                                                        <label
                                                            class=" {{ $lang->name == 'en' ? 'required' : ' ' }} form-label">{{ translate('Product name') }}</label>
                                                        <input type="text" name="name[{{ $lang->name }}]"
                                                            value="{{ old("name.{$lang->name}", $productTranslate[$lang->name]->name ?? '') }}"
                                                            class="form-control mb-2 product-name-input"
                                                            placeholder="Enter product name"
                                                            data-lang="{{ $lang->name }}" />
                                                    </div>

                                                    <div class="mb-5 fv-row">
                                                        <label
                                                            class="{{ $lang->name == 'en' ? 'required' : ' ' }} form-label">{{ translate('Slug') }}</label>
                                                        <input type="text" class="form-control mb-2 slug-input"
                                                            id="SlugID-{{ $lang->name }}" placeholder="slug"
                                                            value="{{ $productTranslate[$lang->name]->slug ?? '' }}"
                                                            name="slug[{{ $lang->name }}]" />
                                                        <div class="text-muted fs-7">Enter the product slug or barcode.
                                                        </div>
                                                    </div>


                                                    <div class="mb-10">
                                                        <label
                                                            class="{{ $lang->name == 'en' ? 'required' : ' ' }} form-label">{{ translate('Write Product details here...') }}</label>
                                                        <div class="mb-5">
                                                            <textarea name="description[{{ $lang->name }}]" class="counter{{ $index }}"
                                                                id="counter{{ $index }}" oninput="CounterMethod(this)">{{ old("description.{$lang->name}", $productTranslate[$lang->name]->description ?? '') }}
                                                            </textarea>
                                                        </div>
                                                        <div class="float-end mt-0">
                                                            <span>

                                                                <span id="letterID{{ $index }}">0</span>/500</span>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <!--end::Meta options-->
                                        </div>
                                    </div>
                                @endforeach
                                <!--end::Tab pane-->
                            </div>
                            <!--end::Tab content-->
                            <div class="card card-flush py-4">
                                <!--begin::Card header-->
                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>{{ translate('Pricing') }}</h2>
                                    </div>
                                </div>
                                <!--end::Card header-->
                                <!--begin::Card body-->
                                <div class="card-body pt-0">
                                    <!--begin::Input group-->
                                    <div class="mb-5 fv-row">
                                        <!--begin::Input-->
                                        <!-- Price -->
                                        <div>
                                            <label class="form-label">{{ translate('Product Price') }}</label>

                                            <select class="form-select" id="toggleSelect" data-kt-select-toggle="true">
                                                <option value="">{{ translate('Select Pricing Method') }}</option>
                                                <option value="Annual">{{ translate('Recyclable') }}</option>
                                                <option value="Fixed">{{ translate('Fixed Price') }}</option>
                                            </select>
                                            <div class="text-muted fs-7">
                                                {{ translate('Set at least one pricing method') }}.</div>

                                            <div id="Fixed" style="display: none;">
                                                <input type="number" class="form-control" name="price"
                                                    value="{{ old('price', $product->price ?? null) }}" required>
                                            </div>

                                            <div id="Annual" style="display: none;">
                                                <table class="table align-middle table-row-dashed fs-6 gy-5"
                                                    id="kt_table_products">
                                                    <thead>
                                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                            <th>{{ translate('1 month') }}</th>
                                                            <th>{{ translate('3 month') }}</th>
                                                            <th>{{ translate('6 month') }}</th>
                                                            <th>{{ translate('12 month') }}</th>
                                                            <th>{{ translate('2 year') }}</th>
                                                            <th>{{ translate('3 year') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="text-gray-600 fw-semibold">
                                                        <tr>
                                                            <td><input type="text" name="annual[month1]"
                                                                    class="form-control form-control-sm"
                                                                    value="{{ old('annual.month1', $product->annual['month1'] ?? '') }}"
                                                                    style="max-width: 90px; min-width: 60px; width: 100%;">
                                                            </td>
                                                            <td><input type="text" name="annual[month3]"
                                                                    class="form-control form-control-sm"
                                                                    value="{{ old('annual.month3', $product->annual['month3'] ?? '') }}"
                                                                    style="max-width: 90px; min-width: 60px; width: 100%;">
                                                            </td>
                                                            <td><input type="text" name="annual[month6]"
                                                                    class="form-control form-control-sm"
                                                                    value="{{ old('annual.month6', $product->annual['month6'] ?? '') }}"
                                                                    style="max-width: 90px; min-width: 60px; width: 100%;">
                                                            </td>
                                                            <td><input type="text" name="annual[month12]"
                                                                    class="form-control form-control-sm"
                                                                    value="{{ old('annual.month12', $product->annual['month12'] ?? '') }}"
                                                                    style="max-width: 90px; min-width: 60px; width: 100%;">
                                                            </td>
                                                            <td><input type="text" name="annual[year2]"
                                                                    class="form-control form-control-sm"
                                                                    value="{{ old('annual.year2', $product->annual['year2'] ?? '') }}"
                                                                    style="max-width: 90px; min-width: 60px; width: 100%;">
                                                            </td>
                                                            <td><input type="text" name="annual[year3]"
                                                                    class="form-control form-control-sm"
                                                                    value="{{ old('annual.year3', $product->annual['year3'] ?? '') }}"
                                                                    style="max-width: 90px; min-width: 60px; width: 100%;">
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Input group-->
                                        <div class="fv-row mb-10">

                                            <!--begin::Row-->
                                            <div class="row row-cols-1 row-cols-md-3 row-cols-lg-1 row-cols-xl-3 g-9"
                                                data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">

                                            </div>
                                            <!--end::Row-->
                                        </div>
                                        <!--end::Input group-->

                                        <!--begin::Input group-->
                                        <div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_fixed">
                                            <!--begin::Label-->
                                            <label class="form-label">Fixed Discounted Price</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" name="dicsounted_price" class="form-control mb-2"
                                                placeholder="Discounted price" />
                                            <!--end::Input-->
                                            <!--begin::Description-->
                                            <div class="text-muted fs-7">Set the discounted product price. The
                                                product will be reduced at the determined fixed price</div>
                                            <!--end::Description-->
                                        </div>
                                        <!--end::Input group-->
                                        <!--begin::Tax-->

                                        <!--end:Tax-->
                                    </div>
                                    <!--end::Card header-->
                                </div>
                            </div>

                            <div class="GLORBO">
                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <h3 class="card-title">Create</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-5">
                                            <label class="form-label">{{ translate('Field Type') }}</label>
                                            <select id="fieldType" class="form-select">
                                                <option value="text">{{ translate('text') }}</option>
                                                <option value="email">{{ translate('Email') }}</option>
                                                <option value="textarea">{{ translate('Textarea') }}</option>
                                                <option value="select">{{ translate('Select') }}</option>
                                                <option value="number">{{ translate('Number') }}</option>
                                                <option value="tel">{{ translate('Phone') }}</option>
                                                <option value="date">{{ translate('Date') }}</option>
                                                <option value="checkbox">{{ translate('Checkbox') }}</option>
                                                <option value="radio">{{ translate('Radio') }}</option>
                                                <option value="password">{{ translate('Password') }}</option>
                                                <option value="url">{{ translate('URL') }}</option>
                                                <option value="file">{{ translate('File') }}</option>
                                                <option value="color">{{ translate('Color') }}</option>
                                            </select>
                                        </div>

                                        <div class="mb-5">
                                            <label class="form-label">{{ translate('Field Name') }}:</label>
                                            <input type="text" id="fieldLabel" class="form-control"
                                                placeholder="{{ translate('Example: Full Name') }}">
                                        </div>

                                        <div id="optionsContainer" class="mb-5" style="display: none;">
                                            <label class="form-label">{{ translate('Values (comma separated)') }}:</label>
                                            <input type="text" id="fieldOptions" class="form-control"
                                                placeholder="{{ translate('Example: Option1, Option2, Option3') }}">
                                            <small class="text-muted">{{ translate('Required only for select, checkbox, radio') }}</small>
                                        </div>

                                        <button type="button" onclick="addField()" value="" class="btn btn-primary">➕ {{ translate('Add Field') }}</button>
                                        <input type="hidden" name="attribute" id="JsonConverterID" value="{{ old('attribute', $product->attribute ?? '') }}">
                                    </div>
                                </div>
                                <div class="card card-flush py-4 mt-6" id="formCard" style="display: none;">
                                    <div class="card-header">
                                        <h3 class="card-title">{{ translate('Form Results') }}</h3>
                                    </div>
                                    <div class="card-body">
                                        <div id="FormOutput"></div>

                                    </div>
                                </div>

                                <div class="card card-flush py-4 mt-5">
                                     <div class="d-flex justify-content-end mt-4 gap-2 me-5">
                                    <button class="btn btn-primary"
                                        type="submit">{{ translate('Submit Form') }}</button>
                                    <a href="{{ route('Customer.index') }}"
                                        class="btn btn-secondary">{{ translate('Back') }}</a>
                                </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Content container-->

            </div>
            <!--end::Content-->
        </div>
        <!--end::Content wrapper-->
    </div>
    <script>
        // Image Preview
        document.addEventListener("DOMContentLoaded", function() {
            const input = document.getElementById('imageInput');
            const preview = document.getElementById('imagePreview');
            const container = document.getElementById('imagePreviewContainer');
            const thumbnail = document.getElementById('thumbnailPreview');

            input?.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    const imageUrl = URL.createObjectURL(file);
                    if (preview) preview.src = imageUrl;
                    if (container) container.style.display = 'block';
                    if (thumbnail) thumbnail.style.backgroundImage = `url('${imageUrl}')`;
                }
            });
        });

        // Character Counter


        // Slug Generator
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.product-name-input').forEach(input => {
                const lang = input.dataset.lang;
                const slugInput = document.getElementById(`SlugID-${lang}`);

                function updateSlug() {
                    if (slugInput) {
                        slugInput.value = generateSlug(input.value);
                    }
                }

                updateSlug();
                input.addEventListener('input', updateSlug);
            });
        });

        function generateSlug(text) {
            return text
                .toLowerCase()
                .trim()
                .replace(/[\s_]+/g, '-')
                .replace(/[^\p{L}\p{N}-]+/gu, '')
                .replace(/-+/g, '-')
                .replace(/^-|-$/g, '');
        }

        // CKEditor Initialization for Multiple Textareas
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('textarea[id^="counter"]').forEach((textarea, index) => {
                ClassicEditor
                    .create(textarea)
                    .then(editor => {
                        console.log(`Editor created for ${textarea.id}`);

                        const spanId = `letterID${index}`;
                        const counterSpan = document.getElementById(spanId);
                        const editorUI = editor.ui.view.editable.element;

                        const CHAR_LIMIT = 500;

                        // Style
                        editorUI.style.border = '1px solid #ccc';
                        editorUI.style.transition = 'border 0.3s';

                        // Track last valid data
                        let lastValidData = editor.getData(); // Initialize with preloaded data

                        const getTextLength = () => {
                            const tempDiv = document.createElement('div');
                            tempDiv.innerHTML = editor.getData();
                            return tempDiv.textContent.trim().length;
                        };

                        const updateCounter = () => {
                            const len = getTextLength();
                            counterSpan.textContent = len;

                            if (len > CHAR_LIMIT) {
                                counterSpan.style.color = 'red';
                                editorUI.style.border = '2px solid red';

                                // Revert to last valid content
                                editor.setData(lastValidData);
                            } else {
                                lastValidData = editor.getData(); // Save valid state
                                counterSpan.style.color = 'green';
                                editorUI.style.border = '1px solid #ccc';
                            }
                        };

                        // Run on every data change
                        editor.model.document.on('change:data', updateCounter);

                        // ✅ Run once after creation to handle preloaded content
                        updateCounter();
                    })
                    .catch(error => {
                        console.error(error);
                    });
            });
        });
    </script>

    <script>
        document.getElementById('toggleSelect').addEventListener('change', function() {
            const selected = this.value;
            document.getElementById('Fixed').style.display = (selected === 'Fixed') ? 'block' : 'none';
            document.getElementById('Annual').style.display = (selected === 'Annual') ? 'block' : 'none';
        });
    </script>

<script>
    const formPreview = document.getElementById('formPreview');
    const fieldType = document.getElementById('fieldType');
    const fieldLabel = document.getElementById('fieldLabel');
    const optionsContainer = document.getElementById('optionsContainer');
    const fieldOptions = document.getElementById('fieldOptions');
    const exportedHTML = document.getElementById('exportedHTML');
    const exportedJSON = document.getElementById('exportedJSON');
    const formFields = [];

    fieldType.addEventListener('change', () => {
        optionsContainer.style.display = ['select', 'checkbox', 'radio'].includes(fieldType.value) ? 'block' : 'none';
    });

    function getOptionValues() {
        return fieldOptions.value.split(',').map(opt => opt.trim()).filter(opt => opt !== '');
    }

    function renderField(fieldData) {
        const { type, label, name, options } = fieldData;

        const formCard = document.getElementById('formCard');
        if (formCard.style.display === 'none') {
            formCard.style.display = 'block';
        }

        const wrapper = document.getElementById('FormOutput');

        const fieldContainer = document.createElement('div');
        fieldContainer.classList.add('mb-3');

        const labelEl = document.createElement('label');
        labelEl.className = 'form-label fw-bold';
        labelEl.textContent = label;

        let inputEl;

        if (type === 'textarea') {
            inputEl = document.createElement('textarea');
            inputEl.className = 'form-control';
            inputEl.name = name;
        } else if (type === 'select') {
            inputEl = document.createElement('select');
            inputEl.className = 'form-select';
            inputEl.name = name;
            options.forEach(opt => {
                const option = document.createElement('option');
                option.value = opt;
                option.text = opt;
                inputEl.add(option);
            });
        } else if (['checkbox', 'radio'].includes(type)) {
            inputEl = document.createElement('div');
            options.forEach(opt => {
                const checkWrap = document.createElement('div');
                checkWrap.className = type === 'checkbox' ? 'form-check' : 'form-check form-check-inline';
                const checkInput = document.createElement('input');
                checkInput.type = type;
                checkInput.name = name;
                checkInput.value = opt;
                checkInput.className = 'form-check-input';
                const checkLabel = document.createElement('label');
                checkLabel.className = 'form-check-label';
                checkLabel.textContent = opt;
                checkWrap.appendChild(checkInput);
                checkWrap.appendChild(checkLabel);
                inputEl.appendChild(checkWrap);
            });
        } else {
            inputEl = document.createElement('input');
            inputEl.type = type;
            inputEl.className = 'form-control';
            inputEl.name = name;
        }

        // === Create control wrapper with delete button ===
        const controlWrap = document.createElement('div');
        controlWrap.className = 'd-flex justify-content-between align-items-start gap-2';

        const leftWrap = document.createElement('div');
        leftWrap.className = 'w-100';
        leftWrap.appendChild(labelEl);
        leftWrap.appendChild(inputEl);

        const deleteBtn = document.createElement('button');
        deleteBtn.type = 'button';
        deleteBtn.className = 'btn btn-danger btn-sm mt-10';
        deleteBtn.textContent = 'Delete';

        deleteBtn.addEventListener('click', () => {
            const index = formFields.findIndex(f => f.name === name);
            if (index !== -1) formFields.splice(index, 1);
            fieldContainer.remove();
            exportJSON();
        });

        controlWrap.appendChild(leftWrap);
        controlWrap.appendChild(deleteBtn);
        fieldContainer.appendChild(controlWrap);
        wrapper.appendChild(fieldContainer);
    }

    function addField() {
        const type = fieldType.value;
        const label = fieldLabel.value.trim();
        const name = label.replace(/\s+/g, '_').toLowerCase();
        if (!label) return alert('Please, enter a valid field');

        const fieldData = { type, label, name };
        if (['select', 'checkbox', 'radio'].includes(type)) {
            fieldData.options = getOptionValues();
        }

        formFields.push(fieldData);
        renderField(fieldData);

        // Reset inputs
        fieldLabel.value = '';
        fieldOptions.value = '';
        optionsContainer.style.display = 'none';

        exportJSON();
    }

    function exportForm() {
        exportedHTML.textContent = formPreview.innerHTML;
    }

    function exportJSON() {
        if (formFields.length === 0) {
            console.log('[]');
            return;
        }
        try {
            const formatted = JSON.stringify(formFields, null, 2);
            document.getElementById("JsonConverterID").value = formatted;
            console.log(formatted);
        } catch (err) {
            console.error('Error exporting JSON:', err);
        }
    }

    function loadExistingFields() {
        const jsonValue = document.getElementById("JsonConverterID").value;
        if (!jsonValue) return;

        try {
            const parsedFields = JSON.parse(jsonValue);
            parsedFields.forEach(field => {
                formFields.push(field);
                renderField(field);
            });
        } catch (err) {
            console.error("Failed to load existing fields from JSON:", err);
        }
    }

    // Auto-load on page load
    window.addEventListener('DOMContentLoaded', loadExistingFields);
</script>

<script>
    const currentRouteName = "{{ Route::currentRouteName() }}";
     function SwitchStatus()
    {
       var stats = document.getElementById("inputIDField").value;
       if ( stats == 1)
       {
        document.getElementById("productStatusID").className = "rounded-circle w-15px h-15px bg-success";
       }
       else
       {
                document.getElementById("productStatusID").className = "rounded-circle w-15px h-15px bg-danger";
       }

    }

    if ( currentRouteName == "Product.create")
       {
        SwitchStatus();
       }
</script>
@endsection