@foreach ($page->inputGroups as $group)
    <div class="panel" id="sorts_{{ $group->id }}">

        <p style="text-align: left; padding: 10px 0 0 10px;">
            <a class="btn btn-outline-secondary" style="padding:0.1rem 0.5rem; cursor:move">
                <i class="fa fa-arrows handle" style="cursor:move" aria-hidden="true"></i>
            </a>
        </p>
        @if (auth()->user()->id == 1)
            <p style="text-align: right;">
                <a data-id="{{ $group->id }}" class="btn btn-danger input-group-delete-click"
                    style="margin: 10px 10px 0 0;">
                    <i class="fa fa-trash dan" style="color:white"></i>
                </a>
            </p>
        @endif

        <div class="panel-body container-fluid">
            <div class="row row-lg">
                <div class="col-md-12 col-lg-12">
                    <div class="example-wrap">
                        <div class="row" id="order-input-{{ $group->id }}">
                            @foreach ($group->inputs as $input)
                                <div class="col-md-{{ $input->col_md }}" id="sorts_{{ $input->id }}"
                                    style="margin-bottom: 20px;">
                                    <div class="example-wrap">
                                        <label for="{{ $input->name }}" class="form-label" style="float:left">
                                            <h4 class="example-title">{{ $input->input_label }} </h4>
                                        </label>

                                        <p style="text-align: right;">
                                            <a class="btn btn-outline-secondary"
                                                style="padding:0.1rem 0.5rem; cursor:move">
                                                <i class="fa fa-arrows handle2"></i>
                                            </a>
                                            @if (auth()->user()->id == 1)
                                                <a data-id="{{ $input->id }}"
                                                    class="btn btn-outline-primary input-edit-click"
                                                    style="padding:0.1rem 0.5rem">
                                                    <i class="fa fa-edit pri"></i>
                                                </a>
                                                <a data-id="{{ $input->id }}"
                                                    class="btn btn-danger input-delete-click"
                                                    style="padding:0.1rem 0.5rem">
                                                    <i class="fa fa-trash dan" style="color:white"></i>
                                                </a>
                                            @endif
                                        </p>

                                        @include('pages.page-data._input_types')
                                        @error($input->input_name)
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                    @if (auth()->user()->id == 1)
                        <p style="text-align: right;">
                            <button data-id="{{ $group->id }}" type="button"
                                class="btn btn-floating btn-success input-create-click">
                                <i class="icon wb-plus" aria-hidden="true"></i>
                            </button>
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @push('script')
        <script>
            $(document).ready(function() {
                $('#order-input-{{ $group->id }}').sortable({
                    handle: '.handle2',
                    update: function() {
                        let orders = $('#order-input-{{ $group->id }}').sortable('serialize');
                        $.get("{{ route('input.order') }}?" + orders, function(data, status) {

                        });
                    }
                });
            });
        </script>
    @endpush
@endforeach

@if (auth()->user()->id == 1)
    <p style="text-align: center;">

        <button type="button" class="btn btn-floating btn-success" onclick="document.getElementById('inputGroupForm').submit();">
            <i class="icon wb-plus" aria-hidden="true"></i>
        </button>

    </p>
@endif


<div class="example-wrap">
    <button type="submit" class="btn btn-animate btn-animate-side btn-warning float-right" id="saveBtn"
        name="action" value="save">
        <span><i class="icon fa-solid fa-floppy-disk" aria-hidden="true"></i> Save</span>
    </button>
    <button type="submit" class="btn btn-animate btn-animate-side btn-success float-right mr-2" id="saveCloseBtn"
        name="action" value="save_and_close">
        <span><i class="icon fa-solid fa-check" aria-hidden="true"></i> Save and Close</span>
    </button>
</div>

@push('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    <script>
        $('#order').sortable({
            handle: '.handle',
            update: function() {
                let orders = $('#order').sortable('serialize');
                $.get("{{ route('input.group.order') }}?" + orders, function(data, status) {})
            }
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#dynamic-ar").click(function() {
                let nextKey = $("#dynamicAddRemove tbody tr").length;
                let options = $("#dynamicAddRemove").data("options"); // PHP-dən gələn inputOptions
                let inputName = $("#dynamicAddRemove").data(
                "input-name"); // PHP-dən input_name dəyərini alırıq

                let newRow = `<tr>`;

                options.forEach(option => {
                    newRow += `
                <td>
                    <input type="text" name="${inputName}[${nextKey}][${option.value}]" class="form-control">
                </td>
            `;
                });

                newRow +=
                    `<td><button type="button" class="btn btn-outline-danger remove-input-field">Sil</button></td></tr>`;

                $("#dynamicAddRemove tbody").append(newRow);
            });

            // Sətiri silmək üçün
            $(document).on('click', '.remove-input-field', function() {
                $(this).closest('tr').remove();
            });
        });
    </script>
@endpush