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

                <!-- Serive Block !-->

                <div class="service-item bg-white p-4 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>
                        @error('service_title')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                    </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>
                        @error('email')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                    </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>
                        @error('description')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 mb-1 font-medium">Upload Service Image</label>
                        <input type="file" name="service_image" class="hidden" id="service_image">
                        <label for="service_image"
                            class="cursor-pointer bg-indigo-500 text-white px-5 py-2 rounded-lg hover:bg-indigo-600">
                            Choose File
                        </label>
                        @error('service_image')
                            <span class="text-red-500">{{ $message }}</span>
                        @enderror
                        <span id="file-name" class="ml-3 text-gray-600"></span>

                        <div class="mt-3">
                            <img id="preview-image" class="w-32 h-32 mb-1 rounded-lg border-2 border-indigo-200 hidden">
                        </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 Service
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <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
            attachFilePreview(
                document.getElementById('service_image'),
                document.getElementById('file-name'),
                document.getElementById('preview-image')
            );
        </script>
    @endsection