<x-backend.model :id="'edit-model'" class="lg:max-w-2xl" :button="'Submit'" :form_id="'component-edit'" :action="route('component.store')"
    :method="__('post')">
    @csrf
    @method('put')
    <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('click', '#update', function() {

        let data = $(this).attr('data');
        data = JSON.parse(data);
        console.log(data);
        let fileds = [];
        let sub_fileds = [];
        $('#component-edit').find('#component-name').val(data.name);
        if (data.set_from == 'database') {
            $('#component-edit').find('#database').prop('checked', true);
            $('#component-edit').find('#custom').prop('checked', false);

            sub_fileds.push(`
            <x-backend.input-label :value="'Database name'" for="database-name" />
        <x-backend.input-field type="text" name="database" id='database-name' :value="'${data.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="'${data.limit}'"
            placeholder="Enter limit"  />
            `)

        } else {
            $('#component-edit').find('#custom').prop('checked', true);
            $('#component-edit').find('#database').prop('checked', false);
            sub_fileds.push(
                ` <x-backend.input-label :value="'Component field'" for="component" />
            <x-backend.input-select id="component" :values="input()" class='sub-component' :placeholder="'Select one'" selected='' />`
            )
        }
        data.component_filed.forEach(element => {
            if (element.group == null) {
                fileds.push(` <div class='list'>
                    <x-backend.input-label :value="'${element.type}'" for="${element.type}" />
                    <x-backend.input-field type="text" name="field_name[]" value="${element.name}" class="!w-[90%] inline-block"
                        placeholder="Enter ${element.name} field name" required />
                    <x-backend.input-field type="hidden" name="field_type[]"
                        value='${element.type}'  />
                        <x-backend.input-field type="hidden" name="field_id[]"
                        value='${element.id}'  />
                    <span class=" float-end">
                        <button data-id='${element.id}' class=" remove-db text-red-600  text-2xl mt-2"><i class="fa-solid fa-circle-xmark"></i></button>
                    </span>

                </div>`);
            }
            if (element.group == 1) {
                sub_fileds.push(` <div class='list'>
                    <x-backend.input-label :value="'${element.type}'" for="${element.type}" />
                    <x-backend.input-field type="text" name="sub_field_name[]" value="${element.name}" class="!w-[90%] inline-block"
                        placeholder="Enter ${element.name} field name" required />
                    <x-backend.input-field type="hidden" name="sub_field_type[]"
                        value='${element.type}'  />
                        <x-backend.input-field type="hidden" name="sub_field_id[]" value='${element.id}' />
                    <span class=" float-end">
                        <button data-id='${element.id}' class=" remove-db text-red-600  text-2xl mt-2"><i class="fa-solid fa-circle-xmark"></i></button>
                    </span>

                </div>`);
            }

        });
        $('#component-edit').find('.field-list').html(fileds);
        $('#component-edit').find('.add-database').html(sub_fileds);

        let route = "{{ route('component.update', ':id') }}".replace(':id', data.id);
        $('#component-edit').attr('action', route)
    })

    $(document).on('click', '.remove-db', function(e) {
        e.preventDefault();
        let id = $(this).attr('data-id');
        let con = confirm('Are you sure to Delete');
        let parent = $(this);
        if (con) {
            fetch('{{ route('delete-field') }}', {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": $('input[name="_token"]').val()
                },
                method: "post",
                credentials: "same-origin",
                body: JSON.stringify({
                    id: id,
                })
            }).then(function(response) {
                return response.json();
            }).then(function(json) {
                parent.parents('.list').remove();

            })

        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("component-edit").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>
