@extends('layouts.app')

@section('content')
    <div class="max-w-3xl mx-auto mt-10 p-8 bg-white/80 backdrop-blur-lg rounded-2xl shadow-lg">

        <!-- Breadcrumbs -->
        <nav class="text-gray-600 text-sm mb-4" aria-label="Breadcrumb">
            <ol class="flex">
                <li><a href="{{ route('dashboard') }}" class="text-indigo-600 hover:underline">Home</a></li>
                <span class="mx-2">/</span>
                <li class="text-gray-900 font-semibold">Services</li>
            </ol>
        </nav>

        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-semibold text-gray-800">Add Your Service</h2>
            <a href="{{ route('dashboard') }}"
                class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg border">
                ← Go Back
            </a>
        </div>

        {{-- Success Message --}}
        @if (session('success'))
            <div class="bg-green-50 text-green-800 p-3 rounded mb-6 text-center font-medium">
                {{ session('success') }}
            </div>
        @endif

        <!-- Form -->
        <form id="service-form" action="{{ route('services.store') }}" method="POST" enctype="multipart/form-data"
            class="space-y-5">
            @csrf

            <div id="service-container" class="space-y-5">
                @php
                    $latestServices = $services ?? collect();
                @endphp

                @if ($latestServices->count() > 0)
                    @foreach ($latestServices as $index => $service)
                        <!-- Service Block -->
                        <div class="service-item bg-white p-5 rounded-xl shadow-md space-y-4 border border-gray-200">

                            <!-- Service Title -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Service Title</label>
                                <input type="text" name="service_title[]" placeholder="e.g., Web Development"
                                    value="{{ $service->service_title }}"
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-indigo-300"
                                    required>
                            </div>

                            <!-- Email field ADDED -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Contact Email</label>
                                <input type="email" name="email[]" placeholder="e.g., example@gmail.com"
                                    value="{{ $service->email }}"
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-indigo-300"
                                    required>
                            </div>

                            <!-- Description -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Service Description</label>
                                <textarea name="description[]" rows="4"
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-indigo-300" required>{{ $service->description }}</textarea>
                            </div>

                            <!-- Image -->
                            <div>
                                <label class="block text-gray-700 mb-1 font-medium">Upload Service Image (Optional)</label>
                                <input type="file" name="service_image[]" accept="image/*" class="hidden"
                                    id="service_image_{{ $index }}">
                                <label for="service_image_{{ $index }}"
                                    class="cursor-pointer inline-block bg-indigo-500 text-white font-semibold px-5 py-2 rounded-lg hover:bg-indigo-600">
                                    Choose File
                                </label>

                                <span id="file-name-{{ $index }}" class="ml-3 text-gray-600">
                                    {{ $service->service_image ? basename($service->service_image) : '' }}
                                </span>

                                <div class="mt-3">
                                    <img id="preview-image-{{ $index }}"
                                        class="w-32 h-32 rounded-lg border-2 border-indigo-200 {{ $service->service_image ? '' : 'hidden' }}"
                                        src="{{ $service->service_image ? asset('storage/' . $service->service_image) : '' }}">
                                </div>
                            </div>

                            <!-- Remove -->
                            <div class="text-right">
                                <button type="button"
                                    class="remove-service bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">
                                    Remove
                                </button>
                            </div>

                        </div>
                    @endforeach
                @else
                    <!-- Default Empty Service -->
                    <div class="service-item bg-white p-5 rounded-xl shadow-md space-y-4 border border-gray-200">

                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Service Title</label>
                            <input type="text" name="service_title[]" placeholder="e.g., Web Development"
                                class="w-full border border-gray-300 rounded-lg p-3" required>
                        </div>

                        <!-- Email ADDED -->
                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Contact Email</label>
                            <input type="email" name="email[]" placeholder="e.g., example@gmail.com"
                                class="w-full border border-gray-300 rounded-lg p-3" required>
                        </div>

                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Service Description</label>
                            <textarea name="description[]" rows="4" class="w-full border border-gray-300 rounded-lg p-3" required></textarea>
                        </div>

                        <div>
                            <label class="block text-gray-700 mb-1 font-medium">Upload Service Image</label>
                            <input type="file" name="service_image[]" accept="image/*" class="hidden"
                                id="service_image_0">
                            <label for="service_image_0"
                                class="cursor-pointer bg-indigo-500 text-white px-5 py-2 rounded-lg hover:bg-indigo-600">
                                Choose File
                            </label>
                            <span id="file-name-0" class="ml-3 text-gray-600"></span>

                            <div class="mt-3">
                                <img id="preview-image-0" class="w-32 h-32 rounded-lg border-2 border-indigo-200 hidden">
                            </div>
                        </div>

                        <div class="text-right">
                            <button type="button"
                                class="remove-service bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">Remove</button>
                        </div>

                    </div>
                @endif
            </div>

            <!-- Add More -->
            <div class="text-center">
                <button type="button" id="add-more"
                    class="bg-indigo-500 text-white px-5 py-2 rounded-lg hover:bg-indigo-600">
                    Add More Services
                </button>
            </div>

            <!-- Submit -->
            <div>
                <button type="submit"
                    class="w-full bg-indigo-500 text-white font-semibold py-3 rounded-lg hover:bg-indigo-600">
                    Save All Services
                </button>
            </div>

        </form>
    </div>

    {{-- JS --}}
    <script>
        let serviceCount = {{ $latestServices->count() ?? 1 }};

        // Add More
        document.getElementById('add-more').addEventListener('click', function() {
            const container = document.getElementById('service-container');
            const newService = document.querySelector('.service-item').cloneNode(true);

            newService.querySelectorAll('input[type=text], input[type=email], textarea').forEach(input => input
                .value = '');

            const fileInput = newService.querySelector('input[type=file]');
            const fileLabel = newService.querySelector('label[for]');
            const fileName = newService.querySelector('span[id^="file-name"]');
            const previewImage = newService.querySelector('img[id^="preview-image"]');

            fileInput.id = `service_image_${serviceCount}`;
            fileLabel.setAttribute('for', `service_image_${serviceCount}`);
            fileName.id = `file-name-${serviceCount}`;
            previewImage.id = `preview-image-${serviceCount}`;
            fileName.textContent = '';
            previewImage.src = '';
            previewImage.classList.add('hidden');

            container.appendChild(newService);

            attachFilePreview(fileInput, fileName, previewImage);
            serviceCount++;
        });

        // Remove
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-service')) {
                const all = document.querySelectorAll('.service-item');
                if (all.length > 1) e.target.closest('.service-item').remove();
                else alert("At least one service is required!");
            }
        });

        // Preview Function
        function attachFilePreview(input, nameSpan, previewImg) {
            input.addEventListener('change', function() {
                if (this.files.length > 0) {
                    nameSpan.textContent = this.files[0].name;
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        previewImg.classList.remove('hidden');
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        }

        // For existing
        @foreach ($latestServices as $index => $service)
            attachFilePreview(
                document.getElementById('service_image_{{ $index }}'),
                document.getElementById('file-name-{{ $index }}'),
                document.getElementById('preview-image-{{ $index }}')
            );
        @endforeach
    </script>

@endsection