@extends('admin.layout')

@section('content')
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Homepage Settings</h1>
    <form action="{{ route('homepage-settings.update') }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded-lg shadow-md max-w-4xl mx-auto">
        @csrf <!-- Ensure CSRF token is included -->
        <div>
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Featured Content</h2>
            <button type="button" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 mb-4" onclick="addContent()">Add Content</button>
            <div id="featured-content" class="space-y-4" ondragover="allowDrop(event)" ondrop="drop(event)">
                @if(isset($settings->featured_content) && is_array($settings->featured_content))
                    @foreach($settings->featured_content as $index => $content)
                        @if (is_array($content) && isset($content['type']))
                            <div class="bg-gray-100 p-4 rounded-lg border border-gray-300 accordion-item" data-index="{{ $index }}" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)">
                                <div class="flex justify-between items-center cursor-pointer accordion-header" onclick="toggleAccordion(this)">
                                    <span class="font-medium text-gray-700">{{ ucfirst($content['type']) }}</span>
                                    <button type="button" class="text-gray-500 hover:text-gray-700" onclick="removeContent(this)">
                                        Remove
                                    </button>
                                </div>
                                <div class="accordion-body hidden mt-4">
                                    <label class="block text-gray-700 font-medium mb-2">Content Type:</label>
                                    <select name="featured_content[{{ $index }}][type]" onchange="toggleFields(this, {{ $index }})" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300">
                                        <option value="image" {{ $content['type'] === 'image' ? 'selected' : '' }}>Image</option>
                                        <option value="video" {{ $content['type'] === 'video' ? 'selected' : '' }}>Video</option>
                                        <option value="holiday" {{ $content['type'] === 'holiday' ? 'selected' : '' }}>Holiday</option>
                                    </select>
                                    <div id="fields-{{ $index }}" class="mt-4">
                                        @if($content['type'] === 'image')
                                            @foreach($content['content'] as $imageIndex => $image)
                                                <label class="block text-gray-700 font-medium mb-2">Uploaded Image {{ $imageIndex + 1 }}:</label>
                                                <img src="{{ $image['src'] }}" alt="Uploaded Image" class="w-24 h-24 object-cover mb-4">
                                                <input type="hidden" name="featured_content[{{ $index }}][images][{{ $imageIndex }}][src]" value="{{ $image['src'] }}">
                                                <label class="block text-gray-700 font-medium mt-2 mb-2">External Link for Image {{ $imageIndex + 1 }}:</label>
                                                <input type="text" name="featured_content[{{ $index }}][images][{{ $imageIndex }}][externalLink]" value="{{ $image['externalLink'] ?? '' }}" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300">
                                            @endforeach
                                            <div id="additional-images-{{ $index }}" class="mt-4"></div>
                                            <button type="button" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 mt-4" onclick="addImageInput({{ $index }})">Add Another Image</button>
                                        @elseif($content['type'] === 'video')
                                            @foreach($content['content'] as $videoIndex => $video)
                                                <label class="block text-gray-700 font-medium mb-2">Uploaded Video:</label>
                                                <video controls class="w-full mb-4">
                                                    <source src="{{ $video['src'] }}" type="video/mp4">
                                                    Your browser does not support the video tag.
                                                </video>
                                                <input type="hidden" name="featured_content[{{ $index }}][video][src]" value="{{ $video['src'] }}">
                                            @endforeach
                                        @elseif($content['type'] === 'holiday')
                                            <label class="block text-gray-700 font-medium mb-2">List Holidays</label>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @endif
            </div>
        </div>

        <button type="submit" class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-700 mt-6">Save</button>
    </form>

    <style>
        .dragging {
            opacity: 0.5;
            border: 2px dashed #2563eb; /* Blue border for visual cue */
        }

        .drop-target {
            background-color: #e0f2fe; /* Light blue background for drop target */
            border: 2px dashed #2563eb; /* Blue border for drop target */
        }

        form button[type="submit"] {
            background-color: #10b981; /* Green */
            color: white;
            font-weight: bold;
        }

        form button[type="submit"]:hover {
            background-color: #059669; /* Darker green */
        }
    </style>

    <script>
        let contentIndex = {{ isset($settings->featured_content) ? count($settings->featured_content) : 0 }};
        let draggedItem = null;

        function addContent() {
            const container = document.getElementById('featured-content');
            const newItem = document.createElement('div');
            newItem.className = 'bg-gray-100 p-4 rounded-lg border border-gray-300 accordion-item';
            newItem.dataset.index = contentIndex;
            newItem.draggable = true;
            newItem.ondragstart = drag;
            newItem.ondragend = dragEnd;
            newItem.innerHTML = `
                <div class="flex justify-between items-center cursor-pointer accordion-header" onclick="toggleAccordion(this)">
                    <span class="font-medium text-gray-700">New Section</span>
                    <button type="button" class="text-gray-500 hover:text-gray-700" onclick="removeContent(this)">
                        Remove
                    </button>
                </div>
                <div class="accordion-body hidden mt-4">
                    <label class="block text-gray-700 font-medium mb-2">Content Type:</label>
                    <select name="featured_content[${contentIndex}][type]" onchange="toggleFields(this, ${contentIndex})" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300">
                        <option value="">Select the type of the section</option>
                        <option value="image">Image</option>
                        <option value="video">Video</option>
                        <option value="holiday">Holiday</option>
                    </select>
                    <div id="fields-${contentIndex}" class="mt-4"></div>
                </div>
            `;
            container.appendChild(newItem);
            contentIndex++;
        }

        function removeContent(button) {
            button.closest('.accordion-item').remove();
        }

        function toggleAccordion(header) {
            const body = header.nextElementSibling;
            body.classList.toggle('hidden');
        }

        function toggleFields(select, index) {
            const fields = document.getElementById(`fields-${index}`);
            const header = select.closest('.accordion-item').querySelector('.accordion-header span');
            header.textContent = select.value.charAt(0).toUpperCase() + select.value.slice(1); // Update section title
            fields.innerHTML = '';
            if (select.value === 'image') {
                fields.innerHTML = `
                    <label class="block text-gray-700 font-medium mb-2">Upload Image:</label>
                    <input type="file" name="featured_content[${index}][images][1][file]" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300" required>
                    <label class="block text-gray-700 font-medium mt-2 mb-2">External Link for Image:</label>
                    <input type="text" name="featured_content[${index}][images][1][externalLink]" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300">
                    <div id="additional-images-${index}" class="mt-4"></div>
                    <button type="button" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 mt-4" onclick="addImageInput(${index})">Add Another Image</button>
                `;
            } else if (select.value === 'video') {
                fields.innerHTML = `
                    <label class="block text-gray-700 font-medium mb-2">Upload Video:</label>
                    <input type="file" name="featured_content[${index}][video][file]" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300" required>
                `;
            } else if (select.value === 'holiday') {
                fields.innerHTML = `
                    <label class="block text-gray-700 font-medium mb-2">List Holidays</label>
                `;
            }
        }

        function addImageInput(index) {
            const container = document.getElementById(`additional-images-${index}`);
            if (!container) {
                console.error(`Container for additional images not found for index ${index}`);
                return;
            }

            // Count only existing image containers, not other inputs like src or externalLink
            const existingImageContainers = container.closest('.accordion-body').querySelectorAll(`input[name^="featured_content[${index}][images]"][name$="[file]"][type="file"], input[name^="featured_content[${index}][images]"][type="hidden"]`);
            const imageIndex = existingImageContainers.length;

            const newImageInput = document.createElement('div');
            newImageInput.innerHTML = `
                <label class="block text-gray-700 font-medium mt-4 mb-2">Additional Image ${imageIndex + 1}:</label>
                <input type="file" name="featured_content[${index}][images][${imageIndex}][file]" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300" required>
                <label class="block text-gray-700 font-medium mt-2 mb-2">External Link for Image ${imageIndex + 1}:</label>
                <input type="text" name="featured_content[${index}][images][${imageIndex}][externalLink]" class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300">
            `;
            container.appendChild(newImageInput);
        }

        function drag(event) {
            draggedItem = event.target;
            draggedItem.classList.add('dragging');
        }

        function allowDrop(event) {
            event.preventDefault();
            const target = event.target.closest('.accordion-item');
            if (target && target !== draggedItem) {
                target.classList.add('drop-target');
            }
        }

        function drop(event) {
            event.preventDefault();
            const container = document.getElementById('featured-content');
            const target = event.target.closest('.accordion-item');
            if (target && draggedItem !== target) {
                container.insertBefore(draggedItem, target.nextSibling);
            }
            target.classList.remove('drop-target');
        }

        function dragEnd(event) {
            draggedItem.classList.remove('dragging');
            const items = document.querySelectorAll('.accordion-item');
            items.forEach(item => item.classList.remove('drop-target'));
        }
    </script>
@endsection