@extends('admin.layouts.main')
@section('title', 'Add Attributes')
@section('main')
    <h2 class="mb-4">Add Attributes</h2>
    <a href="{{ route('admin.products') }}" class="btn btn-secondary mb-3">
        <i class="bi bi-arrow-left"></i> Back to Products
    </a>

    <div class="container mt-2">
        <h4 class="mb-4">Add Attributes For: {{ $product->name }}</h4>
        <form id="dynamicForm">
            <div id="dynamic-fields">
                <div class="row mb-2">
                    <div class="col-md-4">
                        <input type="text" name="keys[]" class="form-control" placeholder="Attribute Name" required>
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="values[]" class="form-control" placeholder="Attribute Comma-separated values" required>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-success add-field">+</button>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary mt-3">Submit</button>
        </form>

        <h4 class="mt-4">Current Attributes</h4>
        <div id="attributes-list">
        </div>
    </div>
@endsection

@section('scripts')
    <script>

        var productId = "{{$product->id}}";

        fetchAndDisplayAttributes();

        function fetchAndDisplayAttributes() {
            $.ajax({
                url: "{{ route('get-attributes', ['productId' => $product->id]) }}",
                method: 'GET',
                success: function (response) {
                    if (response.success) {
                        var attributesList = $('#attributes-list');
                        attributesList.empty(); // Clear existing list
                        $.each(response.attributes, function(key, values) {
                            // var listItem = '<div><strong>' + key + ':</strong> ' + values.join(', ') + '</div>';

                            var listItem = `
                        <div>
                            <strong>${key}:</strong> ${values.join(', ')}
                            <button class="btn btn-danger btn-sm delete-attribute" data-key="${key}" data-product-id="${productId}"><i class="bi bi-trash"></i></button>
                        </div>
                    `;
                            attributesList.append(listItem);
                        });
                    } else {
                        $('#attributes-list').html('<div>' + response.message + '</div>');
                    }
                },
                error: function () {
                    $('#attributes-list').html('<div>An error occurred while fetching attributes. Please try again.</div>');
                }
            });
        }

        $(document).on('click', '.delete-attribute', function() {
            var productId = $(this).data('product-id');
            var attributeKey = $(this).data('key');

            $.ajax({
                url: "{{ route('delete-attribute') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    productId: productId,
                    attributeKey: attributeKey
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        fetchAndDisplayAttributes();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('An error occurred while deleting the attribute. Please try again.');
                }
            });
        });


        $(document).on('click', '.add-field', function () {
            var fieldRow = `
        <div class="row mb-2">
            <div class="col-md-4">
                <input type="text" name="keys[]" class="form-control" placeholder="Attribute Name" required>
            </div>
            <div class="col-md-6">
                <input type="text" name="values[]" class="form-control" placeholder="Attribute Comma-separated values" required>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger remove-field">-</button>
            </div>
        </div>`;
            $('#dynamic-fields').append(fieldRow);
        });

        $(document).on('click', '.remove-field', function () {
            $(this).closest('.row').remove();
        });


        // Submit form data
        $('#dynamicForm').on('submit', function (e) {
            e.preventDefault();

            var formDataArray = [];

            $('#dynamicForm').find('input[name="keys[]"]').each(function() {
                var key = $(this).val();
                var value = $(this).closest('.row').find('input[name="values[]"]').val();
                formDataArray.push({name: 'keys[]', value: key});
                formDataArray.push({name: 'values[]', value: value});
            });


            $.ajax({
                url: "{{ route('store-attributes') }}",
                method: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    data: formDataArray,
                    product_id: productId,
                },
                success: function (response) {
                    if (response.success) {
                        fetchAndDisplayAttributes();
                        $('#dynamicForm')[0].reset();
                        toastr.success(response.message);
                        $('#dynamicForm').load(window.location.href + " #dynamicForm");
                    } else {
                        if (response.errors) {
                            // Loop through the errors and display them
                            $.each(response.errors, function (field, messages) {
                                $.each(messages, function (index, message) {
                                    toastr.error(message);  // Display each error message
                                });
                            });
                        } else {
                            toastr.error(response.message || "Please try again.");
                        }
                    }
                },
                error: function () {
                    toastr.error("An error occurred while add attributes. Please try again.");
                }
            });
        });

    </script>

@endsection