@extends('admin.layouts.app')

@section('panel')

<div class="row">
    <div class="col-lg-12">
        <div class="card b-radius--10">
            <div class="card-body p-0">
                <div class="table-responsive--sm" style="padding: 20px; margin-top: 20px;">
                    <h3>Sections</h3>

                 <div id="container" class="draggable-container">
    <div class="draggable" draggable="true">
        exclusive_coupons
      <span class="delete-icon"  style="color: red; cursor: pointer; margin-left: 10px;">×</span>
    </div>
    <div class="draggable" draggable="true">feature_coupon <span class="delete-icon" style="color: red; cursor: pointer; margin-left: 10px;">×</span></div>
    <div class="draggable" draggable="true">categories <span class="delete-icon"  style="color: red; cursor: pointer; margin-left: 10px;">×</span></div>
    <div class="draggable" draggable="true">deal_coupon <span class="delete-icon"  style="color: red; cursor: pointer; margin-left: 10px;">×</span></div>
    <div class="draggable" draggable="true">feature_store <span class="delete-icon"  style="color: red; cursor: pointer; margin-left: 10px;">×</span></div>
    <div class="draggable" draggable="true">testimonial <span class="delete-icon"  style="color: red; cursor: pointer; margin-left: 10px;">×</span></div>
    <div class="draggable" draggable="true">faq <span class="delete-icon"  style="color: red; cursor: pointer; margin-left: 10px;">×</span></div>
    <div class="draggable" draggable="true">blog <span class="delete-icon"  style="color: red; cursor: pointer; margin-left: 10px;">×</span></div>
</div>

                    @foreach ($pages as $page)
                    <div class="page-section">
                        <h4>{{ $page->name }}</h4>
                        
                        <!-- Draggable Sections -->
                        
                        <div id="container-{{ $page->id }}" class="draggable-container">
                            @if (!empty($page->secs))
                                @foreach ($page->secs as $sec)
                                    <div class="draggable" draggable="true">
                                        {{ $sec }}
                                        <span class="delete-icon" data-page-id="{{ $page->id }}" data-sec="{{ $sec }}" style="color: red; cursor: pointer; margin-left: 10px;">&times;</span>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <!-- Save Order Button -->
                        <button class="save-order-btn" data-page-id="{{ $page->id }}">Save Order</button>
                    </div>
                    <hr>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Delete section logic
    document.querySelectorAll('.delete-icon').forEach(deleteIcon => {
        deleteIcon.addEventListener('click', function () {
            const pageId = this.dataset.pageId;
            const secToDelete = this.dataset.sec;

            // Confirm delete
            if (!confirm(`Are you sure you want to delete "${secToDelete}"?`)) return;

            // Remove from UI
            this.parentElement.remove();

            // Send delete request to the server
            fetch(`/admin/page/delete-sec`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    page_id: pageId,
                    sec: secToDelete
                })
            })
            .catch(error => {
                console.error('Error deleting section:', error);
                alert('An error occurred while deleting the section.');
            });
        });
    });
});

</script>
<script>

document.addEventListener('DOMContentLoaded', function () {
    const containers = document.querySelectorAll('.draggable-container');

    containers.forEach(container => {
        const draggables = container.querySelectorAll('.draggable');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        container.addEventListener('dragover', e => {
            e.preventDefault();
            const afterElement = getDragAfterElement(container, e.clientY);
            const dragging = document.querySelector('.dragging');
            if (afterElement == null) {
                container.appendChild(dragging);
            } else {
                container.insertBefore(dragging, afterElement);
            }
        });
    });

    // Save Order Button Click
    const saveButtons = document.querySelectorAll('.save-order-btn');
    saveButtons.forEach(button => {
        button.addEventListener('click', () => {
            const pageId = button.getAttribute('data-page-id');
            const container = document.getElementById(`container-${pageId}`);

            // Extract only the text content (excluding delete icon)
            const order = Array.from(container.querySelectorAll('.draggable')).map(el => {
                return el.childNodes[0].nodeValue.trim(); // Get only the actual section text
            });

            console.log(`New order for page ${pageId}:`, order);

            // Send new order to server
            fetch(`/admin/pages/${pageId}/update-secs`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ secs: order })
            })
            .then(response => response.json())
            .then(data => alert(data.message))
            .catch(error => console.error('Error:', error));
        });
    });

    // Helper function to determine where to place the dragged element
    function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];

        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect();
            const offset = y - box.top - box.height / 2;
            if (offset < 0 && offset > closest.offset) {
                return { offset, element: child };
            } else {
                return closest;
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element;
    }
});


document.querySelectorAll('.draggable1').forEach(draggable => {
    draggable.addEventListener('dragstart', (e) => {
        // Clone the dragged element
        const clone = e.target.cloneNode(true);

        // Add a special class to indicate it's a copy
        clone.classList.add('copied');
        clone.removeAttribute('draggable1'); // Prevent dragging of the copied element

        // Append the cloned element to the container
        const container = document.getElementById('container1');
        container.appendChild(clone);
    });
});

</script>

<style>
/* Style for the draggable container */
.draggable-container {
  background-color: #f1f5f9; /* Light grey background */
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #d3d3d3;
  margin-top: 10px;
}

/* Style for individual draggable items */
.draggable {
  margin: 10px 0;
  padding: 10px 15px;
  background: linear-gradient(135deg, #6b73ff, #000dff); /* Gradient background */
  color: white;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: move;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* When dragging */
.draggable.dragging {
  opacity: 0.7;
  background: linear-gradient(135deg, #4c4cff, #0000ff);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* Style for the Save Order button */
.save-order-btn {
  margin-top: 10px;
  background-color: #4caf50; /* Green background */
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.save-order-btn:hover {
  background-color: #45a049; /* Darker green on hover */
}


.draggable-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    border: 1px solid #ddd;
}

.draggable {
    padding: 10px 15px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: grab;
    color:black;
}

.draggable.copied {
    background: #e0f7fa;
    border-color: #007bff;
    cursor: default;
    opacity: 0.8;
}

.delete-icon{
    font-size:20px;
}
</style>
@endsection