<x-backend.model :id="'create-model'" class="lg:max-w-2xl" :button="'Submit'" :form_id="'component-create'" :action="route('component.store')"
    :method="__('post')">
    @csrf
    <div class="p-4 sm:p-10 overflow-y-auto  space-y-2">
        <x-backend.input-label :value="'Component Name'" for="component-name" />
        <x-backend.input-field type="text" name="name" id='component-name' :value="old('name')"
            placeholder="Enter Component name" required />
        <div class="component-field">
            <x-backend.input-label :value="'Component field'" for="component" />
            <x-backend.input-select id="component" class="field" :values="input()" :placeholder="'Select one'" selected=''
                required />
            <div class="field-list mt-2">


            </div>
        </div>

        <div class="database-field">
            <div class="flex items-center mt-4">
                <x-backend.input-switch id="database" name='set_from' value='database' />
                <x-backend.input-label :value="'From database'" class=" ms-3" for="database" />
                <x-backend.input-switch id="custom" class="ml-10" name='set_from' value='custom' />
                <x-backend.input-label :value="'Custom'" class=" ms-3 " name='set_custom' for="custom" />
            </div>
            <div class="add-database mt-4 space-y-2">

            </div>
        </div>


    </div>
</x-backend.model>

<script>
    $(document).on('change', '#database', function() {
        let status = $(this).parents('.database-field').find('#database').is(':checked');
        $(this).parents('.database-field').find('#custom').prop('checked', false);
        if (status) {
            let element = `
            <x-backend.input-label :value="'Database name'" for="database-name" />
        <x-backend.input-field type="text" name="database" id='database-name' :value="old('database')"
            placeholder="Enter Database name" required />
        
            <x-backend.input-label :value="'Data limit'" for="limit" />
        <x-backend.input-field type="text" name="limit" id='limit' :value="old('limit')"
            placeholder="Enter limit"  />
            `;

            $(this).parents('.database-field').find('.add-database').html(element);
        } else {
            $(this).parents('.database-field').find('.add-database').empty();

        }
    });
    $(document).on('change', '#custom', function() {
        let status = $(this).parents('.database-field').find('#custom').is(':checked');
        $(this).parents('.database-field').find('#database').prop('checked', false);
        if (status) {
            let element =
                `
            <x-backend.input-label :value="'Component field'" for="component" />
            <x-backend.input-select id="component" :values="input()" class='sub-component' :placeholder="'Select one'" selected='' />`;
            $(this).parents('.database-field').find('.add-database').html(element);
        } else {
            $(this).parents('.database-field').find('.add-database').empty();

        }
    });
    $(document).on('change', '.sub-component', function() {
        let value = $(this).find('option:selected').val();
        let text = $(this).find('option:selected').text();
        $(this).find('option:first').prop('selected', true);
        let element = `
            <div class='list'>
                    <x-backend.input-label :value="'${text}'" for="${value}" />
                    <x-backend.input-field type="text" name="sub_field_name[]" class="!w-[90%] inline-block"
                        placeholder="Enter ${value} field name" required />
                    <x-backend.input-field type="hidden" name="sub_field_type[]"
                        value='${value}' />
                    <span class=" float-end">
                        <button class=" remove text-red-600  text-2xl mt-2"><i class="fa-solid fa-circle-xmark"></i></button>
                    </span>

                </div>
                `;
        $(this).parents('.database-field').find('.add-database').append(element);

    });
    $(document).on('change', '.field', function() {
        let value = $(this).find('option:selected').val();
        let text = $(this).find('option:selected').text();

        $(this).find('option:first').prop('selected', true);
        let element = `
            <div class='list'>
                    <x-backend.input-label :value="'${text}'" for="${value}" />
                    <x-backend.input-field type="text" name="field_name[]" class="!w-[90%] inline-block"
                        placeholder="Enter ${value} field name" required />
                    <x-backend.input-field type="hidden" name="field_type[]"
                        value='${value}'  />
                    <span class=" float-end">
                        <button class=" remove text-red-600  text-2xl mt-2"><i class="fa-solid fa-circle-xmark"></i></button>
                    </span>

                </div>
                `;


        $(this).parents('.component-field').find('.field-list').append(element);

    })

    $(document).on('click', '.remove', function() {
        $(this).parents('.list').remove();
    })
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("component-create").addEventListener("submit", function(event) {
            // Check if the form is valid
            if (this.checkValidity() === false) {
                // Prevent form submission if validation fails
                event.preventDefault();
                event.stopPropagation();
            } else {

            }
        });
    });
</script>
