@extends('layouts.admin')

@section('title', 'Edit Service')

@section('content')
    <div class="bg-white rounded-lg shadow-md p-8">
        <h1 class="text-2xl font-bold mb-8 text-gray-800">Edit Service</h1>

        <form action="{{ route('admin.services.update', $service) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8">
                <div class="col-span-1">
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                    <input type="text" name="title" id="title" class="block w-full rounded-md border border-gray-300 bg-gray-50 p-2 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 sm:text-sm @error('title') border-red-500 @enderror" value="{{ old('title', $service->title) }}" required>
                    @error('title')
                        <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="col-span-1">
                    <label for="icon" class="block text-sm font-medium text-gray-700 mb-1">Icon (Font Awesome class)</label>
                    <input type="text" name="icon" id="icon" class="block w-full rounded-md border border-gray-300 bg-gray-50 p-2 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 sm:text-sm @error('icon') border-red-500 @enderror" value="{{ old('icon', $service->icon) }}">
                    @error('icon')
                        <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="md:col-span-2">
                    <x-service-details-form :service="$service" />
                </div>

                <div class="col-span-1">
                    <label for="image" class="block text-sm font-medium text-gray-700 mb-1">Service Images</label>
                    <x-file-upload name="images" id="images" />
                    @error('images')
                        <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Current Image(s)</label>
                    <div x-data="{ images: {{ json_encode($service->images->map(fn($image) => ['id' => $image->id, 'path' => asset('storage/' . $image->image_path)])) }} }">
                        <div class="flex flex-wrap gap-2" x-ref="imageContainer" x-show="images.length > 0"
                            x-init="
                                Sortable.create($refs.imageContainer, {
                                    handle: '.handle',
                                    animation: 150,
                                    onEnd: (evt) => {
                                        console.log('Sortable onEnd triggered.');
                                        console.log('Old Index:', evt.oldIndex, 'New Index:', evt.newIndex);

                                        // Get the item that was moved
                                        const movedItem = images[evt.oldIndex];

                                        // Remove the item from its old position
                                        images.splice(evt.oldIndex, 1);

                                        // Insert the item at its new position
                                        images.splice(evt.newIndex, 0, movedItem);

                                        // Force Alpine.js reactivity by reassigning the array
                                        images = [...images];

                                        $nextTick(() => {
                                            console.log('Images array after Alpine update:', images);
                                            // Re-evaluate the hidden input values based on the new order
                                            images.forEach((image, index) => {
                                                const input = document.querySelector(`input[name='existing_images[${image.id}]']`);
                                                if (input) {
                                                    input.value = index;
                                                }
                                            });
                                            document.querySelectorAll('input[name^=\'existing_images\']').forEach(input => {
                                                console.log(`Hidden input ${input.name}: ${input.value}`);
                                            });
                                        });
                                    },
                                });
                            ">
                            <template x-for="(image, index) in images" :key="image.id">
                                <div class="relative group">
                                    <img :src="image.path" alt="Current Service Image" class="h-16 w-16 object-cover rounded-full handle cursor-grab" width="64" height="64" loading="lazy">
                                    <input type="hidden" :name="'existing_images[' + image.id + ']'" :value="index">
                                    <button type="button" @click="images.splice(index, 1)" class="absolute top-0 right-0 bg-red-500 text-white rounded-full p-1 text-xs opacity-0 group-hover:opacity-100 transition-opacity">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                    </button>
                                </div>
                            </template>
                        </div>
                        <template x-if="images.length === 0">
                            <p class="text-gray-500 text-sm">N/A</p>
                        </template>
                    </div>
                </div>

                <div class="col-span-1">
                    <label for="posts" class="block text-sm font-medium text-gray-700 mb-1">Related Posts</label>
                    <select name="posts[]" id="posts" class="block w-full rounded-md border border-gray-300 bg-gray-50 p-2 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 sm:text-sm @error('posts') border-red-500 @enderror" multiple>
                        @foreach($posts as $post)
                            <option value="{{ $post->id }}" {{ in_array($post->id, old('posts', $service->posts->pluck('id')->toArray())) ? 'selected' : '' }}>{{ $post->title }}</option>
                        @endforeach
                    </select>
                    @error('posts')
                        <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="col-span-1">
                    <label for="projects" class="block text-sm font-medium text-gray-700 mb-1">Related Projects</label>
                    <select name="projects[]" id="projects" class="block w-full rounded-md border border-gray-300 bg-gray-50 p-2 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 sm:text-sm @error('projects') border-red-500 @enderror" multiple>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" {{ in_array($project->id, old('projects', $service->projects->pluck('id')->toArray())) ? 'selected' : '' }}>{{ $project->title }}</option>
                        @endforeach
                    </select>
                    @error('projects')
                        <p class="text-red-500 text-xs italic mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="flex items-center justify-end mt-8 pt-6 border-t border-gray-200">
                <a href="{{ route('admin.services.index') }}" class="text-sm font-medium text-gray-600 hover:text-gray-900 mr-4">Cancel</a>
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
                    Update Service
                </button>
            </div>
        </form>
    </div>
@endsection