@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>


        <!-- Add More -->
        <div class="text-center">
            <a href="{{ route('services.create') }}">
                <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>
            </a>
        </div>

        <!-- Success Message -->
        @if (session('success') || session('error'))
            <div
                class=" {{ session('error') ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' }}  p-3 rounded mb-6 text-center font-medium relative mt-2">
                {{ session('success') ?? session('error') }}
                <span onclick="this.parentElement.remove()" class="absolute right-3 top-2 cursor-pointer font-bold">
                    ✕
                </span>
            </div>
        @endif

        @php
            $latestServices = $services ?? collect();
            $totalServices = count($latestServices);
        @endphp

        @foreach ($latestServices as $index => $service)
            <!-- Form -->
            <form id="service-form" action="{{ route('services.update') }}" method="POST" enctype="multipart/form-data"
                class="space-y-5">
                @csrf
                <div id="service-container" class="space-y-5">
                    <!-- Service Block -->
                    <div class="service-item bg-white p-5 pt-3 rounded-xl shadow-md space-y-4 border border-gray-200">
                        <h3 class="text-purple-500 text-center font-semibold">Service #{{ $totalServices-- }}</h3>

                        <!-- Hidden Id Field!-->

                        <input type="hidden" name="id" value="{{ $service->id }}">
                        <!-- 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 -->

                        <!-- Hidden Previous Saved Image!-->
                        <input type="hidden" name="oldimage" value="{{ $service->icon }}">
                        <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->icon ? basename($service->icon) : '' }}
                            </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="submit" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
                                Update
                            </button>
                            <a href="{{ route('services.destroy', ['id' => $service->id]) }}">

                                <button type="button"
                                    onclick="return confirm('Are you sure you want to delete this service?')"
                                    class="remove-service bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">
                                    Remove
                                </button>

                            </a>
                        </div>
                    </div>
                </div>
            </form>
        @endforeach
    </div>


    {{-- JS --}}
    <script>
        // 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